Explicitly set dark mode images to avoid varnish image color inversion

[marcodallavecchia]

As explained in #349, varnish defaults to inverting all images included in the curriculum for dark mode. This is a problem as most of the material included here relies on the raw 'light-mode' images appearance.

This PR closes #349 by explicitly creating copies of all images that need to be preserved as-is in light-mode by appending -dark to the image file names (discussed here).

Originally I was making a copy of all images, but I found several histograms and/or images that had a transparent background. This caused the black text on black background (in dark-mode) to be unreadable, so I either updated the images to have a complete white background, or left varnish doing its magic to invert the color scheme. The only side effect of this choice is that there's no consistent aesthetics to all graphs, but there were inconsistencies between fonts and style before anyway.

I tried to go through all the content to see if all images and text references still make sense with these figures, but it would be great if you could double-check if I missed something.

[github-actions]

Thank you!

Thank you for your pull request 😃

🤖 This automated message can help you check the rendered files in your submission for clarity. If you have any questions, please feel free to open an issue in {sandpaper}.

If you have files that automatically render output (e.g. R Markdown), then you should check for the following:

• 🎯 correct output
• 🖼️ correct figures
• ❓ new warnings
• ‼️ new errors

Rendered Changes

🔍 Inspect the changes: https://github.com/datacarpentry/image-processing/compare/md-outputs..md-outputs-PR-350

