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

Question

环境背景

• 我目前正在使用主题在 Hugo 中建立一个站点Hugo-Coder
• 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>