Farbenpräferenz

Der Respekt des Anwendersvorlieben ist wichig. Manche bevorzugen ein hellen Hintergrund, anderen ein dunkleren.

Moderne Browser können mit prefers-color-scheme die Präferenz berücksichtigen.

CSS Beispiel

:root {
	color-scheme: light;
	--font-color: #000;
	--background-color: #eee;
	--link-color: #00a;
	--border-color:#ccc;
	--outline-color:#f00;
}
@media screen and (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
		--font-color: #eee;
		--background-color: #333;
		--link-color: #ff0;
		--border-color:#777;
		--outline-color:#ff0;
	}
}