x/website: Fuzzing documentation image has transparent background, works poorly with dark mode

[carlpett]

The fuzzing page, https://tip.golang.org/security/fuzz/, has an image describing different components involved. It however has a transparent background, and with the page supporting dark mode, the image gets very tricky to read:

I'm not sure if having a opaque white background would be problematic, but that seems to be the easiest solution.

[mvdan]

An alternative might be a white background with 50% opacity, then at least you don't get a block of solid white light on dark mode.

[mknyszek]

CC @dmitshur

[cameronldroberts]

Hey would like to pick this up if possible :)

[Deleplace]

Cameron's fix is one fine way to solve this. It makes the code readable again, at the cost of having block with white background inside a dark page.

I can think of 2 other approaches that would "save" the ambiant dark background:

• edit the original picture to apply a shadow (bright or half-bright) to all the text
• serve a different picture when in dark mode, as illustrated here https://chrisruppel.com/blog/picture-prefers-color-scheme-dark/

[Deleplace]

I experimented 2 ways of adding a light-tone shadow:

• With the CSS style filter: drop-shadow(0.5px 0.5px 0.3px #CCC);

• By editing the original image

While these have the advantage of having a single transparent PNG that works in both light theme and dark theme, I'm still not satisfied with the readability of the dark version.

See my next comment instead.

[Deleplace]

We can achieve much better results by serving a different image for light theme (default) and dark theme.

Something like

<picture>
	<source srcset="/security/fuzz/example_dark.png" media="(prefers-color-scheme: dark)" type="image/png">
	<img alt="Example code showing [...]" src="/security/fuzz/example.png" style="display: block; width: 600px; height:
auto;">
</picture>

I could make a CL for this.

[gopherbot]

Change https://go.dev/cl/454875 mentions this issue: Fuzzing article: fix transparent image for dark theme.