# How to Change the Primary Color in DaisyUI: A Complete Guide for Custom Themes

> Learn how to easily change the primary color in DaisyUI by customizing themes in tailwind.config.js or overriding CSS variables. Get your custom theme up and running quickly!

- Repository: [Pouya Saadeghi/daisyui](https://github.com/saadeghi/daisyui)
- Tags: how-to-guide
- Published: 2026-07-10

---

**You can change the primary color in DaisyUI by defining a custom theme in [`tailwind.config.js`](https://github.com/saadeghi/daisyui/blob/main/tailwind.config.js) with new values for `"primary"` and `"primary-content"`, or by overriding the `--color-primary` CSS variable directly at runtime.**

DaisyUI extends Tailwind CSS with a semantic color system that generates CSS custom properties to style components. To change the primary color site-wide, you either configure the `daisyui.themes` array in your Tailwind configuration or manipulate the underlying variables directly in the browser.

## How DaisyUI's Color System Works

### CSS Variable Mapping in variables.js

The bridge between Tailwind utility classes and DaisyUI's theming engine lives in [[`packages/daisyui/functions/variables.js`](https://github.com/saadeghi/daisyui/blob/main/packages/daisyui/functions/variables.js)](https://github.com/saadeghi/daisyui/blob/master/packages/daisyui/functions/variables.js). This file maps semantic color names like `primary` and `secondary` to CSS variables such as `--color-primary` and `--color-primary-content`. When you use utilities like `.btn-primary` or `.text-primary`, they reference these variables, allowing you to change the entire palette by updating a single value.

### Default Theme Definitions

The built-in color values are stored in [[`packages/bundle/daisyui-theme.js`](https://github.com/saadeghi/daisyui/blob/main/packages/bundle/daisyui-theme.js)](https://github.com/saadeghi/daisyui/blob/master/packages/bundle/daisyui-theme.js). This file contains the default OKLch color values for themes like `light` and `dark`. When you create a custom theme, you override these defaults with your own color definitions.

## Method 1: Define a Custom Theme in tailwind.config.js

This approach creates a permanent, reusable theme that integrates with DaisyUI's `data-theme` attribute system.

1. **Ensure the DaisyUI plugin is installed** in your [`tailwind.config.js`](https://github.com/saadeghi/daisyui/blob/main/tailwind.config.js):

   ```javascript
   module.exports = {
     plugins: [require('daisyui')],
   };
   ```

2. **Add your custom theme** to the `daisyui.themes` array, specifying the `primary` color and its contrast color `primary-content`:

   ```javascript
   // tailwind.config.js
   module.exports = {
     plugins: [require('daisyui')],
     daisyui: {
       themes: [
         {
           mytheme: {
             "primary": "#006d77",           // Your custom primary color
             "primary-content": "#edf6f9",   // Text color that contrasts with primary
             "secondary": "#83c5be",
             "accent": "#ff006e",
             // Optional: override other semantic colors
             "neutral": "#2a323c",
             "base-100": "#ffffff",
           },
         },
         "light",  // Keep default themes for fallback
         "dark",
       ],
     },
   };
   ```

3. **Activate the theme** by adding the `data-theme` attribute to your HTML root element:

   ```html
   <html data-theme="mytheme">
     <body class="bg-base-100 text-base-content">
       <button class="btn btn-primary">Primary Button</button>
       <h1 class="text-primary text-3xl font-bold">Primary Heading</h1>
     </body>
   </html>
   ```

The `btn-primary` class now uses your custom `#006d77` color instead of the default palette.

## Method 2: Override CSS Variables Directly

For quick fixes, A/B testing, or dynamic theming without rebuilding your CSS, you can override the `--color-primary` variable on any selector. This method bypasses the build-time configuration and updates the UI instantly.

```css
/* Override globally */
:root {
  --color-primary: #4f46e5;
  --color-primary-content: #ffffff;
}

/* Or scope to a specific component */
.custom-brand {
  --color-primary: #ff5722;
}

```

All DaisyUI components that reference `var(--color-primary)` will update immediately when these variables change.

## Complete Working Example

Here is a full implementation combining the configuration and HTML activation:

**tailwind.config.js:**

```javascript
module.exports = {
   content: ['./src/**/*.{html,js}'],
   plugins: [require('daisyui')],
   daisyui: {
     themes: [
       {
         oceanic: {
           "primary": "#006d77",
           "primary-content": "#edf6f9",
           "secondary": "#83c5be",
           "accent": "#e29578",
           "neutral": "#2a323c",
           "base-100": "#fcfcfc",
         },
       },
     ],
   },
 }

```

**index.html:**

```html
<!DOCTYPE html>
<html data-theme="oceanic" lang="en">
<head>
  <meta charset="UTF-8">
  <link href="/dist/output.css" rel="stylesheet">
</head>
<body class="p-8 bg-base-100">
  <div class="max-w-md mx-auto space-y-4">
    <h1 class="text-3xl font-bold text-primary">Oceanic Theme</h1>
    <p class="text-base-content">This text uses the default base content color.</p>
    <button class="btn btn-primary w-full">Primary Action</button>
    <button class="btn btn-secondary w-full">Secondary Action</button>
  </div>
</body>
</html>

```

## Advanced: Dynamic Color Switching at Runtime

You can change the primary color without reloading the page by manipulating the CSS variable via JavaScript. This is useful for color pickers, brand customization tools, or user preference toggles.

```html
<div class="p-6 space-y-4">
  <button id="brand-btn" class="btn btn-primary">Dynamic Primary Button</button>
  <div class="flex gap-2">
    <button onclick="setPrimary('#ff6b6b')" class="btn btn-sm">Red</button>
    <button onclick="setPrimary('#4ecdc4')" class="btn btn-sm">Teal</button>
    <button onclick="setPrimary('#1a535c')" class="btn btn-sm">Navy</button>
  </div>
</div>

<script>
  function setPrimary(color) {
    document.documentElement.style.setProperty('--color-primary', color);
    // Optionally update the contrast color automatically
    document.documentElement.style.setProperty('--color-primary-content', '#ffffff');
  }
</script>

```

Because DaisyUI utilities use `var(--color-primary)` internally, the change propagates instantly to all components.

## Summary

- **DaisyUI uses CSS variables** defined in [`packages/daisyui/functions/variables.js`](https://github.com/saadeghi/daisyui/blob/main/packages/daisyui/functions/variables.js) to control colors, with defaults stored in [`packages/bundle/daisyui-theme.js`](https://github.com/saadeghi/daisyui/blob/main/packages/bundle/daisyui-theme.js).
- **Create a custom theme** in [`tailwind.config.js`](https://github.com/saadeghi/daisyui/blob/main/tailwind.config.js) by adding an object to the `daisyui.themes` array with `primary` and `primary-content` keys, then activate it with `data-theme="yourname"`.
- **Override variables directly** by setting `--color-primary` on `:root` or any scoped selector for quick changes without rebuilding.
- **Change colors at runtime** using `document.documentElement.style.setProperty('--color-primary', value)` for dynamic interfaces.

## Frequently Asked Questions

### What is the difference between "primary" and "primary-content"?

The `primary` key defines the main brand color used for buttons, backgrounds, and accents, while `primary-content` defines the text color that appears on top of that primary color. DaisyUI uses this pairing to ensure accessible contrast ratios. If you only set `primary`, the content color may default to a value with insufficient contrast.

### Can I use OKLch values instead of hex codes?

Yes. DaisyUI supports any valid CSS color format including hex, RGB, HSL, and OKLch. The default themes in [`packages/bundle/daisyui-theme.js`](https://github.com/saadeghi/daisyui/blob/main/packages/bundle/daisyui-theme.js) use OKLch values, but your custom theme can use whatever format you prefer (e.g., `"primary": "oklch(70% 0.2 240)"`).

### Why isn't my custom primary color showing up?

Ensure you have added the `data-theme="yourtheme"` attribute to a parent element (usually the `<html>` tag), and verify that your [`tailwind.config.js`](https://github.com/saadeghi/daisyui/blob/main/tailwind.config.js) actually includes the DaisyUI plugin in the `plugins` array. Also confirm that you are using the correct semantic key—DaisyUI expects `"primary"` (not `"primaryColor"` or `"primary-color"`).

### How do I switch themes dynamically based on user preference?

You can toggle the `data-theme` attribute on the `<html>` element using JavaScript, or switch CSS variables directly. For theme toggling, store the user's preference in `localStorage` and apply it on page load by setting the attribute on the document element before the CSS renders.