必须把主题变量定义在:root里，因CSS自定义属性依赖继承传播，仅:root能确保全页面任意元素（含input、select、Shadow DOM）通过var()正确读取；SCSS仅生成静态值，不控制运行时作用域。
必须把主题变量定义在 :root 里，SCSS 只负责生成变量值、不参与作用域控制——否则切换时部分元素颜色不会变，尤其 <input>、<select></select> 和 Shadow DOM 内部会 fallback 到浏览器默认色。
为什么 SCSS 不能直接定义主题变量作用域
SCSS 编译后是普通 CSS，而 CSS 自定义属性（--color-bg）的继承依赖于 DOM 树结构。只有写在 :root 中的变量才能被所有元素通过 var(--color-bg) 正确读取。如果你把变量写在 .dark 或 body 里：
-
.dark { --bg-color: #121212; }→ 所有未被.dark包裹的元素（比如直接子元素或 SVG 的<use></use>）无法继承该值 - SCSS 的
@mixin或@function无法动态影响运行时变量作用域，它只在构建期生成静态 CSS - 用
$theme-dark: #121212定义 SCSS 变量，再#{--bg-color}: $theme-dark插值输出，本质仍是写进:root才有效
:root + [data-theme] 是唯一可靠组合
不要用 html.dark 类，改用 data-theme 属性——它更语义化，且避免与第三方 class 冲突（比如 Tailwind 的 dark: 前缀）。正确写法是：
:root {
--bg-color: #ffffff;
--text-color: #1f2328;
}
<p>[data-theme="dark"] {
--bg-color: #121212;
--text-color: #e0e0e0;
}</p><p>/<em> 全局使用 </em>/
body {
background-color: var(--bg-color);
color: var(--text-color);
}
</p>
注意：[data-theme="dark"] 必须写在 :root 外层，不能嵌套；否则变量不会覆盖生效。
SCSS 怎么安全参与主题生成
把 SCSS 当作“变量工厂”，只做三件事：管理主题色值、生成多套 :root 规则、避免硬编码。例如：
// _themes.scss
$themes: (
light: (
bg-color: #ffffff,
text-color: #1f2328,
),
dark: (
bg-color: #121212,
text-color: #e0e0e0,
)
);
<p>@each $theme-name, $theme-map in $themes {
:root#{"[data-theme='#{$theme-name}']"} {
@each $prop, $value in $theme-map {</p><h1>{--#{$prop}}: #{$value};</h1><pre class="brush:php;toolbar:false;">}} }
这样编译后会输出完整的 [data-theme="light"] 和 [data-theme="dark"] 规则，且所有变量都在 :root 作用域下。关键点：
- 不要在 JS 里用
style.setProperty()动态设变量——它会破坏媒体查询和用户偏好逻辑 - 切换主题只改
document.documentElement.setAttribute('data-theme', 'dark')，CSS 自动重算 - 初始化必须早于首屏渲染：
<script></script>内直接读localStorage.getItem('theme')并设属性，别等DOMContentLoaded
容易被忽略的边界颜色问题
只改 --bg-color 和 --text-color 不够。以下样式也必须响应变量：
-
border-color、box-shadow、outline-color -
scrollbar-color（需用scrollbar-width+scrollbar-color组合） -
svg { fill: var(--icon-color); }，不能只靠currentColor input::placeholder { color: var(--placeholder-color); }- 原生控件如
<select></select>的背景和文字色，在 Safari 中需额外加appearance: none配合变量
这些不是“锦上添花”，而是用户点击切换后立刻可见的断层点。漏掉任意一项，都会导致页面出现白底黑字配灰边框、滚动条突兀亮起等割裂感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
