How to Override DaisyUI Default Colors: 3 Methods for Custom Theming

DaisyUI stores its default colors in CSS custom properties (variables) defined within each theme file in packages/daisyui/src/themes/, and you can override them by creating a custom theme with @plugin "daisyui/theme", remixing an existing theme via scoped CSS selectors, or using Tailwind utilities with the !important flag.

DaisyUI, the popular Tailwind CSS component library maintained in the saadeghi/daisyui repository, generates its color palette through CSS variables tied to theme definitions. To customize the default appearance, you must target these underlying variables rather than just adding utility classes.

How DaisyUI Defines Default Colors

Theme Files and CSS Variables

According to the source code in the saadeghi/daisyui repository, each built-in theme (such as light, dark, or cupcake) is defined in separate files under packages/daisyui/src/themes/*.css. These files declare semantic color variables like --color-primary, --color-secondary, --color-base-100, and --color-base-content.

The data-theme Attribute

DaisyUI applies these variables through the [data-theme] attribute. When you set <html data-theme="light">, the browser loads the corresponding CSS variables from the theme file, which subsequent Tailwind utilities like bg-primary and text-base-content reference.

Method 1: Create a Custom Theme

The most robust approach is defining a new theme using the @plugin "daisyui/theme" syntax. This registers a unique theme name with its own set of CSS variables in your global stylesheet.

Create a CSS file (e.g., src/styles/custom-theme.css):

@plugin "daisyui/theme" {
  name: "mybrand";

  --color-primary: #0d6efd;
  --color-primary-content: #ffffff;
  --color-secondary: #6c757d;
  --color-secondary-content: #ffffff;
  --color-base-100: #fafafa;
  --color-base-200: #e5e5e5;
  --color-base-content: #212529;
}

Then enable it in tailwind.config.js:

module.exports = {
  content: ["./src/**/*.{html,js,jsx,tsx}"],
  plugins: [require("daisyui")],
  daisyui: {
    themes: ["light", "mybrand"],
  },
};

Now apply it with <html data-theme="mybrand">.

Method 2: Override Built-in Theme Variables

To tweak an existing theme without creating a full replacement, target the [data-theme] selector in your CSS and reassign specific variables. This "theme remix" approach requires no changes to tailwind.config.js.

/* Override the cupcake theme specifically */
html[data-theme="cupcake"] {
  --color-primary: #ff6b6b;
  --color-primary-content: #ffffff;
}

This method works because DaisyUI's variable definitions in packages/daisyui/src/themes/*.css use the CSS cascade; your later declarations with the same specificity override the defaults.

Method 3: Force-Override with Tailwind Utilities

When you need a one-off color change that supersedes DaisyUI's component styles, use Tailwind's !important syntax by appending ! to the utility class.

<button className="btn bg-primary!">
  Override Primary
</button>

This generates CSS with !important, ensuring the utility beats DaisyUI's internal styling rules regardless of specificity conflicts.

Applying Multiple Themes with data-theme

DaisyUI supports multiple themes on the same page via the data-theme attribute. You can apply different themes to specific sections:

<div data-theme="forest">
  <button class="btn btn-primary">Forest Theme</button>
</div>

<div data-theme="sunset">
  <button class="btn btn-primary">Sunset Theme</button>
</div>

Each section inherits the CSS variables defined in its respective theme file under packages/daisyui/src/themes/.

Summary

• DaisyUI colors are CSS variables: Default palettes live in packages/daisyui/src/themes/*.css and are applied via [data-theme] attributes.
• Create custom themes: Use @plugin "daisyui/theme" in your CSS and register the theme in tailwind.config.js for complete control.
• Remix existing themes: Override specific variables like --color-primary using scoped [data-theme] selectors without config changes.
• Use force flags: Append ! to Tailwind utilities for immediate, specific overrides when specificity issues arise.

Frequently Asked Questions

Where are DaisyUI's default color values stored?

DaisyUI defines its default colors in theme-specific CSS files located at packages/daisyui/src/themes/*.css in the repository. Each file contains CSS custom properties such as --color-primary and --color-base-100 that power the utility classes.

Can I override a single color without creating a new theme?

Yes. Add a CSS rule targeting the specific [data-theme] selector (e.g., html[data-theme="light"]) and redefine the variable (e.g., --color-primary: #custom;). This updates the color wherever that theme is active without requiring a new theme definition in tailwind.config.js.

Why do my Tailwind classes not override DaisyUI component colors?

DaisyUI components often use their own internal logic that references CSS variables. If a utility class doesn't override a component color, use the ! suffix (e.g., bg-primary!) to apply the style with !important, or ensure you are overriding the underlying CSS variable (--color-primary) rather than just the utility class.

How do I switch between multiple custom themes on the same page?

Apply the data-theme attribute to any HTML element. DaisyUI scopes CSS variables to these attributes, allowing different sections to use different themes. Ensure all themes are listed in the themes array of your tailwind.config.js daisyui configuration.

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