Add Themes

DaisyUI uses HSL color system for better theming.

You can set up 3 values of H,S,L (hue, saturation, lightness) for each color in your CSS file. It can be your main Tailwind CSS file or a file you @import to your main CSS file.
You can easily do this on DaisyUI Color Generator

:root {

     --p: 340 82% 62%; /* Primary color */
     --pf: 340 82% 52%; /* Primary color - focused */
     --pc: 0 0% 100%; /* Foreground content color to use on primary color */

     --s: 262 52% 56%; /* Secondary color */
     --sf: 262 52% 46%; /* Secondary color - focused */
     --sc: 0 0% 100%; /* Foreground content color to use on secondary color */

     --a: 199 98% 58%; /* Accent color */
     --af: 199 98% 48%; /* Accent color - focused */
     --ac: 0 0% 100%; /* Foreground content color to use on accent color */

     --n: 215 28% 17%; /* Neutral color */
     --nf: 221 39% 11%; /* Neutral color - focused */
     --nc: 0 0% 100%; /* Foreground content color to use on neutral color */

     --b1: 0 0% 100%; /* Base color of page, used for blank backgrounds */
     --b2: 210 20% 98%; /* Base color, a little darker */
     --b3: 216 12% 84%; /* Base color, even more darker */
     --bc: 215 28% 17%; /* Foreground content color to use on base color */

     --in: 207 90% 54%; /* Info */
     --su: 174 100% 29%; /* Success */
     --wa: 36 100% 50%; /* Warning */
     --er: 14 100% 57%; /* Error */
  }

  /* Let's add a second theme */
  [data-theme='dark'] {
     --b1: 219 14% 28%;
     --b2: 222 13% 19%;
     --b3: 223 14% 10%;
     --bc: 228 14% 93%;

     --n: 222 13% 19%%;
     --nf: 223 14% 10%%;
     --nc: 0 0% 100%%;

     --p: 259 94% 61%;
     --pf: 259 94% 51%;
  }

As you can see, we are not overwriting all colors for dark theme we changed base colors to dark colors, then we made neutral colors darker and we made primary colors lighter so it fits on dark base color.

You can add more themes

[data-theme='retro'] {
     --p: 3 74% 76%;
     --pf: 3 74% 66%;
     --pc: 345 5% 15%;

     --s: 145 27% 72%;
     --sf: 145 27% 62%;
     --sc: 345 5% 15%;

     --a: 49 67% 76%;
     --af: 49 67% 66%;
     --ac: 345 5% 15%;

     --n: 42 17% 42%;
     --nf: 41 13% 24%;
     --nc: 45 47% 80%;

     --b1: 45 47% 80%;
     --b2: 45 37% 72%;
     --b3: 42 36% 65%;
     --bc: 345 5% 15%;

     --in: 207 90% 54%;
     --su: 174 100% 29%;
     --wa: 36 100% 50%;
     --er: 14 100% 57%;
  }

Other variables

You can also set more variables to customize your theme.

--rounded-box: 1rem; /* border-radius for cards and other big elements */
  --rounded-btn: 0.5rem; /* border-radius for buttons and similar elements */
  --rounded-badge: 9999px; /* border-radius for badge and other small elements */

  --animation-btn: 0.25s; /* bounce animation time for button */
  --animation-input: .4s; /* bounce animation time for checkbox, toggle, etc */

  --padding-card: 2rem; /* default card-body padding */

  --btn-text-case: uppercase; /* default text case for buttons */
  --navbar-padding: .5rem; /* default padding for navbar */
  --border-btn: 1px; /* default border size for button */
  --focus-ring: 2px; /* focus ring size for button and inputs */
  --focus-ring-offset: 2px; /* focus ring offset size for button and inputs */

Respecting OS color scheme

If you want to show dark mode for people who are using a dark mode on their OS:

@media (prefers-color-scheme: dark){
    :root{
      --d: 223 14% 10%;
      /* ...rest of colors */
    }
  }

How to enable/change themes?

You just need to add data-theme="dark" to your <html> tag. Easiest way to handle it with JavaScript is to this tiny library: them-change

Force a specific theme for a section

You can force a section of your HTML to only use a specific theme.

<html data-theme="dark">

    <div data-theme="light">
      This div will always use light theme
        <span data-theme="retro">
          This span will always use retro theme!
        </span>
    </div>

  </html>

PurgeCSS Whitelist

If you're using Purge CSS, you might need to safe list your CSS using the comments below because your secondary themes will be purged.

Add this to your PurgeCSS config:

options: {
    safelist: [
      /data-theme$/,
    ],
  },

Or use CSS comments:

/*! purgecss start ignore */
  [data-theme='dark'] {
    ...
  }
  /*! purgecss end ignore */