用 prefers-color-scheme 媒体查询配合 CSS 变量可实现免 JS、高维护性的暗黑模式横向导航栏，需注意变量定义顺序、全属性适配、flex 布局优先、color-scheme 声明及焦点可访问性。
直接用 prefers-color-scheme 媒体查询 + CSS 变量就能实现干净、可维护的暗黑模式横向导航栏，不需要 JS 切换或重复写两套样式。
怎么用 prefers-color-scheme 自动适配系统主题
浏览器会根据系统设置（macOS / iOS / Windows 10+ / Android）自动触发该媒体查询，比手动开关更可靠，也符合用户预期。
- 必须把
@media (prefers-color-scheme: dark)放在全局 CSS 变量定义之后，否则变量会被覆盖失效 - 不要只改文字颜色，
background-color、border-color、box-shadow都要同步调整，否则导航栏边缘发虚或对比度崩坏 - 深色下避免纯黑
#000背景——用#121212或#1e1e1e更护眼，也方便后续加 subtle gradient 或 noise texture
示例：
:root {
--nav-bg: #f8f9fa;
--nav-text: #212529;
--nav-hover: #e9ecef;
}
@media (prefers-color-scheme: dark) {
:root {
--nav-bg: #1e1e1e;
--nav-text: #e0e0e0;
--nav-hover: #2d2d2d;
}
}
nav ul {
background-color: var(--nav-bg);
}
nav a {
color: var(--nav-text);
}
nav a:hover {
background-color: var(--nav-hover);
}
横向导航栏常见布局陷阱（flex vs inline-block）
用 display: flex 是当前最稳妥的选择，inline-block 在暗色模式下容易因默认 vertical-align 或 whitespace 导致高度错位、底部多出几像素空隙。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 务必给
nav ul加list-style: none和margin: 0; padding: 0，否则暗色背景上默认圆点或缩进会暴露 - 如果导航项文字过长，
flex-wrap: wrap不推荐用于横向导航——它会破坏“一行到底”的预期；应配合overflow-x: auto+scrollbar-gutter: stable做横向滚动 - 移动端需加
flex-direction: column断点，但注意：暗色模式下column的 hover 效果要重置为 tap-friendly 高度（至少 44px）
color-scheme: light dark 必须显式声明
这个 CSS 属性告诉浏览器：“我这整块导航支持明暗双模式”，否则部分系统（尤其是 Safari iOS）会强制降级表单控件（如 下拉箭头）为亮色，和暗色导航栏割裂。
- 加在
nav或header根元素上即可，无需全站统一 - 值只能是
light、dark或light dark，不能写auto或其他字符串 - 搭配
appearance: none才能彻底自定义下拉/输入框样式，否则暗色下默认控件灰蒙蒙看不清
暗色模式下 hover/focus 状态容易被忽略的细节
很多人只设了 :hover，但键盘用户依赖 :focus-visible，而屏幕阅读器用户需要明确的焦点轮廓。暗色背景上默认蓝色 outline 几乎不可见。
- 别删
outline，改用outline: 2px solid #4a6fa5这类中高对比度色，或改用box-shadow: 0 0 0 2px rgba(74, 111, 165, 0.5) -
:hover和:focus-visible的背景色差建议 ≥ 15%，否则视觉反馈弱（可用 Chrome DevTools 的「Contrast」面板校验） - 禁用
transition: background-color .2s时，记得同时加transition: color .2s, background-color .2s, box-shadow .2s，否则 focus 时阴影突兀弹出
最麻烦的其实是字体抗锯齿——Safari 在暗色模式下对细字体渲染偏淡，必要时得加 -webkit-font-smoothing: antialiased，但仅限 macOS/iOS；Windows Edge 不认这个属性，得靠 font-weight 微调补救。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
