Less中重复定义同名变量会覆盖而非并存，必须通过类名隔离（如.light-theme/.dark-theme）或媒体查询实现主题切换，配合CSS自定义属性与JS控制类名才能支持运行时动态响应。
为什么直接在Less里写两套@color-primary变量会失效
Less变量是编译时确定的，不是运行时可变的。如果你在同一个作用域里先后定义@color-primary: #007bff;和@color-primary: #4a6fa5;，后者会覆盖前者，最终只保留一个值——根本没法“切换”。所谓“两套变量体系”，必须靠作用域隔离或条件编译来实现，而不是靠重复赋值。
常见错误现象：TypeError: Cannot read property 'value' of undefined（当用if()函数试图动态取值但分支未覆盖全时）；或者样式始终显示亮色，暗色CSS完全没生成（因为媒体查询或类名隔离没生效）。
- 不要把暗色变量直接写在根作用域，否则会被提前计算并丢弃
- 避免用
javascript表达式（如~`window.matchMedia...`）——Less不支持运行时JS执行 - 真正可行的是：用
.dark-theme类名包裹规则，或用@media (prefers-color-scheme: dark)做编译后分离
用嵌套规则+类名隔离实现手动切换（推荐）
这是最可控、兼容性最好、调试最直观的方式。核心思路是：所有颜色变量都定义在各自主题的作用域内，通过外层类名控制生效范围。
.light-theme {
@color-bg: #ffffff;
@color-text: #333333;
@color-primary: #007bff;
body { background-color: @color-bg; color: @color-text; }
.btn { background-color: @color-primary; }
}
.dark-theme {
@color-bg: #121212;
@color-text: #e0e0e0;
@color-primary: #4a6fa5;
body { background-color: @color-bg; color: @color-text; }
.btn { background-color: @color-primary; }
}
使用时只需在上动态添加/移除dark-theme类（JS控制），无需重新编译Less。注意：所有选择器必须显式挂载到.light-theme或.dark-theme下，否则会脱离作用域，变量无法解析。
立即学习“前端免费学习笔记（深入）”；
- 变量名保持一致（如都叫
@color-bg），降低维护成本 - 如果项目已有全局变量，可用
!important或更高优先级选择器覆盖，但更推荐统一收口到主题块内 - 不要省略
.light-theme——它不只是占位，而是确保亮色为默认回退方案
用@media (prefers-color-scheme: dark)自动适配系统偏好
适合“跟随系统”场景，无需JS干预，但无法手动强制切换。Less本身不解析媒体查询条件，所以可以直接写，它会被原样输出到CSS中。
@color-bg-light: #ffffff;
@color-text-light: #333333;
@color-bg-dark: #121212;
@color-text-dark: #e0e0e0;
body {
background-color: @color-bg-light;
color: @color-text-light;
}
@media (prefers-color-scheme: dark) {
body {
background-color: @color-bg-dark;
color: @color-text-dark;
}
}
关键点在于：变量仍需静态定义，媒体查询只是CSS层的条件应用。不能在里面再定义新变量（Less不支持媒体查询内变量声明），也不能用if()函数去判断scheme值——那是在编译期就固定了。
- 该方式生成的CSS体积最小，且天然支持浏览器自动响应系统变更
- 若需同时支持手动切换 + 系统偏好，建议以类名方案为主，再用
@media作为初始值兜底 - 注意Safari对
prefers-color-scheme的支持从v12.1开始，旧版本会忽略整个媒体块
别忽略CSS自定义属性（--color-bg）的协作价值
Less编译后是静态CSS，而暗色模式常需JS动态响应。纯Less方案无法监听prefers-color-scheme变化或用户点击切换按钮。这时，把Less变量转成CSS自定义属性，就能桥接运行时逻辑。
:root {
--color-bg: #ffffff;
--color-text: #333333;
}
.dark-theme {
--color-bg: #121212;
--color-text: #e0e0e0;
}
body {
background-color: var(--color-bg);
color: var(--color-text);
}
上面这段可以由Less生成（变量注入），然后JS只需操作document.body.classList.toggle('dark-theme')，无需重写样式表。这也是目前最主流的渐进式升级路径：Less负责结构和变量管理，CSS变量负责运行时绑定，JS负责触发时机。
- 不要在Less里用
~"var(--color-bg)"拼接——语法错误，var()必须出现在CSS属性值位置 - 若部分样式需在Less中参与计算（如
lighten(@color-bg, 10%)），仍得保留两套变量，再同步映射到CSS变量 - 最易被忽略的一点：HTML根元素默认没有
dark-theme类，首次加载时若用户系统是暗色，需JS主动加类，否则会闪白
