2-node-supercomputer.net 2020-12-11
I like to switch my terminal colors between a dark theme and a light theme. During the day I prefer the light theme, during the evening I prefer a dark theme.
The same applies to websites. Wouldn't it be nice if the entire web automatically switched between light and dark modes?
We are not there, yet. But, at least I just made my website work that way by
using the prefer-color-scheme
@media
CSS tag. I barely know anything about
HTML, but here is the code that made it work for me. I am posting it, because
by the time you read this, my stratgey may have changed, and just looking at
the source of the website may no longer work. So here we go:
@media (prefers-color-scheme: light) {
:root {
background: white;
color: #333;
--readmorecolor: blue;
}
a:link {
color: blue;
}
a:visited {
color: purple;
}
}
@media (prefers-color-scheme: dark) {
:root {
background: #333;
color: white;
--readmorecolor: #74a0ff; /* light blue */
}
a:link {
color: #add8ff; /* darker blue than lightblue */
}
a:visited {
color: #b695c0; /* a light purple */
}
}
Basically, we define different colors for the same things in light and dark
modes. The :root
element makes the background and text colors apply to
everything that doesn't otherwise have it set. Of course, there are things that
do have other colors set. For example,
links need their colors
to be specified explicitly, and I needed to explicitly set the color of the
Read More buttons.