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

كيفية تغيير لون CSS لسمة لوحة ألوان واحدة؟

دعم المنتج

Nacho_Caballero (Nacho Caballero) 5 ديسمبر 2020، 11:33ص 4

تم إصلاح ذلك هنا: Why might dark-light-choose() not work? - #2 by awesomerobot

الموضوع		الردود	مرات العرض
Why might dark-light-choose() not work? Product Support	3	1899	6 ديسمبر 2020
Different CSS changes for different color schemes Development css	3	867	17 أكتوبر 2023
Whats the easiest way to make a light theme using a dark theme that has heavy customizaiton Development	3	160	20 فبراير 2026
Light theme palette previews as dark / breaks personal palette options Bug	3	225	25 يوليو 2025
Color palette not affecting website Product Support	1	155	24 مارس 2025

كيفية تغيير لون CSS لسمة لوحة ألوان واحدة؟

الموضوعات ذات الصلة