Theming — DirectoryKit Docs

Three-layer system

DirectoryKit uses a three-layer theming system:

1. Light/Dark mode

Controlled by next-themes with class-based switching. The ThemeSwitcher component in the header toggles between modes.

2. Color themes

14 preset themes defined in config/themes.config.ts. Each theme provides HSL values for all CSS variables. Applied via the data-color-theme attribute on the root element.

3. Admin custom themes

Admins can create custom themes via /admin/theme. Custom themes are stored in the database and applied via SiteThemeProvider.

CSS variables

All colors are defined as CSS variables in app/globals.css:

:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 3.9%;
  --primary: 160 84% 39%;
  --secondary: 220 13% 12%;
  --muted: 220 12% 12%;
  --accent: 160 84% 39%;
  --destructive: 0 84% 60%;
  --border: 220 13% 15%;
  --ring: 160 84% 39%;
  --radius: 0.625rem;
}

Colors are stored as raw HSL values (e.g., 160 84% 39%) without the hsl() wrapper. In Tailwind, they're used as hsl(var(--primary)).

Customizing

To create a custom color scheme:

Edit the CSS variables in app/globals.css
Or add a new theme to config/themes.config.ts
Or use the admin theme editor at /admin/theme

Typography

Fonts are configured in app/layout.tsx:

Sans: Inter (body text)
Mono: JetBrains Mono (code blocks)

Override by changing the font imports and updating tailwind.config.ts.