Added a darkmode to my blog. Nothing fancy this time.

Adding a darkmode for newer browsers is pretty easy, by using the media query:

@media (prefers-color-scheme: dark) or @media (prefers-color-scheme: dark)

For example:

@media (prefers-color-scheme: dark) {
  body {
    background: black;
  }
}



Changing the Jekyll default theme was a little more work however, because I needed to change a lot of colors for the theme I used.


Adding a darkmode is not just changing white to black. You don’t want to blind your users by using lots of bright white on a really dark background. but don’t get rid of any contrast.

I also changed the opacity for images to blend them a little more into the website. I’ve seen many websites using a darkmode with really bright images not blending in with the darkmode.