Theming

Customize your brand color interactively. Pick a preset, enter a hex value, upload your logo, or ask AI — the page updates live so you can see how every component looks.

Theme Builder

Pick a preset, enter a hex color, upload your logo, or use AI — the entire page updates live.

Generated palette

100

200

300

400

500

600

700

800

900

950

Your CSS tokens

:root {
  --color-brand-25: #f9fcfb;
  --color-brand-50: #f1f9f5;
  --color-brand-100: #e2f2ea;
  --color-brand-200: #cbe8da;
  --color-brand-300: #acdbc4;
  --color-brand-400: #89cbab;
  --color-brand-500: #64bb91;
  --color-brand-600: #45ad7b;
  --color-brand-700: #30a46c;
  --color-brand-800: #298b5c;
  --color-brand-900: #1e6643;
  --color-brand-950: #13422b;
}

Paste at the bottom of src/routes/layout.css to override brand colors project-wide.

Using Themes in Your Project

How to add color themes, dark mode, and custom brand colors to your app.

1. Switch color themes

Add a class to your <html> or <body> element. Every component updates instantly — no code changes needed.

<!-- Default (green) -->
<html>

<!-- Switch to blue -->
<html class="blue">

<!-- Switch to violet -->
<html class="violet">

<!-- Available themes: blue, violet, pink, cyan, orange -->

To switch themes at runtime with a button:

<script>
  const themes = ['blue', 'violet', 'pink', 'cyan', 'orange'];
  let current = $state('');

  function setTheme(theme) {
    // Remove all theme classes
    themes.forEach(t => document.documentElement.classList.remove(t));
    // Add the new one
    if (theme) document.documentElement.classList.add(theme);
    current = theme;
  }
</script>

<div class="flex gap-2">
  <button onclick={() => setTheme('')}>Green</button>
  <button onclick={() => setTheme('blue')}>Blue</button>
  <button onclick={() => setTheme('violet')}>Violet</button>
  <button onclick={() => setTheme('pink')}>Pink</button>
  <button onclick={() => setTheme('cyan')}>Cyan</button>
  <button onclick={() => setTheme('orange')}>Orange</button>
</div>

2. Add dark mode

Add the dark class to <html>. All semantic tokens remap automatically — surfaces go dark, text goes light.

<script>
  import { onMount } from 'svelte';

  let isDark = $state(false);

  onMount(() => {
    // Load saved preference
    const saved = localStorage.getItem('theme');
    if (saved === 'dark') isDark = true;
    else if (!saved) isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

    document.documentElement.classList.toggle('dark', isDark);
  });

  function toggleDark() {
    isDark = !isDark;
    document.documentElement.classList.toggle('dark', isDark);
    localStorage.setItem('theme', isDark ? 'dark' : 'light');
  }
</script>

<button onclick={toggleDark}>
  {isDark ? 'Light Mode' : 'Dark Mode'}
</button>

Or use the built-in ModeSwitch component:

<script>
  import ModeSwitch from '$lib/components/ui/theme-switch/modeSwitch.svelte';
  let isDark = $state(false);
</script>

<ModeSwitch bind:isDark size="sm" />

3. Use a custom brand color

Use the Theme Builder above to pick your color, then paste the generated tokens at the bottom of your layout.css. They override the default green palette.

/* Paste at the bottom of src/routes/layout.css */
:root {
  --color-brand-25:  #fdfcfe;
  --color-brand-50:  #faf5ff;
  --color-brand-100: #f3e8ff;
  --color-brand-200: #e9d5ff;
  --color-brand-300: #d8b4fe;
  --color-brand-400: #c084fc;
  --color-brand-500: #a855f7;
  --color-brand-600: #9333ea;
  --color-brand-700: #7c3aed;
  --color-brand-800: #6d28d9;
  --color-brand-900: #581c87;
  --color-brand-950: #3b0764;
}

4. Compose everything

Color themes, dark mode, and custom brand colors all compose. Every component adapts with zero code changes.

class="" → default green, light mode

class="dark" → default green, dark mode

class="violet" → violet theme, light mode

class="violet dark" → violet theme, dark mode

Custom :root overrides → your brand color, works with dark too

Token Architecture

Understand the 3-layer design token system — why it's structured this way, how dark mode and theme switching work without writing hundreds of overrides, and how to customize at the right level.