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
AI-generated summary
tenisforum is experiencing an issue with the dark/light mode toggle button on their website using the mint theme. The text on the buttons becomes invisible because the background and text colors are the same. tenisforum clarifies that they haven’t added any custom CSS. tobiaseigen suggests checking the Default dark mode color scheme ID setting, which tenisforum confirms is set correctly. Arkshine identifies that the core d-menu CSS might be overwriting the theme’s button styles due to higher specificity. Arkshine also provides a potential CSS solution. tenisforum updates that the button has disappeared and asks if the UX team is working on it. chapoi confirms that the issue was caused by the unnecessary btn-default class and has been fixed in a GitHub pull request.
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
Hello,
Sorry for the long wait here. The btn-default class is indeed not needed here and caused the issue.
Fixed by
1 Like
This topic was automatically closed after 4 days. New replies are no longer allowed.