Sie haben JavaScript deaktiviert. Vermutlich sind Sie ein Kollege und wollen nur sehen, ob meine Website auch ohne JavaScript funktioniert.
Andernfalls: Bitte aktivieren Sie JavaScript!
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.
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.
Das Ergebnis meiner Fingerübungen ist erstaunlich schlank.
<button onclick="dark_mode()">
<img id="dark_button" src="pfad_zum_img.png" alt="Dark Mode">
</button>
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.
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.
Ü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.