The latest tech trend is to enable dark themes among all applications and devices: as the passionate tweaker I am, I set up every device and application I use to harness a light theme during daylight and dark mode at all other times.
Whenever a light (or dark) theme is applied system-wide, most of the browsers read that value and communicate with the browsed website what is the preferred color scheme: light or dark. The website, if knows the two variants, can answer with CSS rules that are tweaked for light or dark via the prefers-color-scheme CSS media rule.
Until today, this website only offered a light variant. After an evening spent with Firefox Web Developer Tools, a color picker tool and somebody that knows color theory better than me, I enabled the dark variant for this website.
In other words: if your browser supports light and dark color schemes, you will experience this website using your preferred theme.
In case your browser does not provide a preferred color scheme, the default (light variant) will be used.
Dear reader, please let me know if you spot something that is not in the right place (especially in the dark variant).
Under the hood
For you techies out there, to roll out your dark variant for your website, you need:
- Good taste in style and colors (might be subjective)
- CSS and
prefers-color-schemedirective
All the CSS rules specific to the dark variant will be delimited by the prefers-color-scheme: dark selector in this way:
@media (prefers-color-scheme: dark) {
[...]
a, .site-info > a {
color: #33C9FF;
[...]
If you are using WordPress, a good starting point is Adding Dark Mode Styles (CSS) To A WordPress Theme.
Happy tweaking!