less变量需转为css变量才能被媒体查询动态覆盖，通过globalvars配置实现自动替换，并配合:root和@media设置css变量值；颜色函数需插件支持或改用css原生函数；主题变量须统一定义在根级，组件内只使用var()；首屏不闪需服务端预设或内联js同步设置data-theme，且css变量必须提供fallback值。
Less变量不能直接被媒体查询覆盖，必须转为CSS变量
Less编译时就确定了值，@color-bg在编译后变成固定颜色（如#ffffff），@media (prefers-color-scheme: dark)根本无法修改它。所以不能指望在Less里写两套@color-bg然后靠媒体查询切换——那只是两套静态CSS，无法动态响应系统偏好或JS手动切换。
正确路径是：把Less变量“投射”成CSS变量，再用媒体查询去覆盖CSS变量本身。关键一步是用globalVars配置让Less自动把@xxx替换成var(--xxx)：
module.exports = {
module: {
rules: [{
test: /\.less$/,
use: [{
loader: 'less-loader',
options: {
globalVars: {
'bg-color': 'var(--bg-color)',
'text-color': 'var(--text-color)',
'border-color': 'var(--border-color)'
}
}
}]
}]
}
}
这样一段Less代码：
.card { background-color: @bg-color; color: @text-color; border: 1px solid @border-color; }
就会编译成：
.card { background-color: var(--bg-color); color: var(--text-color); border: 1px solid var(--border-color); }
后续你就可以自由用:root和@media控制这些CSS变量的值了。
Less函数（如fade、darken）需插件重写，否则报错
直接把@bg-color换成var(--bg-color)后，像fade(@bg-color, 20%)这种调用会崩——Less解析器看到var(--bg-color)不是合法Color节点，直接抛TypeError: expected color。
解决方案是加一个Less插件，在函数执行前把var(--xxx)还原为真实颜色值，或改用CSS原生函数表达。常用做法是：
- 对
fade，输出rgba(var(--r), var(--g), var(--b), calc(0.2 * var(--a)))这类组合（需提前拆RGB） - 对
darken，改用color-mix(in srgb, var(--bg-color) 70%, black 30%)（现代浏览器）或降级为HSL计算 - 使用
less-plugin-functions或自定义插件拦截functions对象，重写对应方法
不处理函数，就只能放弃所有颜色变换逻辑，或者退回到“编译时生成两套CSS”的老路。
不要在组件选择器里定义主题变量
有人习惯在.button里写--button-bg: @bg-color，以为这样能局部控制。但问题来了：@media (prefers-color-scheme: dark)只作用于:root或[data-theme="dark"]这类根级选择器，无法穿透到.button内部去覆盖--button-bg。
结果就是亮色模式下按钮正常，暗色模式下--button-bg还是旧值，颜色错乱。正确做法是：
- 所有主题变量统一定义在
:root（基础值）和@media块内（覆盖值） - 组件内只用
var(--bg-color)，不重新声明变量 - 需要局部例外？用
[data-theme="light"] .stats-panel { --bg-color: #fff; }显式覆盖，而不是在.stats-panel里定义新变量
首屏不闪的关键：服务端或HTML中预设data-theme
只靠@media (prefers-color-scheme: dark) + JS初始化，页面首次加载必闪：浏览器先按默认主题渲染，等JS执行完才加data-theme="dark"，中间几百毫秒白屏或错色。
解决办法是在HTML生成阶段就注入初始主题标记：
- 服务端渲染（SSR）：根据请求头
Sec-CH-Prefers-Color-Scheme或用户localStorage读取结果，直接写 - 纯前端：在
里加一小段内联JS，同步读localStorage或window.matchMedia，立即设置document.documentElement.setAttribute，赶在CSSOM构建前完成 - fallback必须带：所有
var(--bg-color, #ffffff)里的第二参数不能省，否则变量未生效时样式全崩
这步漏掉，再优雅的Less结构也救不了首屏体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
