Dark Mode Toggle For Angular App

Description:

An Angular component that makes it easier to enable the increasingly popular Dark Mode on the Angular app.

How to use it:

1. Install the package.

# Yarn
$ yarn add angular-dark-mode

# NPM
$ npm i angular-dark-mode

2. Basic usage:

// 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 {}

Preview: