Hugo使用hello-friend-ng主题时如何随明暗主题切换展示SVG图片

核心认知 #

你完全没必要费劲去读原theme.js里的theme、isDark变量——那俩是脚本块级作用域里的私有常量，外部代码本来就摸不到，折腾半天也拿不到值。
这套主题明暗状态的唯一可靠全局标识就是<body>元素上的dark-theme类名：不管是页面刚加载时读取本地存的用户偏好、还是用户点切换按钮触发的状态变更，所有明暗逻辑最终都会同步到这个类名上，判断当前是啥主题状态，靠这个类名就够准，完全不用搭原脚本变量的车。

零侵入实现方案 #

整个方案完全不改动原主题的JS和核心样式，靠CSS类名匹配自动跟主题状态走，升级主题也不会把你的改动冲掉。

• 提前备料
  • 把适配浅色、深色模式的两份SVG导出好，放到你站点自己的静态目录（比如static/images/下，命名成pic-light.svg、pic-dark.svg就行）
  • 所有自定义的模板、样式文件，都放到站点根目录的覆盖路径下，别直接改主题文件夹里的原文件，不然后续主题更新的时候，你写的东西会被直接覆盖。
• 插图片元素
  在你要放主图的模板位置，同时把两个SVG的img标签加上，用类名区分好哪个对应哪个模式：

  <!-- 浅色模式显示的SVG -->
  <img src="/images/pic-light.svg" alt="站点主图" class="adaptive-svg light-show">
  <!-- 深色模式显示的SVG -->
  <img src="/images/pic-dark.svg" alt="站点主图" class="adaptive-svg dark-show">
  

• 补自适应样式
  把下面的CSS写到你站点的自定义样式文件里（hello friend ng本身就支持用户注入自定义CSS，不用动主题原样式）：

  /* 默认浅色模式：藏起深色版SVG */
  .adaptive-svg.dark-show {
    display: none;
  }
  /* 切到深色模式（body上带dark-theme类）的时候，反过来藏浅色版、显示深色版 */
  body.dark-theme .adaptive-svg.light-show {
    display: none;
  }
  body.dark-theme .adaptive-svg.dark-show {
    display: initial;
  }
  

想要丝滑效果的扩展 #

如果觉得直接切换太生硬，想加个淡入淡出的过渡，只需要给svg类补个过渡规则就行：

.adaptive-svg {
  transition: opacity 0.3s ease;
}

避坑提醒 #

• 别想着靠改原主题JS、劫持内部变量的方式做状态同步，这类改动每次主题更新都要重新适配，维护成本特别高。
• 如果不想放两个独立的SVG文件，想直接在模板里写内联SVG，也只要把两个SVG的代码块分别加上对应的light-show、dark-show类就行，上面的CSS规则完全通用，不用额外调整。

内容的提问来源于stack exchange，提问作者kuleje