DEV Community

Cover image for Dark Mode is breaking your branding—easy fix!
Uli Troyo
Uli Troyo

Posted on • Edited on

Dark Mode is breaking your branding—easy fix!

As more sites and apps support dark mode, I've seen tons of logos and profile avatars saved as transparent PNGs and SVGs begin to break. The fix is simple, though: make sure that your art has a border in a contrasting color. If your art is all black (the most common situation) or otherwise mostly dark, a thin white border will be invisible on a light background, but will set off your art nicely on a dark mode background. Similarly, if your art contains a lot of light color, a dark border will prevent it from washing out on light backgrounds.

Below is my example for both cases. Notice how I add a 10-pixel white border on the first logo to suit the art, and a 1-pixel border and a drop-shadow to the second logo to keep it subtle since the art is more complex:
Demo of logos with transparency shown over backgrounds of their same color, compared to the same transparent logos using a contrasting border.

That's literally all I have to say! I've seen this a lot in the wild and it's apparent it bears to be mentioned. I hope you didn't need the help, but you're welcome if it did ;)

Top comments (1)

Collapse
 
margoport profile image
Margoport • Edited

Much in business depends on the appearance of the site, logo and other things. And it constantly needs to be corrected as trends change. All this can be done by branding companies. You can read more information here: mediaonemarketing.com.sg/branding-...