如何根据是否启用暗模式更改Hugo-Coder头像？

Question

环境背景

• 我目前正在使用主题Hugo-Coder
在Hugo建立一个网站
• avatar.png是我当前在config.toml中指定的头像

---

问题摘要

• 在config.toml中，您可以通过添加以下内容来启用暗模式：colorscheme = "auto"
• 这启用了暗模式，但是我的头像因为黑色而不能很好地显示

---

需要解决方案

• 我需要一种根据用户的系统设置为亮还是暗模式将avatar.png更改为avatarDarkMode.png的方法

---

希望我添加了足够的信息！

源代码存储库：GitHub Repo

Answer 1

您可能会考虑类似于onweru/newsroom中使用的简码：

图片您要在设备上启用暗模式而在光模式下启用常规图像时使用暗模式图像吗？它需要3个位置参数

将这些图像存储在static/images目录中。

...
{{< picture "lightModeImage.png" "darkModeImage.png" "Image alt text" >}}
...

它使用layouts/shortcodes/picture.html：

{{- $normal := .Get 0 }}
{{- $dark := .Get 1 }}
{{- $alt := .Get 2 }}
{{- $normalPath := absURL (printf "images/%s" $normal) }}
{{- $darkPath := absURL (printf "images/%s" $dark) }}
<picture class = 'nav_logo'>
  <source srcset = '{{ $darkPath }}' media="(prefers-color-scheme: dark)">
  <img srcset = '{{ $normalPath }}' alt = '{{ $alt }}'>
</picture>