直接替换document.documentelement的class或data-theme是最轻量的主题切换方式，前提是所有样式通过css自定义属性驱动且模板不硬编码样式值，否则需重绘dom。
HTML模板如何支持主题切换而不重绘DOM
直接替换document.documentElement的class或data-theme是最轻量的做法，前提是所有主题样式都通过CSS自定义属性（--color-bg、--font-size-base等）驱动，且模板中不硬编码颜色/尺寸值。否则每次换主题就得重新渲染整个组件树，失去“模板”本意。
常见错误是把主题色写死在style属性里：<div style="background: #007bff">——这种写法会让<code>data-theme="dark"完全失效。
- 模板中只用语义化class，如
class="card-header"，样式全部交由CSS变量控制 - 主题切换时仅触发一次
document.documentElement.setAttribute('data-theme', 'dark') - 避免在JS里读取
getComputedStyle(el).backgroundColor做逻辑判断，它返回RGB字符串，无法响应主题变更
怎样让HTML模板本身可主题化（非CSS层面）
纯HTML模板不具备逻辑能力，所以“主题化模板”实际指：同一份HTML结构，在不同主题下加载不同的slot内容、data-* 属性值，或条件渲染特定片段。这需要轻量级模板引擎介入，而非原生template标签能独立完成。
典型场景：深色主题下按钮图标用icon-sun，浅色主题用icon-moon；或页脚版权文字随主题语言包切换。
- 推荐用
mustache或handlebars这类无逻辑模板，配合预编译主题数据对象（{ theme: 'dark', icons: { toggle: 'icon-moon' } }） - 不要在模板里写
{{#if theme === 'dark'}}——mustache不支持表达式，应提前计算好布尔字段：{ isDark: true, toggleIcon: 'icon-moon' } - 若坚持零依赖，可用
template.innerHTML.replace(/{{(\w+)}}/g, (m, key) => data[key] || '')，但需自行处理转义和嵌套
组件化时如何隔离主题样式不污染全局
HTML模板组件一旦复用，其主题样式很容易意外覆盖其他组件——尤其当多个组件都定义--color-primary却未加前缀时。CSS作用域不是默认存在的，必须显式构造。
错误示范：:root { --color-primary: #007bff; } —— 全局污染，后续加载的主题会互相打架。
- 给每个组件模板包裹唯一
data-component属性，如<article data-component="card" data-theme="light"></article> - 主题CSS写成
[data-component="card"][data-theme="dark"] { --color-bg: #1e1e1e; }，利用属性选择器限定作用域 - 避免用
@layer或scoped（Vue/Svelte专属），原生HTML无此机制，靠属性+CSS变量组合实现软隔离
为什么localStorage存主题后页面首次加载仍闪白
因为HTML模板在CSS解析并生效前就已渲染，而localStorage读取是异步（虽快但非同步阻塞），导致用户看到默认主题（通常是浅色）再跳变到目标主题。这不是bug，是渲染时机问题。
- 服务端渲染时，应在HTML响应头中注入当前主题的
data-theme，比如 - 纯前端方案：在
里内联一段极简JS，同步读取localStorage.getItem('theme')并立即设置document.documentElement，放在任何CSS之前 - 更稳妥做法：初始
不设data-theme，但CSS里给:root定义一套“兜底变量”，例如--color-bg: #fff; --color-text: #000;，确保无主题时也有可用值
主题系统真正的复杂点不在切换逻辑，而在变量命名约定和组件边界声明——没人规定--card-bg和--panel-bg是否该统一，也没人强制组件必须暴露data-theme接口。这些隐性契约一旦错位，换主题就会变成逐个修复散落各处的!important。
