svg必须内联到html中才能通过css变量控制颜色；外部引用无法响应主题切换；css变量需定义在:root下，svg元素须用var()引用并提供fallback；js切换主题只需更新dataset.theme并存入localstorage。
SVG 必须内联到 HTML 中，才能被 CSS 变量控制颜色；外部引用（如 <img>、background-image）完全无法响应主题切换。
SVG 内联是前提
只有把 SVG 源码直接写进 HTML（或用 JS 插入 innerHTML），它的 <path></path>、<circle></circle> 等元素才属于当前 DOM，CSS 才能选中并修改 fill、stroke 等属性。
- ✅ 正确方式：
<svg><path fill="var(--icon-primary)"></path></svg> - ❌ 错误方式：
<img src="icon.svg">或div { background: url(icon.svg); } - ⚠️ 补充：用
<use href="#my-icon"></use>也可行，前提是<symbol id="my-icon"></symbol>已定义在当前页面 DOM 中
CSS 变量需统一挂载在 :root
所有皮肤相关的颜色变量（如 --icon-primary、--icon-stroke）必须定义在 :root 下，并保持命名一致。不同主题通过给 html 添加 class 或设置 data-theme 来切换变量值。
- 默认浅色：
:root { --icon-primary: #2196f3; --icon-stroke: #78909c; } - 深色皮肤：
html[data-theme="dark"] { --icon-primary: #bb8f00; --icon-stroke: #5d4037; } - 变量名要语义化，避免
--dark-icon-1这类绑定具体皮肤的命名
SVG 元素必须用 var() 引用变量
不能在 SVG 标签里写死颜色，比如 fill="#2196f3" —— 这样换肤时不会变化。必须显式使用 var(--icon-primary)，并提供合理 fallback。
- 推荐写法：
<path fill="var(--icon-primary, #2196f3)" stroke="var(--icon-stroke, #78909c)"></path> - 不加 fallback 可能导致首次渲染无色（尤其在 JS 注入变量前）
- 若 SVG 由框架生成（如 React/Vue），确保其支持原生属性透传，不要把
fill写成 prop 而绕过 CSS
JS 切换时同步更新与持久化
点击换肤按钮后，只需更新 document.documentElement.dataset.theme，浏览器会自动重算所有 var() 并重绘 SVG。同时存入 localStorage 保证刷新不丢失。
- 示例操作：
document.documentElement.dataset.theme = "blue"; localStorage.setItem("theme", "blue"); - 页面加载时优先读取
localStorage，再 fallback 到prefers-color-scheme - 无需手动遍历 SVG 元素改 style，只要变量和引用正确，一切自动生效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
