本文详解如何手动修改 svg 文件，使其支持 zola + serene 主题的暗色/亮色模式自动切换，无需额外 javascript 或 css 变量绑定。
本文详解如何手动修改 svg 文件，使其支持 zola + serene 主题的暗色/亮色模式自动切换，无需额外 javascript 或 css 变量绑定。
Zola 的 Serene 主题通过 CSS 自定义属性（如 --icon-color）配合 prefers-color-scheme 实现图标颜色的动态切换。但直接从 RemixIcon 下载的 SVG 默认使用固定 fill="#000" 或内联颜色值，无法响应主题色变。解决方法非常简洁：将 SVG 中的硬编码颜色替换为 currentColor。
currentColor 是一个特殊的 CSS 关键字，其值等于当前元素的 color 属性——而 Serene 主题已为 .icon 类在不同配色模式下设置了对应的 color 值（例如：亮色模式 color: #333，暗色模式 color: #ddd）。因此，只需确保 SVG 内部使用 fill="currentColor"（以及 stroke="currentColor"，如需描边），即可自动适配。
✅ 正确做法（编辑 SVG 文件）：
<!-- donate-line.svg（修改后） --> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <path fill="currentColor" d="M12.68 3.22a.77.77 0 0 0-.68.77v13.09l-3.25-3.25a.76.76 0 0 0-1.07 1.07l4.03 4.03a.77.77 0 0 0 1.07 0l4.03-4.03a.77.77 0 0 0-1.07-1.07l-3.25 3.25V4a.77.77 0 0 0-.68-.78z"/> </svg>
⚠️ 注意事项：
- 不要保留 fill="#000"、fill="#333" 等具体颜色值；
- 若 SVG 包含多条 <path> 或 <g>，需为每个需要随主题变色的部分显式设置 fill="currentColor"（或统一用 fill="inherit"，但 currentColor 更可靠）；
- 保存为 .svg 文件后，直接放入 static/icons/（或主题指定的图标路径），并在模板中按 Serene 规范引用（如 {{ load_data(path="icons/donate-line.svg") | safe }}）；
- 修改后建议在浏览器开发者工具中检查：切换系统深色模式 → 查看图标元素是否继承了正确的 color 值 → 确认 SVG 的 fill 渲染生效。
总结：Zola 本身不处理 SVG 颜色逻辑，真正的“动态”能力来自 CSS 层级的 currentColor 机制与主题预置的配色规则协同工作。一次文本编辑（替换颜色值），即可让自定义图标无缝融入 Serene 的暗/亮双模体验——轻量、可靠、零运行时开销。
