Alex_P
Mai 23, 2021, 10:49
1
Je souhaite réaliser quelque chose comme ceci
.some-link {
@if var(--scheme-type) == 'dark' {
color: var(--primary);
} @else {
color: #3b5998;
}
mais bien sûr, ce n’est pas possible car il n’y a pas de if en CSS et SCSS n’est pas traité à l’exécution.
À ma connaissance, Discourse n’ajoute aucune classe pour indiquer si le thème sombre est actif, et le CSS ne permet pas d’utiliser des propriétés personnalisées dans les sélecteurs.
Avez-vous des idées sur la meilleure solution de contournement possible ?
Je pense que c’est ce que vous recherchez :
Ainsi, dans color_definitions.scss, vous pouvez faire :
$my-theme-color: dark-light-choose($primary, red);
:root {
--my-theme-color: #{$my-theme-color};
}
Ensuite, vous utiliserez la nouvelle propriété personnalisée pour le changement sombre/clair dans votre thème :
body {
color: var(--my-theme-color);
}
Alex_P
Mai 25, 2021, 5:21
3
Yay, ça semble fonctionner
C’est un peu étrange que les paramètres ne soient pas dans le même ordre que le nom de la fonction.
$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;
Il faut donc utiliser dark-light-choose(#3b5998, $primary)
