如何根据是否启用暗模式更改 Hugo-Coder 头像？
How to change Hugo-Coder avatar based on if dark mode is enabled?
环境背景
- 我目前正在使用主题
Hugo-Coder 在 Hugo 中构建网站
avatar.png是我在config.toml
问题摘要
- 在
config.toml 中，您可以通过添加以下内容启用深色模式：colorscheme = "auto"
- 这开启了深色模式，但是我的头像是黑色的，所以显示效果不佳
需要解决方案
- 我需要一种方法，根据用户的系统设置为亮模式还是暗模式，将
avatar.png 更改为 avatarDarkMode.png
希望我添加了足够的信息！
源代码回购：GitHub Repo
您可以考虑使用类似于 onweru/newsroom 中使用的短代码：
Picture You want to use darkmode images when darkmode is enabled on a device and a regular image on lightmode? It takes 3 positional parameter
Store these images in the static/images directory.
...
{{< 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>
环境背景
- 我目前正在使用主题
Hugo-Coder 在 Hugo 中构建网站
avatar.png是我在config.toml中指定的当前头像
问题摘要
- 在
config.toml中，您可以通过添加以下内容启用深色模式：colorscheme = "auto" - 这开启了深色模式，但是我的头像是黑色的，所以显示效果不佳
需要解决方案
- 我需要一种方法，根据用户的系统设置为亮模式还是暗模式，将
avatar.png更改为avatarDarkMode.png
希望我添加了足够的信息！
源代码回购：GitHub Repo
您可以考虑使用类似于 onweru/newsroom 中使用的短代码：
Picture You want to use darkmode images when darkmode is enabled on a device and a regular image on lightmode? It takes 3 positional parameter
Store these images in the
static/imagesdirectory.... {{< 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>