Wer sein Betriebssystem lieber dunkel statt grell mag, kann seit kurzem den Dark Mode in iOS, Android, Windows und macOS einschalten. Chrome und Safari übernehmen diese Einstellung und geben sie dann weiter an die Webseite.

Nun kann der Betreiber selber entscheiden, ob er seiner Webseiten einen Dark Mode verpasst. Dank weniger Zeilen CSS und dem einfachen aber mächtigen A Field of Flowers Theme ist dies nun hier im Blog ab jetzt der Fall.

Dark Mode für Twenty Nineteen

Für den Zweck habe ich ein Plugin namens Dark Mode for Twenty Nineteen (runterladen) geschrieben. Es besitzt keine Konfiguration und ist in wenigen Sekunden eingeschaltet. Da mein A Field of Flowers Theme ein Child-Theme des Twenty-Nineteen-Standard-Themes von WordPress ist, wirkt sich mein Plugin darauf ebenfalls aus.

Variablen im CSS

@media (prefers-color-scheme: dark) {

  /* set variables */
  :root {
    --bg-color: #000;
    --txt-color: #efefef;
  }

  body {
    background-color: var(--bg-color);
    color: var(--txt-color);
  }

}

/*** usw ***/

Durch die Entwicklung des Plugins habe ich gelernt, dass man mittlerweile Variablen in CSS nutzen kann. Damit meine ich nicht Variablen in der Preprocessor Scripting Language SASS sondern nativ in CSS. Man sieht ihre Anwendung oben im Beispiel.

Da prefers-color-scheme nur die neuen Browser unterstützen, kann man Variablen ohne Rücksicht auf Kompatibilität für diesen Zweck wunderbar verwenden.

Auch Windows 10 besitzt nun einen Dark Mode

Hello dark mode my old friend

Mit meiner Lösung wird der Nutzer auf diese Weise in den Dark Mode gezwungen wenn er sich im Betriebssystem für den „Dunkelmodus“ entschieden hat. Der Nutzer bekommt keine Möglichkeit an die Hand, das Licht nur für diese eine Webseite wieder einzuschalten.

Da der Benutzer in der Regel aber nicht weiß, dass es die Webseite auch im „Bright Mode“ gibt, ist das aus meiner Sicht zu verschmerzen. Besucher, die sich bereits vorher über ihre Einstellungen im Betriebssystem für den Dark Mode entschieden haben, werden es im besten Fall nicht negativ bemerkten.

Das Plugin kann man im Repository von WordPress.org runterladen werden.

Beteilige dich an der Unterhaltung

8 Kommentare

  1. Bei mir darfst du immer klauen Marc :)

    Ich habe mich aufgrund des neuen iOS 13 Features in letzter Zeit viel mit dem Thema auseinandergesetzt und auch meine iOS App direkt den Darkmode Support verpasst.
    Für meine kleine Webapp, die schon lange ein manuell einschaltbares Darktheme hat, habe ich auch über den Media Query nachgedacht und diesen am Ende nicht implementiert. Der Grund dafür ist, dass ich keine finale Meinung dazu habe was ich von Websites erwarte, wenn ich mein Betriebssystem in den Darkmode schalte.

    Das mag sehr persönlich sein, aber für mich gibt es da zwei Unterscheidungen: Nutze ich ein Smartphone oder ein Desktop/Notebook.

    Für das Smartphone erwarte ich den Support des Darkmodes hoffentlich bald in jeder App. Das spart bei OLED Displays Strom, sieht oft sehr cool aus, weil der Bildschirminhalt optisch mit dem schwarzen Rand des Screensverschmilzt und es passt sich der aktuellen Umgebungssituation an, die bei einem Smartphone sehr variabel sein können.

    Wenn ich den Darkmode am MacBook einstelle, mache ich das (persönlich) eigentlich nicht aus den oben genannten Gründen, sondern schlichtweg weil ich MacOS im Darkmode hübscher finde. Bei Apps wie Xcode, die das zufällig mit unterstützten finde ich es auch cool. Wenn ich mir jetzt aber jede Website im Darkmode vorstelle, finde ich das plötzlich irgendwie komisch und fast schon übergriffig :D. Beim mobilen browsen greifen allerdings wieder die oben genannten Argumente.

    Vielleicht habe mich aber auch einfach ein bisschen zu sehr in das Thema hineingesteigert :) Hast du auf jeden Fall schön umgesetzt und ich mag es, wenn Websites mit so viel Detailliebe gemacht werden.

    1. Hach, super Stefan. Danke für solche Kommentare.

      Wenn ich mir jetzt aber jede Website im Darkmode vorstelle, finde ich das plötzlich irgendwie komisch und fast schon übergriffig :D. Beim mobilen browsen greifen allerdings wieder die oben genannten Argumente.

      Und was bedeutet das für Browser Extensions, die einen Dark Mode technisch erzwingen am Desktop? Denn manche invertieren die Farben und somit würde dann MarcTV bei denen wieder sehr grell werden obwohl sie das explizit nicht wollen.

      Für meine kleine Webapp, die schon lange ein manuell einschaltbares Darktheme hat, habe ich auch über den Media Query nachgedacht und diesen am Ende nicht implementiert. Der Grund dafür ist, dass ich keine finale Meinung dazu habe was ich von Websites erwarte, wenn ich mein Betriebssystem in den Darkmode schalte.

      Ich muss auch zugeben ich habe es hauptsächlich gemacht, damit ich deinen Titel klauen kann. Hier stand der Sinn der Sache explizit nicht im Vordergrund. Mittlerweile gehe ich mit dem Blog bewusst locker um. Das heißt, ich mache hier auch mal Dinge, die dafür sorgen, dass die Seite mal eine Weile kaputt ist. Genau so mit dem Dark Mode. Das habe ich gemacht, weil es so schön einfach war und Twenty Nineteen als Basis da sehr sauber entwickelt wurde. Die meiste Zeit ging dafür drauf meine eigenen Plugins wie SHORTSCORE anzupassen.

      Letztendlich habe ich dann doch zum Hammer gegriffen und „zwinge“ alle mit Dark Mode hier auf der Webseite auch in den Dark Mode. Da der geringste Anteil der Leute regelmäßig kommt und so ziemlich alle über Google kommen, kenne die paar Leute mit einem eingeschalteten Dark Mode die Seite nicht im normalen „Bright Mode“. Deswegen habe ich es nun einfach so gelassen. Wie bei allen Dingen kann das aber morgen auch schon vorbei sein. Nämlich dann, wenn es mich selber nervt ;-)

      Dank dir habe ich nun aber die dunkelste Farbe statt auf #111 auf #000 gesetzt. Denn #111 bringt OLED ja nichts.

    1. Es gibt einen Trick um das zu vermeiden. Sämtliche Fenster mit Fliegengittern ausstatten. Ich habe überhaupt kein Insektenproblem und kann daher im hellen Modus bleiben. Der einzige Vorteil im Dark Mode ist ein geringerer Energieverbrauch.

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website zeigt Benutzerbilder über gravatar.com an.

Wie bekomme ich einen verifizierten Account? - Login