Different images for light/dark mode with Material for MkDocs

Question

I am writing documentation using MkDocs and Material for MkDocs.

I would like to have an image inside index.md that switch between two different versions when I switch from light to dark mode and vice versa.

I've found different solutions online, but none of them seems to work.

<picture>
    <source srcset='img/dark.png' media='(prefers-color-scheme: dark)'>
    <img src='img/light.png' alt="Docs logo">
</picture>

>>> HTML
<div class="img-toggle"></div>

>>> CSS
.img-toggle {
  background: url(../img/light.png) center / cover;
}
@media (prefers-color-scheme: dark){
  .img-toggle {
     background: url(../img/dark.png) center / cover;
  }
}

>>> I think this is just for GitHub
![Docs logo](./img/dark.png#gh-dark-mode-only)
![Docs logo](./img/light.png#gh-light-mode-only)

Maybe it's just not implemented yet.
I hope someone can help. Thank you very much!

Answer 1

If you added a color palette toggle and want to show different images for light and dark color schemes, you can append 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)

Reference: https://squidfunk.github.io/mkdocs-material/reference/images/#light-and-dark-mode