How to Create a New Color Palette for DaisyUI: Config and CSS Methods

To create a new color palette for DaisyUI, define a theme object in your tailwind.config.js or create a CSS file with [data-theme] selectors containing CSS custom properties, and DaisyUI's plugin will automatically generate all corresponding utility classes and component styles.

DaisyUI is a popular Tailwind CSS component library (saadeghi/daisyui) that builds component colors from CSS custom properties rather than hardcoded values. When you create a new color palette for DaisyUI, the plugin processes your theme definitions during the build to generate [data-theme] attribute selectors and utility classes like .bg-primary and .text-primary.

How DaisyUI Processes Color Themes

DaisyUI stores color information in CSS custom properties such as --color-primary, --color-secondary, and --color-accent. According to the source code in packages/daisyui/functions/variables.js, these variables map friendly names to the underlying CSS property references.

During the Tailwind CSS build, the plugin located at packages/daisyui/functions/themePlugin.js reads the daisyui.themes configuration array. For each theme, it:

1. Creates a CSS rule block (e.g., [data-theme="my-palette"] { --color-primary: #570df8; })
2. Generates utility classes via packages/daisyui/functions/generateColorRules.js that reference these variables (e.g., .bg-primary { background-color: var(--color-primary); })

This architecture means any valid CSS custom property defined within a [data-theme] scope automatically works with all DaisyUI components.

Method 1: Add a Color Palette via tailwind.config.js

The recommended approach defines your palette as a JavaScript object in the Tailwind configuration. This method keeps your design tokens in version control and leverages DaisyUI's automatic variable generation.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
  daisyui: {
    themes: [
      // Keep built-in themes
      "light",
      "dark",
      // Add your custom palette
      {
        "my-palette": {
          "primary": "#570df8",
          "primary-content": "#ffffff",
          "secondary": "#f000b8",
          "secondary-content": "#ffffff",
          "accent": "#37cdbe",
          "accent-content": "#ffffff",
          "neutral": "#3d4451",
          "neutral-content": "#ffffff",
          "base-100": "#ffffff",
          "base-200": "#f9fafb",
          "base-300": "#d1d5db",
          "info": "#2094f3",
          "success": "#009485",
          "warning": "#ff9900",
          "error": "#ff5724",
        },
      },
    ],
  },
};

The plugin converts this object into a CSS rule block targeting [data-theme="my-palette"] and populates the required custom properties. You can inspect the built-in theme definitions in packages/bundle/daisyui-theme.js to see the default structure used by the library.

Method 2: Create a Color Palette via Custom CSS

You can also define palettes directly in CSS files. This method works well when sharing themes across projects or when you prefer writing raw CSS variables.

Create a file named my-palette.css:

/* src/themes/my-palette.css */
[data-theme="my-palette"] {
  --color-primary: #570df8;
  --color-primary-content: #ffffff;
  --color-secondary: #f000b8;
  --color-secondary-content: #ffffff;
  --color-accent: #37cdbe;
  --color-accent-content: #ffffff;
  --color-neutral: #3d4451;
  --color-neutral-content: #ffffff;
  --color-base-100: #ffffff;
  --color-base-200: #f9fafb;
  --color-base-300: #d1d5db;
  --color-info: #2094f3;
  --color-success: #009485;
  --color-warning: #ff9900;
  --color-error: #ff5724;
}

Import this file in your main CSS entry point:

@import "./src/themes/my-palette.css";

Because DaisyUI utilities always reference variables using var(--color-...), they immediately recognize your new palette without additional JavaScript configuration. The packages/daisyui/functions/themeOrder.js file controls processing priority if multiple themes define the same variables.

Activating Your Custom Color Palette

Apply your palette by setting the data-theme attribute on your HTML element:

<!DOCTYPE html>
<html data-theme="my-palette">
  <body>
    <button class="btn btn-primary">Primary Action</button>
    <div class="alert alert-success">Operation completed</div>
  </body>
</html>

For runtime theme switching, use DaisyUI's theme-controller component with an input element, or dynamically change the data-theme attribute via JavaScript.

Key Source Files in the DaisyUI Repository

Understanding these files helps when debugging or extending the theming system:

• packages/bundle/daisyui-theme.js – Contains the default theme objects (e.g., cupcake, aqua, synthwave) shipped with the library.
• packages/daisyui/functions/themePlugin.js – The Tailwind plugin entry point that reads your config and generates CSS variable blocks.
• packages/daisyui/functions/generateColorRules.js – Generates utility classes (.bg-primary, .text-primary, .border-primary) that reference CSS variables.
• packages/daisyui/functions/variables.js – Defines the mapping between semantic color names (primary, secondary) and CSS custom property names (--color-primary).
• packages/daisyui/functions/themeOrder.js – Manages the order in which themes are processed, affecting variable precedence.

Summary

• DaisyUI generates colors from CSS custom properties defined within [data-theme] selectors, as implemented in packages/daisyui/functions/themePlugin.js.
• Define palettes in tailwind.config.js by adding theme objects to the daisyui.themes array, or use standalone CSS files with [data-theme] selectors.
• Utility classes are generated automatically by packages/daisyui/functions/generateColorRules.js regardless of which method you choose.
• Activate themes by setting the data-theme attribute on your HTML element or using the theme-controller component.

Frequently Asked Questions

Do I need to modify the DaisyUI library source code to add a custom color palette?

No. You should define custom palettes in your project's tailwind.config.js or in separate CSS files. The plugin architecture in packages/daisyui/functions/themePlugin.js is designed to consume external theme definitions without requiring changes to the core library. Only modify packages/bundle/daisyui-theme.js if you are contributing a new theme to the official DaisyUI repository.

What CSS custom property names does DaisyUI require for color palettes?

DaisyUI uses variables like --color-primary, --color-secondary, --color-accent, --color-neutral, --color-base-100, --color-info, --color-success, --color-warning, and --color-error. Each color also has a corresponding -content variant (e.g., --color-primary-content) for text colors that ensure accessible contrast. These mappings are defined in packages/daisyui/functions/variables.js.

Can I extend an existing DaisyUI theme instead of creating a new one from scratch?

Yes. In your tailwind.config.js, you can include the name of a built-in theme (e.g., "light") alongside your custom object. DaisyUI will generate CSS for both. If you need to override specific colors from a built-in theme while keeping others, you can define a custom theme object with only the properties you want to change and ensure it appears later in the themes array to take precedence, as controlled by packages/daisyui/functions/themeOrder.js.

How do I switch between color palettes at runtime in a DaisyUI application?

Change the data-theme attribute value on the <html> element to match your theme name (e.g., document.documentElement.setAttribute('data-theme', 'my-palette')). Alternatively, use the DaisyUI theme-controller component, which uses a checkbox input to toggle themes without JavaScript. All components automatically update because they reference the CSS custom properties scoped to the current [data-theme] selector.

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