# How to Customize DaisyUI Colors: A Complete Guide to Theming

> Easily customize DaisyUI colors using CSS variables and Tailwind CSS. Learn to enable built-in themes or declare your own for complete control over your UI's look and feel.

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

---

**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`](https://github.com/saadeghi/daisyui/blob/main/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`](https://github.com/saadeghi/daisyui/blob/main/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`](https://github.com/saadeghi/daisyui/blob/main/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:

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

```

Then apply the theme using the `data-theme` attribute:

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

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

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

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

```css
@plugin "daisyui" { themes: dark; }

```

```html
<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`](https://github.com/saadeghi/daisyui/blob/main/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`](https://github.com/saadeghi/daisyui/blob/main/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`](https://github.com/saadeghi/daisyui/blob/main/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`](https://github.com/saadeghi/daisyui/blob/main/cupcake.css), [`dark.css`](https://github.com/saadeghi/daisyui/blob/main/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`](https://github.com/saadeghi/daisyui/blob/main/pluginOptionsHandler.js) and [`themePlugin.js`](https://github.com/saadeghi/daisyui/blob/main/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`](https://github.com/saadeghi/daisyui/blob/main/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`](https://github.com/saadeghi/daisyui/blob/main/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`](https://github.com/saadeghi/daisyui/blob/main/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.