Angular:Bootstrap 4 黑暗 &灯光模式开关 [英] Angular: Bootstrap 4 dark & light mode switch

问题描述

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

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

页面加载时，默认值是天，但是只要 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

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