Image inversion in dark mode is problematic

[iimog]

What is the problem?

When reading the lesson material in dark mode, images are inverted by default. While this might be useful for diagrams, it is problematic for photos. In particular, in this lesson about computational image analysis, it is misleading and confusing as the images no longer fit the description (or histogram). As an example, consider the root image in lesson 3:

When viewed with dark theme, it looks like this:

Now it appears as a dark object on a light background, whereas the reverse is true.

There are plenty more examples. The cause of the issue is that by default the dark-filter of varnish applies to all images.
@tobyhodges do you know of any way to prevent the application of that class for certain images? I think for this lesson we could also prevent inversion for all images with some !important CSS rule, but for some images it might be sensible to invert them (e.g. this one in lesson 5)

Location of problem (optional)

https://datacarpentry.github.io/image-processing/instructor/03-skimage-images.html

[K-Meech]

Thanks for reporting this @iimog ! I've never used dark mode for this lesson - so the image inversion is a surprise 😦 I agree, the vast majority of images shouldn't be inverted in dark mode.

[K-Meech]

I created an issue on the varnish repo: carpentries/varnish#181 - to see if the maintainers there have any suggestions.

[K-Meech]

The maintainers replied on: carpentries/varnish#181 (see that issue for details)

We can provide images with a -dark suffix to be used in dark mode. We should go through all the images, and determine which can use the dark mode filter + which need a replacement image (for most the replacement image will be a copy of the light mode image, with -dark added to the filename).

[marcodallavecchia]

We should go through all the images, and determine which can use the dark mode filter + which need a replacement image

Thanks for opening the issue and looking into this @K-Meech! We can go through these in the next maintainers meeting.

[K-Meech]

@marcodallavecchia and I went through the images, and almost all of them will need to be added again with the -dark suffix to prevent the filter being applied.

I've re-opened the varnish issue mentioned above, to ask the maintainers if it may be possible to add a global setting to disable the filter for all images. In the meantime, we will go ahead and duplicate all our images so the lesson is useable in dark mode.