gap本身不感知夜间模式，需通过CSS变量绑定并配合媒体查询或类名切换实现响应；变量值须带单位，推荐语义化命名如--space-md，并同步调整padding以保持首尾留白协调。
gap 本身不感知夜间模式，但变量驱动的 gap 可以无缝响应
gap 属性没有暗色/亮色状态，它只认数值。真正让夜间模式下间距“保持节奏”的，是把 gap 值绑定到 CSS 变量，并在 :root 或组件级通过媒体查询或类名切换变量值。别指望 gap 自己变，得靠你控制它的输入。
- 错误做法：直接写
gap: 16px在夜间样式里——它和白天一样，只是颜色变了，留白感却可能突兀 - 推荐做法：定义语义化间距变量，如
--space-md: 16px，再用.theme-dark :root { --space-md: 12px; }或@media (prefers-color-scheme: dark) { :root { --space-md: 12px; } } - 注意：变量必须带单位，
--space-md: 12（无 px）会导致gap: var(--space-md)静默失效
夜间模式下 gap 值该调大还是调小？看视觉密度而非规则
不是“统一减小”就更舒适。深色背景降低视觉对比度，相同像素值的间隙容易显得“松散”，尤其在卡片、表单等模块密集区域。实测中，多数设计系统在暗色模式下会把中等间距从 16px 收紧到 12px，而小间距（如 --space-xs: 4px）反而常维持不变甚至微增，避免元素“糊成一片”。
- 典型节奏组合：
--space-xs: 4px（图标与文字间）、--space-sm: 8px（按钮内边距）、--space-md: 12px（卡片/表单项之间）、--space-lg: 20px（模块分隔） - 别用
%或rem直接驱动 gap 响应夜间模式——它们随字体缩放，但夜间模式调整的是对比与聚焦，不是字号 - 如果用了
clamp()（如--gap: clamp(8px, 3vw, 16px)），夜间模式下需额外媒体查询覆盖，否则视口缩放可能干扰暗色意图
Flex/Grid 容器在夜间模式里 gap 失效？先查这三件事
夜间样式生效了，但子项还是贴在一起？gap 不是被“关掉”了，而是根本没进入布局层。常见断点不在主题逻辑，而在基础条件未满足。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 父容器是否仍是
display: flex或display: grid？某些夜间模式 JS 脚本会误删整个 class，导致布局退化为block - 是否写了
row-gap却忘了flex-wrap: wrap？多行 Flex 下，row-gap必须配合换行才起作用，夜间模式切过去后容易漏检 - Safari ≤ 16.4 或旧 Android WebView 中，
gap: var(--gap)可能完全不解析——必须降级为显式row-gap: 12px; column-gap: 12px;，且不能依赖@supports检测（它对变量支持不稳定）
首尾留白和夜间模式的 gap 配合最容易被忽略
gap 只管子项之间，不管容器边缘。夜间模式下，如果只改了 gap 值，但没同步调整容器的 padding，就会出现“中间紧凑、两边发空”或“左右挤到边界”的割裂感。
- 正确组合：
.card-grid { padding: 0 16px; gap: var(--space-md); }→ 夜间模式只需改--space-md和padding的值，比如padding: 0 12px - 避免用
margin替代padding控制首尾——它会外溢，且在暗色模式下可能和 body 背景混色，造成“看不见的空白” - 如果用
gap做横向导航栏（display: flex; flex-wrap: nowrap），夜间模式要额外检查overflow-x：收紧间距后若内容宽度超限，容易触发意外滚动条
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
