# daisyUI Themes: End the Color Dilemma with 35 Palettes
daisyUI’s themes are more than just “dark mode support.”
**They provide 35 pre‑designed palettes (themes) that are ready for product‑level color combinations** and let you apply a single palette consistently across your entire app.
> This article assumes the installation is complete. If you need to install first, check the official guide:
---
## The Core of Themes: “Don’t hard‑code colors” {#sec-648a5757ecf6}
This is the most common point of confusion for beginners.
| Wrong approach | Result |
|----------------|--------|
| Using Tailwind classes like `bg-white`, `text-slate-900`, `bg-blue-600` to set colors directly | The element keeps its fixed color even when the theme changes |
In other words, to use a theme you must **avoid hard‑coding colors** and instead use daisyUI’s **token‑based color names**.
### ❌ Bad Example: Ignoring the Theme with Hard‑coded Colors {#sec-0b5438bac864}
```html
```
### ✅ Good Example: Using daisyUI Tokens to Conform to the Theme {#sec-e1146fcf48a6}
```html
```
The key is not *what color* but *what role* the element plays.
- `bg-base-100`: the default background for screens/cards
- `text-base-content`: the default text color
- `btn-primary`: the primary call‑to‑action for the product
The theme swaps colors based on these roles.
---
## So, What Should You Use? {#sec-7cfab9901bed}
To use daisyUI themes effectively, habitually use one (or both) of the following:
| Usage | Example |
|-------|---------|
| **daisyUI component classes** | `btn`, `btn-primary`, `alert`, `badge`, `card`, `navbar`, `input`, … |
| **daisyUI color token classes (meaning‑based colors)** | Base background/text: `bg-base-100`, `bg-base-200`, `bg-base-300`, `text-base-content`
Point colors: `bg-primary`, `text-primary`, `bg-secondary`, `bg-accent`, `bg-neutral`
Status colors: `bg-info`, `bg-success`, `bg-warning`, `bg-error` (+ their `*-content` variants) |
For example, when creating a warning banner, don’t hard‑code a color—express the role instead.
```html
Payment information is missing.
```
---
## Applying a Theme: Change the Whole App with One `data-theme` {#sec-4d6308cbf561}
Applying a theme is surprisingly simple.
```html
```
That single line (`data-theme`) swaps the entire set of color variables for the app.
---
## Themes Aren’t Just Global: Section‑level Application {#sec-e0f142807b1a}
In product development, you often need:
- “The main page is clean, but the event banner should stand out.”
- “The admin panel is dark, the user panel is light.”
daisyUI lets you attach `data-theme` to any DOM element, changing only that region. Nesting is unrestricted.
```html
Whole app is dark
This section is always light
This span is retro
```
This feature is often used more than a simple theme toggle.
---
## Theme Management: Keep Only the Needed Themes Active {#sec-ab5d0648dae0}
Once installed, you control which themes are active in the `@plugin "daisyui" { ... }` block.
```css
@import "tailwindcss";
@plugin "daisyui" {
themes: light --default, dark --prefersdark, cupcake;
}
```
- `themes` is a comma‑separated list.
- `--default` marks the default theme.
- `--prefersdark` applies when the OS prefers dark mode (`prefers-color-scheme: dark`).
If you want to enable everything, you can do:
```css
@plugin "daisyui" {
themes: all;
}
```
In practice, it’s easier to enable only what you need.
---
## The Strategic Edge: Treat Theme Selection as Product Strategy, Not Just Design {#sec-612655295e82}
Treating the 35 themes as mere “pretty skins” misses their full value. I use them as follows:
| Stage | Usage |
|-------|-------|
| **MVP** | Keep several themes as brand candidates and quickly validate which fits the UI/content.
| **Production** | Because colors aren’t hard‑coded, a brand refresh or seasonal event can be handled by swapping themes.
| **Team Collaboration** | Even without a designer, consistency is maintained by following role‑based tokens.
The core idea is simple:
> **Breaking the habit of hard‑coding colors turns themes into a rapid app‑wide upgrade tool.**
---
## When Do You Need a Custom Theme? {#sec-67726d664b47}
In most cases, the default 35 themes suffice. They’re already polished, so you can usually pick one and make a few tweaks.
However, you might consider overriding when:
- **Your brand color is well defined**: If your company’s primary color is fixed, you can start with a base theme and then override `primary`, `secondary`, etc., rather than creating a brand‑new theme from scratch. This keeps core interactions (buttons, links, CTAs) in brand colors while preserving the balanced tone of the base theme.
The next post will dive into how to override `primary` and `secondary` in code.
---
## Teaser for the Next Post {#sec-b349bf2c99ab}
Next time, we’ll cover:
- Practical patterns for keeping themes intact while tweaking components.
- How to customize themes.
- A cheat sheet of daisyUI color variables and classes.
See you soon!