On my Hashnode, blog visitors have a choice between dark and light mode. For my blog, I activated the dark mode by default. But this is the first time for me, I write articles that will end up on a dark background. And I quickly noticed my diagrams and graphs, which I usually make black on white background, looked bad...

So here is my quest to find a good solution to have diagrams that fit well in dark mode while still working 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.

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

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

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

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

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

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

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

8. 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!