5
$\begingroup$

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.

$\endgroup$
8
  • 1
    $\begingroup$ +1 This sounds interesting, a kind of dynamic image that adapts itself to one's settings. $\endgroup$
    – Veronica R. M.
    Apr 4, 2021 at 16:04
  • $\begingroup$ @Verónica I wasn't thinking of dynamic -- it'd be constant for each set-up of browser and operating system theme. $\endgroup$
    – Rosie F
    Apr 4, 2021 at 16:18
  • 4
    $\begingroup$ Do we even have dark mode on the site yet, or are you using some plugin? $\endgroup$
    – Asaf Karagila Mod
    Apr 4, 2021 at 19:19
  • 1
    $\begingroup$ I am experimenting with * Windows 8.1's High Contrast Black theme * browsing the web using Google Chrome and the plug-in High Contrast. $\endgroup$
    – Rosie F
    Apr 4, 2021 at 19:30
  • $\begingroup$ 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 $\endgroup$
    – Calvin Khor
    Apr 4, 2021 at 23:38
  • $\begingroup$ Rosie, that sounds like a question for User Experience rather than our meta. $\endgroup$
    – Asaf Karagila Mod
    Apr 8, 2021 at 8:33
  • $\begingroup$ 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 $\endgroup$
    – Calvin Khor
    Apr 8, 2021 at 8:51
  • 1
    $\begingroup$ This is a useful question, but not being specific to mathematics, doesn't it belong on the main Meta.SE site? $\endgroup$
    – Ray Butterworth
    Jun 4, 2021 at 13:15

2 Answers 2

Reset to default
4
$\begingroup$

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:

White text with black outline can be read on any color.

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.

$\endgroup$
1
  • $\begingroup$ 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. $\endgroup$
    – Asaf Karagila Mod
    Apr 8, 2021 at 8:32
3
$\begingroup$

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

$\endgroup$
7
  • $\begingroup$ How was this done? $\endgroup$
    – Veronica R. M.
    Apr 13, 2021 at 16:02
  • 2
    $\begingroup$ @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. $\endgroup$
    – Calvin Khor
    Apr 14, 2021 at 11:36
  • $\begingroup$ 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 $\endgroup$
    – Veronica R. M.
    Apr 14, 2021 at 15:10
  • $\begingroup$ *browser-> I meant refreshed your answer. $\endgroup$
    – Veronica R. M.
    Apr 14, 2021 at 15:16
  • $\begingroup$ Looks very interesting to create :) BTW $\endgroup$
    – Veronica R. M.
    Apr 14, 2021 at 15:31
  • 1
    $\begingroup$ @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 $\endgroup$
    – Calvin Khor
    Apr 15, 2021 at 4:18
  • 1
    $\begingroup$ @CalvinKhor I like the effect. Thank you for taking the trouble to make it. I will have to read the above-linked tex.SE post later. $\endgroup$
    – Rosie F
    Jun 4, 2021 at 15:43

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .