Getting started

Theming

Dark mode is built in. Every color is an OKLCH CSS variable you can override.

Dark mode

The kit toggles dark mode via a .dark class on <html>. The shipped theme store reads / writes localStorage and syncs with prefers-color-scheme automatically.

components/header.tsx

import { ThemeToggle, setThemeMode, useResolvedTheme } from '@kana-consultant/ui-kit'

function Header() {
  const mode = useResolvedTheme()
  return (
    <div>
      <ThemeToggle />
      <span>Current: {mode}</span>
    </div>
  )
}

setThemeMode('system')

API

useTheme() — full state ({ mode, resolved })
useThemeMode() — current user preference (light | dark | system)
useResolvedTheme() — what's actually applied (light | dark)
setThemeMode(mode) — imperative setter
toggleTheme() — flips between light and dark

Color tokens

Each semantic color is a CSS variable on :root (light) and .dark (dark). Override any of them in your own stylesheet to rebrand the kit:

src/styles/app.css

@import 'tailwindcss';
@import '@kana-consultant/ui-kit/styles';

:root {
  --primary: oklch(62% 0.22 25);
  --primary-foreground: oklch(99% 0.005 25);
  --primary-soft: oklch(95% 0.06 25);
}

.dark {
  --primary: oklch(72% 0.2 25);
}

Available tokens

--background        --foreground
--surface           --surface-muted
--border            --border-strong
--input             --ring
--muted             --muted-foreground
--primary           --primary-foreground   --primary-soft
--accent            --accent-foreground
--success           --warning              --danger   --info

Radii, shadows, fonts

Equivalent tokens exist for layout and typography. See the full list in src/styles/theme.css on GitHub.