使用 Material for MkDocs 实现明暗模式的不同图像

Question

我正在使用MkDocs和Material for MkDocs编写文档。

当我从浅色模式切换到深色模式时，我希望内部有一个图像可以index.md在两个不同版本之间切换，反之亦然。

我在网上找到了不同的解决方案，但似乎都不起作用。

<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)

也许只是还没有实施。
我希望有人能帮帮忙。非常感谢！

Answer 1

如果您添加了调色板切换并希望针对浅色和深色配色方案显示不同的图像，您可以将 #only-light 或 #only-dark 哈希片段附加到图像 URL：

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

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