I have a theme component with different colors for dark and light themes. I have been using dark-light-choose function to choose between the light and dark colors, but it is no longer working after the color variable update. Specifically dark-light-choose always returns light color for the theme component, even if a dark color scheme has been selected. Here’s a short example: if I put $d-color: dark-light-choose(#fff, #000); :root { --d-color: #{$d-color}; } in color definitions and .d-header { background: var(--d-color); } in common, I will always end up with a white header regardless of the color scheme in use. Any ideas why this is not working?

Any advice here @awesomerobot ?

hmm yes, I just tried and ran into the same problem… it looks like the component is only seeing the default color scheme even if the parent theme is switched to a different scheme. I haven’t used the color definitions stylesheet in a component yet… @pmusaraj did that ever work, or did something regress?

Indeed, it was a regression, thanks for the report @Lumi. It should be fixed now via DEV: More refactoring of SCSS importers (#12143) · discourse/discourse@5604ce7 · GitHub

Choosing between dark and light colors in a theme component

Product Support

pmusaraj (Penar Musaraj) February 18, 2021, 10:39pm 4

This looks like a regression, I will take a look.

Topic		Replies	Views
Why might dark-light-choose() not work? Product Support	3	1899	December 6, 2020
Light Theme broke with update Product Support	18	2468	December 28, 2022
Color definitions for more than light/dark color schemes Product Support	1	697	January 6, 2024
Colour Scheme - can't select light theme Bug	5	962	December 1, 2017
Switching themes not actually changing colors Product Support	2	679	September 5, 2020

Choosing between dark and light colors in a theme component

Related topics