Themes

Overview

DirectoryKit has a three-layer theming system:

1. Light/Dark mode — via next-themes (class-based)
2. 14 preset color themes — applied via data-color-theme attribute
3. Custom admin themes — stored in DB, applied via SiteThemeProvider

Built-in themes

All 14 themes are defined in config/themes.config.ts using HSL values. Colors are stored as raw HSL values without the hsl() wrapper (e.g., "0 100% 60%") and used as hsl(var(--primary)) in Tailwind.

CSS variables

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

:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 3.9%;
  --primary: 160 84% 39%;
  --primary-foreground: 0 0% 100%;
  /* ... */
}

Customization

See Theming for a detailed guide on creating custom themes.