Images in dark mode

[fcooper8472]

Often, images don't display nicely in dark mode.

They either

• have transparency, and then you get black lines and text on a dark blue background, or
• a hard white background, which slightly defeats the object of dark mode!

Could we come up with some way of displaying an alternative image (if present) if running in dark mode?

E.g. for an image my_image.svg, could we detect whether we're in dark mode and, if we are, render instead my_image_dm.svg if that image exists?

Happy to entertain other solutions if there's a better way of doing this!

[alasdairwilson]

Yeah have thought about this a few times: #79 in particular. It sounds like it should be trivial but there isn't an obvious route forward.

Browsers have a built in solution:

<picture>
    <source srcset="image_dark.png"  media="(prefers-color-scheme: dark)">
    <img src="image.png">
</picture>

It also makes a lot of sense that you could have dual img tags and mark them with a custom class "only-on-dark" "only-on-light" and use that to hide the other image, both of these work in plain html, but our syntax in the md files doesn't really have anyway of passing this property through. All we can do is pass title text and the image source.

So the only viable solution that I can think of is to use the title text to encode this info and then use JS to add class to any with title text that matches a pattern:

![dark: my lovely image](dark_image.png)
![light: my lovely image](image.png)

I really didn't like the idea of a JS solution here, plus it requires content writers to provide the 2 images, so I tried to forget about this issue till now.

I guess this isn't the ONLY solution as we could replace the simple title syntax with a custom directive:

:::image(mode="dark", title="dark image title")
dark_my_image.png
:::
:::image(title="image title")
my_image.png
:::

OR perhaps even better syntax:

:::image(src="my_image.png" dark_src="dark_my_image.png")
image title
:::

This would allow a cleaner solution in gutenberg but at the expense of making the material writing more complex: We could then support both this and standard syntax allowing people to either do a single image for both themes or provide a set of two.

So I guess those are the 2 options that I can see but happy for more suggestions.

1. JS hack using title text
2. CSS rules with class set by new custom directive: syntax can be varied.

Both need material rewritten to support (obviously I guess).

[martinjrobins]

just putting it out there, is it feasible to support a text-based diagram tool like https://mermaid.js.org/ and encourage the use of that in the material?