生产环境暗黑模式需CSS变量+JS控制+Less变量三者结合：Less编译双主题CSS，JS管理切换与持久化，组件样式统一使用var(--xxx)。
暗黑模式不能只靠 @media (prefers-color-scheme: dark)
系统级媒体查询只能捕获用户系统设置，无法支持手动切换、记住用户偏好、或服务端预渲染场景。真正在生产环境用的暗黑模式，必须配合 CSS 自定义属性（--bg、--text 等）+ JavaScript 控制开关 + Less 变量抽象，三者缺一不可。
Less 本身不运行在浏览器里，所以不能“动态”响应 prefers-color-scheme 切换；它只负责提前编译出两套主题 CSS（light / dark），再由 JS 决定加载哪套，或通过 class 控制作用域。
- 直接在
:root里写@media (prefers-color-scheme: dark) { ... }会失效——Less 编译时无法感知运行时系统设置 - 想让 Less “生成适配暗黑模式的变量”，必须用
.theme-dark类作为作用域前缀，把所有暗黑样式包裹进去 - Light 主题应作为默认（不加类），避免白屏闪动；dark 主题通过添加
class="theme-dark"激活
用 Less 变量 + 嵌套规则生成双主题 CSS
核心思路：定义两组基础调色变量，用 .theme-light 和 .theme-dark 分别包裹对应样式块，最后用 body 或 html 的 class 控制生效范围。
不要试图用 Less 函数做“条件编译”（比如 if($mode == 'dark')）——那只会生成冗余 CSS，且无法运行时切换。
// variables.less
@color-bg-light: #ffffff;
@color-text-light: #333333;
@color-bg-dark: #121212;
@color-text-dark: #e0e0e0;
// themes.less
.theme-light {
--bg: @color-bg-light;
--text: @color-text-light;
}
.theme-dark {
--bg: @color-bg-dark;
--text: @color-text-dark;
}
// 组件中统一用 CSS 变量，不直接引用 Less 变量
.button {
background-color: var(--bg);
color: var(--text);
border: 1px solid var(--text);
}
- 所有组件样式必须基于
var(--xxx)，而不是直接写@color-bg-dark，否则无法被 JS 动态切换 -
.theme-light块不是必需的（可省略），但显式写出能提升可读性与维护性 - 如果项目需兼容 IE，CSS 变量方案不可行，此时应改用 Less 的
.theme-dark > *全局覆盖写法，并输出两份独立 CSS 文件
JavaScript 控制主题切换并持久化
Less 编译后只是静态 CSS，真正让暗黑模式“活起来”的是 JS：检测系统偏好、读取 localStorage、添加/移除 theme-dark 类、监听系统变化。
关键点：不要在 JS 里重复维护颜色值，所有颜色逻辑留在 Less 里；JS 只管“开/关”和“存/取”。
function setTheme(mode) {
document.documentElement.classList.toggle('theme-dark', mode === 'dark');
localStorage.setItem('theme', mode);
}
// 初始化
const saved = localStorage.getItem('theme');
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const theme = saved || (saved === null ? (systemPrefersDark ? 'dark' : 'light') : saved);
setTheme(theme);
// 监听系统变化（仅当用户没手动设置过）
if (!localStorage.getItem('theme')) {
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
setTheme(e.matches ? 'dark' : 'light');
});
}
- 务必在
上操作 class，而非，确保根级 CSS 变量能被子元素继承 - 监听
matchMedia变化时，要判断用户是否已手动设置，否则会覆盖用户选择 - 服务端渲染（如 Next.js）需在
useEffect或useLayoutEffect中执行，避免 hydration mismatch
构建时避免 CSS 体积膨胀
Less 编译双主题容易导致 CSS 重复：比如 .button 在 light/dark 下各生成一遍规则。实际只需一套组件样式 + 两套变量定义。
错误做法：为每个组件写 .theme-light .button { ... } 和 .theme-dark .button { ... } —— 这会让 CSS 体积翻倍且难以维护。
- 正确结构是：一份组件样式（用
var(--xxx)），两份根变量声明（.theme-light/.theme-dark） - 确保
variables.less和themes.less被所有组件@import，且只 import 一次 - 使用
lessc --clean-css或 PostCSS 插件压缩，避免注释和空格残留 - 若用 Webpack，可通过
MiniCssExtractPlugin提取单个 CSS 文件，而非拆成 light.css / dark.css
最易被忽略的一点：CSS 变量有继承链，但不支持“回退值穿透”——var(--bg, #fff) 在 .theme-dark 里不会自动 fallback 到暗色值，它只 fallback 到字面量 #fff。所以变量名必须语义化（--bg），且两套主题都必须正确定义，不能依赖 fallback。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
