iphone-ticker.de — Alles zum iPhone. Seit 2007. 30 676 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.

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.
    Abonnieren
    Benachrichtige mich bei
    31 Comments
    Oldest
    Newest Most Voted
    Inline Feedbacks
    View all comments
    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 30676 Artikel in den vergangenen 5138 Tagen veröffentlicht. Und es werden täglich mehr.
    ifun.de — Love it or leave it   ·   Copyright © 2021 aketo GmbH   ·   Impressum   ·   Cookie Einstellungen   ·   Datenschutz   ·   Safari-Push aketo GmbH Powered by SysEleven