--- description: >- Five built-in theme families, light/dark/auto variants, and a full visual Theme Studio - make OpenHuman look the way you want. icon: palette --- # Themes & Theme Studio OpenHuman is fully re-skinnable at runtime. Pick from built-in themes, switch light/dark/auto, or open the **Theme Studio** to design your own — every change applies instantly and persists locally, no restart required. *** ## Built-in themes Five theme families ship out of the box, each with light and dark variants: | Family | Feel | | ------------ | ------------------------------------- | | **Classic** | The default OpenHuman look. | | **Ocean** | Cool blues around the `#4A83DD` primary. | | **Sepia** | Warm, paper-like, easy on the eyes. | | **Matrix** | High-contrast green-on-black. | | **HAL 9000** | Deep black with a red accent. | Each can be applied as **Light**, **Dark**, or **Auto**. Auto follows your operating system's `prefers-color-scheme` setting and re-applies live the moment you flip your OS between light and dark — no reload. *** ## Theme Studio **Settings → Theme Studio** is a full visual editor. From it you can: * **Pick a family** from a gallery of theme tiles (built-ins plus your own custom themes). * **Adjust every colour token** with colour pickers — surfaces, text, borders, and accent ramps. A live **contrast warning** flags when text-on-background luminance drops below a readable threshold. * **Swap fonts per role** — title, heading, body, mono, and serif can each use a different family. * **Configure the backdrop** — an animated WebGL mesh, a flat colour, or a custom image, with an optional dotted overlay. * **Manage custom themes** — create, edit, reset, delete, and **export / import as JSON** to share a theme with someone else. ### Editing a preset auto-forks Changing any token on a built-in preset transparently creates a **new custom theme** — the original preset stays pristine. So you can start from Ocean, tweak it, and keep both. *** ## Where it's stored Theme state — the active theme, the light/dark/auto variant, and all your custom themes — lives in Redux and persists to `localStorage` via `redux-persist`, so it survives app restarts and is scoped to your user. Sharing a theme is just exporting the JSON and having someone import it. *** ## Under the hood Themes are driven by CSS custom-property **tokens** (space-separated RGB channel triples, so Tailwind opacity modifiers like `bg-surface/50` keep working). The `ThemeProvider` writes the active theme's overrides onto the `` root; unspecified tokens fall through to the light/dark defaults. For the full token taxonomy, Tailwind wiring, and component-authoring best practices, see the contributor reference: [Theming (developing)](../developing/theming.md). *** ## See also * [Theming (contributor reference)](../developing/theming.md) — token system, Tailwind wiring, migration codemod. * [Realtime Mascot](mascot/README.md) — the other big piece of OpenHuman's personality.