Small Website Update - Dark Mode

, in Computing

It has been on my todo list for years but I have finally gotten around to implementing dark mode in the default theme for the static site generator that runs sheep.horse.

Dark mode is one of those optional little features that you don't care about until you blind yourself at 2am.

Both dark and light modes in one image
Both dark and light modes in one image

Now you can, should you feel the need, read my tepid musings in the middle of the night without blasting your eyes.

Hacking this into the CSS was a lot easier than I thought, although I did cheat a little. A few of the tricks that the original tufte.css project does to style hyperlinks looks terrible in dark mode so I had to disable them.

@media(prefers-color-scheme: dark) {
  a:link {
    text-shadow: none;
    text-decoration: underline;
    background: none;
  }
}

Otherwise, this site does not use a lot of color so mostly it was just a matter of adding light-dark(color1, color2) in a few places.

The exception is the code highlighting which defines a dozen or so colors - I am far to lazy to change them all.

@media(prefers-color-scheme: dark) {
  div.codehilite {
    filter: invert();
  }
}