深色模式设计需避免纯黑背景与纯白文字，推荐使用#121212背景配#e0e0e0等柔和浅灰文字以平衡对比度与舒适性，高亮色须按语义绑定hsl值并实测对比度，边框宜用hsla(0,0%,100%,0.12)等低透明度描边确保结构清晰。
深色背景不是加个 background-color: #000 就完事的；直接套用会导致文字发灰、边框消失、图表数据“沉底”，反而降低可读性。
深色背景下文字颜色不能只靠“变白”
纯白文字（#ffffff）在深色背景上对比度虽高，但长时间观看易视觉疲劳，且对色觉障碍用户不友好。WCAG AA 级要求正文文本对比度 ≥ 4.5:1，大字 ≥ 3:1——而 #ffffff 配 #121212 实际对比度约 17:1，远超标准，却牺牲了舒适性。
- 推荐使用偏暖/中性浅灰，如
#e0e0e0（对比度 ≈ 12:1）或#c5c5c5（≈ 9:1），既达标又柔和 - 标题与关键指标可用品牌主色的高明度变体，例如
hsl(220, 70%, 85%)，比纯白更有层次感 - 禁用
opacity降文字透明度来“弱化”次要信息——它会同时削弱对比度，极易跌破 4.5:1，应改用更暗的背景色或更低饱和度的文字色
高亮色必须绑定语义，不能随意堆砌
大屏看板里“高亮”不是为了炫技，而是标记状态、引导视线、区分优先级。随便用几个亮色（比如 #ff5733、#00f2fe、#43e97b）并列，人眼无法快速归类，反而增加认知负担。
- 按功能分配色相：成功用
hsl(145, 70%, 60%)，警告用hsl(50, 80%, 60%)，错误用hsl(360, 75%, 65%)，主操作用hsl(220, 70%, 60%) - 同一语义下，通过明度变化表达强度：例如“高负载”用
hsl(360, 75%, 55%)，“中负载”用hsl(360, 75%, 70%)，避免新增色相 - 所有高亮色必须在深色背景上实测对比度，工具推荐 Chrome DevTools 的 Color Picker 或 WebAIM Contrast Checker
边框与分隔线最容易被忽略的透明度陷阱
深色背景下，传统 border: 1px solid #333 几乎不可见；而直接上 #fff 又太刺眼、割裂。ElementPlus 表格里常见问题就是 --el-table-border-color 设成 transparent 后整张表“融掉”，看不出行列结构。
- 推荐用带透明度的浅色描边：
rgba(255, 255, 255, 0.1)或hsla(0, 0%, 100%, 0.12)，既维持结构又不抢戏 - 表格 hover 行背景别用纯色，改用
rgba(255, 255, 255, 0.05)，否则在深色底上像“打补丁” - 卡片/模块之间慎用
box-shadow替代边框——扩散阴影在深色背景上容易糊成一团，不如用border-bottom: 1px solid hsla(0,0%,100%,0.08)清晰
真正难的不是调出一组“好看”的颜色，而是让每种颜色在不同亮度背景、不同设备屏幕、不同视力条件下都稳定传递相同语义。HSL 变量 + 对比度验证 + 语义绑定，三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
