Use color scheme color if dark scheme, otherwise use my color in theme

Development

AI-generated summary

Alex_P wants to use the primary color from the color scheme when in dark mode and a custom color otherwise. Since SCSS is not processed at runtime, awesomerobot suggests using CSS custom properties in common/color_definitions.scss. This involves declaring a variable with the dark-light-choose function, which automatically switches between the two colors based on the scheme. Alex_P confirms this solution works but notes the function parameters are in a different order than the function name.

1

I want to do something like this

.some-link {
  @if var(--scheme-type) == 'dark' {
    color: var(--primary);
  } @else {
    color: #3b5998;
}

but of course it is not possible because there is no if in CSS and SCSS is not processed at runtime.

And as far as I can see Discourse does not add any classes to indicate whether the dark scheme is active, and CSS does not allow custom properties in selectors.

Any ideas what could be the best workaround?

2

I think this is what you’re looking for:

So in color_definitions.scss you can do:

$my-theme-color: dark-light-choose($primary, red);

:root {
  --my-theme-color: #{$my-theme-color};
}

and then you’d use the new dark/light changing custom property in your theme:

body {
  color: var(--my-theme-color);
}
3

Yay, seems to work :yum:

A bit weird that the parameters are not in the same order as the function name.

So it needs to be dark-light-choose(#3b5998, $primary)