Dark Mode

| Tags: dev, web

Most software developers seem to prefer dark themes. Their IDEs, text editors and terminals use dark background colors. My preferences are exactly the opposite. I use dark text on bright backgrounds. When dark mode was introduced in macOS and iOS and later got supported in web browsers I ignored it and kept on using the default modes which are dark text on bright backgrounds.

While redoing and modernizing the CSS on another web related project I also added dark mode support there and realized that it’s quite easy to do. Just add a media query and add style rules with adapted colors

@media (prefers-color-scheme: dark) {
  body {
    background-color: #2B2510;
    color: #D5D5D5;
  }
  ...
}

My website uses only a handful of colors and I got the idea that I really didn’t want to change the palette to something totally new. The light mode and dark mode palettes should be related. So I darkened the background color and brightened the foreground colors and got from

Light Mode

to

Dark Mode

I’m happy with how it turned out. Now dark mode users can visit my website and won’t be shocked by the sudden appearance of a bright web page.

In hindsight I could and should have added dark mode support much earlier, but better late than never as they say.