Choosing between dark and light colors in a theme component

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?

1 Like

Any advice here @awesomerobot ?

1 Like

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?

2 Likes

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

2 Likes

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

2 Likes

This topic was automatically closed after 6 days. New replies are no longer allowed.