# How to Override DaisyUI Default Colors: 3 Methods for Custom Theming
> Learn how to override DaisyUI default colors with three easy methods. Customize your theme using CSS variables, scoped selectors, or Tailwind utilities and unlock powerful styling options.
- Repository: [Pouya Saadeghi/daisyui](https://github.com/saadeghi/daisyui)
- Tags: how-to-guide
- Published: 2026-07-10
---
**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 ``, 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`](https://github.com/saadeghi/daisyui/blob/main/src/styles/custom-theme.css)):
```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`](https://github.com/saadeghi/daisyui/blob/main/tailwind.config.js):
```javascript
module.exports = {
content: ["./src/**/*.{html,js,jsx,tsx}"],
plugins: [require("daisyui")],
daisyui: {
themes: ["light", "mybrand"],
},
};
```
Now apply it with ``.
## 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`](https://github.com/saadeghi/daisyui/blob/main/tailwind.config.js).
```css
/* 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.
```jsx
```
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:
```html
```
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`](https://github.com/saadeghi/daisyui/blob/main/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`](https://github.com/saadeghi/daisyui/blob/main/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`](https://github.com/saadeghi/daisyui/blob/main/tailwind.config.js) daisyui configuration.