Usare la dark mode in Angular con angular-dark-mode

angular-dark-mode è una libreria per angular che ci permette di gestire la dark mode in Angular.

Prima di tutto installiamola con npm:

npm i angular-dark-mode

Poi nel file angular.json dobbiamo richiamarla nella voce scripts:

"scripts": ["./node_modules/angular-dark-mode/angular-dark-mode.js"]

A questo punto creiamo una checkbox per cambiare lo stato:

<label>Cambia modalità</label>
<input type="checkbox"
       [checked]="darkMode | async"
       (change)="onToggle()">

Nel nostro componente avremmo una cosa del genere:

import {Component} from '@angular/core';
import {CommonModule} from '@angular/common';
import {RouterOutlet} from '@angular/router';
import {Observable} from "rxjs";
import {DarkModeService} from "angular-dark-mode";

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  darkMode: Observable = this.darkModeService.darkMode$;

  constructor(private darkModeService: DarkModeService) {
  }

  onToggle(): void {
    this.darkModeService.toggle();
  }
}

Infine un pò di CSS (l'ho messo nello style.css):

body.dark-mode {
  background-color: #2d3436;
  color: #dfe6e9;
}

body.light-mode {
  background-color: #dfe6e9;
  color: #2d3436;
}

Enjoy!