change svg background in darkdmode

[brownsarahm]

Thanks to @ha0ye via carpentries/instructor-training#1715 (comment)

I think adding a light background to svgs for darkmode might be helpful but I am not fully certain if there are downstream effects so making an issue instead of PR

current:

varnish/source/stylesheets/dark.scss

Lines 43 to 50 in 1f1e219

	// This section does not correspond to an
	// existing light themed sass file - these
	// are soley for a dark mode
	// Darken any images and desaturate
	.img {
	filter: brightness(80%) saturate(80%);
	}

proposed addition

svg{ 
   background-color: ##cfcfcf;
}

bright white is probably too far, i picked a balanced gray above but actual specific color should be done with contrast in mind...

[astroDimitrios]

I'm happy to try and test this @brownsarahm at the weekend. A more permanent solution is either:

• Inline the SVGs, this allows them to 'see' the selected theme and change colour based on css inside the inlined svg.
• Provide an alternate SVG (or png etc) and wrap our images in picture tags. I have a feeling I tried this and couldn't get it to work but I will have another look.

Useful Links:

• Dee_ blog on light and dark mode SVGs
• SVG Limitations in an img tag: Summary SVGs in an <img> tag can't see any stylesheet css or know what theme is selected.
• Andrew Hewler Blog Inling SVGS, includes links/guidance for accessible titles etc.

[astroDimitrios]

It turns out picture tags will respect a users theme preference but not the bootstrap chosen theme! I haven't tested inline SVGs but I think they will run into the same problem.

I have opened #153, which could use some extra testing, to add support for dark mode images :)