Hello
Recently, we’ve had an increase in the amount of community-submitted images for use in docs - e.g. in exercise instructions, approaches, etc. One question that’s arisen a couple of times is how to have images that work with light/dark themes. We now have a solution to this.
Suffixing your image name (before the file extension) will now change how the site handles it.
- Images that end in
-invertible
(e.g.graph-invertible.svg
) will be inverted in dark theme (viafilter: invert(100%)
). - Images that end in
-light
expect a corresponding-dark
variant. The image variant will be rendered based on the user’s theme. - Images with neither suffix will be used without modifications across both themes.
This means that if you want to create grayscale images, you can generally make them look good on light theme, and then set them to be invertible. But if you’re using an image with lots of colours, you might like to make two variants.
The full image name (including -invertible
etc) should be added to the markdown where the image is rendered. For light/dark ones, ONLY include the -light
variant. This logic is honoured across all markdown docs.
Feel free to update any images that you feel could benefit from this new approach
We’ll be updating the docs in the next few days.
Thanks to @vaeng for nudging us to do this