A custom theme

Built-in themes are fine for a start, but a site usually has its own brand colors. A custom theme in daisyUI is a set of CSS variables under a theme name. The variables are the same as in the built-in themes, so every component immediately starts using your colors.

Theme variables

daisyUI themes write colors as oklch(lightness chroma hue), but a familiar #2563eb works too.

A theme in a project

In a Vite project a theme is described with an @plugin "daisyui/theme" block in src/style.css, after daisyUI itself is added:

@import "tailwindcss";
@plugin "daisyui";
 
@plugin "daisyui/theme" {
  name: "learnup";
  default: true;
  prefersdark: false;
  color-scheme: light;
 
  --color-base-100: #ffffff;
  --color-base-200: #f1f5f9;
  --color-base-300: #e2e8f0;
  --color-base-content: #1e293b;
  --color-primary: #2563eb;
  --color-primary-content: #ffffff;
  --color-secondary: #f97316;
  --color-secondary-content: #ffffff;
 
  --radius-box: 1rem;
  --radius-field: 2rem;
}

name is the name for data-theme, default: true makes the theme the main one, and color-scheme tells the browser whether the theme is light or dark (scrollbars and native fields depend on it). The other colors are set the same way; the easiest way to get a full set is the theme generator on the daisyUI website, then copy it from there.

Trying it in the browser

In the CDN version you can describe a theme with a plain CSS rule for [data-theme="learnup"] — the same variables, just without the @plugin block:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<style>
  [data-theme="learnup"] {
    color-scheme: light;
    --color-base-200: #f1f5f9;
    --color-base-content: #1e293b;
    --color-primary: #2563eb;
    --color-primary-content: #ffffff;
    --color-secondary: #f97316;
    --color-secondary-content: #ffffff;
    --radius-box: 1rem;
    --radius-field: 2rem;
  }
</style>
 
<div data-theme="learnup" class="p-4">
  <div class="rounded-box bg-base-200 p-4">
    <p class="mb-3 font-semibold">HTML basics course — $19</p>
    <button class="btn btn-primary">Enroll</button>
    <button class="btn btn-secondary">Add to favorites</button>
  </div>
</div>

The buttons turned blue and orange with fully rounded ends, and the panel got large rounded corners. Variables you did not set stay as in the light theme.

Tweaking a built-in theme

If you like a built-in theme but need a different main color, give its name and only the variables you change:

@plugin "daisyui/theme" {
  name: "light";
  default: true;
  --color-primary: #2563eb;
}

The light theme stays the same, only primary changes.

Common mistake

Setting --color-primary but forgetting --color-primary-content. The button text then comes from the old theme and may blend into the new background — say, light text on a pale yellow button. Whenever you change a color, set its -content pair too.