# Default DaisyUI Color Themes: Complete List and Usage Guide

> Explore the full list of 35 default DaisyUI color themes, including light, dark, cupcake, cyberpunk, and dracula. Get a complete usage guide for these versatile themes to enhance your projects.

- Repository: [Pouya Saadeghi/daisyui](https://github.com/saadeghi/daisyui)
- Tags: how-to-guide
- Published: 2026-07-10

---

**DaisyUI provides 35 built-in color themes—including light, dark, cupcake, cyberpunk, and dracula—that are exported from [`themeOrder.js`](https://github.com/saadeghi/daisyui/blob/main/themeOrder.js) and defined as individual CSS files in `packages/daisyui/src/themes/`.**

DaisyUI, the popular Tailwind CSS component library maintained by **saadeghi/daisyui**, ships with a comprehensive collection of pre-designed color themes. These **default DaisyUI color themes** allow developers to instantly transform the visual identity of their applications without writing custom CSS, with all theme definitions stored as individual CSS files in the source repository.

## Complete List of Default Themes

The library includes 35 distinct themes located in `packages/daisyui/src/themes/`. Each theme is implemented as a standalone CSS file containing CSS custom properties for colors, border-radius, and other design tokens.

The complete set of default themes includes:

- **acid** – Bright neon green and purple accents
- **aqua** – Cyan and blue ocean-inspired palette
- **autumn** – Warm orange and brown fall colors
- **abyss** – Deep ocean dark theme
- **black** – Pure AMOLED black background
- **bumblebee** – Yellow and black contrast
- **business** – Professional corporate blue-gray
- **caramellatte** – Warm coffee caramel tones
- **cmyk** – Print-inspired cyan, magenta, yellow, black
- **coffee** – Espresso and cream aesthetics
- **corporate** – Neutral blue business theme
- **cupcake** – Soft pink pastel design
- **cyberpunk** – Neon pink, yellow, and cyan futuristic
- **dark** – Standard dark mode with deep grays
- **dim** – Medium-contrast dark theme
- **dracula** – Purple and pink syntax-highlighting inspired
- **emerald** – Green nature-focused palette
- **fantasy** – Purple and gold luxury gaming aesthetic
- **forest** – Deep green woodland theme
- **garden** – Natural green and earth tones
- **halloween** – Orange and black spooky palette
- **lemonade** – Bright yellow citrus fresh
- **light** – Clean neutral white background
- **lofi** – Desaturated retro grayscale
- **luxury** – Gold and black premium aesthetic
- **night** – Midnight blue dark theme
- **nord** – Arctic blue-gray polar inspired
- **pastel** – Soft muted rainbow colors
- **retro** – Cream and brick red 90s style
- **silk** – Smooth cream and rose elegant
- **sunset** – Orange and purple dusk gradient feel
- **synthwave** – Neon purple and cyan 80s retro
- **valentine** – Pink and red romantic
- **winter** – Icy blue and white cold palette
- **wireframe** – Grayscale outline prototyping theme

## Theme Source Code Architecture

Understanding how DaisyUI organizes its themes helps when configuring or customizing your build.

### Theme Order Configuration

In [`packages/daisyui/functions/themeOrder.js`](https://github.com/saadeghi/daisyui/blob/main/packages/daisyui/functions/themeOrder.js), the library exports an ordered array containing all theme names. This array determines the sequence in which themes are processed and made available to the Tailwind plugin.

### Individual Theme Definitions

Each theme is implemented as a standalone CSS file within `packages/daisyui/src/themes/`. For example, the **cupcake** theme resides in [`cupcake.css`](https://github.com/saadeghi/daisyui/blob/main/cupcake.css), while **dark** is defined in [`dark.css`](https://github.com/saadeghi/daisyui/blob/main/dark.css). These files contain CSS custom properties (`--color-*`) that map to Tailwind's utility classes.

### Plugin Loading Logic

The [`packages/daisyui/functions/themePlugin.js`](https://github.com/saadeghi/daisyui/blob/main/packages/daisyui/functions/themePlugin.js) file handles the dynamic loading of themes and applies the `--default` flag logic. Meanwhile, [`packages/daisyui/index.js`](https://github.com/saadeghi/daisyui/blob/main/packages/daisyui/index.js) serves as the main entry point that registers the DaisyUI plugin with Tailwind CSS, importing the theme definitions and making them available through the Tailwind configuration API.

## How to Apply DaisyUI Themes

You can activate themes using HTML attributes or configure them in your Tailwind setup.

### Using the data-theme Attribute

Apply a theme globally by setting the `data-theme` attribute on your HTML element:

```html
<html data-theme="cupcake">
  <body class="bg-base-100 text-base-content">
    <button class="btn btn-primary">Primary Action</button>
  </body>
</html>

```

For dynamic switching, change the attribute value with JavaScript:

```javascript
document.documentElement.setAttribute('data-theme', 'dark');

```

### Configuring Themes in Tailwind

Control which themes are available and set the default in your [`tailwind.config.js`](https://github.com/saadeghi/daisyui/blob/main/tailwind.config.js):

```javascript
import { daisyui } from 'daisyui'

export default {
  plugins: [daisyui],
  daisyui: {
    themes: ['cupcake', 'dark', 'synthwave'],
    darkTheme: 'dark',
    base: true
  }
}

```

To specify a default theme explicitly, append `--default` to the theme name:

```javascript
daisyui: {
  themes: ['light', 'dark --default']
}

```

## Summary

- DaisyUI includes **35 built-in color themes** ranging from professional (corporate, business) to playful (cupcake, cyberpunk).
- Themes are defined in individual CSS files under `packages/daisyui/src/themes/` and exported via [`packages/daisyui/functions/themeOrder.js`](https://github.com/saadeghi/daisyui/blob/main/packages/daisyui/functions/themeOrder.js).
- The loading logic is handled by [`themePlugin.js`](https://github.com/saadeghi/daisyui/blob/main/themePlugin.js) and registered through [`packages/daisyui/index.js`](https://github.com/saadeghi/daisyui/blob/main/packages/daisyui/index.js).
- Activate themes using the `data-theme` HTML attribute or configure them in [`tailwind.config.js`](https://github.com/saadeghi/daisyui/blob/main/tailwind.config.js).
- Use the `--default` suffix in your configuration to set a specific theme as the automatic default.

## Frequently Asked Questions

### How many default themes does DaisyUI include?

DaisyUI includes **35 built-in themes** as of the latest version. These are maintained in the `packages/daisyui/src/themes/` directory and include options like light, dark, cupcake, cyberpunk, dracula, and nord.

### Can I use multiple themes in the same project?

Yes. You can configure multiple themes in your [`tailwind.config.js`](https://github.com/saadeghi/daisyui/blob/main/tailwind.config.js) themes array. Users can switch between them dynamically by changing the `data-theme` attribute on the HTML element, or you can apply different themes to specific components using the corresponding theme classes.

### What is the difference between the "dark" and "dim" themes?

Both are dark themes, but **dark** uses deeper blacks and higher contrast grays for AMOLED-friendly displays, while **dim** offers a softer, medium-contrast dark experience that reduces eye strain in low-light environments. Both are defined in [`dark.css`](https://github.com/saadeghi/daisyui/blob/main/dark.css) and [`dim.css`](https://github.com/saadeghi/daisyui/blob/main/dim.css) respectively within the themes directory.

### How do I set a custom default theme instead of "light"?

In your Tailwind configuration, append `--default` to your preferred theme name in the themes array: `themes: ['cupcake --default', 'dark']`. This forces DaisyUI to apply the cupcake theme automatically instead of the standard light theme, as processed by the logic in [`themePlugin.js`](https://github.com/saadeghi/daisyui/blob/main/themePlugin.js).