Angular – Der Dunkel-Modus

---

Ich habe hier schon einmal einen Überblick über den Dark Mode gegeben. Bei der Umsetzung gibt es wie so häufig mehr als eine Möglichkeit.
Hier möchte ich einmal auf die Ansätze im Angular-Kontext eingehen.

Dark Mode erkennen

Die Umsetzung einer dunklen Farbgebung setzt zunächst voraus, dass die Einstellung von System oder Browser erkannt wird. Inzwischen unterstützen die meisten Browser prefers-color-scheme (außer dem Internet Explorer). Diese CSS-Media-Query fragt die vom Nutzer präferierte Einstellung ab, um eine einheitliche Helligkeit aller Anwendungen und Webseiten zu gewährleisten.

Dark Mode class

The implementation of dark or light mode is attached to a css class at the central element. Der dunkle oder helle Modus hängt meist an einer CSS-Klasse eines zentralen Elements. Jede Unterkomponente erbt entsprechend.

Eine wichtige Anmerkung: Diese Klasse gehört an den Body-Tag in der index.html. Nutzt man sie stattdessen in der app.component.html, so werden Dialoge und andere schwebende Elemente außerhalb des App-Component-Kontext nicht mit einbezogen.

Angular Theming

Angular Material hat seine eigene Theming-Logik. Die vorgegebenen Themes sind bereits in hell und dunkel eingeteilt. Wenn man nun aber einen dunklen Modus für sein helles Theme anbieten möchte, muss dies selbst angegangen werden. Im Code unten sind vor allem ‚define-light-theme‘ und ‚define-dark-theme‘ wichtig, da sie die nicht-farbigen Elemente setzen.

Nutzt man wirklich die vorgefertigten Themes, dann hat man hiermit den geringsten Aufwand zur Umsetzung eines automatischen Dark Mode (deswegen habe ich mich auch dafür entschieden).

@use '~@angular/material' as mat;
@import '~@angular/material/theming';
@include mat.core();

$angular-primary: mat.define-palette(mat.$deep-purple-palette);
$angular-accent: mat.define-palette(mat.$amber-palette);
$angular-warn: mat.define-palette(mat.$red-palette);

$angular-default-theme: mat.define-light-theme(
    (
      color: (
        primary: $angular-primary,
        accent: $angular-accent,
        warn: $angular-warn,
      )
    )
);

$angular-dark-theme: mat.define-dark-theme(
    (
      color: (
        primary: $angular-accent,
        accent: mat.define-palette(mat.$light-blue-palette),
        warn: $angular-warn,
      )
    )
);
@media (prefers-color-scheme: light) {
  @include mat.all-component-colors($angular-default-theme);
}

@media (prefers-color-scheme: dark) {
  @include mat.all-component-colors($angular-dark-theme);
}

Und noch einmal; die ‚mat-app-background‘ Klasse gehört ans Body-Tag in der index.html, damit das Theming korrekt angewendet wird.

Package

The npm package angular-dark-mode is dependency free and lets you insert the Das npm-Package angular-dark-mode ist frei von Dependencies und ermöglicht das Einfügen eines Observables in den Light-Switch (s.u.). Alles was man tun muss ist, die verschiedenen Styles zu definieren. Eine automatische Modus-Erkennung scheint noch nicht eingebaut zu sein, es wird eine entsprechende CSS-Klasse ausgetauscht..

Reines CSS

Die Media-Query prefers-color-scheme (nicht für ie) lässt einen die Styles definieren, die man für den hellen bzw. dunklen Modus benötigt.
Das hier ist ähnlich zur Material-Lösung, aber anstatt Farb-Themes zu nutzen, müssen alles Styles für hell und dunkel verschieden definiert werden. Das beinhaltet mehr Tipparbeit, aber man kann auch spezifischer vorgehen, es müssen nur eben alle Sonderfälle bedacht werden.

media (prefers-color-scheme: light) {
  body {
      color: rgb(28, 0, 0);
  }

  .content {
    background-color: rgba(253, 250, 241, 0.8);
  }

  .content__title {
    color: darkred;
  }
}

@media (prefers-color-scheme: dark) {
  body {
      color: rgb(253, 250, 241);
  }


  .content {
    background-color: rgba(38, 0, 13, 0.8);
  }

  .content__title {
    color: rgb(191, 7, 4);
  }
}

Alternativ können css custom properties genutzt werden.
Die funktionieren übrigens nicht im Internet Explorer…

@media (prefers-color-scheme: light) {
  --main-bg-color: lightgrey;
  --main-color: black;
}

@media (prefers-color-scheme: dark) {
  --main-bg-color: darkgrey;
  --main-color: white;
}

.content {
  color: var(--main-color);
  background-color: var(--main-bg-color);
}

Lichtschalter

Hier werde ich später ergänzen, wie man mit einem Modus-Switch und einem ThemeService den Modus für den Nutzer individuell einstellen kann.