Pourquoi dark-light-choose() pourrait ne pas fonctionner ?

Soutien
1

J’essaie d’utiliser la fonction dark-light-choose($light, $dark) dans mon CSS personnalisé, mais elle renvoie toujours $light, même lorsque je change la palette de claire (Clara) à sombre (Oscura) :

image
image1380×594 39 KB

Je donne plus de détails sur ma configuration ici :

Jusqu’à présent, j’ai vérifié à deux reprises :

  • que la couleur principale de mon thème sombre a une luminosité supérieure à celle de la couleur secondaire.
  • que j’utilise les arguments de la fonction dans le bon ordre.

Je ne sais pas comment déboguer ce problème. Cela pourrait-il être un problème lié à mon thème ? Y a-t-il une autre variable que je devrais prendre en compte ?

2

Je pense que, en raison de la manière dont le SCSS est compilé, les définitions personnalisées pour les thèmes sombre/clair doivent être ajoutées dans color_definitions.scss au sein d’un thème et ne fonctionneront pas dans d’autres fichiers SCSS.

Screen Shot 2020-12-04 at 9.54.13 PM
Screen Shot 2020-12-04 at 9.54.13 PM936×138 14.1 KB

color_definitions.scss se trouve haut dans la cascade (avant la plupart des styles par défaut), vous ne voulez donc pas y ajouter la partie .modal.history-modal ins. À la place, vous pouvez simplement ajouter la définition de la couleur elle-même…

$dark-theme-ins: #acf2bd;
$light-theme-ins: #4da06d;

$ins: dark-light-choose($light-theme-ins, $dark-theme-ins);

:root {
  --custom-ins: #{$ins};
}

Ensuite, dans common ou n’importe quel autre fichier de votre thème, vous pouvez faire :

.modal.history-modal {
    ins {
        background: var(--custom-ins);
    }
}
3

Merci beaucoup, Kris. Tu m’as sauvé ! Ça fonctionne parfaitement :tada:

Je m’amuse un peu avec et la seule chose que je ne comprends pas, c’est pourquoi l’interpolation de variable est requise pour les valeurs de couleur. Par exemple, ceci ne fonctionne pas sans interpolation :

$ins: #7f7e7e;
:root {
  --custom-ins: $ins;
}

Mais ceci fonctionne :

$ins: #7f7e7e;
:root {
  --custom-ins: #{$ins};
}

Les deux versions fonctionnent si $ins est assigné à une variable (par exemple : $ins: $dark-theme-ins ).

Qu’est-ce que je rate ?

4

C’est une exigence de SCSS lors de l’utilisation de propriétés CSS personnalisées. Plus de détails ici : Sass: Property Declarations