Dark Mode für Websites umsetzen

Wie lässt sich ein Dark Mode für Websites umsetzen? Die JavaScript-Bibliothek Darkmode.js hilft weiter und verwandelt Websites auf Knopfdruck in einen Dunkelmodus.

Dark Mode Websites

Was ist ein Dark Mode?

Dark Mode bezeichnet einen sogenannten Dunkelmodus. Einige Apps bieten die Möglichkeit, die Anzeige von hell auf dunkel umzuschalten. Aus einem schwarzen Text auf weißem Hintergrund wird dann beispielsweise ein weißer Text auf schwarzem Grund.

Eine helle Darstellung kann – je nach Standort und Tageszeit – schon mal zu grell oder zu hell wirken. Dieser Modus wird daher von vielen Anwendern gern auch nachts verwendet. Der Modus wird häufig als augenschonender und angebrachter empfunden. Außerdem lässt sich mit dem Dark Mode auch Strom sparen. Das hängt jedoch vom verwendeten Gerät bzw. dem Display ab.

Wer verwendet bereits Dark Mode?

Google hat kürzlich eigenen Anwendungen einen Dark Mode verpasst. Die Richtlinien dazu kann man in der Material Design Dokumentation nachlesen. Auch im Betriebssystem von Apple findet dieser Modus Verwendung. Mit dem Start von macOS Mojave gab es zudem einige CSS-Styling-Tipps für die Umsetzung im Safari Browser.

Außerdem gibt es einen ersten Entwurf zur Farbanpassung und dem Dunkelmodus in CSS. Das World Wide Web Consortium (W3C) geht in einem Dokument ausführlich auf mögliche Methoden ein. Dort ist allerdings noch nichts in „trockene Tücher“ gebracht worden.

Dark Mode Material Design

Dark Mode für Websites per JavaScript

Mit Darkmode.js lässt sich ein Dunkelmodus für die eigene Website umsetzen. Das PlugIn ist »VanillaJS« und kommt daher ohne größere Bibliotheken wie beispielsweise jQuery aus.

Die .js-Datei wird über ein CDN bereitgestellt. Alternativ lässt sich die JavaScript-Datei auch auf dem eigenen Webspace bereitstellen:

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.3.4/lib/darkmode-js.min.js"></script>
<script>
  new Darkmode().showWidget();
</script>

Mit optionalen Angaben kann man weiteren Einfluss auf die Darstellung und die Position des Hell-Dunkel-Schalters nehmen:

var options = {
  bottom: '64px', // default: '32px'
  right: 'unset', // default: '32px'
  left: '32px', // default: 'unset'
  time: '0.5s', // default: '0.3s'
  mixColor: '#fff', // default: '#fff'
  backgroundColor: '#fff',  // default: '#fff'
  buttonColorDark: '#100f2c',  // default: '#100f2c'
  buttonColorLight: '#fff', // default: '#fff'
  saveInCookies: false, // default: true,
  label: '🌓' // default: ''
}

const darkmode = new Darkmode(options);
darkmode.showWidget();

Richtig ins Detail gehen lässt sich, indem selbst Hand an die CSS-Angaben gelegt und der Code entsprechend angepasst wird. Die Klasse .darkmode—activated kann einfach vorangestellt werden. Hier einige Beispiele:

.darkmode--activated p, .darkmode--activated li {
  color: #000;
}

.darkmode--activated .logo {
  mix-blend-mode: difference;
}

Hinweis: Darkmode.js macht Verwendung von mix-blend-mode: difference; und ist daher nicht mit allen Browsern kompatibel. Welche Browser unterstützt werden, findet man in dieser Liste.

  1. Danke für den hilfreichen Tipp! Da werde ich mich demnächst mit beschäftigen 🙂
    Durch das Plugin scheint es dann ja doch weniger Arbeit zu sein, als ich zunächst dachte.

Kommentieren

Ich akzeptiere die Datenschutzerklärung.