> For the complete documentation index, see [llms.txt](https://tinyhumans.gitbook.io/openhuman/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tinyhumans.gitbook.io/openhuman/features/theming.md). # 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)](/openhuman/developing/theming.md). *** ## See also * [Theming (contributor reference)](/openhuman/developing/theming.md) — token system, Tailwind wiring, migration codemod. * [Realtime Mascot](/openhuman/features/mascot.md) — the other big piece of OpenHuman's personality. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://tinyhumans.gitbook.io/openhuman/features/theming.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.