> For the complete documentation index, see [llms.txt](https://docs.openalgo.in/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.openalgo.in/developers/design-documentation/49-themes.md).

# 49 - Themes

## State

`frontend/src/stores/themeStore.ts` is a persisted Zustand store with three related values:

| Value     | Options                                                                           | Purpose                              |
| --------- | --------------------------------------------------------------------------------- | ------------------------------------ |
| `mode`    | `light`, `dark`                                                                   | User preference in live mode         |
| `color`   | zinc, slate, stone, gray, neutral, red, rose, orange, green, blue, yellow, violet | Accent theme                         |
| `appMode` | `live`, `analyzer`                                                                | Backend trading mode reflected in UI |

The store persists under `openalgo-theme`. Rehydration applies the `.dark` class, `.analyzer` class, and `data-theme` attribute to the document root.

## Mode Rules

Live mode permits light/dark and accent changes. Analyzer mode applies its dedicated analyzer theme and suppresses user theme/accent mutations until the app returns to live mode. Backend mode is synchronized from `/auth/analyzer-mode`; toggles use a CSRF token and `/auth/analyzer-toggle`.

Mode-change listeners allow data-heavy pages to refetch or reset state when moving between live and analyzer sources.

## CSS

`frontend/src/index.css` defines Tailwind variables, light/dark tokens, analyzer/sandbox overrides, and accent selectors. The frontend does not use DaisyUI or a separate Tailwind configuration file.

## Controls

Theme and app-mode controls are rendered by `frontend/src/components/layout/Navbar.tsx`. Lucide icons and accessible labels describe light/dark actions. Accent choices set the store's `color` value rather than loading a separate stylesheet.

## Invariants

* Persist visual state across logout for continuity, but resynchronize trading app mode after authentication.
* Never let a client-only color choice change backend analyzer/live behavior.
* Analyzer/live toggle failures must leave the last confirmed app mode intact.
* New accent names require both the TypeScript union and CSS variables/selectors.

## Key Files

| File                                        | Purpose                               |
| ------------------------------------------- | ------------------------------------- |
| `frontend/src/stores/themeStore.ts`         | Persisted state and backend mode sync |
| `frontend/src/components/layout/Navbar.tsx` | User controls                         |
| `frontend/src/index.css`                    | Theme, accent, and mode variables     |