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

You can change the primary color in DaisyUI by defining a custom theme in 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/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/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:

   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:

   // 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 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.

/* 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:

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:

<!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.

<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 to control colors, with defaults stored in packages/bundle/daisyui-theme.js.
• Create a custom theme in 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 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 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.

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