应使用 @media (prefers-color-scheme: dark) 媒体查询配合 :root 中预定义的浅色默认变量实现自动适配，深色规则须置于默认样式之后、不可嵌套，且需添加 以支持原生控件自动切换。
如何用 @media (prefers-color-scheme) 自动适配系统主题
Less 本身不运行时切换主题，但可以配合 CSS 媒体查询生成响应式样式。最稳妥的方式是利用系统级偏好 @media (prefers-color-scheme: dark)，让浏览器自动选择——无需 JS、不依赖 class 切换，兼容性好（Chrome 76+、Firefox 67+、Safari 12.1+）。
关键点：Less 编译后仍是静态 CSS，所以逻辑必须写在编译期可展开的位置，不能依赖运行时变量。
- 把公共样式（字体、间距、圆角等）写在顶层，避免重复
- 颜色变量按语义定义，如
@text-primary、@bg-surface，而非@dark-text - 用嵌套 +
&避免重复书写选择器：.card { background: @bg-surface; color: @text-primary; <p>@media (prefers-color-scheme: dark) { & { background: @bg-surface-dark; color: @text-primary-dark; } } }</p>
如何用 Less 变量 + class 手动控制主题（支持 JS 切换）
当需要用户主动点击切换、或需绕过系统设置时，就得靠 class 控制。Less 中不能动态改变量值，但可以用 guard 或嵌套规则生成两套独立样式。
推荐做法：用带命名空间的 class（如 .theme-dark）包裹所有暗色规则，避免污染全局或误匹配子元素。
- 定义两组变量，用
!default确保可被覆盖：@text-primary: #333; @bg-surface: #fff; @text-primary-dark: #eee; @bg-surface-dark: #1a1a1a; <p>// 默认明亮模式 .card { background: @bg-surface; color: @text-primary; }</p><p>// 暗色模式 —— 必须加 .theme-dark 前缀 .theme-dark .card { background: @bg-surface-dark; color: @text-primary-dark; }</p> - JS 切换只需操作
document.documentElement.classList.toggle('theme-dark') - 别用
body.theme-dark，因为html元素更早渲染，能避免 FOUC（闪屏）
为什么不要在 Less 里用 if() 或函数做主题分支
Less 的 if() 是编译期求值，参数必须是字面量，无法读取 localStorage 或 CSS 自定义属性——它不是运行时条件语句。
常见误用：.btn { color: if(@theme == 'dark', #fff, #000); } 这种写法只会生成固定一套 CSS，@theme 的值在编译时就锁死了，完全无法响应用户切换。
- 想实现“运行时主题”，必须靠 CSS class 或媒体查询，而不是 Less 逻辑
- Less 的作用是组织和复用变量/混合，不是替代 CSS 的层叠或 JS 的状态管理
- 若强行用
@import分离 dark/light 文件，会导致重复代码、维护困难，且无法共享中间变量
如何让自定义属性（CSS Variables）与 Less 协同工作
现代方案常用 CSS 自定义属性 + JS 更新，Less 可以生成初始值，但不能接管更新过程。
安全做法：用 Less 输出默认值，再由 JS 覆盖；或只用 Less 编译出 fallback（降级色值），再用 :root 定义变量。
- Less 中写 fallback：
.button { background-color: #007bff; /* fallback */ background-color: var(--primary-bg, #007bff); } - JS 设置：
document.documentElement.style.setProperty('--primary-bg', '#2c3e50'); - 不要在 Less 里用
@{var-name}拼接 CSS 变量名——它会被编译成字符串字面量，无法被浏览器解析为变量引用
实际项目中，prefers-color-scheme 应作为默认行为，.theme-dark class 作为手动覆盖手段，两者可共存。最容易被忽略的是：暗色模式下表单控件（input、select）的原生样式不会自动变，必须显式重置 background 和 color。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
