如何用 Angular 实现深色模式
最近，我发布了一个很小的项目。虽然这个项目很小，但我还是想在项目中加入黑暗模式和明亮模式，这是我从未挑战过的事情。
我使用的技术栈是 React 和 Gatsby，这样的组合有很多选项供我选择。正当我准备大展身手的时候，偶然间发现了一个极简且强大的库：use-dark-mode。十分钟后，我成功地将黑暗模式集成到了我的项目中。
而我作为一名 Angular 开发人员，突然想到若是 Angular 的生态系统中也存在这种库该有多好。于是，我创建了 angular-dark-mode。
我在 stackblitz 中提供了最终代码和演示。
首先，创建一个可以运行的 Angular 项目：
npx @angular/cli new dark-mode-playground --minimal接下来，添加 angular-dark-mode：
npm i angular-dark-mode 或者，如果你更喜欢 yarn 的话：
yarn add angular-dark-mode最后，将 angular-dark-mode.js 文件添加到 angular.json 脚本部分：
{
"scripts": [
"./node_modules/angular-dark-mode/angular-dark-mode.js"
]
}更多关于 angular-dark-mode.js 的信息，请各位看官往下滑。
Show Me the Code
angular-dark-mode 附带一些可配置选项：
我们需要添加一些样式来实现黑暗模式和明亮模式：
body {
margin: 0;
}
body:not(.dark-mode-preloading) {
transition: all 0.3s linear;
}
body.dark-mode {
background-color: #2f3542;
color: #f1f2f6;
}
body.light-mode {
background-color: #f1f2f6;
color: #2f3542;
}我们希望基于上面的默认配置来设置样式，因此我们设置了黑暗和明亮两种模式的 CSS 类的样式。 另外，我们希望能在两种模式之间有一个很好的过渡，但又想跳过初始过渡，所以我们决定在预加载阶段之后设置。
转到 app.component.ts，插入 DarkModeService 并添加一些文本以及切换模式的按钮：
import { Component } from "@angular/core";
import { DarkModeService } from "angular-dark-mode";
import { Observable } from "rxjs";
@Component({
selector: "app-root",
template: `
<h1>angular-dark-mode is Awesome!</h1>
<p>Toggle the checkbox to see magic happens!</p>
<div>
<input
type="checkbox"
[checked]="darkMode$ | async"
(change)="onToggle()"
/>
</div>
`,
styles: [
`
:host {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
`,
],
})
export class AppComponent {
darkMode$: Observable<boolean> = this.darkModeService.darkMode$;
constructor(private darkModeService: DarkModeService) {}
onToggle(): void {
this.darkModeService.toggle();
}
}这样就 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
- 发表于:
- 本文为 InfoQ 中文站特供稿件
- 首发地址：https://www.infoq.cn/article/sHw7mAuUb38qHKEtP5Rk
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
