DaisyUI theming
Use DaisyUI semantic colors so UI respects the active theme.
2 min read
Overview
Use DaisyUI semantic color utilities for backgrounds, text, and borders so the UI respects the active theme (for example forest, light). Avoid hardcoded Tailwind colors and avoid dark:* variants.
Rules
Use semantic classes
Prefer semantic tokens like:
- bg-base-100 page / card background
- bg-base-200 elevated surfaces
- border-base-300 borders/dividers
- text-base-content primary text
- text-base-content/70 muted text
- hover:bg-base-200 hover surfaces
- bg-primary + text-primary-content brand buttons
Avoid:
- bg-white / text-black
- bg-neutral-900
- dark:*
Example
<!-- ✅ GOOD: theme follows data-theme -->
<header class="bg-base-100 border-b border-base-300">
<a class="text-base-content hover:bg-base-200">Link</a>
</header>
<!-- ❌ BAD: hardcoded and dark: variant -->
<header class="bg-white dark:bg-neutral-900 border-neutral-200 dark:border-neutral-700">
<a class="text-neutral-700 dark:text-neutral-200">Link</a>
</header>When copying shadcn-style components
When adding or editing components under web/src/lib/ui/, replace shadcn-style tokens with DaisyUI semantics. Common mappings:
| Shadcn / registry class | Use instead (DaisyUI) |
|---|---|
text-muted-foreground | text-base-content/70 |
text-foreground | text-base-content |
bg-background | bg-base-100 |
ring-offset-background | ring-offset-base-100 |
focus:ring-ring | focus:ring-primary |
text-primary-foreground | text-primary-content |
text-secondary-foreground | text-secondary-content |
bg-destructive / text-destructive-foreground | bg-error / text-error-content |
bg-black/50 (overlays) | bg-base-content/50 |
generic border | border border-base-300 |
Why this matters
Hardcoded colors and `dark:*` variants bypass DaisyUI themes and create inconsistent UI across themes.