最近，我发布了一个很小的项目。虽然这个项目很小，但我还是想在项目中加入黑暗模式和明亮模式，这是我从未挑战过的事情。
我使用的技术栈是 React 和 Gatsby，这样的组合有很多选项供我选择。正当我准备大展身手的时候，偶然间发现了一个极简且强大的库：use-dark-mode。十分钟后，我成功地将黑暗模式集成到了我的项目中。
而我作为一名 Angular 开发人员，突然想到若是 Angular 的生态系统中也存在这种库该有多好。于是，我创建了 angular-dark-mode。
我在 stackblitz 中提供了最终代码和演示。
首先，创建一个可以运行的 Angular 项目：
接下来，添加 angular-dark-mode：
或者，如果你更喜欢 yarn 的话：
最后，将 angular-dark-mode.js 文件添加到 angular.json 脚本部分：
更多关于 angular-dark-mode.js 的信息，请各位看官往下滑。
Show Me the Code
angular-dark-mode 附带一些可配置选项：
我们需要添加一些样式来实现黑暗模式和明亮模式：
我们希望基于上面的默认配置来设置样式，因此我们设置了黑暗和明亮两种模式的 CSS 类的样式。
另外，我们希望能在两种模式之间有一个很好的过渡，但又想跳过初始过渡，所以我们决定在预加载阶段之后设置。
转到 app.component.ts，插入 DarkModeService 并添加一些文本以及切换模式的按钮：
这样就 OK 了，运行该应用程序时，它会根据你的设备的模式自动打开相应的模式。此外，还可以通过按钮进行黑暗模式/明亮模式两种模式的切换。来看看效果：
angular-dark-mode.js
该文件有两个用途：
1、持久化：持久化是将程序数据在持久状态和瞬时状态间转换的机制。通俗的讲，就是瞬时数据（比如内存中的数据）持久化为持久数据（比如持久化至数据库中，能够长久保存）。angular-dark-mode 可以将你的偏好保存在 localStorage 中。当应用程序加载时，angular-dark-mode 可以从 localStorage 中检索最新的值，或返回到其首选项。
2、预加载：如上文所见，当我们想跳过初始过渡时，preloadingClass 选项可以说非常方便了，我在这个文件中设置了 preloadingClass，并在应用程序初始化后删除它。
注意：库中附带的 angular-dark-mode.js 文件假定你使用的是默认选项。如果你在使用时覆盖了该文件，一定要把 angular-dark-mode.js 文件复制到本地，修改完成后，在 angular.json 中加载本地文件而不是库文件。
原文链接
https://medium.com/better-programming/turn-off-the-lights-with-angular-dark-mode-194241f491ae
Java 避坑指南：Java 高手笔记代码篇
本迷你书包括 86 个业务开发中常见踩坑点。每一个知识点都相当的实用，是程序员业务开发中的必备避坑指南...
评论