How to change CSS color for a single theme palette?

[Nacho_Caballero]

I currently have a single theme with two palettes (one light, one dark). I’m 90% happy with the dark palette, but in some cases I’d like to make corrections.

For example, there isn’t enough contrast between the background and the foreground colors for whispers in the dark palette:

.whisper .topic-body .cooked {
    color: var(--primary-medium)
}

I know I can override the CSS, but if I change it to var(--primary-light) it also affects the light palette.

Is there a way to target a single palette or is the best practice to create two different themes, each with its own palette?

My problem with this second approach is that I’d have to start duplicating a lot of other customizations that have nothing to do with color.

[Johani (Joe)]

Sure, there’s a couple of SCSS functions that you can use to check if you’re on a light or dark color palette.

https://github.com/discourse/discourse/blob/a4356b99af0a7f4cd746b5d09960ab7635fe91a4/app/assets/stylesheets/common/foundation/variables.scss#L217-L227

You use them like this.

@if is-light-color-scheme() {
  // CSS for light color palette
  h1 {
    color: green;
  }
}

@if is-dark-color-scheme() {
  // CSS for dark color palette
  h1 {
    color: red;
  }
}

[Nacho_Caballero]

Thanks for pointing that out, @Johani. It looks like the dark-light-choose($light, $dark) function does exactly what I want, but my problem now is that it’s not detecting the change of palette.

My only active theme is called “Nacho” and it has two palettes: “Clara” (Light) and “Oscura” (Dark):

I’ve personalized it with this CSS:

$dark-theme-ins: #4da06d;
$light-theme-ins: #acf2bd;
.modal.history-modal {
    ins {
        background: dark-light-choose($light-theme-ins, $dark-theme-ins);
    }
}

This works with the light palette:

But it doesn’t work with the dark palette:

If I change the CSS to this, it works:

.modal.history-modal {
    ins {
        background: $dark-theme-ins;
    }
}

So it looks like the change to the dark palette is not being detected. I can see that is-light-color-scheme looks at the brightness of $primary and $secondary. Here is my dark palette:

And the bright palette:

I’m all out of ideas.

[Nacho_Caballero]

This was fixed here: Why might dark-light-choose() not work?