小编chc*_*chc的帖子

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

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

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

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

<picture>
    <source srcset='img/dark.png' media='(prefers-color-scheme: dark)'>
    <img src='img/light.png' alt="Docs logo">
</picture>
Run Code Online (Sandbox Code Playgroud)
>>> 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;
  }
}
Run Code Online (Sandbox Code Playgroud)
>>> 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)
Run Code Online (Sandbox Code Playgroud)

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

html markdown material-design mkdocs darkmode

4
推荐指数
1
解决办法
1655
查看次数

标签 统计

darkmode ×1

html ×1

markdown ×1

material-design ×1

mkdocs ×1