如何用 Angular 实现深色模式

2020 年 11 月 05 日

如何用 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


2020 年 11 月 05 日 09:59794

评论

发布
暂无评论
发现更多内容

作业-第八周

superman

EasyDL全新升级,文心(ERNIE)3项能力助力快速定制企业级NLP模型

百度大脑

人工智能 nlp 百度大脑

初识 - DDD-CQRS

半亩房顶

DDD CQRS

week 08作业

Safufu

第八周作业

Geek_a327d3

第八周作业

李白

第八周总结

李白

架构师训练营——第8周作业

jiangnanage

判断两单链表是否相交

石印掌纹

IntelliJ IDEA 2020.2正式发布,诸多亮点总有几款能助你提效

YourBatman

IDEA 新特性 IntelliJ IDEA

从 1.9 到 1.11,聊聊 PyFlink 的核心功能演进(附 Demo 代码)

Apache Flink

flink

HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第3章初识CSS

Geek_8dbdc1

CSS

一个文学青年的至暗时刻

半亩房顶

反思 就业

哪些资源容易造成性能瓶颈

彭阿三

架构师训练营week8作业

小高

Week08总结

熊威

Week8作业

丿淡忘

数据结构&网络通讯原理

石印掌纹

数据结构与算法、网络模型总结

2流程序员

第八周课程总结

考尔菲德

领域驱动设计 学习笔记

半亩房顶

DDD

架构师训练营作业

邵帅

作业:链表交叉点

考尔菲德

架构师训练营Week8作业总结

小高

week8 作业

a晖

HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型

Geek_8dbdc1

CSS

Week08作业

熊威

架构师训练营——第8周学习总结

jiangnanage

HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第4章CSS文本样式

Geek_8dbdc1

CSS

找出两个链表交点(golang版)

2流程序员

第八周心得

方堃

如何用 Angular 实现深色模式-InfoQ