hello, I’m using mint theme on my website and having an issue about colors. there is dark/light mode button on the top, and whenever I change the color of background of the button, it also changing the button color so it makes the “dark/light” word invisible.
in the picture as you see it looks like emtpy but actually they are 3 different buttons and says “dark, light, auto” but background and text color is same so it’s invisible
2 Likes
update: still having the same problem…can someone help?
Hello, welcome!
Do you mean you added custom CSS to change the color? Can you share your modifications?
And also some recent chatter on this forum about the dark/light toggle has pointed out that for it to work you must have a light and dark color palette configured in your settings
hello, thanks! No I didn’t add anything extra, I’m using mint theme. Dark/light/auto buttons color and their background is same, this is why they look like invisible. For example, I’m changing the button color, it also affectting the background of the button
1 Like
What do you have specified in your Default dark mode color scheme ID site setting? It should be mint-dark.
From what I see, the core d-menu CSS overwrites the theme button styles because it has more specificity:
But that’s not necessarily the issue.
The Mint theme uses a specific style for default button (btn-default class).
And the selector menu dropdown item uses a button with btn-default.
I wonder if it’s necessary to specify that class in core code. It doesn’t seem to offer utility, but I could be wrong.
Without it:
Or, maybe the theme needs to support the core feature:
.interface-color-selector-content .btn-default {
color: var(--primary);
border: none;
transition: none;
text-transform: none;
.d-icon {
color: var(--primary-high);
}
}
3 Likes
oh it’s a bit complicated let me process it 
2 Likes
This looks like an issue in core for the design team, so I’ve moved this to the UX category.
4 Likes
thanks a lot!
3 Likes