Theming

Ambar UI uses CSS custom properties for theming. Change the accent color, dark mode, fonts, and more — all components update instantly.

How It Works

🎨

CSS Variables

All colors are CSS custom properties (--accent, --card, etc.). Changing them updates every component instantly.

🌙

Dark Mode

Toggle via html.dark class. The theme store (themeStore.toggleMode()) handles this automatically with localStorage persistence.

⚡

Tailwind v4

Uses @theme inline so Tailwind utilities (bg-card, text-accent, etc.) resolve to your CSS variables.

Theme Variables

Override any of these in your app.css.

css 
/* app.css */
@theme inline {
  /* ── Accent colour ── */
  --color-accent:            oklch(0.6 0.2 265);   /* purple (default) */
  --color-accent-foreground: #ffffff;

  /* ── Backgrounds ── */
  --color-background: #ffffff;
  --color-foreground: #0a0a0a;
  --color-card:       #ffffff;
  --color-muted:      #f4f4f5;
  --color-border:     #e4e4e7;

  /* ── Text ── */
  --color-muted-foreground: #71717a;
  --color-secondary:        #f4f4f5;
}

Changing the Accent Color

One line changes the entire UI. Use any valid CSS color — oklch recommended for vibrant colors.

css 
/* Change accent to red */
@theme inline {
  --color-accent: oklch(0.55 0.22 25);
}

Custom Font

css 
/* Change font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

@theme inline {
  --font-sans: 'Inter', system-ui, sans-serif;
}

Using Theme in Your Code

svelte 
<!-- Access theme in components -->
<div style="color: var(--accent); background: var(--card)">
  Themed element
</div>

<!-- Tailwind utilities use the same tokens -->
<div class="bg-card text-foreground border border-border rounded-xl p-4">
  Card component
</div>

Theme Store API

Property / MethodDescription
themeStore.mode "light" | "dark" — current color mode
themeStore.toggleMode() Toggle between light and dark mode
themeStore.setMode(mode) Set mode explicitly
themeStore.accent Current accent color value
themeStore.setAccent(v) Set accent to a CSS color string
themeStore.init() Initialize from localStorage (call in onMount)