How to Define Secondary Colors in DaisyUI: Tailwind Config and CSS Variable Methods

You can define secondary colors in DaisyUI by mapping a custom hex code or OKLCH value to the secondary key in your Tailwind configuration, which DaisyUI automatically converts to the --color-secondary CSS variable used by utility classes.

DaisyUI, the popular Tailwind CSS component library maintained in the saadeghi/daisyui repository, exposes its semantic color palette through CSS custom properties. When you need to customize the secondary color scheme for buttons, backgrounds, or text, you modify the theme object that DaisyUI processes through its internal variable generation system.

Understanding DaisyUI's Color Variable System

DaisyUI stores all theme colors as CSS variables following the pattern --color-{name} and --color-{name}-content. For the secondary palette, the library reads from --color-secondary for backgrounds and --color-secondary-content for foreground text.

According to the source code in packages/daisyui/functions/variables.js, DaisyUI maps semantic names like secondary directly to these CSS variables. When you define a custom theme, the generateThemesObject.js file processes your configuration and passes it to themePlugin.js, which injects the values into your compiled stylesheet.

Method 1: Define Secondary Colors via Tailwind Configuration

The recommended approach for project-wide theming uses the daisyui.themes array in your Tailwind config file. This method ensures consistent regeneration of CSS variables during the build process.

Add a custom theme object containing the secondary and secondary-content keys:

// tailwind.config.js
module.exports = {
  daisyui: {
    themes: [
      {
        mytheme: {
          primary: "#570df8",
          "primary-content": "#ffffff",
          
          // Define your secondary colors here
          secondary: "#ff6b6b",
          "secondary-content": "#ffffff",
          
          accent: "#f000b8",
          neutral: "#3d4451",
          // ... other colors
        },
      },
      // Include built-in themes if needed
      "light",
      "dark",
    ],
  },
}

After rebuilding your CSS, apply the secondary palette using standard DaisyUI utility classes:

<button class="btn btn-secondary">Secondary Action</button>
<div class="bg-secondary text-secondary-content p-4">
  Secondary container with auto-adjusted text
</div>

The themeOrder.js file in packages/daisyui/functions/themeOrder.js determines how DaisyUI prioritizes multiple themes when present in your configuration.

Method 2: Override Secondary Colors with Custom CSS

For quick adjustments or scoped overrides without modifying your build configuration, set the CSS variables directly. DaisyUI reads these variables at runtime, allowing instant updates to all components using the secondary token.

Apply globally through the :root selector:

/* In your global.css or after DaisyUI imports */
:root {
  --color-secondary: #ff6b6b;
  --color-secondary-content: #ffffff;
}

Or scope the override to specific elements using inline styles:

<div class="card" style="--color-secondary:#ff6b6b; --color-secondary-content:#fff;">
  <button class="btn btn-secondary">Scoped Secondary</button>
</div>

Because DaisyUI utility classes reference these variables rather than static values, any change to --color-secondary immediately propagates to bg-secondary, text-secondary, btn-secondary, and other secondary-dependent components.

Technical Implementation in the DaisyUI Codebase

The color generation pipeline in saadeghi/daisyui follows this specific file hierarchy:

• packages/daisyui/functions/variables.js – Defines the mapping from semantic color names (secondary, secondary-content) to CSS variable names (--color-secondary, --color-secondary-content).

• packages/daisyui/functions/generateThemesObject.js – Consumes your tailwind.config.js theme definitions and structures them for the Tailwind plugin API.

• packages/daisyui/functions/themePlugin.js – Core Tailwind plugin that injects the final CSS variables into the stylesheet output.

• packages/daisyui/functions/themeOrder.js – Manages precedence when multiple themes are active, ensuring your custom secondary colors apply correctly when switching themes.

Summary

• Define secondary colors in DaisyUI by adding the secondary and secondary-content keys to a custom theme object in tailwind.config.js.
• Global CSS overrides work by setting --color-secondary and --color-secondary-content on the :root element.
• Scoped overrides apply by setting the same CSS variables on specific HTML elements.
• DaisyUI's internal processing in variables.js and themePlugin.js converts your configuration into runtime CSS custom properties consumed by utility classes like btn-secondary and bg-secondary.

Frequently Asked Questions

What is the difference between secondary and secondary-content in DaisyUI?

secondary defines the main background color for components like buttons and badges, while secondary-content specifies the foreground text or icon color that appears on top of that background. DaisyUI uses this pairing to ensure accessible contrast ratios across all secondary-themed elements.

Can I define secondary colors without using the Tailwind config file?

Yes. You can bypass tailwind.config.js entirely by setting the --color-secondary CSS variable directly in your stylesheet or HTML style attributes. However, using the Tailwind configuration method is recommended for maintainability and ensures the colors are included in DaisyUI's theme generation pipeline handled by generateThemesObject.js.

Why are my secondary color changes not showing up after editing the config?

DaisyUI generates CSS variables at build time. If you modify tailwind.config.js, you must restart your development server or rebuild your project to trigger the processing in themePlugin.js. Additionally, verify that your HTML element has the correct data-theme attribute matching your custom theme name, or that your custom theme is listed first in the DaisyUI themes array.

Does DaisyUI support OKLCH or HSL values for secondary colors?

Yes. DaisyUI supports any valid CSS color value in the theme configuration, including hex, RGB, HSL, and OKLCH. The variables.js function passes these values directly to the CSS custom properties, so you can use modern color spaces like oklch(70% 0.2 10) for your secondary color definitions.

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