Artikel-Hilfsmenü
Samstag, 28. Dezember 2019 – aktualisiert am Samstag, 14. März 2020
Dark Mode für die Website – jetzt auch auf dem Smartphone
Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.
- Die Startseite von webdesign.weisshart.de auf dem iPhone mit aktiviertem Dark Mode.
Dark Mode – nur eine Modeerscheinung? So etwas hatten wir doch in den 1990ern unter DOS auch schon. Und auf dem Desktop gab es auf meiner Site den Dark Mode auch "schon immer", er hieß nur anders: "Invers".
Wie dem auch sei: Jetzt gibt es den Dark Mode auch auf dem Smartphone. Ich musste das einfach als Fingerübung umsetzen.
- Der Button für den Darkmode sitzt im Navigationsmenü.
Das Ergebnis meiner Fingerübungen ist erstaunlich schlank.
Der Button in HTML
<button onclick="dark_mode()">
<img id="dark_button" src="pfad_zum_img.png" alt="Dark Mode">
</button>
Wenige CSS-Anweisungen genügen, um den Dark-Mode zu erzeugen:
filter:invert() invertiert alle Farben, und wird von allen aktuellen Browsern unterstützt.
Beispiel CSS:
html,img{filter:invert(1);}
/* folgende Elemente nicht invertieren: */
#wdw_logo,#art_links img{filter:invert(0)}
Diese CSS-Anweisugen dürfen natürlich erst nach Betätigung des Buttons aktiviert werden. Daher setzt Tippen auf den Button ein Cookie. Realisiert wird dies per JavaScript:
<script>
// Die Standardfunktion zum Abfragen von Cookies in JavaScript:
function getCookie(k){var v=document.cookie.match('(^|;) ?'+k+'=([^;]*)(;|$)');return v?v[2]:null}
function dark_mode() {
// das folgende if / else Konstrukt toggelt das Setzen / Löschen des Cookies
if (getCookie('theme') != "dark") {
document.cookie="theme=dark";
} else {
document.cookie="theme=dark; max-age=0";
}
location.reload();
}
</script>
Nach dem Reload wird die Seite neu aufgerufen. Beim Neuaufruf wird mit PHP das gesetzte Cookie "theme" abgefragt, und ggf. entspechende CSS-Anweisungen gesetzt.
if (!empty($_COOKIE['theme'])) {
if ($_COOKIE['theme'] == 'dark') {
echo '
html,img,video{filter:invert(1);}
/* folgende Elemente nicht invertieren: */
#wdw_logo,#art_links img{filter:invert(0)}
';
}
}
Das war's auch schon im Wesentlichen.
Nachtrag 08.01.2020
Viel einfacher: Media Queries Level 5, in aktuellen Browsern unterstützt, machts möglich. Der im Gerät eingestellte Modus (light oder dark) wird per Media-Queries abgefragt. Dazu folgendes Snippet einfach ans Ende des CSS:
@media (prefers-color-scheme: dark) {
html,img,video{filter:invert(1);}
#wdw_logo,#art_links img{filter:invert(0)}
}
Und jetzt wird meine Site automatisch im Dark Mode dargestellt, wenn Dark Mode auf dem Gerät aktiviert ist. Übrigens nicht nur auf dem Smartphone (iOS 13, Android 10), sondern auch auf dem Desktop (macOS Mojave, Windows 10) – und wenn der Browser das unterstützt. So – und nur so – macht der Dark Mode Sinn.
Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
Kommentare
Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.