Less需结合CSS自定义属性实现主题切换：用mixin为各主题生成:root及[data-theme]下的CSS变量声明，样式中统一使用var(--x, fallback)引用，禁止硬编码或@media(prefers-color-scheme)替代JS切换。
Less变量如何配合CSS自定义属性实现主题切换
Less本身不支持运行时换肤，必须借助CSS自定义属性（--color-bg、--color-text等）把主题色“透出”到CSS层，再由JavaScript切换data-theme类名或:root样式。直接在Less里写@bg-color: #121212然后编译一次，只能生成固定暗色CSS，无法切换。
推荐做法是：用Less管理主题变量集，为每个主题生成独立的CSS变量声明块，再通过[data-theme="dark"]作用域隔离：
.theme-vars(@theme) when (@theme = dark) {
--color-bg: #121212;
--color-text: #e0e0e0;
--color-border: #333;
}
.theme-vars(@theme) when (@theme = light) {
--color-bg: #fff;
--color-text: #333;
--color-border: #eee;
}
:root {
.theme-vars(light);
}
[data-theme="dark"] {
.theme-vars(dark);
}
为什么不能直接用@media (prefers-color-scheme: dark)替代JS切换
仅靠@media (prefers-color-scheme: dark)能响应系统偏好，但无法满足手动切换需求（比如用户强制选暗色，即使系统是亮色）。而且Less编译后，该媒体查询会固化为静态规则，无法被JS动态修改data-theme触发重绘。
实际项目中要同时支持两种路径：
立即学习“前端免费学习笔记（深入）”；
- 页面加载时读取
localStorage或prefers-color-scheme，设置document.documentElement.setAttribute('data-theme', 'dark') - 所有主题相关样式都走
[data-theme="dark"]前缀，避免和@media嵌套冲突 - 不要在Less里写
@media (prefers-color-scheme: dark) { :root { ... } }——这会导致变量无法被JS覆盖
Less mixin封装主题色函数时的坑
容易误以为写个.text-color() mixin就能复用，但主题色必须绑定到CSS变量，否则无法运行时更新。以下写法是错的：
.text-color() {
color: @text-color; // ❌ 编译后就是硬编码值，换主题不生效
}
正确方式是让mixin输出CSS变量引用：
.text-color() {
color: var(--color-text, #333); // ✅ 始终读变量，fallback保底
}
.card {
background: var(--color-bg);
border: 1px solid var(--color-border);
.text-color();
}
注意三点：
- 所有颜色/间距/阴影值都应映射到
var(--xxx)，不要在样式里直接写#121212 - 务必加fallback值（如
var(--color-text, #333)），防止变量未定义时样式崩塌 - Less中不能用
var(--x)做计算（比如lighten(var(--color-bg), 10%)），这种要提前在变量定义里算好
构建时如何避免重复编译多套CSS
别为light/dark各跑一遍Less编译——那样会产出两份冗余CSS。应该只编译一次，把所有主题变量声明集中到:root和[data-theme="dark"]里。关键点：
- 所有主题变量定义必须放在
:root或带属性选择器的块内，不能散落在组件里 - 确保
data-theme切换时，只有根节点类名变化，无需重新加载CSS - 如果用Webpack，
less-loader配additionalData注入全局变量即可，不用拆文件
最简验证方法：打开DevTools，手动给<html>加data-theme="dark"，看颜色是否实时变——不变，说明变量没挂对作用域或JS没触发重绘。
