主题变量应注入html元素的data-theme属性，配合独立style标签动态替换内容，避免:root污染；所有变量统一在html[data-theme="dark"] :root中定义，确保全局生效且不被覆盖。
主题变量如何注入到 HTML 模板中而不污染全局 CSS？
直接在 <style> 标签里写 :root 变量容易被后续样式覆盖，尤其当多个组件库共存时。更稳妥的做法是用 data-theme 属性配合 scoped 变量作用域。
推荐做法：
- 在根节点（如
<html>或<body>）动态设置data-theme="dark"，而非依赖 class - 所有主题变量统一定义在独立的
<style id="theme-vars">标签中，通过 JS 动态替换内容，避免重复插入 - CSS 中使用
[data-theme="dark"] .btn { --color-primary: #0a66c2; }，不依赖:root，防止跨主题泄漏
Vue/React 组件库如何复用同一套主题配置？
主题配置不应绑定具体框架语法，而应以纯 JSON 或 JS 对象导出，再由各端适配器消费。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 主题配置文件（如
themes/light.json）只包含键值对：{"colorPrimary": "#1890ff", "borderRadius": "4px"} - Vue 侧用
provide/inject注入themeConfig，React 侧用Context.Provider，但两者都读同一份源数据 - 避免在组件内硬编码
var(--color-primary)，改用 CSS-in-JS 工具（如clsx+useThemehook）做运行时映射，便于 SSR 和暗色模式切换
HTML 模板中如何让主题生效又不阻塞首屏渲染？
把主题 CSS 放在 <head> 里同步加载会拖慢 LCP；异步加载又会导致 FOUT（Flash of Unstyled Text）。
实际可行方案：
- 预加载关键主题变量：服务端根据用户偏好或 UA 判定默认主题，内联最小变量集（如
<style>[data-theme] { --color-bg: #fff; }），控制在 1KB 内 - 主题 CSS 文件用
<link rel="preload" as="style" onload="this.rel='stylesheet'">，配合onload回调切换data-theme属性 - 禁止用
@import加载主题文件 —— 它会阻塞渲染且无法 preload
为什么 Tailwind 的 dark: 前缀在 HTML 模板里经常失效？
因为 dark: 依赖 class="dark" 触发，而 HTML 模板本身没有 JS 控制逻辑时，dark class 很可能没被正确添加或响应系统偏好。
修复方式：
- 在
<html>标签上加class="dark"不够 —— 必须配合media="(prefers-color-scheme: dark)"的<script>初始化 - 若用服务端渲染，需在响应头或模板中判断
Sec-CH-Prefers-Color-Scheme（Chrome/Edge 支持），fallback 到 cookie 或 localStorage - 不要依赖
dark:做核心布局切换（如 flex → grid），它只适合颜色、阴影等非结构属性；结构差异应走条件模板分支
