---
title: daisyUI themes
desc: How to use daisyUI themes?
---
daisyUI comes with {data.themes.length} built-in themes that instantly transform your website's entire look - a time-saver that lets you focus on building rather than deciding on colors.
You can also create your own custom themes or customize built-in themes.
You can manage themes by adding brackets in front of `@plugin "daisyui"` in your CSS file.
```diff:app.css
@import "tailwindcss";
- @plugin "daisyui";
+ @plugin "daisyui" {
+ themes: light --default, dark --prefersdark;
+ }
```
`themes` is a comma-separated list of theme names you want to enable.
You can set `--default` flag for a theme to make it the default theme.
You can also set `--prefersdark` flag for a theme to make it the default theme for dark mode (prefers-color-scheme: dark).
## Enable a built-in theme
By default, `light` and `dark` themes are enabled. Let's enable `cupcake` theme:
```css:app.css
@import "tailwindcss";
@plugin "daisyui" {
themes: light --default, dark --prefersdark, cupcake;
}
```
And set `cupcake` theme for the page:
```html:index.html
```
> :INFO:
##
## Enable all themes
Enable all {data.themes.length} built-in themes by setting `themes` to `all`:
```css:app.css
@import "tailwindcss";
@plugin "daisyui" {
themes: all;
}
```
## Disable a theme
To disable `dark` theme for example, remove it from the list. Now only light theme is included:
```diff:app.css
@import "tailwindcss";
@plugin "daisyui" {
- themes: light --default, dark --prefersdark;
+ themes: light --default;
}
```
If for some reason you want to disable all themes and remove all daisyUI colors, set `themes` to `false`:
```css:app.css
@import "tailwindcss";
@plugin "daisyui" {
themes: false;
}
```
##
```html:index.html
This div will always use light theme
This span will always use retro theme!
```
##
To add a new theme, use `@plugin "daisyui/theme" {}` in your CSS file, with the following structure:
```css:app.css
@import "tailwindcss";
@plugin "daisyui";
@plugin "daisyui/theme" {
name: "mytheme";
default: true; /* set as default */
prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */
color-scheme: light; /* color of browser-provided UI */
--color-base-100: oklch(98% 0.02 240);
--color-base-200: oklch(95% 0.03 240);
--color-base-300: oklch(92% 0.04 240);
--color-base-content: oklch(20% 0.05 240);
--color-primary: oklch(55% 0.3 240);
--color-primary-content: oklch(98% 0.01 240);
--color-secondary: oklch(70% 0.25 200);
--color-secondary-content: oklch(98% 0.01 200);
--color-accent: oklch(65% 0.25 160);
--color-accent-content: oklch(98% 0.01 160);
--color-neutral: oklch(50% 0.05 240);
--color-neutral-content: oklch(98% 0.01 240);
--color-info: oklch(70% 0.2 220);
--color-info-content: oklch(98% 0.01 220);
--color-success: oklch(65% 0.25 140);
--color-success-content: oklch(98% 0.01 140);
--color-warning: oklch(80% 0.25 80);
--color-warning-content: oklch(20% 0.05 80);
--color-error: oklch(65% 0.3 30);
--color-error-content: oklch(98% 0.01 30);
/* border radius */
--radius-selector: 1rem;
--radius-field: 0.25rem;
--radius-box: 0.5rem;
/* base sizes */
--size-selector: 0.25rem;
--size-field: 0.25rem;
/* border size */
--border: 1px;
/* effects */
--depth: 1;
--noise: 0;
}
```
##
To customize a built-in theme, you can use the same structure as adding a new theme, but with the same name as the built-in theme. For example, to customize the `light` theme:
```css:app.css
@import "tailwindcss";
@plugin "daisyui";
@plugin "daisyui/theme" {
name: "light";
default: true;
--color-primary: blue;
--color-secondary: teal;
}
```
All the other values will be inherited from the original theme.
##
```css:app.css
[data-theme="light"] {
.my-btn {
background-color: #1EA1F1;
border-color: #1EA1F1;
}
.my-btn:hover {
background-color: #1C96E1;
border-color: #1C96E1;
}
}
```
##
```css:app.css
@import "tailwindcss";
@plugin "daisyui" {
themes: winter --default, night --prefersdark;
}
@custom-variant dark (&:where([data-theme=night], [data-theme=night] *));
```
```html:index.html
I will have 10 padding on winter theme and 20 padding on night theme
```