How to Customize DaisyUI Colors: A Complete Guide to Theming

DaisyUI exposes its entire color system through CSS variables (e.g., --color-primary, --color-base-100) that you can customize using Tailwind's @plugin directive by enabling built-in themes, declaring custom themes, or overriding specific color values in existing themes.

DaisyUI is a popular Tailwind CSS component library that manages its color palette through a sophisticated CSS variable architecture. According to the saadeghi/daisyui source code, the theme system generates dynamic color mappings via Tailwind plugins, allowing you to customize DaisyUI colors without touching component classes. This article explains the three primary methods to modify colors based on the actual plugin implementation in the repository.

How DaisyUI's Color System Works

DaisyUI builds its color system on CSS custom properties injected through Tailwind's plugin API. The process involves three core steps orchestrated by the plugin:

1. Parse Options: packages/daisyui/functions/pluginOptionsHandler.js reads the themes array from your @plugin "daisyui" configuration to determine which themes to load.

2. Load Theme Objects: Built-in themes are defined in packages/daisyui/src/theme/object.js, where each theme is a JavaScript object mapping CSS variable names to OKLCH color values. Individual theme CSS files also exist in packages/daisyui/src/themes/*.css.

3. Generate CSS Rules: packages/daisyui/functions/themePlugin.js creates CSS selectors targeting :root or [data-theme="..."] attributes, injecting the variable definitions using Tailwind's addBase API.

This architecture means you can customize DaisyUI colors at the variable level, affecting every component that references those values.

Three Methods to Customize DaisyUI Colors

You have three distinct approaches to color customization, depending on whether you want to switch palettes, create new ones, or tweak existing colors.

Enable a Built-in Theme

The fastest way to customize colors is to enable one of DaisyUI's pre-built themes. Add theme names to your plugin configuration:

@import "tailwindcss";
@plugin "daisyui" {
  themes: light --default, dark --prefersdark, cupcake;
}

Then apply the theme using the data-theme attribute:

<html data-theme="cupcake">
  <!-- All components use the cupcake color palette -->
</html>

Create a Custom Theme

For complete brand control, define a new theme using the @plugin "daisyui/theme" block. This method lets you specify exact CSS variable values, preferably in OKLCH format:

@import "tailwindcss";
@plugin "daisyui";
@plugin "daisyui/theme" {
  name: "brand";
  default: true;
  prefersdark: false;
  color-scheme: light;
  
  --color-base-100: oklch(98% 0.02 240);
  --color-base-200: oklch(95% 0.03 240);
  --color-primary: oklch(55% 0.3 240);
  --color-secondary: oklch(70% 0.25 200);
  --color-accent: oklch(65% 0.25 160);
  --color-neutral: oklch(30% 0.05 240);
}

Override an Existing Theme

To modify specific colors in a built-in theme (like light or dark), declare a custom theme with the same name. Only the variables you specify will replace the defaults:

@plugin "daisyui/theme" {
  name: "light";
  default: true;
  --color-primary: #1EA1F1;      /* Custom primary color */
  --color-secondary: #0FA0C0;    /* Custom secondary color */
  /* All other variables remain from the original light theme */
}

Advanced DaisyUI Color Techniques

Scope Themes to Specific Sections

You can apply different color themes to different parts of your application using the data-theme attribute. DaisyUI generates selectors that target specific attributes, allowing nested themes:

<body data-theme="dark">
  <div class="card">
    <!-- Uses dark theme -->
  </div>
  <section data-theme="light">
    <!-- This section uses light theme regardless of parent -->
    <button class="btn btn-primary">Light Button</button>
  </section>
</body>

Integrate with Tailwind's Dark Mode

DaisyUI themes work alongside Tailwind's dark: prefix. When using a dark theme, standard Tailwind dark variants apply:

@plugin "daisyui" { themes: dark; }

<div class="dark:p-10 p-4 bg-base-100">
  <!-- Padding increases only when dark theme is active -->
</div>

Key Source Files for Theme Customization

Understanding these source files in the saadeghi/daisyui repository helps when debugging or extending themes:

• packages/daisyui/functions/pluginOptionsHandler.js: Parses the themes option from your @plugin block and determines which theme files to load.
• packages/daisyui/functions/themePlugin.js: Generates the CSS output, creating selectors like :where(:root), [data-theme="..."] and injecting CSS variables via addBase.
• packages/daisyui/src/theme/object.js: Contains the JavaScript objects that define built-in themes with OKLCH color values.
• packages/daisyui/src/themes/*.css: Individual CSS files for each built-in theme (e.g., cupcake.css, dark.css).

Summary

• DaisyUI colors are controlled through CSS variables like --color-primary and --color-base-100 that get injected into the :root or [data-theme] selectors.
• Enable built-in themes by listing them in the @plugin "daisyui" configuration block.
• Create completely custom themes using @plugin "daisyui/theme" with OKLCH color values for the best perceptual uniformity.
• Override existing themes by declaring a theme with the same name—only specified variables replace defaults.
• Reference pluginOptionsHandler.js and themePlugin.js in the DaisyUI source to understand how theme loading and CSS generation work.

Frequently Asked Questions

How do I change just the primary color in DaisyUI?

Use the theme override method by declaring a custom theme with the same name as your current theme (e.g., light or dark) and specify only the --color-primary variable in your @plugin "daisyui/theme" block. All other colors remain unchanged from the original theme definition in packages/daisyui/src/theme/object.js.

What color format should I use for custom DaisyUI themes?

DaisyUI uses OKLCH format by default in its built-in themes because it provides better perceptual uniformity than HEX or RGB. You can use any valid CSS color value, but OKLCH ensures consistent lightness and chroma across your palette.

Can I use multiple themes at once in the same project?

Yes. DaisyUI supports multiple simultaneous themes. List all desired themes in your plugin configuration, then apply them conditionally using the data-theme attribute on different HTML elements or pages. The themePlugin.js file generates specific selectors for each theme name you enable.

Where are DaisyUI's default color values defined?

Default color values live in packages/daisyui/src/theme/object.js as JavaScript objects and in packages/daisyui/src/themes/*.css as individual CSS files. These files map theme names to CSS variable values using OKLCH color notation.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}