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

dev
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?

1 Like
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);
}
4 Likes
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)

2 Likes