> ## Documentation Index
> Fetch the complete documentation index at: https://vlyai-1c28d863.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Themes
> Light, dark, and system themes. Brand color overrides. How vly handles theme tokens and how to extend them.
Every vly app ships with a **light theme** and a **dark theme**, plus a system preference toggle. Theme tokens live in CSS variables — change them in one place, the whole app updates.
## How users experience theming
By default, every vly app:
* Detects the user's OS preference on first visit (light / dark).
* Saves the user's explicit preference in `localStorage`.
* Provides a theme toggle (sun / moon / monitor icons) in the user dropdown.
To customize the toggle UI or its location, just prompt: "Move the theme toggle to the bottom-left of the sidebar."
## How tokens work
Open `app/globals.css`:
```css theme={null}
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--primary: 263 70% 50%; /* brand violet */
--primary-foreground: 210 40% 98%;
/* ...more */
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--primary: 263 65% 60%;
--primary-foreground: 222.2 47.4% 11.2%;
/* ...more */
}
```
shadcn/ui components reference these variables (`bg-primary`, `text-foreground`, etc.). Change a variable; every consumer updates.
## Changing the brand color
The fastest path:
```text theme={null}
Change the brand color to teal — primary should be #0D9488 in light mode
and #2DD4BF in dark mode.
```
vly updates the CSS variables, the Tailwind config, and any hardcoded references. One prompt.
## Adding a new color
```text theme={null}
Add a "warning" color to the design system. #F59E0B in light, #FBBF24 in dark.
Use it for the warning Toast, the in-app warning banner, and any "approaching
limit" indicators.
```
vly extends the tokens, updates `tailwind.config.ts`, and references the new color in the relevant components.
## Per-page theme overrides
Most apps use one global theme. For unusual cases (e.g., a marketing landing page that's always dark regardless of user preference):
```typescript app/marketing/layout.tsx theme={null}
export default function MarketingLayout({ children }) {
return {children}
;
}
```
Anything inside renders with dark tokens.
## Related
The lower-level config file.
The components that consume the tokens.
Font and scale tokens.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.