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.

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

Como alterar a cor CSS para uma única paleta de temas?

Suporte ao Produto

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

Isso foi corrigido aqui: Why might dark-light-choose() not work? - #2 by awesomerobot

Tópico		Respostas	Vistas
Why might dark-light-choose() not work? Product Support	3	1888	6 Dezembro , 2020
Different CSS changes for different color schemes Development css	3	857	17 Outubro , 2023
Whats the easiest way to make a light theme using a dark theme that has heavy customizaiton Development	3	155	20 Fevereiro , 2026
Light theme palette previews as dark / breaks personal palette options Bug	3	219	25 Julho , 2025
Color palette not affecting website Product Support	1	149	24 Março , 2025

Como alterar a cor CSS para uma única paleta de temas?

Related topics