Categories
程式開發

如何用Angular 實現深色模式


最近,我發布了一個很小的項目。雖然這個項目很小,但我還是想在項目中加入黑暗模式和明亮模式,這是我從未挑戰過的事情。

我使用的技術棧是React 和Gatsby,這樣的組合有很多選項供我選擇。正當我準備大展身手的時候,偶然間發現了一個極簡且強大的庫:use-dark-mode。十分鐘後,我成功地將黑暗模式集成到了我的項目中。

如何用Angular 實現深色模式 1

而我作為一名Angular 開發人員,突然想到若是Angular 的生態系統中也存在這種庫該有多好。於是,我創建了angular-dark-mode。

我在 突擊 中提供了最終代碼和演示。

首先,創建一個可以運行的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 的信息,請各位看官往下滑。

給我看代碼

angular-dark-mode 附帶一些可配置選項:

如何用Angular 實現深色模式 2

我們需要添加一些樣式來實現黑暗模式和明亮模式:

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: `
    

angular-dark-mode is Awesome!

   

Toggle the checkbox to see magic happens!

   
         
  `,   styles: [     `       :host {         min-height: 100vh;         display: flex;         flex-direction: column;         justify-content: center;         align-items: center;       }     `,   ], }) export class AppComponent {   darkMode$: Observable = this.darkModeService.darkMode$;   constructor(private darkModeService: DarkModeService) {}   onToggle(): void {     this.darkModeService.toggle();   } }

這樣就OK 了,運行該應用程序時,它會根據你的設備的模式自動打開相應的模式。此外,還可以通過按鈕進行黑暗模式/明亮模式兩種模式的切換。來看看效果:

如何用Angular 實現深色模式 3

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