Angular:Bootstrap 4 明暗模式切换

Mca*_*nic 7 javascript sass bootstrap-4 angular

在整个 bootstrap 4 (scss) angular 应用程序中实现暗模式和亮模式的最佳方法是什么?Angular cli 编译 scss 文件,因此为每个主题包含单独的 css 文件的旧方法对我没有吸引力。如何??设置主体类并在整个 scss 文件中使用 .dark / .light?使用混合?使用引导颜色主题?

欢迎任何想法!

Akb*_*bal 3

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

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

这个 setPrimary 函数检查一天中的时间(https://api.sunrise-sunset.org),并根据夜间或日出/日落或白天的时间,它将在最顶层的组件上设置类

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

页面加载时,默认值为日,但一旦 setPrimary() 放置适当的类,其余样式将遵循它