Add support for dark mode images via JS

[astroDimitrios]

Adds support for dark mode images via JS. No change is required on the end user.

The JS alters the image src to add -dark before the extension. For example:

• test.png in light mode
• test-dark.png in dark mode

If there is no dark mode image in the same location as the light mode version the fallback is the light mode image. There doesn't seem to be a clean way to test if a file exists and handle the responses well (unless someone else can point me to some nice JS!) so the dev console in firefox/chrome etc. will throw 404 errors when it attempts to load dark mode images that aren't available (only when choosing to switch from light to dark mode). There might be ways of suppressing the errors but these seem convoluted.

If the fallback light image is used in dark mode the img.dark-filter css rule is applied which inverts the image, and slightly reduces the saturation and brightness.

Example

git-novice lesson where the top comic strip image has a fuzzy dark mode variant for demonstration purposes.

Light Mode User Supplied Image:

Dark Mode User Supplied Image:

Light Mode SVG:

Dark Mode SVG - fallback to light with dark-filter:

Light Mode PNG:

Dark Mode PNG - fallback to light with dark-filter:

Related Issues

carpentries/instructor-training#1715
#150