Angular: Bootstrap 4, переключатель темного и светлого режимов

Question

Каков наилучший способ реализации темного и светлого режимов в моем угловом приложении начальной загрузки 4 (scss)? Angular cli компилирует файлы scss, поэтому старый способ включения отдельного файла css для каждой темы мне не подходит. Как?? Установить класс тела и использовать .dark / .light в моих файлах scss? Использовать миксин? Использовать загрузочные цветовые темы?

Любые идеи приветствуются!

Answer 1

Мне не удалось решить эту проблему с помощью Angular CLI и Bootstrap 4 scss. Я попытался настроить проект для компиляции 2-х ленивых пакетов, что работает, но у меня не было двух файлов scss с dark.scss и light.scss, каждый из которых содержал одинаковые переменные с разными значениями, 1 приводил к темному пакету, один из которых приводил к затем световой пучок. В итоге я получил один источник scss, содержащий переменные и стили как для темного, так и для светлого, скомпилированный в 2 пакета с dark.scss и light.scss, содержащий переопределения css для каждого конкретного стиля. В любом случае, ребята, спасибо за предложения!

Answer 2

Не знаю, был ли это лучший способ, но я так и сделал.

Я использовал [ngClass] = "setPrimary () на самом верхнем компоненте

эта функция setPrimary проверяет время дня (https://api.sunrise -sunset.org ) и в зависимости от часа ночи, восхода / захода солнца или дня устанавливает класс для этого самого верхнего компонента.

внутри файла scss: я разработал 3 различных набора цветов для дня, ночи, восхода / заката солнца

при загрузке страницы, значением по умолчанию было день, но как только setPrimary () разместит соответствующий класс, остальная часть стиля будет следовать за ним