您可以考虑使用类似于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>

SVG文件怎么样？
有没有办法改变SVG文件的样式，而不是创建两个不同的SVG图像，一个用于暗模式，一个用于亮模式？
对于SVG，您可以尝试CSS媒体查询：
您可以使用CSS媒体查询来检测用户是否在其操作系统或浏览器中启用了浅色或深色主题，然后相应地将不同的样式应用于SVG。
例如：

@media (prefers-color-scheme: dark) {
   svg {
       filter: invert(1);
   }
}