Commutateur de mode bootstrap 4 dark & light
Quel est le meilleur moyen d'implémenter un mode sombre et un mode clair dans mon application angulaire bootstrap 4 (scss)? Angular cli compile les fichiers scss. L'ancienne méthode consistant à inclure un fichier css distinct pour chaque thème ne m'intéresse pas. Comment?? Définir une classe de corps et utiliser .dark/.light dans tous mes fichiers scss? Utiliser des mixins? Utiliser des thèmes de couleur bootstrap? Toutes les idées sont les bienvenues!
Je ne sais pas si c'était la meilleure façon, mais c'est ce que j'ai fait.
J'ai utilisé [ngClass] = "setPrimary () sur le composant le plus haut
cette fonction setPrimary vérifie l'heure du jour (/ https://api.sunrise-sunset.org ) et, en fonction de l'heure de la nuit ou du lever/coucher du soleil ou du jour, elle définira la classe sur cet élément le plus haut
à l'intérieur du fichier scss: j'ai développé 3 jeux de couleurs différents pour le jour, la nuit, le lever/coucher du soleil
au chargement de la page, la valeur par défaut était le jour, mais dès que setPrimary () placerait la classe appropriée, le reste du style le suivra
Je n’ai pas pu résoudre ce problème avec Angular CLI et Bootstrap 4 scss. J'ai essayé de configurer le projet pour qu'il compile 2 bundles différés, ce qui fonctionne, mais je ne pouvais pas avoir 2 fichiers scss avec dark.scss et light.scss, chacun contenant les mêmes variables avec des valeurs différentes, 1 entraînant le regroupement sombre, l'un entraînant puis allumer le paquet. Je me suis retrouvé avec une source scss contenant des variables et des styles pour les couleurs sombre et clair, compilée en 2 paquets avec dark.scss et light.scss contenant des remplacements css pour chaque style spécifique. Merci quand même les gars pour les suggestions !