golang
x/website: Fuzzing documentation image has transparent background, works poorly with dark mode
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.
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.
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/
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.
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.
Change https://go.dev/cl/454875 mentions this issue: Fuzzing article: fix transparent image for dark theme.
