Colors

theme.css

Your brand colors are defined in app/assets/theme.css. The starter comes with a default theme:

@theme {
  --color-primary-50: oklch(0.97 0.01 250);
  --color-primary-100: oklch(0.93 0.02 250);
  --color-primary-200: oklch(0.86 0.05 250);
  --color-primary-300: oklch(0.77 0.09 250);
  --color-primary-400: oklch(0.66 0.14 250);
  --color-primary-500: oklch(0.55 0.18 250);
  --color-primary-600: oklch(0.47 0.17 250);
  --color-primary-700: oklch(0.40 0.14 250);
  --color-primary-800: oklch(0.33 0.11 250);
  --color-primary-900: oklch(0.27 0.08 250);
  --color-primary-950: oklch(0.20 0.05 250);
}

Rebranding

The last number in each oklch value is the hue (0–360). Change it across all entries to shift your entire palette:

• 250 → Blue (default)
• 30 → Orange
• 150 → Green
• 330 → Pink
• 0 → Red

The first number is lightness (0–1) and the second is chroma (saturation). These are pre-tuned for each shade — you typically only change the hue.

oklch Primer

Foundry uses oklch color space for perceptually uniform colors. The three values are lightness (0–1), chroma (saturation), and hue (0–360).

Tools: oklch.com — Interactive color picker • Color palette generator

Secondary Color

Add a secondary color for supporting accents:

@theme {
  /* Primary: blue */
  --color-primary-500: oklch(0.55 0.18 250);

  /* Secondary: warm orange */
  --color-secondary-500: oklch(0.65 0.18 55);
}

Dark Mode

Dark mode is handled automatically. You don't need separate dark mode colors — the lightness scale in your palette provides both variants.

The color mode toggle is in the header (when showColorMode: true in navigation config). See Nuxt UI color modes for details.

Tools

• oklch.com — Interactive color picker
• Tailwind CSS Colors — Tailwind v4 color reference
• Nuxt UI Theming — Nuxt UI theme documentation

See App config color overrides for runtime color configuration.