daisyUI themes

How to use daisyUI themes?

This page is not up to date. Some of the examples might not work as expected.
daisyUI comes with a number of themes, which you can use with no extra effort. Each theme defines a set of colors which will be used on all daisyUI elements. To use a theme, add its name in tailwind.config.js and activate it by adding data-theme attribute to HTML tag:
app.css
@plugin "daisyui" {
  themes: light --default, dark --prefersdark, cupcake;
}
index.html
<html data-theme="cupcake"></html>

I suggest using theme-change, so you can switch themes and save selected theme in local storage.

List of themes

Try them:
light
A
A
A
A
dark
A
A
A
A
cupcake
A
A
A
A
bumblebee
A
A
A
A
emerald
A
A
A
A
corporate
A
A
A
A
synthwave
A
A
A
A
retro
A
A
A
A
cyberpunk
A
A
A
A
valentine
A
A
A
A
halloween
A
A
A
A
garden
A
A
A
A
forest
A
A
A
A
aqua
A
A
A
A
lofi
A
A
A
A
pastel
A
A
A
A
fantasy
A
A
A
A
wireframe
A
A
A
A
black
A
A
A
A
luxury
A
A
A
A
dracula
A
A
A
A
cmyk
A
A
A
A
autumn
A
A
A
A
business
A
A
A
A
acid
A
A
A
A
lemonade
A
A
A
A
night
A
A
A
A
coffee
A
A
A
A
winter
A
A
A
A
dim
A
A
A
A
nord
A
A
A
A
sunset
A
A
A
A
abyss
A
A
A
A
silk
A
A
A
A
app.css
@plugin "daisyui" {
  themes: light --default, dark --prefersdark, cupcake, bumblebee, emerald, corporate, synthwave, retro, cyberpunk, valentine, halloween, garden, forest, aqua, lofi, pastel, fantasy, wireframe, black, luxury, dracula, cmyk, autumn, business, acid, lemonade, night, coffee, winter, dim, nord, sunset, abyss, silk;
}
The default theme is light (or dark for dark mode) but you can change the default theme from tailwind.config.js

How to remove unused themes?

You can include only the themes you want in your project. This will reduce the size of your CSS file. In the below example
  • cupcake will be the default theme for light mode
  • dark will be the default theme for dark mode
  • cmyk can be applied on any HTML tag with data-theme='cmyk'
app.css
@plugin "daisyui" {
  themes: cupcake --default, dark --prefersdark, cmyk;
}

How to disable all themes?

If you only want the default light and dark themes, set themes config to false.
app.css
@plugin "daisyui" {
themes: light --default;
}
If you don't want to include any themes and disable all colors, set themes config to an empty array.
app.css
@plugin "daisyui" {
  themes: false;
}

How to use a theme only for a section of a page?

Add data-theme='THEME_NAME' to any element and everything inside will have your theme. You can nest themes and there is no limit! You can force a section of your HTML to only use a specific theme.
index.html
<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>

How to add a new custom theme?

You can add a new theme from tailwind.config.js file. In the below example, I added a new theme called mytheme and I'm also including dark and cupcake themes.
  • The first theme (mytheme) will be the default theme.
  • dark theme will be the default theme for dark mode.
In the below example, I have the required colors. All other colors will be generated automatically (Like the color of button when you focus on it or the color of text on a primary button).

You can also add optional color names to have full control over all colors.

app.css
@plugin "daisyui/theme" {
  name: "mytheme";
  default: false; /* set as default */
  prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */
  color-scheme: light; /* color of browser-provided UI */

  --color-base-100: oklch(98% 0.02 240);
  --color-base-200: oklch(95% 0.03 240);
  --color-base-300: oklch(92% 0.04 240);
  --color-base-content: oklch(20% 0.05 240);
  --color-primary: oklch(55% 0.3 240);
  --color-primary-content: oklch(98% 0.01 240);
  --color-secondary: oklch(70% 0.25 200);
  --color-secondary-content: oklch(98% 0.01 200);
  --color-accent: oklch(65% 0.25 160);
  --color-accent-content: oklch(98% 0.01 160);
  --color-neutral: oklch(50% 0.05 240);
  --color-neutral-content: oklch(98% 0.01 240);
  --color-info: oklch(70% 0.2 220);
  --color-info-content: oklch(98% 0.01 220);
  --color-success: oklch(65% 0.25 140);
  --color-success-content: oklch(98% 0.01 140);
  --color-warning: oklch(80% 0.25 80);
  --color-warning-content: oklch(20% 0.05 80);
  --color-error: oklch(65% 0.3 30);
  --color-error-content: oklch(98% 0.01 30);

  /* border radius */
  --radius-selector: 1rem;
  --radius-field: 0.25rem;
  --radius-box: 0.5rem;

  /* base sizes */
  --size-selector: 0.25rem;
  --size-field: 0.25rem;

  /* border size */
  --border: 1px;

  /* effects */
  --gloss: 1;
  --noise: 0;
}

Custom CSS for a daisyUI theme

You can apply custom style to a daisyUI themes using CSS:
app.css
[data-theme="mytheme"] .btn {
  border-width: 2px;
  border-color: black;
}

How to customize an existing theme?

In your tailwind.config.js, you can require an existing daisyUI theme and override some colors. In the below example, I require and spread light theme and change its primary and secondary colors:
app.css
@plugin "daisyui/theme" {
  name: "light";
  default: true;
  --color-primary: blue;
  --color-secondary: teal;
}

How to add custom styles for a specific theme?

You can write custom style for your elements only for a specific theme. In this example, .btn-twitter class only will have this style on light theme. 
module.exports = {
  //...
  daisyui: {
    themes: [
      {
        light: {
          ...require("daisyui/src/theming/themes")["light"],
          ".btn-twitter": {
            "background-color": "#1EA1F1",
            "border-color": "#1EA1F1",
          },
          ".btn-twitter:hover": {
            "background-color": "#1C96E1",
            "border-color": "#1C96E1",
          },
        },
      },
    ],
  },
}

How to apply Tailwind's 'dark:' selector for specific themes

daisyUI can be configured to use Tailwind's dark: selector in your code. To achieve this, modify your tailwind.config.js file to include the darkMode parameter. Ensure that the dark: selector applies to the daisyUI theme you designate as dark. In the example below, we have 'winter' and 'night' themes. Since 'night' is the dark theme, we configure it as shown: 
module.exports = {
  content: ['./src/**/*.{astro,html,svelte,vue,js,ts,jsx,tsx}'],
  plugins: [require('daisyui')],
  theme: { ... },
  daisyui: {
    themes: ['winter', 'night']
  },
  darkMode: ['selector', '[data-theme="night"]']
}
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development: Open Collective
daisyUI store

Official daisyUI
Figma Library

Available on daisyUI store

More details
Please upgrade your browser