The quest to have nice diagrams that resists to dark and light mode in Hashnode

Great article , will definitely have me more mindful of the images I use now. I prefer no. 5 though, it displays better in both light and dark mode. No. 6 is a close second if it worked well in light mode

Animated PNG

If you didn't know PNG has an equivalent format of the animated GIF. It allows for animated pictures with full 24bits colors and 8bits alpha transparency. Great, right? The good thing is that they are supported almost everywhere: Details

So I made a diagram. I removed the background. Then I made an animated PNG that would contain two pictures. One is the diagram colored in #1A1A1A which is the dark mode color background on Hashnode, and the other one colored in full white #FFFFF which is the color of Hashnode background in light mode. I set every picture to last 1 / 60 seconds. At that speed and with the background of the same color of one or the other picture, it should just blend in perfectly. A bit like some 3D stereo system that alternates left and right eye images at 120Hz.

I won't share the pictures I created here to avoid trouble with any epileptic visitor. But in shorts, it was a failure as it was flashing. So it may be that I have issues with V-Sync in Chrome or that the APNG implementation in browsers is not fully taking profit of the GPU and creates some latency between two frames that breaks my 60Hz frequency.

After giving a second thought, it didn't sound like it could become an option anyhow unless I could use something fancier than a simple APNG. So I moved to another solution.

Transparency

I played with the transparency and made several tests. Please find below the resulting images and verify how they resist the dark mode toggle by yourself.

Content is white, background at 50% opacity and color #7C7C7C

Content is black, background at 50% opacity and color #FFFFFF

Content is white, background at 50% opacity and color #000000

Content is #4D4D4D, background at 50% opacity and color #7C7C7C

Content is black, background at 50% opacity and color #7C7C7C

Content is transparent, background at 50% opacity and color #BABABA

Content is transparent, background at 50% opacity and color #999999

Content is transparent, background at 50% opacity and color #808080

Conclusion

I don't like 2 because a box appears in dark mode while there is none in light. And 4 is no good because the font is not legible in dark mode. While 1, 3, and 5 are ok, I prefer when the font is fully transparent and gets to be filled with the current mode's color. So my final choice would go to 7 or 6. What do you prefer? Reply in the comments just below!

The quest to have nice diagrams that resists to dark and light mode in Hashnode

Comments (1)

More from this blog

Introduction to programming for kids

How to run an SE Spectrum online?

A better way to discuss?

Modern dependency management

Street Epistemology

Animated PNG

Transparency

Conclusion

Command Palette

Comments (1)

More from this blog

Animated PNG

Transparency

Conclusion