I am using the sunset theme of DaisyUI and want to modify the text color of the active class inside the menu item.
This is what I have tried -
Approach 1
daisyui: {
themes: [
{
sunset: {
...require("daisyui/src/theming/themes")["sunset"],
".menu:active": {
color: "#49C5B6", // Replace with your custom color
},
},
},
"sunset",
"forest",
"dark",
],
},
Approach 2
daisyui: {
themes: [
{
myTheme: {
extend: {
// Customize the text color for the .active class
".menu-item.active": {
color: "#49C5B6", // Replace with your custom color
},
},
},
},
"sunset",
"forest",
"dark",
],
},
If anyone has any idea about, let me know how to customize it.
We can look in the Daisy UI source code for the CSS of the active styling and see thus:
.menu li > *:not(ul):not(.menu-title):not(details):active,
.menu li > *:not(ul):not(.menu-title):not(details).active,
.menu li > details > summary:active {
@apply bg-neutral text-neutral-content [@media(hover:hover)]:bg-neutral [@media(hover:hover)]:text-neutral-content;
}
The main takeaway from this is that this rule for the .active
class has a specificity of 0 3 3
. Your rule attempts have specificities of 0 2 0
so they would not override the above CSS rule.
You can increase the specificity of your rule greater than or equal to 0 3 3
, like:
daisyui: {
themes: [
{
sunset: {
...require("daisyui/src/theming/themes")["sunset"],
".menu li > *:not(ul):not(.menu-title):not(details).active": {
color: "#49C5B6",
},
},
}
],
},
Here, I use the same selector to ensure the same behavior of the custom CSS is the same as Daisy's CSS.
See this working in this Tailwind Play.