Easy Dark Theme Using Only CSS

Shaun Guimond
Shaun Guimond
Posted underTechnology

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.

TaggedProgramming


Cover Image for Plant Pal Assistant (AWS – LLM)

Plant Pal Assistant (AWS – LLM)

The Plant Pal Assistant (AWS – LLM) project was part of the 2024 UBC CIC Hackathon. The event provided the required infrastructure for the attendees to learn or practice using Cloud Computing and Generative AI to create creative and…

Shaun Guimond
Shaun Guimond
Cover Image for The Last Laugh – 2024 Vancouver Game Jam

The Last Laugh – 2024 Vancouver Game Jam

As a team of 6, we created a narrative, 2d side-scroller using the Godot game engine. As project lead of our team of beginners, my role was to ensure a feasible project scope based on a very tight deadline…

Shaun Guimond
Shaun Guimond