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

Question

我在Hugo建了一个网站。我使用的是hello friend 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>包装在一个<div中，然后由css进行控制。

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