深色模式下grid布局问题需同步明暗层级与视觉权重：gap应增大20%–30%或加极细内阴影；文字用hsl/lch调亮度而非opacity；必须声明color-scheme并检查背景生效；第三方组件需降饱和度、用变量覆盖。
深色模式下Grid布局文字发灰、间隙“消失”、边框看不见——不是CSS写错了，而是没同步控制明暗层级和视觉权重。
grid-gap在深色背景下显得太窄？别只调像素值
人眼在暗色环境里对空间分隔的敏感度下降，相同gap: 12px会感知为“挤在一起”，这不是渲染bug，是视觉恒常性导致的错觉。
- 优先把
gap值提升20%–30%，比如从12px改为16px，但需结合内容密度判断：数据密集看板可保守些，仪表盘类可更宽松 - 用
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05)在gap边缘加极细高光线，比单纯放大gap更有效提升分隔感 - 绝对不要给gap加
background或border——Grid的gap是透明通道，这些声明会被忽略
文字颜色在深色Grid里看不清？重点调L（亮度）而非opacity
常见错误是color: #999 + opacity: 0.8，结果对比度暴跌到3.2:1，远低于WCAG AA要求的4.5:1。
- 用HSL定义主文本色，固定
--brand-h，把L设在90%–95%区间，例如hsl(var(--brand-h), 10%, 92%) - 次要文字用
L: 60%–70%，避免用opacity降级——它会同时削弱对比度与可访问性 - 检查
computed styles中color是否被父级inherit覆盖，深色模式下常因根元素未设color-scheme: dark导致系统默认亮色文字透出
Grid容器背景是#121212，但看起来还是灰的？color-scheme声明漏了
仅设background-color: #121212不会触发浏览器对原生控件（如input、滚动条）的暗色适配，必须显式告诉系统“我支持dark”。
-
<meta name="color-scheme" content="light dark">必须放在里，缺了这句，Chrome/Safari不会启用系统级暗色渲染 -
:root上要同步声明color-scheme: light dark，否则devtools里computed可能显示color-scheme: normal - 用devtools检查目标grid元素的
background-color是否真实生效，而不是被透明父容器“透出”底色
第三方组件库的Grid区域在暗色模式下颜色过艳？用CSS变量覆盖饱和度
MUI、Ant Design等库的暗色主题默认拉高saturate()来对抗沉闷，结果状态色撞车、tag标签跳戏，尤其对色觉障碍用户不友好。
- 在自定义主题中重置关键色的
S值：状态类色推荐S: 40%–60%，避免深背景下“发光” - 用
lch()替代hsl()微调文本对比度，例如color: lch(92% 0 0)（柔和白）配lch(28% 0 0)（非纯黑），Chrome 111+已支持 - 若库内组件不支持变量注入，用更高优先级选择器覆盖，例如
.ant-grid .ant-grid-item { color: var(--text-primary); }，别用!important
最易被忽略的是：Grid的gap和border在深色模式下不是“要不要加”的问题，而是“怎么加才不破坏视觉重量”的问题。同一套数值在亮/暗模式下必须有不同语义——这不是妥协，是适配人眼的真实反应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
