Zola静态站点Serene主题添加明暗动态切换爱心捐赠图标问题

关键逻辑 #

Serene主题的明暗模式切换靠CSS变量控制图标颜色，你下载的Remixicon SVG默认带固定黑色填充，得把固定色去掉，让它继承主题的颜色变量才行。

具体操作步骤 #

• 修改SVG文件
  用记事本或代码编辑器打开你下载的爱心SVG，找到带fill="#000"或fill="black"的<path>标签，删掉fill属性；如果有stroke固定黑色，也一并删掉对应的颜色值。
  举个修改后的例子：

  <svg class="theme-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
  </svg>
  

• 添加主题兼容类名
  在SVG的根<svg>标签里加上theme-icon类（和主题自带图标用的类一致，你可以查看主题源码里的图标结构确认），确保它能继承主题的颜色变量。
• 按主题文档部署图标
  把修改好的SVG放到主题要求的目录（一般是static/icons），然后按照主题文档的步骤配置引用这个图标，调用方式和自带图标保持一致。
• 验证效果
  运行zola serve启动本地服务，切换明暗模式，检查爱心图标是否同步变色。

原理说明 #

Serene主题在明暗模式下会给页面根元素设置不同的CSS颜色变量，自带图标都没有固定填充色，而是直接继承这些变量的颜色。你下载的SVG默认硬编码了黑色填充，所以必须去掉固定色，让它跟随主题变量的变化，再配上对应的主题类名，就能实现动态变色效果。

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