Dark Light Color Preferences

Change the page based on the preferred color scheme, which works via @media (prefers-color-scheme) queries.

Demo

Prefered color scheme:

Code for the demo

<span>Prefered color scheme: </span>
<span class="color-scheme"></span>

<style>
.color-scheme:after {
	content: 'unknown';
}
@media (prefers-color-scheme: dark) {
	.color-scheme:after {
		content: 'dark';
	}
}
@media (prefers-color-scheme: light) {
	.color-scheme:after {
		content: 'light';
	}
}
</style>

Simplest code

/*unspecific styles*/

@media (prefers-color-scheme: dark) {
	/*dark specific overwrite styles*/
}

@media (prefers-color-scheme: light) {
	/*light specific overwrite styles*/
}