DEV Community

Gift Egwuenu
Gift Egwuenu

Posted on • Originally published at giftegwuenu.com on

How to Switch Logo in Dark Mode

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.

Light and Dark Logo Grid

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" />


Enter fullscreen mode Exit fullscreen mode

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;
}


Enter fullscreen mode Exit fullscreen mode

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;
}


Enter fullscreen mode Exit fullscreen mode

switching between dark and light mode

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)

Collapse
 
sainig profile image
Gaurav Saini • 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

Collapse
 
pushkar8723 profile image
Pushkar Anand • 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;
}
Collapse
 
lauragift21 profile image
Gift Egwuenu

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

Collapse
 
jalaj profile image
Jalaj

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

Collapse
 
ashleyjsheridan profile image
Ashley Sheridan

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.

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

That's insightful! And so is your portfolio website 🔥

Collapse
 
lauragift21 profile image
Gift Egwuenu

Thanks 😊