[Maintainers] Community-submitted images that work on light and dark theme

Exercism
1

Hello :slight_smile:

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 (via filter: 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 :slight_smile:

We’ll be updating the docs in the next few days.

Thanks to @vaeng for nudging us to do this :slight_smile:

3 Likes
2

PR to update the docs has been submitted: Add docs for themed images by ErikSchierboom · Pull Request #482 · exercism/docs · GitHub

1 Like
3

And the docs are live: Markdown Specification | Exercism's Docs

3 Likes