Use Themes

How to use a theme?

Add data-theme="THEME_NAME" to <html> tag.

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

<html data-theme="cupcake">

List of themes:

  light (default)
    dark
    cupcake
    bumblebee
    emerald
    corporate
    synthwave
    retro
    cyberpunk
    valentine
    halloween
    garden
    forest
    aqua
    lofi
    pastel
    fantasy
    wireframe
    black
    luxury
    dracula
    cmyk

The default theme is light but you can change it from config.

To make your own theme, please see add themes page

If you're not using Tailwind JIT

You need to safelist data-theme attribute so PurgeCSS doesn't purge it

module.exports = {

    purge: {
      content: ['yourfiles/**/*.html'],
      options: {
        safelist: [
          /data-theme$/,
        ]
      },
    },

  }

How to disable themes

If you don't want to include themes, you need to disable themes config.

module.exports = {

    daisyui: {
      styled: true,
      themes: false,
      rtl: false,
    },

  }

How to use a theme only for a section of 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.

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

Using themes from CDN

Load all themes from CDN:

<link href="https://cdn.jsdelivr.net/npm/daisyui@1.16.0/dist/themes.css" rel="stylesheet" type="text/css" />