Built-in themes

A theme in daisyUI is a set of values for all the semantic colors, corner radii and sizes. daisyUI has 35 ready-made themes: light, dark, cupcake, corporate, synthwave, retro, forest, nord and more. A theme is switched on with the data-theme attribute, and the component markup does not change.

The data-theme attribute

The theme for the whole page goes on the <html> tag. The CDN version already has the light and dark themes; the rest come from a separate themes.css file:

<!doctype html>
<html data-theme="cupcake">
<head>
  <link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
  <link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css">
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body>
  <button class="btn btn-primary">Enroll</button>
  <button class="btn btn-secondary">Learn more</button>
</body>
</html>

The buttons turned pastel — teal and pink: this is how primary and secondary look in the cupcake theme. Change the value to synthwave or retro and watch the buttons change. Without the attribute the default theme applies — usually light.

A theme for part of the page

data-theme works on any element: everything inside it gets that theme's colors. This way you can make, say, a dark footer on a light site, or compare themes side by side:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="grid gap-2 sm:grid-cols-3">
  <div data-theme="light" class="rounded-box p-4">
    <p class="mb-2 font-semibold">light</p>
    <button class="btn btn-primary btn-sm">Start</button>
  </div>
  <div data-theme="dark" class="rounded-box p-4">
    <p class="mb-2 font-semibold">dark</p>
    <button class="btn btn-primary btn-sm">Start</button>
  </div>
  <div data-theme="forest" class="rounded-box p-4">
    <p class="mb-2 font-semibold">forest</p>
    <button class="btn btn-primary btn-sm">Start</button>
  </div>
</div>

Three blocks with identical markup look different: light, dark and dark green. An element with data-theme gets its theme's base-100 background and base-content text color by itself.

Themes in a project

With an npm install only light and dark are enabled by default. List the themes you need in the plugin settings in src/style.css:

@import "tailwindcss";
@plugin "daisyui" {
  themes: light --default, dark --prefersdark, cupcake, forest;
}

The --default flag makes a theme the main one, and --prefersdark makes it the theme for people whose system uses dark mode. The value themes: all; includes all 35 themes, but each theme adds CSS, so it is better to list only the ones you need.

Common mistake

Writing data-theme="cupcake" in the CDN version without the themes.css file, or in a project without cupcake in the themes list. There is no error: the attribute simply finds nothing, and the page stays in the light theme. If a theme "does not turn on", first check that it is included.