CSS Dark mode mit zwei Zeilen Code

Für den Dark Mode (system- oder browserabhängige Eigenschaft für dunkles Erscheinungsbild) gibt es in CSS einen eigenen Media Query. Durch einen Invertierungsfilter lässt sich die komplette Website farblich umkehren. Invertierte Bilder sehen jedoch merkwürdig aus, womit der Filter nochmals auf IMG Tags angewendet werden muss, um ein ansehnliches Resultat zu erzielen.

@media (prefers-color-scheme: dark) {
  html { filter: invert(100%); }
  img { filter: invert(100%); }
}

Falls der Dark Mode nicht automatisch geladen werden soll, kann die obige CSS Eigenschaft auch auf eine extra Klasse angewendet und diese per JavaScript über beispielsweise einen Button nachgeladen werden. Diese Einstellung kann über ein Cookie gespeichert werden, so dass der Seitenbesucher selbst entscheiden kann, in welchem Modus die Seite betrachtet wird.

// jQuery
$('.click-me').click(function (event) {
   event.preventDefault();
   $('html').addClass('dark-mode');
});

// Vanilla JS
document.addEventListener('click', function (event) {
   if (!event.target.matches('.click-me')) return;
      event.preventDefault();
      var root = document.getElementsByTagName( 'html' )[0];
      root.setAttribute( 'class', 'dark-mode' );
}, false);