真正安全的动态主题切换必须用 :root + data-theme：在 :root 定义 CSS 变量，通过 [data-theme="dark"] 等选择器覆盖，切换时仅修改 document.documentElement 的 data-theme 属性，避免直接操作 style.textContent 或 insertRule。
直接用 document.styleSheets 修改 style 标签内容风险极高
绝大多数人尝试用 document.querySelector('style').textContent = '...' 替换整个样式块，结果发现：新规则不生效、旧规则残留、@media 被破坏、CSS 变量无法热更新。这是因为浏览器对已解析的 标签内容变更不触发重计算，尤其当它已被 CSSOM 加载后。
真正安全的动态主题切换必须用 :root + data-theme
不要试图往 里塞新规则，而是把颜色定义在 :root，再靠属性选择器覆盖：
-
:root中定义基础变量：--primary: #4a6fa5; --bg: #ffffff; --text: #333333; - 为每种主题写独立选择器：
[data-theme="dark"] { --primary: #bb86fc; --bg: #121212; } - 所有元素样式都用
var(--bg)引用，而不是硬编码颜色值 - 切换时只改
document.documentElement.setAttribute('data-theme', 'dark')，不碰内容
style.textContent 只适合首次注入，且必须在 DOMContentLoaded 前
如果真要动态插入整块 CSS（比如加载第三方主题包），唯一可靠时机是页面还没解析完样式时：
- 把
放在最顶部 - 在
DOMContentLoaded事件前执行：document.getElementById('theme-styles').textContent = ':root{--bg:#222}' - 之后不能再用
textContent更新——必须用insertRule或换data-theme方案 - 注意：
insertRule对:root无效，只能插到普通选择器里
contenteditable 元素颜色错乱是典型信号
如果你切主题后，div[contenteditable] 里文字还是黑底白字、光标颜色不对，说明你用了错误路径：
- 没给
contenteditable元素显式设color和background-color（它不继承body的 color） - 漏了
caret-color: var(--text)—— 这个属性不会随color自动变 - 过渡动画加在了
border上，导致卡顿或闪烁；只应作用于background-color和color
实际主题切换逻辑极简，但错一步就全局失联。重点不是“怎么写”，而是“在哪写”和“什么时候写”。data-theme 是目前唯一能兼顾 localStorage 持久化、无障碍支持、编辑器兼容与性能稳定的方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
