角度:Bootstrap 4 Dark&灯光模式开关 [英] Angular: Bootstrap 4 dark & light mode switch

问题描述

在我的bootstrap 4(scss)角度应用程序中实现暗模式和亮模式的最佳方法是什么? Angular cli编译了scss文件，因此为每个主题包括一个单独的css文件的旧方法对我来说并不有吸引力.如何??设置body类并在我的所有scss文件中使用.dark/.light?使用mixins?使用引导颜色主题?

What is the best way to implement a dark mode and light mode throughout my bootstrap 4 (scss) angular application? Angular cli compiles the scss files, so the old way of including a separate css file for each theme does not appeal to me. How?? Set a body class and use .dark / .light throughout my scss files? Use mixins? Use bootstrap color themes?

欢迎任何想法！

推荐答案

不知道这是否是最好的方法，但这就是我所做的.

Don't know if this was the best way, but this is what i did.

我在最上面的组件上使用了[ngClass] ="setPrimary()

I used [ngClass]="setPrimary() on the top most component

此setPrimary函数检查一天中的时间( https://api.sunrise-sunset.org )，然后根据夜晚或日出/日落或白天的时间，将课程设置在最重要的位置

this setPrimary function checked the time of the day (https://api.sunrise-sunset.org) and depending upon the hour of night or sunrise/sunset or day it would set the class on this top most component

在scss文件中:我为白天，夜晚，日出/日落开发了3种不同的颜色集

inside the scss file: i developed 3 different color sets for day, night, sunrise/sunset

在页面加载时，默认值为day，但是一旦setPrimary()放置了适当的类，其余样式就会沿用它

on page load, default value was day, but as soon as setPrimary() would place the appropriate class, the rest of the styling will follow it

这篇关于角度:Bootstrap 4 Dark&灯光模式开关的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！