# How can an image be made which displays correctly both in dark and light modes?

How can an image be made, for insertion into a StackExchange question or answer, so that if a user uses dark mode and the web page's background is dark, the image displays as dark with white foreground; whereas if a user uses bright mode and the web page's background is bright, the image displays as bright with black foreground?

I know that, in a PNG file, the colour corresponding to some colour index can be made transparent. How to make it so would be a separate question relating to the app used to make the PNG file. But I see an issue in ensuring that the user's web browser displays the text in a colour contrasting with the background, whether the background is dark or bright.

I don't even know if this can be done -- it concerns how browsers render StackExchange web pages and the images they contain, rather than how to create the images. If it isn't possible, then there's no point in researching how to do the other steps in this work path, hence why I ask this question first.

• +1 This sounds interesting, a kind of dynamic image that adapts itself to one's settings. – Verónica Rmz. Apr 4 at 16:04
• @Verónica I wasn't thinking of dynamic -- it'd be constant for each set-up of browser and operating system theme. – Rosie F Apr 4 at 16:18
• Do we even have dark mode on the site yet, or are you using some plugin? – Asaf Karagila Apr 4 at 19:19
• I am experimenting with * Windows 8.1's High Contrast Black theme * browsing the web using Google Chrome and the plug-in High Contrast. – Rosie F Apr 4 at 19:30
• Transparent pngs with greys, but the image won’t be great. Also as math.se does not officially have dark mode maybe try meta.se – Calvin Khor Apr 4 at 23:38
• Rosie, that sounds like a question for User Experience rather than our meta. – Asaf Karagila Apr 8 at 8:33
• A variant of my above suggestion: if your picture is sufficiently thin, you may use use a transparent png that is two pngs horizontally joined together at the middle; the left picture contains only pure white, and the right picture only pure black. Then on a white background, only the right picture will be visible; and only the left on a black background. You can also interlace two such pictures – Calvin Khor Apr 8 at 8:51

It is not possible to make an image whose colors vary depending on whether the background is light or dark. The PNG* standard simply describes the color of each pixel, including an alpha channel; it has no provision for "responsive" images. However, there is a workaround:

You can also use the inverse, black text with a white outline. The point is, regardless of the background, there will always be enough contrast to read the text. The trick is to make sure that the outline is thick enough so that the eye can easily discern it. It should be at least a good 4-5 pixels thick, and possibly thicker if you are going to scale the image down. If it's only 1-2 pixels thick, it will likely look jagged and ugly, and may be harder for the reader to understand. If your image editor offers a "drop shadow" effect, this can be a good way of making a nice, easy to see outline, with a reasonably attractive gradient effect instead of a sharp cutoff.

If this is still too ugly for you, you can surround the text with an opaque background instead. Just place a black (or white) rectangle on the layer below the text, and make it big enough to completely enclose the text you want to display.

* This is also true of most other image standards, but notably the SVG format can be styled with CSS, and so this trick can be done with an SVG image. However, I don't think Stack Exchange has any provision for actually displaying SVG images as such.

• The SVG option is good. I think that one can hack the SE servers and inject code that allows SVG graphics and custom CSS handling. If someone does that, they might as well award themselves the Hacker badge. – Asaf Karagila Apr 8 at 8:32

Transparent png test: On white it looks like On black it looks like It doesn't "work" on coloured backgrounds:

• How was this done? – Verónica Rmz. Apr 13 at 16:02
• @Verónica [this is a better version of now deleted comments] I found some transparent maths on Wikipedia that was pure black, then superimposed a white copy at an offset in a photo editor. This tex.SE post explains that you can create transparent pngs from LaTeX documents compiled using the standalone document class by using the free (commandline) program ImageMagick, specifically the command convert -density 300 file.pdf -quality 90 file.png Googling "latex to png" will find websites that do it for you too. – Calvin Khor Apr 14 at 11:36
• Calvin, I've just understood your comment on the main post and your images! I refreshed the browser and when I did I saw, for a few seconds, an "image" on the white image, that disappeared when the refresh was finished :o – Verónica Rmz. Apr 14 at 15:10
• *browser-> I meant refreshed your answer. – Verónica Rmz. Apr 14 at 15:16
• Looks very interesting to create :) BTW – Verónica Rmz. Apr 14 at 15:31
• @Verónica glad you understood :) Just waiting to see if the OP likes it. If you click on this direct link to this answer, it will momentarily have a shaded background and you can see the white text – Calvin Khor Apr 15 at 4:18