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*/
}