Theming

Leave Localhost uses CSS custom properties for all design tokens. Colors are defined in the OKLCH color space for perceptual uniformity, and every token is referenced through Tailwind CSS 4's @theme block so you can use them as regular Tailwind utilities.

Token Architecture

All tokens are defined in packages/ui/src/globals.css. The file has three layers:

1. @theme inline — maps Tailwind color names (e.g. --color-primary) to CSS custom properties (e.g. var(--primary)), and defines radius, animation, font, and shadow tokens.
2. :root — the light-mode values for every token.
3. .dark — the dark-mode overrides.

This structure means you can change the entire color palette by editing the :root and .dark blocks without touching any component code.

Color Tokens

The color system uses semantic names that map to foreground/background pairs:

Sidebar Tokens

The sidebar has its own set of tokens for independent theming:

Changing the Color Palette

To rebrand the starter:

1. Open packages/ui/src/globals.css.
2. Edit the OKLCH values in the :root block for light mode.
3. Edit the corresponding values in the .dark block for dark mode.
4. The --primary token controls the dominant brand color — update it first and adjust accent, ring, and chart tokens to match.

Example: Changing the Primary Color

The default primary is a blue at oklch(0.62 0.19 259.76). To switch to an emerald green:

:root {
  --primary: oklch(0.60 0.17 155);
  --primary-foreground: oklch(1 0 0);
  --ring: oklch(0.60 0.17 155);
}

.dark {
  --primary: oklch(0.60 0.17 155);
  --primary-foreground: oklch(1 0 0);
  --ring: oklch(0.60 0.17 155);
}

Using shadcn Themes

You can use the shadcn themes page to generate a complete set of tokens, then paste the :root and .dark blocks into globals.css. Make sure to convert HSL values to OKLCH if you want to stay consistent with the existing format.

Radius Tokens

Radii are computed from a single --radius base value:

Change --radius in :root to make all corners sharper or rounder at once. The default is 0.375rem (6 px).

Typography Tokens

Three font families are defined:

The product app loads DM Sans via next/font/google and assigns it to the --font-dm-sans CSS variable, which overrides the body font through the font-sans utility. To change the app font, edit the DM_Sans import in apps/app/src/app/[locale]/layout.tsx.

Shadow Tokens

Shadows are defined from --shadow-2xs through --shadow-2xl, each using subtle hsl(0 0% 0% / ...) values that work in both light and dark modes.

Spacing

The --spacing token is set to 0.25rem and powers Tailwind's spacing scale. Changing it rescales all spacing utilities proportionally.

Using Tokens in Components

In Tailwind classes, use the semantic names directly:

// Color
<div className="bg-primary text-primary-foreground" />

// Border
<div className="border border-border" />

// Radius
<div className="rounded-lg" />

// Focus ring
<button className="focus-visible:ring-2 focus-visible:ring-ring" />

In raw CSS, reference the custom properties:

.custom-element {
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: var(--radius);
}

Next Reads

• Dark Mode — how the light/dark toggle works.
• shadcn/ui — adding and customizing components.