# How to Create a New Color Palette for DaisyUI: Config and CSS Methods
> Learn how to create a new color palette for DaisyUI using Tailwind CSS config or CSS data theme selectors. Discover easy methods to customize your UI now.
- Repository: [Pouya Saadeghi/daisyui](https://github.com/saadeghi/daisyui)
- Tags: how-to-guide
- Published: 2026-07-10
---
**To create a new color palette for DaisyUI, define a theme object in your [`tailwind.config.js`](https://github.com/saadeghi/daisyui/blob/main/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`](https://github.com/saadeghi/daisyui/blob/main/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`](https://github.com/saadeghi/daisyui/blob/main/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`](https://github.com/saadeghi/daisyui/blob/main/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.
```javascript
// 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`](https://github.com/saadeghi/daisyui/blob/main/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`](https://github.com/saadeghi/daisyui/blob/main/my-palette.css):
```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:
```css
@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`](https://github.com/saadeghi/daisyui/blob/main/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:
```html
Operation completed
```
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`](https://github.com/saadeghi/daisyui/blob/main/packages/bundle/daisyui-theme.js)** – Contains the default theme objects (e.g., `cupcake`, `aqua`, `synthwave`) shipped with the library.
- **[`packages/daisyui/functions/themePlugin.js`](https://github.com/saadeghi/daisyui/blob/main/packages/daisyui/functions/themePlugin.js)** – The Tailwind plugin entry point that reads your config and generates CSS variable blocks.
- **[`packages/daisyui/functions/generateColorRules.js`](https://github.com/saadeghi/daisyui/blob/main/packages/daisyui/functions/generateColorRules.js)** – Generates utility classes (`.bg-primary`, `.text-primary`, `.border-primary`) that reference CSS variables.
- **[`packages/daisyui/functions/variables.js`](https://github.com/saadeghi/daisyui/blob/main/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`](https://github.com/saadeghi/daisyui/blob/main/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`](https://github.com/saadeghi/daisyui/blob/main/packages/daisyui/functions/themePlugin.js).
- **Define palettes in [`tailwind.config.js`](https://github.com/saadeghi/daisyui/blob/main/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`](https://github.com/saadeghi/daisyui/blob/main/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`](https://github.com/saadeghi/daisyui/blob/main/tailwind.config.js) or in separate CSS files. The plugin architecture in [`packages/daisyui/functions/themePlugin.js`](https://github.com/saadeghi/daisyui/blob/main/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`](https://github.com/saadeghi/daisyui/blob/main/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`](https://github.com/saadeghi/daisyui/blob/main/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`](https://github.com/saadeghi/daisyui/blob/main/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`](https://github.com/saadeghi/daisyui/blob/main/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 `` 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.