SVG图标颜色不随主题变化，根本原因是未内联或保留硬编码fill属性；必须内联SVG、清除所有内联fill/stroke、设fill="currentColor"，并确保父容器显式定义color。
不能只靠 window.matchMedia 自动联动，必须手动绑定 change 事件 + 主动同步状态，否则系统切了主题，编辑器 UI 无反应。
为什么 window.matchMedia('(prefers-color-scheme: dark)') 初始值可能错
它在 DOM 尚未 ready 时调用会返回 false（哪怕系统已是暗色），因为媒体查询尚未完成首次评估。常见于脚本放在 <head> 或未加 DOM 加载守卫。
- 务必等
document.readyState === 'interactive'或使用DOMContentLoaded事件包裹初始化逻辑 - SSR 环境下必须加
typeof window !== 'undefined'守卫，否则服务端报错 - 不要直接写
const isDark = window.matchMedia(...).matches在模块顶层——这会在服务端执行并炸掉
监听 change 事件但页面没更新？漏了这两步
仅绑定事件不等于主题能实时响应：首屏状态要主动设，且 data-theme 必须挂到 document.documentElement 上，否则 <meta name="color-scheme"> 和 CSS 变量都失效。
- 立即执行一次：
document.documentElement.dataset.theme = mql.matches ? 'dark' : 'light' - 再绑定监听：
mql.addEventListener('change', e => document.documentElement.dataset.theme = e.matches ? 'dark' : 'light') - 别用匿名函数——单页应用中卸载组件时需调用
mql.removeEventListener，否则内存泄漏
data-theme 和 @media (prefers-color-scheme) 怎么共存不打架
用户手动点开关后，应优先尊重用户选择，系统偏好仅作 fallback。CSS 层级必须明确：用户选择 > 系统偏好 > 默认值。
立即学习“前端免费学习笔记（深入）”；
- 定义变量时，
:root写默认（浅色）值，@media (prefers-color-scheme: dark)仅覆盖变量，不写具体样式 - 用户手动切换后，用
html[data-theme="dark"]覆盖同名变量，且该选择器权重必须高于媒体查询（例如不嵌套、不加额外 class） -
<meta name="color-scheme" content="light dark">要在 HTML 中初始就存在，并在 JS 切换时同步更新其content属性
编辑器内 SVG 图标/工具栏按钮颜色不随主题变？问题出在 SVG 引入方式
用 <img src="icon.svg"> 的图标完全无法响应主题——SVG 必须内联，且所有 fill/stroke 属性得删干净。
- 内联 SVG 后，统一用 CSS 控制：
svg path, svg circle { fill: var(--icon-color); } -
--icon-color在:root中定义，默认值为浅色，@media和[data-theme]分别覆盖 - 避免在 SVG 标签里写
style="fill: #333"或fill="#333"，这类硬编码会锁死颜色
最易被忽略的是 transition：如果编辑器 UI 切换时“闪一下”，大概率是 transition 只写在 [data-theme="dark"] 规则里，而基础状态没声明——它必须出现在默认样式中，且两端颜色值都得是确定的十六进制或 rgb，不能依赖变量间接计算。
