# Using DaisyUI Colors for Dark Mode: Semantic Variables and Theme Configuration
> Effortlessly implement dark mode with DaisyUI semantic colors. Leverage CSS variables for automatic theme adaptation and simplify your markup without dark modifiers.
- Repository: [Pouya Saadeghi/daisyui](https://github.com/saadeghi/daisyui)
- Tags: tutorial
- Published: 2026-07-10
---
**DaisyUI v5 semantic color utilities automatically adapt to light and dark themes through CSS variables, eliminating the need for `dark:` modifiers in your markup.**
DaisyUI v5 (saadeghi/daisyui) revolutionizes dark mode implementation by using semantic color names that resolve to different values based on the active theme. Instead of duplicating classes with `dark:` prefixes, you use a single set of utilities like `bg-primary` or `text-base-content` that automatically switch values when the theme changes.
## How Semantic Colors Work in DaisyUI
DaisyUI generates **semantic color utilities** backed by CSS variables defined in [`packages/daisyui/functions/variables.js`](https://github.com/saadeghi/daisyui/blob/main/packages/daisyui/functions/variables.js). Each color name—such as `primary`, `base-100`, or `neutral`—maps to a CSS custom property like `--color-primary` or `--color-base-100`.
When you apply a utility class like `bg-primary` or `text-base-content`, the browser references these variables. As the active theme switches from light to dark, the underlying variable values update automatically, rendering the appropriate color without changing your HTML classes.
## Enabling Automatic Dark Mode Detection
The default DaisyUI configuration enables seamless dark mode through the **`--prefersdark`** flag. In [`packages/daisyui/functions/themePlugin.js`](https://github.com/saadeghi/daisyui/blob/main/packages/daisyui/functions/themePlugin.js), this flag triggers the addition of a `@media (prefers-color-scheme: dark)` rule that applies the dark theme's variables to the appropriate root element.
Configure your themes in your CSS file:
```css
@plugin "daisyui" {
themes: light --default, dark --prefersdark;
}
```
- **`light --default`** sets the light theme as the initial appearance
- **`dark --prefersdark`** designates the dark theme as the fallback when the user's OS prefers dark color schemes
## Practical Implementation Examples
### Basic Usage Without Dark Prefixes
Because colors are tied to CSS variables, you never duplicate class names for light and dark variants:
```html
This text adapts automatically: dark on light backgrounds, light on dark backgrounds.
```
### Explicit Theme Selection
Force a specific theme using the `data-theme` attribute:
```html
```
### Custom Dark Themes
Create custom dark themes by specifying them in your configuration:
```css
@plugin "daisyui" {
themes: winter --default, night --prefersdark;
}
```
When the `night` theme is active, all semantic utilities automatically resolve to that theme's color values.
### Overriding Colors in Dark Mode
Customize specific colors for your dark theme using the theme override syntax:
```css
@plugin "daisyui" {
themes: light --default, dark --prefersdark;
}
@plugin "daisyui/theme" {
name: "dark";
"primary": "#0ea5e9";
}
```
This merges your custom primary color with the built-in dark theme, as handled by the merge logic in [`packages/daisyui/functions/themePlugin.js`](https://github.com/saadeghi/daisyui/blob/main/packages/daisyui/functions/themePlugin.js).
### Using Opacity with Semantic Colors
Opacity modifiers work transparently across both themes:
```html
50% opaque primary background
```
## Creating Custom Dark Themes
When building custom themes, add them to the themes list and flag them with `--prefersdark` to enable automatic OS detection. The plugin merges custom tokens with built-in themes, so you only override the specific colors you need.
For advanced use cases combining DaisyUI with Tailwind's `dark:` variant, configure a custom variant that targets your specific dark theme:
```css
@plugin "daisyui" {
themes: winter --default, night --prefersdark;
}
@custom-variant dark (&:where([data-theme=night], [data-theme=night] *));
```
```html
Padding doubles only when the night theme is active.
```
## Summary
- DaisyUI v5 uses **semantic color names** (primary, base-100, base-content) backed by CSS variables defined in [`packages/daisyui/functions/variables.js`](https://github.com/saadeghi/daisyui/blob/main/packages/daisyui/functions/variables.js)
- The **`--prefersdark`** flag in your theme configuration enables automatic dark mode detection via `prefers-color-scheme` media queries, implemented in [`packages/daisyui/functions/themePlugin.js`](https://github.com/saadeghi/daisyui/blob/main/packages/daisyui/functions/themePlugin.js)
- **No `dark:` prefixes** are required because utilities like `bg-primary` automatically resolve to theme-specific values
- Custom themes merge with built-in themes, allowing targeted color overrides without redefining the entire palette
- Opacity modifiers (e.g., `bg-primary/50`) work consistently across light and dark themes
## Frequently Asked Questions
### Do I need to use `dark:` prefixes with DaisyUI?
No. DaisyUI's semantic color system eliminates the need for `dark:` prefixes because each utility class references CSS variables that change values based on the active theme. When the dark theme is active, `bg-base-100` automatically renders a dark background, and `text-base-content` automatically renders light text.
### How does DaisyUI detect the user's OS dark mode preference?
DaisyUI detects OS preferences through the **`--prefersdark`** flag in your theme configuration. According to the [`packages/daisyui/functions/themePlugin.js`](https://github.com/saadeghi/daisyui/blob/main/packages/daisyui/functions/themePlugin.js) implementation, this flag generates a `@media (prefers-color-scheme: dark)` rule that applies the dark theme's CSS variables to `:root` when the user's system is set to dark mode.
### Can I create a custom dark theme with specific brand colors?
Yes. Define your custom theme using the `@plugin "daisyui/theme"` syntax and specify the colors you want to override. The plugin merges your custom tokens with the built-in theme structure, so you only need to define the specific color values you want to change, such as setting `"primary": "#0ea5e9"` for a custom dark primary color.
### What is the difference between `base-100` and `base-content`?
`base-100` represents the **page background** color (the dominant surface), while `base-content` represents the **text color** designed to contrast against that background. In a light theme, `base-100` is typically white or light gray and `base-content` is dark gray or black. In a dark theme, these values invert automatically, with `base-100` becoming dark and `base-content` becoming light.