cldsi.de — Web Development in Design & Code

Dark Mode in CSS realisieren

Website wird von einem hellen Thema auf ein dunkles verstellt

Level: Anfänger
Sprachen: CSS

Mit macOS Mojave kam der Darkmode auf den Mac, mit dem das ganze System in einem dunklen Farbton erscheint.

Entwickler für macOS können Ihre Anwendungen bereits seit der Mojave Beta an den Darkmode anpassen. Auch einige Websites, wie zum Beispiel YouTube, bieten bereits die Möglichkeit an, ein Darkmode-Theme zu nutzen.

In einer der nächsten Versionen von Safari wird auch ein neues CSS media querie namens „prefers-color-scheme:“ eingeführt.

Update: Mit der neuesten Version von Safari, 12.1.2, ist der Darkmode auch hier verfügbar.

Update: Mit der soeben veröffentlichten iOS-Version 13 findet der Darkmode auch Einzug auf das iPhone. Ob dieser in Zukunft auch auf Android-Geräten funktionieren wird, muss sich zeigen. Klar ist nur, dass der Darkmode ab jetzt einer großen Masse an Mobil-Nutzern zur Verfügung steht.

Icon von Safari Technology Preview

Dies kann man über den Entwickler-Browser, Safari Technology Preview, bereits jetzt testen und die eigene Website für den Darkmode startklar machen. Ich habe cldsi.de bereits angepasst und musste aufgrund des einfach gehaltenen Designs nur wenige Änderungen vornehmen.

Seite an den Darkmode anpassen

Ich verwende ein WordPress Theme, welches die verwendeten Farben als Variablen am Anfang des Dokuments definiert:

:root {
  --bg-color: #eaeaea;
  --fg-color: #000; 
}

Um nun ein spezielles Farbschema für den Darkmode zu definieren, setze ich folgende Zeile ein:

/* Dark-Mode ansprechen */
@media (prefers-color-scheme: dark) {
  :root {
    /* Farben anpassen */
    --bg-color: #000; 
    --fg-color: #FFF;
  }
}

Und schon funktioniert die Seite im Darkmode!

Zusätzliche Anpassungen

Wie @mdo richtig anführt, sind Bilder (vor allem Screenshots) meist deutlich zu hell im Darkmode und zerstören somit die gesamte User-Experience. Um das zu ändern, ist folgender Code von Nöten:

@media (prefers-color-scheme: dark) {
  img {
      opacity: .75;
      transition: opacity .5s ease-in-out;
   }
   img:hover {
      opacity: 1;
   }
}

Hiermit werden Bilder leicht transparent gemacht, ihnen wird also auch Helligkeit entzogen. Bei Hovern über ein Bild, wird dieses wieder rückgängig gemacht.

Browser Kompatibilität

✔︎✔︎✔︎✔︎✖︎

Aktuelle Liste: https://caniuse.com/#search=prefers-color-scheme

Kommentare sind geschlossen.