iphone-ticker.de — Alles zum iPhone. Seit 2007. 26 891 Artikel
Von Mac und iPhone berücksichtigt

Mit 12 Zeilen CSS: Einfacher Dark Mode für Webseiten

31 Kommentare 31

Der Software-Entwickler Tom Brow hat sich auf seinem Blog mit dem von iOS 13 eingeführten Dunkelmodus auseinandergesetzt und erklärt am Beispiel der eigenen Seite, wie sich Online-Inhalte so vorbereiten lassen, dass das Seitendesign in Abhängigkeit von den Geräte-Einstellungen des Besuchers hell bzw. dunkel angezeigt wird.

Nachtmodus Animation
Schlüssel zum Glück ist der CSS media query „prefers-color-scheme“, mit dessen Hilfe in Erfahrung gebracht werden kann, ob Besucher den Dunkelmodus auf ihren Geräten aktiviert haben.

Ist dies der Fall färbt Brows Beispiel-Code den Hintergrund der Webseite dunkel ein, ändert die Text- und Link-Farben und entsättigt die in den Bildern eingesetzten Farben etwas.

Brows 12 Zeilen sind noch kein vollständiger „Dark Mode“ für Webseiten, aber ein guter Start für Webmaster, die ihre Seiten entsprechend anpassen möchten. Eine Aufgabe, die auch wir noch zu erledigen haben.

Dienstag, 22. Okt 2019, 8:10 Uhr — Nicolas
31 Kommentare bisher. Dieser Unterhaltung fehlt Deine Stimme.
Rede mit!
  • Sehr gut. Darauf habe ich gewartet. Danke euch

  • Na dann baut es doch mal ein auf eurer Website.

  • OT:
    Hat noch jemand von euch festgestellt, dass Wecker, die über Automationen erstellt werden, seit iOS13 immer den Radar-Klingelton haben, egal was für ein Standard-Ton vorher für Wecker eingestellt wurde? Im vorherigen iOS hat dies problemlos funktioniert. Es betrifft auch nur die Wecker, beim Timer klappt es. Hat da jemand eine Idee, woran das liegen mag? Danke!

    • Schön zu wissen, dass ich nicht der Einzige mit diesem Problem bin!

    • Meine Beobachtung: es wird für einen neuen Wecker immer der Ton verwendet, den der zuletzt angelegte Wecker hat.

      Z.B.:
      – Neuen Wecker auf 13:00 anlegen
      – Ton vom Wecker auf XXX stellen
      – Neuen Wecker auf 13:15 anlegen
      – der neue Wecker verwendet auch XXX als Ton

      • Du hast absolut recht, es wird immer der letzte Klingelton verwendet. Außer eben: Wenn der Wecker als Automation erstellt wird (über die „Kurzbefehle“)… Hat da jemand eine Lösung?

  • Mit der Hülle hast Du immer Darkmode.

  • Gibt es auch eine Möglichkeit den Dark Mode in den Chrome Developer Tools anzuschalten zum testen? Wenn man danach sucht finde ich nur wie man den Inspector selber in den Dark Mode versetzt aber nicht die Browserinhalte an sich. Danke

  • Na guckt an! Leider bleibt das ganze ganz sicher reine Theorie und solche Webseiten, welche derart angepasst sind, bleiben die Seltenheit. Da bin ich, leider, von überzeugt.

    Safari lässt auch nicht zu, das man die Farben einer Webseite „überschreibt“. Bei Windows in Verbindung mit Mozilla ist es ja möglich, festzulegen, das der Hintergrund einer Webseite IMMER schwarz ist und die Schriftfarbe z.B. weiss ist.

    Mir hat diese Möglichkeit bei Windows immer sehr gefallen und die Lesbarkeit war dadurch verbessert.

  • Danke für den Tip!!! Kurzer einfacher Code den ich gleich in die HP eingebunden habe (mit etwas Anpassung). Funktioniert super auf allen Apple Geräten mit Darkmode.

  • Cool, danke für den Tipp. Ich habe das eben auf die Schnelle Mal bei uns auf der Seite integriert. Habe noch ein paar Anpassungen machen müssen, aber im großen und ganzen funktioniert es gut auch in WordPress: https://commotion.online/ – hat jemand noch eine Idee was man auf background-images anwenden kann?

  • Redet mit. Seid nett zueinander!

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

    ifun.de ist das dienstälteste europäische Onlineportal rund um Apples Lifestyle-Produkte.
    Wir informieren täglich über Aktuelles und Interessantes aus der Welt rund um iPhone, iPad, Mac und sonstige Dinge, die uns gefallen.
    Insgesamt haben wir 26891 Artikel in den vergangenen 4556 Tagen veröffentlicht. Und es werden täglich mehr.
    ifun.de — Love it or leave it   ·   Copyright © 2020 aketo GmbH   ·   Impressum   ·   Datenschutz   ·   Auf dieser Seite werben aketo GmbH Powered by SysEleven