A few weeks ago, I wrote about a method that I used to swap out my site logo in dark mode. In that post, I wrote about you can use some custom CSS to display a different logo when a browser was in dark mode.

It wasn’t a very elegant method, but it got the job done. There was, however, a huge drawback. The Kiko theme sets the header logo/blog title as a link back to your site’s root. By replacing the logo in the way I shared in the post referenced above, the link broke. In essence, my blog showed the correct logo in dark mode, but visitors no longer had an easy way back to the home page.

I now have a better way of accomplishing the same objective.

As a reminder, I’m using a custom version of the Kiko theme.

Setting Up Your Site Logo

1) Upload both light and dark mode versions of your logo to your Micro.blog account. Copy the links and have them ready to go.

2) Go in to your custom theme in the Micro.blog Design dashboard. Open the layouts/partials/header.html template.

3) You’re now going to load your image URLs into the <a> links <h1 class> area. Just copy and paste the URL for your light mode logo into the place of the URL link currently in the template. Then copy and paste that whole <a> link, and load your dark mode logo URL into the second link. Make sure that you update both alternate descriptions!

4) That will put both images in your header, the light and dark versions. Within those links, you’ll need to define a custom class. Simply add class="logo-dark" immediately after the logo URL and before the </a> tag in the first link. Add class="logo-light" to the second link, again, immediately before the </a> tag. This is what will allow us to use CSS to get across the finish line.

5) Save that template. If you refresh your blog, you should see your light mode logo stacked on top of your dark mode logo in the header.

Now we’re going to get them to show up when we want them to. Go into your Custom CSS on the Micro.blog dashboard Design tab.

We’re going to use the CSS display property to show and hide the correct logo version in the correct browser light/dark setting.

First, let’s focus on the light mode of your website. We don’t want the dark mode logo to show up when the browser is in light mode. We’re going to hide it by adding this CSS:

.logo-dark {display: none;}

Now, let’s configure your dark mode logo. In dark mode, we want the light mode logo to hide and the dark mode logo to show up.

Find the @media query in your CSS where you’ve done all of your other dark mode styling. Add the following CSS within the {} of the @media query:

.logo-light {
        display: none !important;
}

.logo-dark {
        display: inline !important;
}

There you have it! Your site logo will switch as expected between browser light and dark modes. Go ahead and test it out!

My thanks to Manton for giving Micro.blog users the flexibilty to edit and customize blogs from within Micro.blog!