The following changes were observed in the rendered markdown documents:

 data/beads-dark.jpg (new)                           | Bin 0 -> 2363654 bytes
 data/board-dark.jpg (new)                           | Bin 0 -> 119691 bytes
 data/gaussian-original-dark.png (new)               | Bin 0 -> 9420 bytes
 data/maize-root-cluster-dark.jpg (new)              | Bin 0 -> 192351 bytes
 data/maize-roots-grayscale-dark.jpg (new)           | Bin 0 -> 125461 bytes
 data/plant-seedling-dark.jpg (new)                  | Bin 0 -> 180733 bytes
 data/remote-control-dark.jpg (new)                  | Bin 0 -> 909352 bytes
 data/shapes-01-dark.jpg (new)                       | Bin 0 -> 627450 bytes
 data/shapes-02-dark.jpg (new)                       | Bin 0 -> 30053 bytes
 data/sudoku-dark.png (new)                          | Bin 0 -> 31065 bytes
 data/wellplate-01-dark.jpg (new)                    | Bin 0 -> 150771 bytes
 fig/3D_petri_after_blurring-dark.png (new)          | Bin 0 -> 112819 bytes
 fig/3D_petri_before_blurring-dark.png (new)         | Bin 0 -> 110601 bytes
 fig/Gaussian_2D-dark.png (new)                      | Bin 0 -> 34613 bytes
 fig/beads-canny-ui-dark.png (new)                   | Bin 0 -> 21417 bytes
 fig/beads-out-dark.png (new)                        | Bin 0 -> 56818 bytes
 fig/black-and-white-dark.jpg (new)                  | Bin 0 -> 137702 bytes
 fig/black-and-white-edge-pixels-dark.jpg (new)      | Bin 0 -> 4079 bytes
 fig/black-and-white-gradient-dark.png (new)         | Bin 0 -> 25580 bytes
 fig/blur-demo-dark.gif (new)                        | Bin 0 -> 567305 bytes
 fig/board-coordinates-dark.jpg (new)                | Bin 0 -> 92413 bytes
 fig/board-final-dark.jpg (new)                      | Bin 0 -> 112491 bytes
 fig/cartesian-coordinates-dark.png (new)            | Bin 0 -> 3087 bytes
 fig/cat-corner-blue-dark.png (new)                  | Bin 0 -> 37545 bytes
 fig/cat-dark.jpg (new)                              | Bin 0 -> 110172 bytes
 fig/cat-eye-pixels-dark.jpg (new)                   | Bin 0 -> 33562 bytes
 fig/checkerboard-blue-channel-dark.png (new)        | Bin 0 -> 88457 bytes
 fig/checkerboard-dark.png (new)                     | Bin 0 -> 493409 bytes
 fig/checkerboard-green-channel-dark.png (new)       | Bin 0 -> 88869 bytes
 fig/checkerboard-red-channel-dark.png (new)         | Bin 0 -> 88445 bytes
 fig/colonies-01-dark.jpg (new)                      | Bin 0 -> 12701 bytes
 fig/colonies-01-gray-dark.png (new)                 | Bin 0 -> 42480 bytes
 fig/colonies-01-mask-dark.png (new)                 | Bin 0 -> 1927 bytes
 fig/colonies-01-summary-dark.png (new)              | Bin 0 -> 62096 bytes
 fig/colonies-02-dark.jpg (new)                      | Bin 0 -> 14688 bytes
 fig/colonies-02-summary-dark.png (new)              | Bin 0 -> 70559 bytes
 fig/colonies-03-dark.jpg (new)                      | Bin 0 -> 20700 bytes
 fig/colonies-03-summary-dark.png (new)              | Bin 0 -> 91448 bytes
 fig/colony-mask-dark.png (new)                      | Bin 0 -> 69639 bytes
 fig/colour-table-dark.png (new)                     | Bin 0 -> 26691 bytes
 fig/combination-dark.png (new)                      | Bin 0 -> 18238 bytes
 fig/drawing-practice-dark.jpg (new)                 | Bin 0 -> 29521 bytes
 fig/eight-dark.png (new)                            | Bin 0 -> 69963 bytes
 fig/five-dark.png (new)                             | Bin 0 -> 370829 bytes
 fig/four-maize-roots-binary-dark.jpg (new)          | Bin 0 -> 50984 bytes
 fig/four-maize-roots-binary-improved-dark.jpg (new) | Bin 0 -> 44450 bytes
 fig/four-maize-roots-dark.jpg (new)                 | Bin 0 -> 71886 bytes
 fig/gaussian-blurred-dark.png (new)                 | Bin 0 -> 27504 bytes
 fig/gaussian-kernel-dark.png (new)                  | Bin 0 -> 27230 bytes
 fig/grayscale-dark.png (new)                        | Bin 0 -> 69737 bytes
 fig/image-coordinates-dark.png (new)                | Bin 0 -> 3131 bytes
 fig/left-hand-coordinates-dark.png (new)            | Bin 0 -> 273093 bytes
 fig/maize-root-cluster-mask-dark.png (new)          | Bin 0 -> 6795 bytes
 fig/maize-root-cluster-selected-dark.png (new)      | Bin 0 -> 215528 bytes
 fig/maize-root-cluster-threshold-dark.jpg (new)     | Bin 0 -> 54107 bytes
 fig/maize-roots-threshold-dark.png (new)            | Bin 0 -> 45000 bytes
 fig/maize-seedling-enlarged-dark.jpg (new)          | Bin 0 -> 29450 bytes
 fig/maize-seedling-original-dark.jpg (new)          | Bin 0 -> 117835 bytes
 fig/maize-seedlings-dark.jpg (new)                  | Bin 0 -> 88078 bytes
 fig/maize-seedlings-mask-dark.png (new)             | Bin 0 -> 1626 bytes
 fig/maize-seedlings-masked-dark.jpg (new)           | Bin 0 -> 44087 bytes
 fig/petri-blurred-intensities-plot-dark.png (new)   | Bin 0 -> 25872 bytes
 fig/petri-dish-dark.png (new)                       | Bin 0 -> 119846 bytes
 fig/petri-original-intensities-plot-dark.png (new)  | Bin 0 -> 27789 bytes
 fig/petri-selected-pixels-marker-dark.png (new)     | Bin 0 -> 114952 bytes
 fig/plant-seedling-colour-histogram-dark.png (new)  | Bin 0 -> 46586 bytes
 fig/plant-seedling-grayscale-dark.png (new)         | Bin 0 -> 292284 bytes
 ...lant-seedling-grayscale-histogram-dark.png (new) | Bin 0 -> 37852 bytes
 ...seedling-grayscale-histogram-mask-dark.png (new) | Bin 0 -> 42257 bytes
 fig/quality-histogram-dark.jpg (new)                | Bin 0 -> 36086 bytes
 fig/quality-jpg-dark.jpg (new)                      | Bin 0 -> 7947 bytes
 fig/quality-original-dark.jpg (new)                 | Bin 0 -> 63034 bytes
 fig/quality-tif-dark.jpg (new)                      | Bin 0 -> 30336 bytes
 fig/rectangle-gaussian-blurred-dark.png (new)       | Bin 0 -> 24142 bytes
 fig/remote-control-masked-dark.jpg (new)            | Bin 0 -> 344896 bytes
 fig/shapes-01-canny-edge-output-dark.png (new)      | Bin 0 -> 6887 bytes
 fig/shapes-01-canny-edges-dark.png (new)            | Bin 0 -> 26825 bytes
 fig/shapes-01-canny-track-edges-dark.png (new)      | Bin 0 -> 36148 bytes
 fig/shapes-01-cca-detail-dark.png (new)             | Bin 0 -> 13698 bytes
 fig/shapes-01-filtered-objects-dark.png (new)       | Bin 0 -> 7123 bytes
 fig/shapes-01-grayscale-dark.png (new)              | Bin 0 -> 142326 bytes
 fig/shapes-01-labeled-dark.png (new)                | Bin 0 -> 7089 bytes
 fig/shapes-01-mask-dark.png (new)                   | Bin 0 -> 21832 bytes
 ...hapes-01-objects-coloured-by-area-dark.png (new) | Bin 0 -> 17200 bytes
 fig/shapes-01-objects-coloured-by-area.png          | Bin 17353 -> 17200 bytes
 fig/shapes-01-selected-dark.png (new)               | Bin 0 -> 3062304 bytes
 fig/shapes-02-mask-dark.png (new)                   | Bin 0 -> 3757 bytes
 fig/shapes-02-selected-dark.png (new)               | Bin 0 -> 112123 bytes
 fig/sudoku-gray-dark.png (new)                      | Bin 0 -> 13105 bytes
 fig/three-colours-dark.png (new)                    | Bin 0 -> 70043 bytes
 fig/wellplate-01-masked-dark.jpg (new)              | Bin 0 -> 56524 bytes
 fig/wellplate-02-dark.jpg (new)                     | Bin 0 -> 759664 bytes
 fig/wellplate-02-histogram-dark.png (new)           | Bin 0 -> 33118 bytes
 fig/wellplate-02-masked-dark.jpg (new)              | Bin 0 -> 46258 bytes
 fig/zero-dark.png (new)                             | Bin 0 -> 59001 bytes
 95 files changed, 0 insertions(+), 0 deletions(-)

What does this mean?

If you have source files that require output and figures to be generated (e.g. R Markdown), then it is important to make sure the generated figures and output are reproducible.

This output provides a way for you to inspect the output in a diff-friendly manner so that it's easy to see the changes that occur due to new software versions or randomisation.

⏱️ Updated at 2025-12-09 11:56:41 +0000