daisyUI themes
How to use daisyUI themes?
daisyUI comes with a number of themes, which you can use with no extra effort. Each theme defines a set of colors which will be used on all daisyUI elements. To use a theme, add its name in tailwind.config.js and activate it by adding data-theme attribute to HTML tag:module.exports = {
//...
daisyui: {
themes: ["light", "dark", "cupcake"],
},
}<html data-theme="cupcake"></html>I suggest using theme-change, so you can switch themes and save selected theme in local storage. List of themes
Try them:light
A
A
A
A
dark
A
A
A
A
cupcake
A
A
A
A
bumblebee
A
A
A
A
emerald
A
A
A
A
corporate
A
A
A
A
synthwave
A
A
A
A
retro
A
A
A
A
cyberpunk
A
A
A
A
valentine
A
A
A
A
halloween
A
A
A
A
garden
A
A
A
A
forest
A
A
A
A
aqua
A
A
A
A
lofi
A
A
A
A
pastel
A
A
A
A
fantasy
A
A
A
A
wireframe
A
A
A
A
black
A
A
A
A
luxury
A
A
A
A
dracula
A
A
A
A
cmyk
A
A
A
A
autumn
A
A
A
A
business
A
A
A
A
acid
A
A
A
A
lemonade
A
A
A
A
night
A
A
A
A
coffee
A
A
A
A
winter
A
A
A
A
dim
A
A
A
A
nord
A
A
A
A
sunset
A
A
A
A
module.exports = {
//...
daisyui: {
themes: [
"light",
"dark",
"cupcake",
"bumblebee",
"emerald",
"corporate",
"synthwave",
"retro",
"cyberpunk",
"valentine",
"halloween",
"garden",
"forest",
"aqua",
"lofi",
"pastel",
"fantasy",
"wireframe",
"black",
"luxury",
"dracula",
"cmyk",
"autumn",
"business",
"acid",
"lemonade",
"night",
"coffee",
"winter",
"dim",
"nord",
"sunset",
],
},
}light (or dark for dark mode) but you can change the default theme from tailwind.config.js How to remove unused themes?
You can include only the themes you want in your project. This will reduce the size of your CSS file. In the below examplecupcakewill be the default theme for light modedarkwill be the default theme for dark modecmykcan be applied on any HTML tag withdata-theme='cmyk'
module.exports = {
daisyui: {
themes: ["cupcake", "dark", "cmyk"],
},
}How to disable all themes?
If you only want the default light and dark themes, setthemes config to false. module.exports = {
//...
daisyui: {
themes: false,
},
}themes config to an empty array. module.exports = {
//...
daisyui: {
themes: [],
},
}How to use a theme only for a section of a page?
Adddata-theme='THEME_NAME' to any element and everything inside will have your theme. You can nest themes and there is no limit! You can force a section of your HTML to only use a specific theme. <html data-theme="dark">
<div data-theme="light">
This div will always use light theme
<span data-theme="retro">This span will always use retro theme!</span>
</div>
</html>How to add a new custom theme?
You can add a new theme fromtailwind.config.js file. In the below example, I added a new theme called mytheme and I'm also including dark and cupcake themes. - The first theme (
mytheme) will be the default theme. darktheme will be the default theme for dark mode.
primary button). You can also add optional color names to have full control over all colors.
module.exports = {
//...
daisyui: {
themes: [
{
mytheme: {
"primary": "#a991f7",
"secondary": "#f6d860",
"accent": "#37cdbe",
"neutral": "#3d4451",
"base-100": "#ffffff",
},
},
"dark",
"cupcake",
],
},
}CSS variables in daisyUI themes
There are a few optional CSS variables that you can use in daisyUI themes to customize design decisions for each theme:module.exports = {
//...
daisyui: {
themes: [
{
mytheme: {
"primary": "#a991f7",
"secondary": "#f6d860",
"accent": "#37cdbe",
"neutral": "#3d4451",
"base-100": "#ffffff",
"--rounded-box": "1rem", // border radius rounded-box utility class, used in card and other large boxes
"--rounded-btn": "0.5rem", // border radius rounded-btn utility class, used in buttons and similar element
"--rounded-badge": "1.9rem", // border radius rounded-badge utility class, used in badges and similar
"--animation-btn": "0.25s", // duration of animation when you click on button
"--animation-input": "0.2s", // duration of animation for inputs like checkbox, toggle, radio, etc
"--btn-focus-scale": "0.95", // scale transform of button when you focus on it
"--border-btn": "1px", // border width of buttons
"--tab-border": "1px", // border width of tabs
"--tab-radius": "0.5rem", // border radius of tabs
},
},
],
},
}Custom CSS for a daisyUI theme
You can apply custom style to a daisyUI themes using CSS:[data-theme="mytheme"] .btn {
border-width: 2px;
border-color: black;
}How to customize an existing theme?
In your tailwind.config.js, you can require an existing daisyUI theme and override some colors. In the below example, I require and spreadlight theme and change its primary and secondary colors: module.exports = {
//...
daisyui: {
themes: [
{
light: {
...require("daisyui/src/theming/themes")["light"],
primary: "blue",
secondary: "teal",
},
},
],
},
}How to add custom styles for a specific theme?
You can write custom style for your elements only for a specific theme. In this example, .btn-twitter class only will have this style on light theme.module.exports = {
//...
daisyui: {
themes: [
{
light: {
...require("daisyui/src/theming/themes")["light"],
".btn-twitter": {
"background-color": "#1EA1F1",
"border-color": "#1EA1F1",
},
".btn-twitter:hover": {
"background-color": "#1C96E1",
"border-color": "#1C96E1",
},
},
},
],
},
}How to apply Tailwind's 'dark:' selector for specific themes
daisyUI can be configured to use Tailwind'sdark: selector in your code. To achieve this, modify your tailwind.config.js file to include the darkMode parameter. Ensure that the dark: selector applies to the daisyUI theme you designate as dark. In the example below, we have 'winter' and 'night' themes. Since 'night' is the dark theme, we configure it as shown: module.exports = {
content: ['./src/**/*.{astro,html,svelte,vue,js,ts,jsx,tsx}'],
plugins: [require('daisyui')],
theme: { ... },
daisyui: {
themes: ['winter', 'night']
},
darkMode: ['selector', '[data-theme="night"]']
}Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development: Open Collective
