Alex_P
(Alex P.)
May 23, 2021, 10:49am
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
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
Alex_P
(Alex P.)
May 25, 2021, 5:21am
3
Yay, seems to work
A bit weird that the parameters are not in the same order as the function name.
$darkness
) {
@if dc-color-brightness($adjusted-color) <
dc-color-brightness($comparison-color)
{
@return scale-color($adjusted-color, $lightness: $lightness);
} @else {
@return scale-color($adjusted-color, $lightness: $darkness);
}
}
@function dark-light-choose($light-theme-result, $dark-theme-result) {
@if is-light-color-scheme() {
@return $light-theme-result;
} @else {
@return $dark-theme-result;
}
}
@function is-light-color-scheme() {
@if dc-color-brightness($primary) < dc-color-brightness($secondary) {
@return true;
So it needs to be dark-light-choose(#3b5998, $primary)
2 Likes