How to switch images in dark mode

[cjlotz]

Hello, what is is the correct way to switch images currently for dark mode. I tried adding the following to markdown but it doesn't seem to work when using the default and modern themes.

<picture>
  <source srcset="docs/diagrams/onkey-logo-tagline-dark.png" media="(prefers-color-scheme:dark)">
  <img alt="tagline" src="docs/diagrams/onkey-logo-tagline.png">
</picture>

Also, what is the approach to follow for the image in the navbar identified using globalMetadata _appLogoPath?

@yufeih @filzrev any suggestions?

[filzrev]

(prefers-color-scheme:dark) media query works when setting dark mode on Browser settings explicitly.

When setting dark mode on docfx's top navigation.
It set bootstrap's data-bs-theme attribute. So above media query is not works.

I thought it requires additional scripts to support dark mode.
https://github.com/orgs/twbs/discussions/38776