Y a-t-il un moyen de détecter l'utilisation du mode sombre ?

[ti0]

Existe-t-il un moyen dans un plugin / composant de thème de détecter si le thème actuel utilise le mode sombre ?
Alternativement, existe-t-il un moyen d’obtenir l’ID du thème actif ?
Ou devrions-nous créer différents composants de thème pour les thèmes clairs et les thèmes sombres ?

[Don]

@ti0

détecter si le thème actuel utilise le mode sombre

Bonjour,

Je pense qu’il existe plusieurs façons d’y parvenir.

Vous pouvez utiliser ceci :

No specific class for dark mode

Would this accomplish what you need? this would need to be added to color_definitions.scss @if #{schemeType()} == dark { body { background: red; } } @else { body { background: blue; } } A class does seem like it would be useful though, we can probably add one.

Ou ceci :

Why might dark-light-choose() not work?

I believe, due to the way the SCSS is compiled, custom dark/light definitions need to be added to color_definitions.scss within a theme and won’t work in other scss files. [Screen Shot 2020-12-04 at 9.54.13 PM] color_definitions.scss is high up in the cascade (before a lot of the default styles), so you don’t want to add the .modal.history-modal ins part there. Instead you can just add the color definition itself… $dark-theme-ins: #acf2bd; $light-theme-ins: #4da06d; $ins: dark-light-choose(…

---

J’adore la section Sujets Connexes de Discourse Ai , c’est tellement plus facile d’organiser et de trouver des sujets.

[Lilly (Lillian)]

personnellement, je préfère avoir des thèmes sombres et clairs séparés, plutôt que des modes sombre et clair d’un thème. je pense que certains utilisateurs trouvent cette option déroulante supplémentaire déroutante. je crée simplement des versions de thèmes claires et sombres et je les place dans le menu hamburger, mais je n’ai que 4 thèmes actifs (j’ai cependant créé des thèmes spéciaux à durée limitée, par exemple nous avions des thèmes clairs et sombres pour le Masters de golf pendant le tournoi). il suffit de garder une trace des palettes de couleurs.

[ti0]

J’ai résolu cela en ajoutant une seule ligne de code à la section Head de chaque thème en fonction des couleurs :

document.body.classList.add(“dark-theme”);

document.body.classList.add(“light-theme”);

Merci pour vos contributions @Don @Lilly