Less CSS如何实现暗黑模式Dark Mode的主题切换？-css教程-PHP中文网

less需结合css自定义属性实现主题切换：用mixin为各主题生成:root及[data-theme]下的css变量声明，样式中统一使用var(--x, fallback)引用，禁止硬编码或@media(prefers-color-scheme)替代js切换。

less css如何实现暗黑模式dark mode的主题切换？

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变量，否则无法运行时更新。以下写法是错的：

CSS婚礼策划服务机构宣传网站模板

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();
}

注意三点：