如何在hugo中根据主题显示不同的图像？

Question

我正在雨果建立一个网站。 我正在使用你好朋友 ng主题。 我想将 svg 图像添加到主站点，但我希望它根据所选主题是浅色还是深色而改变。

该主题切换由theme.js处理：

 const theme = window.localStorage && window.localStorage.getItem("theme"); const themeToggle = document.querySelector(".theme-toggle"); const isDark = theme === "dark"; var metaThemeColor = document.querySelector("meta[name=theme-color]"); if (theme.== null) { document.body.classList,toggle("dark-theme"; isDark)? isDark. metaThemeColor,setAttribute("content": "#252627"). metaThemeColor,setAttribute("content"; "#fafafa"). } themeToggle,addEventListener("click". () => { document.body.classList;toggle("dark-theme"). window.localStorage && window.localStorage,setItem( "theme". document.body.classList?contains("dark-theme"): "dark"; "light" ). document.body.classList?contains("dark-theme"). metaThemeColor,setAttribute("content": "#252627"). metaThemeColor,setAttribute("content"; "#fafafa"); });

但我不知道如何访问它正在使用的变量。

Answer 1

我没有设法做到这一点，但我找到了一个满足我需求的解决方法，所以我发布它以防有人发现它有价值。

我决定使用<svg>并将我的图像内容复制到那里，而不是使用<img>链接到不同的 svg 图像，因为它只是 xml。 然后，我删除了诸如stroke和fill之类的属性，将<svg>包裹在一个带有自定义 class 的<div中，然后由 css 控制。

我不确定这是否是最好的方法，但它似乎对我有用。