暗黑模式下 box-shadow“发灰”是因为黑色半透阴影与深色背景对比度低，需改用白色低透明度值（如 rgba(255,255,255,0.08)）并适当增大模糊半径；应通过 CSS 自定义属性配合 prefers-color-scheme 媒体查询动态切换，确保 :root 变量声明与媒体查询同文件且顺序正确。
暗黑模式下 box-shadow 为什么看起来“发灰”或“不明显”？
不是阴影值本身错了，而是你写的 box-shadow: 0 2px 8px rgba(0,0,0,0.1) 在暗色背景上，rgba(0,0,0,0.1) 这个偏黑半透色几乎和深灰背景融为一体，视觉对比度暴跌。Less 本身不感知系统主题，必须靠 CSS 自定义属性（--color-shadow）+ @media (prefers-color-scheme: dark) 配合才能动态切换。
用 Less 变量 + 媒体查询实现双主题阴影
别在 Less 里硬写两套 box-shadow 值，而是把颜色抽象成变量，再用媒体查询覆盖。关键点：变量要声明在 :root 里，且媒体查询必须写在变量赋值之后（否则 Less 编译时无法生效）。
实操建议：
- 在全局样式开头定义
:root中的阴影变量，比如--shadow-sm: 0 1px 3px var(--color-shadow-sm) - 用
@color-shadow-sm-light: rgba(0, 0, 0, 0.08)和@color-shadow-sm-dark: rgba(255, 255, 255, 0.06)两个 Less 变量分别存亮/暗色值 - 在
:root里用--color-shadow-sm: @color-shadow-sm-light初始化 - 紧接着写
@media (prefers-color-scheme: dark) { :root { --color-shadow-sm: @color-shadow-sm-dark; } } - 所有组件直接用
box-shadow: var(--shadow-sm)，无需重复判断
box-shadow 的暗色适配不是“变浅”，而是“提亮+降透明度”
常见错误是把暗色阴影简单改成 rgba(0,0,0,0.05) —— 这只会更糊。实际要反向思考：暗背景下需要的是“泛白光感”，所以推荐用 rgba(255,255,255,0.04~0.12)，而非低透明度黑色。同时注意模糊半径（第二个数值）在暗色下可略增大（比如从 8px 改为 10px），让光晕更自然。
示例对比：
/* 暗色推荐 */ --shadow-card: 0 4px 12px rgba(255, 255, 255, 0.08); <p>/<em> 错误示范（太淡、无层次）</em>/ --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.04);</p>
避免 Less 编译时把 @media 提前或合并导致失效
Less 默认会把所有 @media 规则提升到文件末尾，如果你的变量定义在另一个 .less 文件里，而媒体查询在当前文件，编译后可能变成先查媒体、后设变量，导致暗色值不生效。
解决办法：
- 把
:root变量声明和配套的@media (prefers-color-scheme: dark)写在同一个文件里，且媒体查询紧跟在:root块之后 - 禁用 Less 的媒体查询提升行为：在编译配置中设置
strictMath: true和strictUnits: true，并确保未启用mergeMediaQueries - 检查最终生成的 CSS，确认
@media (prefers-color-scheme: dark) { :root { ... } }确实存在且未被折叠
真正难的不是写几行 Less，而是让 CSS 变量在浏览器运行时能被媒体查询及时接管——这一步漏掉，整个暗色阴影就只是静态摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
