iphone-ticker.de — Alles zum iPhone. Seit 2007. 37 262 Artikel

Von Mac und iPhone berücksichtigt

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

Artikel auf Mastodon teilen.
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.

Dieser Artikel enthält Affiliate-Links. Wer darüber einkauft unterstützt uns mit einem Teil des unveränderten Kaufpreises. Was ist das?
22. Okt 2019 um 08:10 Uhr von Nicolas Fehler gefunden?


    Zum Absenden des Formulars muss Google reCAPTCHA geladen werden.
    Google reCAPTCHA Datenschutzerklärung

    Google reCAPTCHA laden

    31 Kommentare bisher. Dieser Unterhaltung fehlt Deine Stimme.
  • 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?

  • 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 37262 Artikel in den vergangenen 6054 Tagen veröffentlicht. Und es werden täglich mehr.
    ifun.de — Love it or leave it   ·   Copyright © 2024 aketo GmbH   ·   Impressum   ·   Cookie Einstellungen   ·   Datenschutz   ·   Safari-Push aketo GmbH Powered by SysEleven