Tech-Corner - Hilfen, Tipps & App-Vorstellungen

Mit einer kleinen Ergänzung in eurer CSS-Datei könnt ihr eure Website automatisch an das Farbschema des Webseitenbesuchers anpassen lassen.

In der Praxis sieht das wie folgt aus: Hat der Nutzer ein helles Theme eingestellt, wird die Website nicht invertiert. Hat der Nutzer ein dunkles Theme eingestellt, werden die Seiteninhalte invertiert. Bilder sind von dieser Invertierung ausgeschlossen.

Dies setzt natürlich voraus, das eure Website ein helles Theme hat. Wenn ihr eine dunkle Website habt, könnt ihr "prefers-color-scheme: dark" auch mit "prefers-color-scheme: light" ersetzen. Dann erfolgt die Invertierung, wenn ein helles Theme beim Nutzer eingestellt ist.

Die zweite Zeile des Codeschnipsels definiert die Elemente, die invertiert werden sollen. In der dritten Zeile werden Elemente aufgeführt, die von der Invertierung ausgeschlossen sind.

@media (prefers-color-scheme: dark) {
html,img,video,hr{filter:invert(1);}
img{filter:invert(0)}
}