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:

: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:

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

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):

app/marketing/layout.tsx

export default function MarketingLayout({ children }) {
  return <div className="dark">{children}</div>;
}

Anything inside renders with dark tokens.

Related

Tailwind config

The lower-level config file.

shadcn/ui components

The components that consume the tokens.

Typography

Font and scale tokens.