最近，我發佈了一個很小的項目。雖然這個項目很小，但我還是想在項目中加入黑暗模式和明亮模式，這是我從未挑戰過的事情。
我使用的技術棧是 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