如何在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 控制。

我不確定這是否是最好的方法，但它似乎對我有用。