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

> Learn to use custom colors with DaisyUI in Tailwind CSS. Explore three methods, including CSS variables, theme overrides, and built-in palettes, to style your components.

- Repository: [Pouya Saadeghi/daisyui](https://github.com/saadeghi/daisyui)
- Tags: how-to-guide
- Published: 2026-07-10

---

**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`](https://github.com/saadeghi/daisyui/blob/main/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`](https://github.com/saadeghi/daisyui/blob/main/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`](https://github.com/saadeghi/daisyui/blob/main/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`](https://github.com/saadeghi/daisyui/blob/main/packages/daisyui/functions/themePlugin.js) generates the CSS rules.

### Variable Injection Mechanics

The [`themePlugin.js`](https://github.com/saadeghi/daisyui/blob/main/themePlugin.js) file creates selectors targeting either the root element or `[data-theme="..."]` attributes, such as:

```css
: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.

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

```

Then apply the theme via the HTML attribute:

```html
<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.

```css
/* 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`](https://github.com/saadeghi/daisyui/blob/main/packages/daisyui/src/theme/object.js).

```css
/* 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.

```html
<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.

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

```

```html
<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`](https://github.com/saadeghi/daisyui/blob/main/packages/daisyui/src/theme/object.js).
- The **[`pluginOptionsHandler.js`](https://github.com/saadeghi/daisyui/blob/main/pluginOptionsHandler.js)** file parses theme configurations while **[`themePlugin.js`](https://github.com/saadeghi/daisyui/blob/main/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`](https://github.com/saadeghi/daisyui/blob/main/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`](https://github.com/saadeghi/daisyui/blob/main/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`](https://github.com/saadeghi/daisyui/blob/main/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`](https://github.com/saadeghi/daisyui/blob/main/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.