angular暗模式切换应用 - angular-dark-mode

angular暗模式切换应用 - angular-dark-mode
插件名称 angular-dark-mode
发布时间 2020年11月2日
插件作者 talohana

一个Angular组件,可以更轻松地在Angular应用程序上启用日益流行的Dark Mode。

如何使用它:

1.安装软件包。

# Yarn
$ yarn add angular-dark-mode

# NPM
$ npm i angular-dark-mode

2.基本用法:

// dark-mode-toggle.component.ts
@Component({
  selector: 'app-dark-mode-toggle',
  template: `<input
    type="checkbox"
    [checked]="darkMode$ | async"
    (change)="onToggle()"
  />`,
})
export class DarkModeToggle {
  darkMode$: Observable<boolean> = this.darkModeService.darkMode$;
  constructor(private darkModeService: DarkModeService) {}
  onToggle(): void {
    this.darkModeService.toggle();
  }
}
// app.component.ts
@Component({
  selector: 'app-root',
  template: `
    <h1>angular-dark-mode</h1>
    <p>Toggle to see magic happens!</p>
    <app-dark-mode-toggle></app-dark-mode-toggle>
  `,
})
export class AppComponent {}