The Dent

"We’re here to put a dent in the universe. Otherwise why else even be here?" - Steve Jobs

Get Your Site Ready For Dark Mode

As is usually the case with me and this blog, I’ve been procrastinating recently. Instead of actually writing up some real content for the site, I’ve been playing around with the design slightly.

If you’re currently running the latest version of macOS, or the beta versions of iOS / iPadOS 13, and you’re in dark mode, you may have noticed the change already.

With the help of the always fantastic Micro.Blog community, both on the site itself and the Slack channel, I’ve been able to update the site to support dark mode across iOS 13, iPadOS and MacOS.

Light vs. Dark

It turns out the process of doing this is, at its core, extremely simple. In my case, on a micro.blog hosted site at least, I just had to add a small bit of code to my custom CSS, as seen below:

  @media (prefers-color-scheme:     dark) {
  body {
color: #fafafa;
background-color: #1a1a1a; 
}
.blog-title a {
color: #ffffff;
}
  .post-title a {
  color: #ffffff !important;
} 
   blockquote p {
  color: #ffffff !important;
}
}

The biggest challenge, for me at least, was working out what I needed to change to amend the blog title, the post title and also the block quotes. I’ve fiddled around with the custom HTML and CSS a fair bit, way outside of my usual comfort zone, so it’s become a little bit unwieldy.1

The switch between states is effortless and I’m really impressed at quite how simple it is to add support for something like this.

As I said, I received a lot of assistance with this along the way so this post is intended purely as a way to pay it on and hopefully help others adopt the same change. As someone that lives in dark mode currently, on my iPhone and iPads, the more support for dark mode around the internet the better in my opinion. I’m really hoping Micro.Blog itself adds it soon too, though I imagine that’s a lot more complicated to do than my small site.

Anyway, I hope this was helpful. If you have any questions, please let me know.


  1. As Chris rightly points out, please be aware that the specific CSS classes used in your theme, or blog, will likely vary to that which you see me referencing above. My blog currently uses a modified version of the Arabica Hugo theme. Actual milage may vary. [return]
microcast.club