Default DaisyUI Color Themes: Complete List and Usage Guide

DaisyUI provides 35 built-in color themes—including light, dark, cupcake, cyberpunk, and dracula—that are exported from 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, 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, while dark is defined in 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 file handles the dynamic loading of themes and applies the --default flag logic. Meanwhile, 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 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:

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

Configuring Themes in Tailwind

Control which themes are available and set the default in your tailwind.config.js:

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:

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.
• The loading logic is handled by themePlugin.js and registered through packages/daisyui/index.js.
• Activate themes using the data-theme HTML attribute or configure them in 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 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 and 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}