angular :host_如何用 Angular 实现深色模式

最新推荐文章于 2023-12-29 13:00:00 发布

weixin_39792751

最新推荐文章于 2023-12-29 13:00:00 发布

阅读量108

点赞数

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

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

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

而我作为一名 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 附带一些可配置选项：

我们需要添加一些样式来实现黑暗模式和明亮模式：

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!h1>`

Toggle the checkbox to see magic happens!p>

<inputtype="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 = this.darkModeService.darkMode$;
  constructor(private darkModeService: DarkModeService) {}
  onToggle(): void {this.darkModeService.toggle();
  }
}

这样就 OK 了，运行该应用程序时，它会根据你的设备的模式自动打开相应的模式。此外，还可以通过按钮进行黑暗模式 / 明亮模式两种模式的切换。来看看效果：

angular-dark-mode.js

该文件有两个用途：

持久化：持久化是将程序数据在持久状态和瞬时状态间转换的机制。通俗的讲，就是瞬时数据(比如内存中的数据)持久化为持久数据(比如持久化至数据库中，能够长久保存)。angular-dark-mode 可以将你的偏好保存在 localStorage 中。当应用程序加载时，angular-dark-mode 可以从 localStorage 中检索最新的值，或返回到其首选项。

预加载：如上文所见，当我们想跳过初始过渡时，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