How to customize a theme in daisy-ui?
-
I want to customize a theme in daisyui. Is it possible to customize i.e. the dark theme (just fix one color, or add a further color-entry)?
-
Furthermore: is it possible to add a new color entry to your custom theme?
I.e. I tried the following without success:
daisyui: {
styled: true,
themes: [
"light", // first one will be the default theme
"dark",
{
mytheme: {
primary: "#793ef9",
"new-color": "#eff1ae",
"primary-focus": "#570df8",
},
},
"cupcake",
],
},
...but when I use the new color new-color
, in my css (theme("colors.new-color")
). I get following error:
(146:7) /home/armwur/code/booking-overview/src/index.css 'colors.new-color' does not exist in your theme config. 'colors' has the following valid keys: 'inherit', 'current', 'transparent', 'black', 'white', 'neutral', 'primary', 'primary-focus', 'primary-content', 'secondary', 'secondary-focus', 'secondary-content', 'accent', 'accent-focus', 'accent-content', 'neutral-focus', 'neutral-content', 'base-100', 'base-200', 'base-300', 'base-content', 'info', 'success', 'warning', 'error'
144 | }
145 | .fast-table tr:hover td {
> 146 | background-color: theme('colors.new-color');
| ^
147 | }
148 | .fast-table th, .fast-table td {
I need to add a custom color-entry. How is that possible?
To change a color in a default theme in DaisyUI
- Find the theme colors at: https://github.com/saadeghi/daisyui/blob/master/src/colors/themes.js
- Add the entire theme to tailwind.config.cjs, change whatever you want.
daisyui: {
themes: [
{'dark': {
"primary": "#793ef9",
"primary-focus": "#570df8",
"primary-content": "#ffffff",
"secondary": "#f000b8",
"secondary-focus": "#bd0091",
"secondary-content": "#ffffff",
"accent": "#37cdbe",
"accent-focus": "#2aa79b",
"accent-content": "#ffffff",
"neutral": "#2a2e37",
"neutral-focus": "#16181d",
"neutral-content": "#ffffff",
"base-100": "#3d4451",
"base-200": "#2a2e37",
"base-300": "#16181d",
"base-content": "#ebecf0",
"info": "#66c6ff",
"success": "#87d039",
"warning": "#e2d562",
"error": "#ff6f6f"
}},
'light',
]
}
I don't know how you would go about adding a new color to your theme though...