Dark Mode is breaking your branding—easy fix!

Uli Troyo - Jun 29 '21 - - Dev Community

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

. .
Terabox Video Player