24 March 2021
I recently happened upon the CSS media query prefers-color-scheme.
As of today, dark mode is enabled on my blog. Light mode is still available too.
It all depends on your settings.
The prefers-color-scheme media query allows you to detect the user's preference
for dark or light themes that they have set through their OS. On Windows, macOS
and many GNU/Linux desktop environments, you can set this preference. On some
environments, it can even change with the time of day.
By adding this query, I can change the color scheme easily through CSS:
@media (prefers-color-scheme: light) {
:root {
--background-color: #fcfcfc;
--accent-color: #e23d28;
--link-color: #007cba;
--text-color: #000000;
--separator-color: #d3d3d3;
--sidenote-color: #444444;
}
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #333;
--accent-color: #e23d28;
--link-color: #229edc;
--text-color: #fcfcfc;
--separator-color: #d3d3d3;
--sidenote-color: #ccc;
}
}
Even the code highlighting can be changed in this way. You can try this out by toggling dark and light mode in your desktop environment.