Easy Dark Theme Using Only CSS

As I was exploring Twitter today, I came upon what I believe to be the easiest way to add a dark theme to a website using only CSS.

When I had previously explored how to add a dark theme to a website, I had only ever found ways of doing so with JavaScript. I thought there must be a better way, but until today I just hadn’t found one. When I saw this easy solution, I decided I needed to try this out for myself and lo and behold it worked wonderfully! I went ahead and followed @rootgp ‘s tutorial which can be found on his website and figured out the best way of implementing the necessary code on to my website which I have built with Frontity.

Here is the code that I used to add dark mode to my website. Again this is all using CSS and is super simple.

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
  }
  h1, h2, h3, h4, h5, h6, p, ul, figcaption, code {
    color: white !important;
  }
  blockquote {
    background-color: #181818 !important;
    color: white !important;
  }
.wp-block-code {
  background-color: #181818 !important;
  color: white !important;
  padding: 25px !important;
}
  .page-description {
    color:#808080 !important;
  }
}

As of today, you should be able to see the website match the users browser theme as long as the browser supports it. Let me know if there are any issues or if you have any suggestions or feedback. Message me on any platform where you can find me.