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.

Sure, there’s a couple of SCSS functions that you can use to check if you’re on a light or dark color palette. app/assets/stylesheets/common/foundation/variables.scss a4356b99a @function is-light-color-scheme() { @if dc-color-brightness($primary) < dc-color-brightness($secondary) { @return true; } @else { @return false; } } @function is-dark-color-scheme() { @return not is-light-color-scheme(); } 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; } }

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): [image] 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: [image] [image] But it doesn’t work with the dark palette: [image] [image] If I change the CSS to this, it works: .modal.history-modal { ins { background: $dark-theme-ins; } } [image] 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: [image] And the bright palette: [image] I’m all out of ideas.

How to change CSS color for a single theme palette?

Product Support

Nacho_Caballero (Nacho Caballero) December 5, 2020, 11:33am 4

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

Topic		Replies	Views
Why might dark-light-choose() not work? Product Support	3	1898	December 6, 2020
Different CSS changes for different color schemes Development css	3	866	October 17, 2023
Whats the easiest way to make a light theme using a dark theme that has heavy customizaiton Development	3	159	February 20, 2026
Light theme palette previews as dark / breaks personal palette options Bug	3	223	July 25, 2025
Color palette not affecting website Product Support	1	153	March 24, 2025

How to change CSS color for a single theme palette?

Related topics