If you’re using a device that supports dark mode, this little blog will now adapt its appearance to match your system settings.

With the help of Jeremy Keith’s description, I was able to implement this very quickly.

It’s actually incredibly simple. Just drop the following code into your style.css and define whichever CSS properties you want to apply in dark mode.

@media (prefers-color-scheme: dark) {
  /* Dark mode CSS properties go here */
}

You might also consider adding a switch to the blog so users can override the default setting. Thomas Steiner explains this quite well here.

The text was automatically translated from German into English. The German quotations were also translated in sense.