less变量无法运行时切换主题，因其在编译时即被替换为固定值；真正支持动态切换的是css自定义属性（如--bg-color），需用less生成light/dark两套:root变量，并通过js修改class或setproperty()控制。
Less变量无法在运行时动态切换主题
Less是编译时预处理器，所有@primary-color这类变量在CSS生成阶段就被替换成固定值，生成的CSS里根本看不到变量名。所以靠改Less变量本身做不到夜间模式切换——你刷新页面后看到的还是编译时确定的那套颜色。
真正起作用的是CSS自定义属性（--bg-color），它支持JavaScript运行时修改，并被CSS规则实时响应。Less在这里只该当“代码组织工具”，帮你批量生成两套自定义属性初始值。
实操建议：
- 用Less写两套
:root样式块，分别对应light和dark主题，每套都用--xxx形式声明自定义属性 - 不要在Less里写
background: @bg-color这种直接引用，而是统一用background: var(--bg-color) - 把主题切换逻辑完全交给JS：切换
document.documentElement.classList或直接style.setProperty()
如何用Less生成两套CSS自定义属性
核心是利用Less的嵌套和循环能力，避免手写重复的--color-text: #333和--color-text: #eee。下面这段Less能同时输出亮/暗两套根变量：
.theme-defs() {
--color-bg: #fff;
--color-text: #333;
--color-border: #e0e0e0;
}
:root {
.theme-defs();
}
:root.dark {
--color-bg: #121212;
--color-text: #eee;
--color-border: #333;
}
注意点：
- 别用
@media (prefers-color-scheme: dark)自动匹配——它不可控，且无法响应用户手动切换 - 如果项目用Webpack，可配合
less-vars-to-js把Less变量转成JS对象，用于初始化主题状态 - 所有组件内颜色必须用
var(--color-text)，不能回退到color: #333硬编码，否则切换失效
JavaScript切换时最容易漏掉的三件事
只改document.body.classList.add('dark')远远不够。实际运行中常因以下疏忽导致部分区域不生效：
- 未同步设置
document.documentElement.setAttribute('data-theme', 'dark')——某些UI库（如Ant Design）依赖这个属性触发内部样式 - 未持久化选择：关页重开变回白天，得存到
localStorage并在页面加载初期就应用，而不是等JS执行完才加class - 未处理
prefers-color-scheme初始值冲突：用户系统设为暗色但网页默认亮色，首次加载会闪一下。应在里用内联JS立即判断并设置class，早于CSS解析
为什么不能直接用CSS变量覆盖Less变量值
Less变量和CSS自定义属性属于不同层级：前者在构建时求值，后者在渲染时求值。你写@bg: var(--bg-color)在Less里会报错，因为var()不是Less函数；而写@bg: #121212; :root { --bg-color: @bg; }看似可行，但@bg仍是静态值，无法随JS修改--bg-color而联动更新其他Less派生变量（比如@bg-dim: darken(@bg, 10%)）。
所以正确做法是彻底放弃“让Less变量响应CSS变量”的想法。把所有需要动态的部分，全部交给var(--xxx)链式计算，必要时用calc()或color-mix()在CSS里做简单运算。
复杂颜色推导（如根据主色生成整套语义色）仍可在Less里做，但输出结果必须是静态的两套--xxx，而非试图绑定运行时变量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
