Color palette problem

UX
,
1

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

t1
t1319×201 6.5 KB

2 Likes
3

update: still having the same problem…can someone help?

4

Hello, welcome!
Do you mean you added custom CSS to change the color? Can you share your modifications?

5

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

6

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
7

What do you have specified in your Default dark mode color scheme ID site setting? It should be mint-dark.

8

it is, but it doesn’t work. letters are still invisible

Başlıksız
Başlıksız1170×522 16.9 KB

9

From what I see, the core d-menu CSS overwrites the theme button styles because it has more specificity:

An image of a computer screen displaying an Integrated Development Environment (IDE) with a user creating an interface using HTML and CSS code. (Captioned by AI)
An image of a computer screen displaying an Integrated Development Environment (IDE) with a user creating an interface using HTML and CSS code. (Captioned by AI)1996×606 81.5 KB

The image shows a CSS rule editor interface, highlighting a code snippet that applies styles to certain HTML elements. (Captioned by AI)
The image shows a CSS rule editor interface, highlighting a code snippet that applies styles to certain HTML elements. (Captioned by AI)1115×455 24.9 KB

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:

image
image280×189 7.29 KB

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
10

oh it’s a bit complicated let me process it :smiley:

2 Likes
11

This looks like an issue in core for the design team, so I’ve moved this to the UX category.

4 Likes
12

thanks a lot!

3 Likes
13

Update: the button is dissapered. UX team working on it? :smiley:

1 Like