How to Switch Logo in Dark Mode
#css
Gift Egwuenu

Gift Egwuenu @lauragift21

About: Developer Advocate at Cloudflare.

Location:
Netherlands
Joined:
May 15, 2017

How to Switch Logo in Dark Mode

Publish Date: Jul 6 '20
48 7

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.

Comments 7 total

  • Vaibhav Khulbe
    Vaibhav KhulbeJul 6, 2020

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

  • Gaurav Saini
    Gaurav SainiJul 6, 2020

    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

    • Gift Egwuenu
      Gift EgwuenuJul 7, 2020

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

      • Jalaj
        JalajJul 7, 2020

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

    • Pushkar Anand
      Pushkar AnandJul 7, 2020

      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;
}
  • Ashley Sheridan
    Ashley SheridanJul 7, 2020

    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.

Add comment