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

In der Praxis sieht das wie folgt aus: Ist im Web-Client ein helles Theme eingestellt, wird die Website nicht invertiert. Ist im Client 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)}
}

Bitte beachtet folgendes:

Dieses CSS-Snippet ist mit Vorsicht zu genießen. Es kann zu Inkompatibilitäten bei verschiedenen Browsern kommen. Im schlimmsten Fall wird der Hintergrund invertiert, nicht jedoch der Text. Dies kann dazu führen, dass Texte nicht mehr lesbar sind. Prüft also unbedingt, ob euer Code funktioniert.