How to Switch Logo in Dark Mode

#css

I designed my website with two versions of the logo - one for light mode and another for dark mode. In this article, I'll share how I switched the color of the logo in light/dark mode.

When it came to implementing this design, I was a bit confused about how to go about switching between these two versions when either dark/light mode is selected.

I found a way to do this, and I'll share how I was able to achieve it. I'm open to hearing how you'll typically implement this if you were trying to. You can reach out on Twitter always open to learning new methods of solving a problem.

Let's dive into it!! So I've got an image tag with the dark-outline logo. It'll serve as the default logo that you see when you're on light mode.

<img class="logo" src="../assets/img/logo.png" alt="original logo" />

Solution: Using CSS Variables

We can use CSS custom properties(CSS Variables) to solve this problem. Here's what I did, I defined a variable in the variables.scss called logo for both dark and light mode and set it as the background image, which you'll see in a moment.

body {
  --logo: url(logo.png) no-repeat;

}

body[data-theme="dark"] {
  --logo: url(logo-light.png) no-repeat;
}

Then I applied the following style to the .logo class on the image. It sets the background image to both versions of the logo depending on which one is selected. The background-size and height properties help position the image directly on top of the original image.

.logo {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: var(--logo);
  background-size: 60px;
  height: 80px;
  padding-left: 100px;
}

That's it! I now have two different versions of my logo for dark and light mode. If you're interested in seeing the implementation in more detail, the code for my website is open-source, and you can check it out.

Top comments (7)

Gaurav Saini • Jul 6 '20 • Edited

Another approach would be have an SVG for the logo and just switch the fill color using a css variable. That would eliminate the need for 2 logos, plus an SVG is way smaller in size and much more scalable, so that’s a double win.
Also you can have a smooth transition instead of the current instant switch when using SVG and css

Pushkar Anand • Jul 7 '20 • Edited

Just to add to it. You can use currentColor. This way just switching the body color will switch color in logo as well.

.logo {
    fill: currentColor;
}

Gift Egwuenu • Jul 7 '20

I agree SVG will better simplify this and will look into implement this approach. Thanks 😊

Jalaj • Jul 7 '20

Even better if you just use inline svg. It will save you one request.

Ashley Sheridan • Jul 7 '20

As others have mentioned, you can just use an inline SVG for the logo and have the CSS change the colour, e.g. with svg { fill: #colour }.

It's worth bearing in mind though about things like colour contrast, especially at smaller sizes. Light text on a dark background has less contrast than dark text on a light background. This can matter if the logo is very small or used as a favicon. However, CSS can help there too, by allowing you to change the size of elements, change the stroke width, etc.