Button background not consistent between themes. Dying over here

[sampler12]

What I’m trying to do

I have a little CSS file that basically changes the background color of the icons depending on whether i’m using the light or the dark theme. Well, at least that’s what it’s supposed to do.

This is what it’s supposed to look like. But as soon as i change the theme to dark:

Notice how the background is white instead of black?

I can’t for the life of me figure out how to fix this, it’s driving me insane. This is what my CSS file looks like

.theme-dark .workspace-tab-header-inner, .clickable-icon{
    background-color: black;
    opacity: 0.8;
}

.theme-dark .view-header-breadcrumb, .view-header-title{
    background-color: black;
    opacity: 0.8;
    border-radius: 3px;
}

.theme-dark .workspace-tab-header-inner-title{
    color:white;
}; //<<<<<

.theme-light .workspace-tab-header-inner, .clickable-icon{
    background-color: white;
    opacity: 0.6;
}

.theme-light .view-header-breadcrumb, .view-header-title{
    background-color: white;
    border-radius: 3px;
}

.theme-light .workspace-tab-header-inner-title{
    color:black;
}

Things I have tried

So far the only thing i’ve figured out changes anything, is inserting a colon right on that arrow. But i’m actually going insane from not knowing how to fix this. Anyone got any ideas?

[ariehen]

Just a quick look and I don’t know the theme you are using to properly check, but the commas in your rules are causing a problem. Here:

.theme-light .workspace-tab-header-inner, .clickable-icon{
    background-color: white;
}

applies a white background to .theme-light .workspace-tab-header-inner AND ALL .clickable-icon instances (light and dark themes).

This covers more areas/icons than you probably want, but hopefully helps a bit:

.theme-dark .clickable-icon {
    background-color: blue;
    opacity: 0.8; }

.theme-dark .view-header-title {
    background-color: blue;
    opacity: 0.8;
    border-radius: 3px; }

.theme-dark .workspace-tab-header-inner-title {
    color: white; } 

.theme-light .clickable-icon { 
    background-color: orange;
    opacity: 0.6; }

.theme-light .view-header-title {
    background-color: orange;
    border-radius: 3px; }

.theme-light .workspace-tab-header-inner-title {
    color: black; }

[sampler12]

Thank you so much for the help! I’m kind of a newbie in CSS as well so this completely flew over my head!

[ariehen]

Yeah, CSS is unforgiving. Have fun, but take a step back for a few minutes if you hit a wall. I’ve had to do that plenty. Ha.

Sometimes you’d want to use a comma; for example here is setting a font for editing (left two selectors) and reading views (right selector):

.markdown-source-view.mod-cm6 .cm-scroller, .markdown-preview-view {
  font-family: 'JetBrains Mono'; 
}

but in your case, the last , .clickable-icon { background-color: white; } part was cancelling out anything to do with icon colors above it - probably why the semi-colon “fixed” it - anything under the semi-colon was broken.