Alex_P
(Alex P.)
23 Mayo, 2021 10:49
1
Quiero hacer algo como esto
.some-link {
@if var(--scheme-type) == 'dark' {
color: var(--primary);
} @else {
color: #3b5998;
}
pero, por supuesto, no es posible porque no existe if en CSS y SCSS no se procesa en tiempo de ejecución.
Y, por lo que puedo ver, Discourse no agrega ninguna clase para indicar si el esquema oscuro está activo, y CSS no permite el uso de propiedades personalizadas en los selectores.
¿Alguna idea sobre cuál podría ser la mejor solución alternativa?
Creo que esto es lo que estás buscando:
Así que en color_definitions.scss puedes hacer:
$my-theme-color: dark-light-choose($primary, red);
:root {
--my-theme-color: #{$my-theme-color};
}
Y luego usarías la nueva propiedad personalizada que cambia entre modo oscuro/claro en tu tema:
body {
color: var(--my-theme-color);
}
Alex_P
(Alex P.)
25 Mayo, 2021 05:21
3
¡Genial, parece que funciona !
Un poco extraño que los parámetros no estén en el mismo orden que el nombre de la función.
$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;
Así que debe ser dark-light-choose(#3b5998, $primary).