Change images on scheme toggle

[dwight-schrute]

I want to change the images when toggled on schemes. Basically would want dark-themed images for dark mode and light-themed images for light mode. I have both images as assets.

What would be the appropriate way to achieve the same?
I could not find a way using mkdocs config, so I have tried the following ways using extra js.

.md file

![Sample Image - Dark Mode](../images/sample-image.dark.png){.can-toggle}

js file

function changeImgSrc(e) {
  const imgs = document.getElementsByClassName('can-toggle');
  for (let idx = 0; idx < imgs.length; idx++) {
      const srcAttr = imgs[idx].getAttribute('src');
      console.log(srcAttr);
      if (e.target.id === '__palette_1') {
        imgs[idx].setAttribute('src', srcAttr.replace('.dark.', '.light.'));
      } else if (e.target.id === 'palette_2') {
        imgs[idx].setAttribute('src', srcAttr.replace('.light.', '.dark.'));
      }
  }
}
const toggleButtons = document.getElementsByClassName('md-option');
for (let idx = 0; idx < toggleButtons.length; idx++) {
    toggleButtons[idx].addEventListener('change', e => changeImgSrc);
}

But I am not getting any callbacks when scheme is changed from the nav bar. I have tried adding change, click, storage, localDataStorage events, but not getting these event callbacks, not sure why.

Can someone help?
TIA

[crimelabs786]

We could use some help with this. We didn't know if this was the right place to ask. But if not, kindly point us to the right place.

The functionality we're looking for, is similar to what's been there in the homepage of Simple Analytics

[phaseOne]

This has been implemented in version 8.1.1 by adding a #only-light or #only-dark hash fragment to the image URL.

![Image title](https://dummyimage.com/600x400/f5f5f5/aaaaaa#only-light)
![Image title](https://dummyimage.com/600x400/21222c/d5d7e2#only-dark)

Alternatively, use prefers-color-scheme CSS media queries—instead of using the toggle switch—to enable automatic dark/light switching for images or SVG files. This has the added benefit of being framework-agnostic.

The first image will load if the system prefers a light color scheme, the second will load if it prefers dark, and the first will load as a fallback.

<picture>
  <source media="(prefers-color-scheme: light)" srcset="https://unsplash.com/photos/JHyiw_dpALk/download?ixid=MnwxMjA3fDB8MXxzZWFyY2h8Mnx8c3VufGVufDB8fHx8MTY1MTQ2NTg3Mg&w=110">
  <source media="(prefers-color-scheme: dark)" srcset="https://unsplash.com/photos/pd4lo70LdbI/download?ixid=MnwxMjA3fDB8MXxhbGx8NjV8fHx8fHwyfHwxNjUxNDY4MjQy&w=110">
  <img src="https://unsplash.com/photos/JHyiw_dpALk/download?ixid=MnwxMjA3fDB8MXxzZWFyY2h8Mnx8c3VufGVufDB8fHx8MTY1MTQ2NTg3Mg&w=110">
</picture>

I don't know if the below embedded demo will load, but we'll see…

For SVG images, you can embed CSS that uses media queries into the <defs> section. diagrams.net has provided some examples for diagrams from their tool and created the example embedded below. Ctrl.blog explains this technique in more detail here.