本文详解如何手动修改 remixicon 提供的 svg 文件，使其支持 zola + serene 主题的暗色/亮色模式自动切换，无需 javascript，纯 css 驱动。
本文详解如何手动修改 remixicon 提供的 svg 文件，使其支持 zola + serene 主题的暗色/亮色模式自动切换，无需 javascript，纯 css 驱动。
Zola 的 Serene 主题通过 CSS 变量（如 --text-color、--icon-color）和 prefers-color-scheme 媒体查询实现主题色动态响应。但直接从 RemixIcon 下载的 SVG 默认使用固定颜色（如 fill="#000" 或内联 fill="black"），无法随主题切换——这是因为静态颜色值会覆盖 CSS 继承链。
要让自定义图标（如爱心捐赠图标 ❤️）具备动态变色能力，关键在于移除 SVG 中所有硬编码的颜色声明，改用 fill="currentColor"。currentColor 会继承父元素的 color 值，而 Serene 主题恰好为图标容器设置了响应式 color（例如 .icon { color: var(--icon-color); }），从而实现无缝联动。
✅ 正确做法（以 heart-line.svg 为例）：
- 从 RemixIcon 下载 SVG（选择「Line」风格，避免填充型图标干扰语义）；
- 用文本编辑器打开，删除所有 fill="..."、stroke="..." 等颜色属性；
- 在
- 保存后放入 static/icons/heart.svg，并在模板中引用：
<!-- 在 Zola 模板中（如 index.html） -->
<svg class="icon" width="24" height="24">
{{ load_data(path="icons/heart.svg") | safe }}
</svg>
⚠️ 注意事项：
- 不要使用
引入 SVG——它无法继承 CSS 变量；必须内联 SVG（通过 load_data 或直接嵌入）；
- 若图标含多色组件（如徽章+图标），需为不同
单独设置 fill="currentColor" 或指定 CSS 类控制； - Serene 主题已预设 .icon { color: var(--icon-color); }，确保你的 SVG 容器有 class="icon" 或对应样式；
- 修改后可通过浏览器开发者工具 → Elements 面板，切换 prefers-color-scheme 模拟深浅模式验证效果。
最终，一个仅 2 行修改的 SVG（删除旧 fill + 添加 fill="currentColor"）即可让图标完全融入主题色系统——简洁、高效、符合静态站点设计哲学。
