Update: I’ve found an easier implementation that preserves the link function for the dark mode version of your logo.

With iOS 13 just weeks away, I’ve been busy making sure that all of my websites are dark mode compatible. I should’ve been working on this over the past year, but there’s no time like the present!

I’m grateful to the Micro.blog community and all of the CSS junkies who have shared code to make it easy for us to enable dark mode on our personal blogs. It feels great to be at the bleeding edge of web design!

I’m using a custom version of the Kiko theme, which is mostly the original design with a few minor adjustments. I posted the snippets and instructions for how to enable dark mode on Kiko (even if you’re just using the built-in standard version) two months ago, but there was something missing.

I have a logo at the top of my blog. It’s my signature orange bow tie logo that I use on all of my work on the Internet, along with my name. On my blog, I have my name written in black, and it looks great on a white background! In dark mode, however, it looks really bad.

I turned to our old friend, CSS, to get me through this problem. First, I created and uploaded two versions of my logo: a light mode version and a dark mode version.

Now all I had to do was add the Custom CSS to overwrite the light mode logo hard coded into the HTML in the theme files with the dark mode logo.

Here’s my CSS:

 .masthead-title {
content: url(https://www.chetjcollins.com/uploads/2019/02c28d1ca2.png);
 height: 154px; 
 width: 560px; }

I added that CSS within the dark mode @media query and, boom! Now when a visitor is using dark mode in their browser, the same orange bowtie logo shows up, but this time, my name is much more readable.

This took a lot of work and trial and error, but as usual, when it clicked, it felt amazing!

Known issues: This substitution will break the home page link that Kiko gives your logo/profile picture. If this is a deal breaker for you, take a look at this method.

I hope that you find this helpful!