CSS Trick: Handling logos in dark mode

Posted 5 days ago

Note: Magic icon by Icongeek26 from Noun Project

In my new job with Revive Our Hearts, I had to address several issues with sponsor logos in dark mode. Django CMS is set up for us to upload one image. I noticed that the previous front-end developer had written some dark mode styles for many of the logos.

For example, one of the event pages on Revive Our Hearts, B&H is one of the sponsors. Their logo is black. So on dark mode, you will not see the logo.

But with a little bit of CSS can fix that:

@media (prefers-color-scheme: dark) {
  #bh {
      filter: invert;
  }
}

Handling logos with more than one color

Okay, so not all of the solutions are quite as simple as this one. I ran into another one today that needed a bit more creative approach.

@media (prefers-color-scheme: dark) {
  #kregel {
   filter: grayscale(1) brightness(3);
  }
}

Another approach

One other solution that I wanted to explore would be to put a white background behind images that needed more contrast. But putting a white background behind the image would only go to the boundaries of the image. This is where I pulled out another trick by using outline.

@media (prefers-color-scheme: dark) {
  #teach-equip {    
    background-color: white;
    outline: 8px solid white;
  }
}

Using outline will extend the background beyond the image 8px in my example.

What about light mode

You can use the same technique with light mode if your image has white.

I ended up using a combination of invert and grayscale on this one. The grayscale removes the color and then the invert changes it to a black or gray.

@media (prefers-color-scheme: light) { 
    #scriptura { 
        filter: invert(1) grayscale(1); 
    }
}

You can read more about the CSS filter property at MDN. I encourage you to play around in dev tools to see what the different filters can do for you. That is how I came up with the solution for using invert and brightness for one solution and invert and grayscale for another.