How to Use Custom Colors with DaisyUI: 3 Methods for Tailwind CSS

You can use custom colors with DaisyUI by defining CSS variables in a @plugin "daisyui/theme" block, overriding built-in themes by name, or selecting from the built-in palette via the themes: option.

DaisyUI is a Tailwind CSS component library that exposes its entire color system through CSS custom properties (variables). The library generates these variables through a Tailwind plugin that processes theme definitions found in the source code at packages/daisyui/src/themes/*.css and packages/daisyui/src/theme/object.js. Understanding how DaisyUI handles color variables allows you to create branded designs without fighting the framework.

How DaisyUI Generates Color Variables

The color system relies on a variable-driven architecture managed by the plugin's internal functions. When you include @plugin "daisyui" in your CSS, the plugin orchestrates theme loading through a specific pipeline that converts JavaScript objects into CSS custom properties.

The Theme Processing Pipeline

First, packages/daisyui/functions/pluginOptionsHandler.js parses the themes: option from your plugin configuration to determine which themes to activate. Then, it loads theme objects from packages/daisyui/src/theme/object.js, where each theme is a plain object mapping CSS variable names to color values (typically in OKLCH format). Finally, packages/daisyui/functions/themePlugin.js generates the CSS rules.

Variable Injection Mechanics

The themePlugin.js file creates selectors targeting either the root element or [data-theme="..."] attributes, such as:

:where(:root), :root:has(input.theme-controller[value=dark]:checked), [data-theme="dark"]

It injects the variable map using Tailwind's addBase API, optionally wrapping rules in prefers-color-scheme: dark media queries when the --prefersdark flag is present.

Three Ways to Use Custom Colors with DaisyUI

Method 1: Enable a Built-in Theme

DaisyUI ships with pre-defined themes like light, dark, and cupcake stored in packages/daisyui/src/themes/*.css. To use custom colors from the built-in palette, specify theme names in the themes: array within the plugin configuration.

/* app.css */
@import "tailwindcss";
@plugin "daisyui" {
  themes: light --default, dark --prefersdark, cupcake;
}

Then apply the theme via the HTML attribute:

<html data-theme="cupcake"></html>

Method 2: Create a Brand-New Custom Theme

For unique brand palettes, use a second plugin block @plugin "daisyui/theme" to declare your own CSS variables. You must specify a name, and optionally set default: true to make it the root theme or prefersdark: true for automatic dark mode detection.

/* app.css */
@import "tailwindcss";
@plugin "daisyui";
@plugin "daisyui/theme" {
  name: "mytheme";
  default: true;
  prefersdark: false;
  color-scheme: light;

  /* core palette – OKLCH is the preferred format */
  --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);
  /* …other variables… */
}

Method 3: Override an Existing Theme

To tweak specific colors while keeping the rest of a theme intact, declare a custom theme with the same name as a built-in theme (e.g., light). Only the variables you list will replace the defaults; everything else is inherited from the original definition in packages/daisyui/src/theme/object.js.

/* app.css */
@import "tailwindcss";
@plugin "daisyui";
@plugin "daisyui/theme" {
  name: "light";
  default: true;
  --color-primary: #1EA1F1;      /* new primary colour */
  --color-secondary: #0FA0C0;    /* new secondary colour */
}

Advanced Color Techniques

Theme Scoping with Data Attributes

You can apply themes to specific DOM sections using the data-theme attribute. Nest themes to create contrast sections, where inner elements use a different palette than their parents.

<div data-theme="dark">
  <section data-theme="light">
    <!-- This section will always render with the light palette -->
    <button class="btn">Light Button</button>
  </section>
</div>

Integrating with Tailwind's Dark Mode Utilities

DaisyUI themes work alongside Tailwind's dark: prefix. When a dark theme is active, the dark: variant triggers, allowing component-level adjustments that respect the theme's color variables.

/* app.css */
@plugin "daisyui" { themes: dark; }

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

Summary

• DaisyUI exposes colors via CSS variables like --color-primary and --color-base-100, with base definitions stored in packages/daisyui/src/theme/object.js.
• The pluginOptionsHandler.js file parses theme configurations while themePlugin.js generates CSS selectors and injects variables via addBase.
• Three customization methods exist: enabling built-in themes, creating new themes with @plugin "daisyui/theme", or overriding existing themes by matching names exactly.
• Specific DOM sections can use different themes via data-theme attributes, enabling mixed-theme interfaces.
• OKLCH is the preferred color format for DaisyUI variables due to its perceptual uniformity, though hex and RGB values work in custom definitions.

Frequently Asked Questions

What file handles theme parsing in DaisyUI?

The packages/daisyui/functions/pluginOptionsHandler.js file parses the themes: option from the @plugin "daisyui" block and determines which theme objects to load from the internal registry. It handles the logic for --default and --prefersdark flags as well.

Can I use hex colors instead of OKLCH in DaisyUI custom themes?

Yes, while DaisyUI uses OKLCH by default for perceptual uniformity (as implemented in packages/daisyui/src/theme/object.js), you can define custom themes using hex, RGB, or HSL values in the @plugin "daisyui/theme" block. The CSS output will contain whatever values you provide.

How do I make a custom theme the default for my application?

Add default: true to your @plugin "daisyui/theme" configuration block. According to the logic in themePlugin.js, this sets the theme variables on the :root selector without requiring a data-theme attribute on your HTML element, making it the fallback palette.

Why are my color changes not showing up after modifying the theme?

Ensure you are using the correct CSS variable names (e.g., --color-primary not --primary) and that your Tailwind build process has recompiled. The themePlugin.js generates CSS selectors at build time based on the plugin configuration, so changes to theme definitions require a fresh CSS generation to update the variable mappings.

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