如何用 Angular 实现深色模式

如何用 Angular 实现深色模式
作者 | Tal Ohana
策划 | 李俊辰
轻松将深色模式集成到你的应用程序中。

最近,我发布了一个很小的项目。虽然这个项目很小,但我还是想在项目中加入黑暗模式和明亮模式,这是我从未挑战过的事情。

我使用的技术栈是 React 和 Gatsby,这样的组合有很多选项供我选择。正当我准备大展身手的时候,偶然间发现了一个极简且强大的库:use-dark-mode。十分钟后,我成功地将黑暗模式集成到了我的项目中。

如何用 Angular 实现深色模式

而我作为一名 Angular 开发人员,突然想到若是 Angular 的生态系统中也存在这种库该有多好。于是,我创建了 angular-dark-mode。

我在 stackblitz 中提供了最终代码和演示:

https://stackblitz.com/edit/angular-dark-mode-blog-example?file=src%2Fapp%2Fapp.component.ts

首先,创建一个可以运行的 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 附带一些可配置选项:

如何用 Angular 实现深色模式

我们需要添加一些样式来实现黑暗模式和明亮模式:
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 实现深色模式

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

如何用 Angular 实现深色模式

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关