当前位置：首页 > 文章列表 > 文章 > 前端 > 如何利用Less实现一套暗黑模式的CSS方案_通过媒体查询变量切换主题

如何利用Less实现一套暗黑模式的CSS方案_通过媒体查询变量切换主题

2026-05-03 08:33:42 0浏览收藏

golang学习网今天将给大家带来《如何利用Less实现一套暗黑模式的CSS方案_通过媒体查询变量切换主题》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

生产环境暗黑模式需CSS变量+JS控制+Less变量三者结合：Less编译双主题CSS，JS管理切换与持久化，组件样式统一使用var(--xxx)。

如何利用Less实现一套暗黑模式的CSS方案_通过媒体查询变量切换主题

暗黑模式不能只靠 `@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。

好了，本文到此结束，带大家了解了《如何利用Less实现一套暗黑模式的CSS方案_通过媒体查询变量切换主题》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！