Theming

Overview

Every color in this system is defined once as a CSS variable in app/globals.css, then mapped to Tailwind utility classes in tailwind.config.ts. Components never hard-code a color — they use tokens like bg-primary or text-muted-foreground, so changing a variable updates every component at once, in both light and dark mode.

Color tokens

Brand color

The primary brand blue is #0164FF, stored as an OKLCH value so it stays perceptually consistent across light and dark themes.

:root {
  --primary: oklch(0.560 0.243 261.121); /* #0164FF */
  --primary-foreground: oklch(0.97 0.014 254.604);
  --ring: oklch(0.560 0.243 261.121 / 0.5);
}

Dark mode

Dark mode is powered by next-themes. The ThemeProvider toggles a .dark class on <html>, which swaps every CSS variable to its dark-mode value — no component code changes needed. Use the sun/moon icon in the header to switch between Light, Dark, and System.

<ThemeProvider
  attribute="class"
  defaultTheme="system"
  enableSystem
  disableTransitionOnChange
>
  {children}
</ThemeProvider>

Customizing a color

To change a token, edit its value in both the :root and .dark blocks of app/globals.css. No Tailwind config or component changes are required.

@layer base {
  :root {
    --primary: oklch(0.56 0.243 261.121);
  }
  .dark {
    --primary: oklch(0.56 0.243 261.121);
  }
}