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

【问题标题】：How to display different image depending on theme in hugo?如何在hugo中根据主题显示不同的图像？
【发布时间】：2020-12-30 18:46:13
【问题描述】：

我正在 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");
});

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

【问题讨论】：

标签： javascript html themes hugo

【解决方案1】：

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

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

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

【讨论】：