什么是暗黑模式 UI 设计？

暗黑模式 UI 设计使用深色背景（通常 #0a0a0a 至 #1a1a1a）配合浅色文字和精心选择的强调色。与简单反转浅色主题不同，正确的暗黑模式需要调整色彩饱和度、通过微妙的明度差异实现表面层级、并确保所有文字满足 WCAG AA 对比度标准（最低 4.5:1）。

如何在 Tailwind CSS 中实现暗黑模式？

Tailwind 通过 'dark:' 变体支持暗黑模式。在 tailwind.config 中设置 darkMode: 'class' 通过类名切换，或 'media' 跟随系统偏好。用 CSS 自定义属性（--background, --foreground）定义主题色，然后在 Tailwind 配置中引用。通过在 html 元素上添加/移除 'dark' 类来切换。

暗黑模式设计常见错误有哪些？

常见错误：使用纯黑（#000）背景（在 OLED 上造成光晕）、表面层之间对比度不足、使用与浅色模式相同的饱和度（颜色在暗色背景上看起来过于刺眼）、白色文字使用 100% 不透明度（正文应使用 87%）、不调整阴影（应使用更浅更分散的阴影或微妙的边框代替）。

应该先设计暗黑模式还是浅色模式？

对于开发者工具、媒体应用和创意平台，可以考虑暗色优先。对于商务、电商和内容密集型网站，通常浅色优先更好。关键是使用 CSS 自定义属性 / design tokens 同时设计两种模式，让两者都不是事后补充。StyleKit 为所有风格提供双模式 tokens。

暗黑模式背景用什么颜色最好？

大面积背景避免使用纯黑（#000000）——在 OLED 屏幕上会产生光晕，且无法实现层级。改用近黑区间：基础层用 #0a0a0a 至 #121212，然后按阶梯抬升表面（#181818、#1e1e1e、#242424）。想要温度感可以加入 2-4% 的色相：带蓝的暗色如 #0b0d12 更冷峻，暖暗色如 #12100e 更柔和。饱和色只留给强调色，且相比浅色模式降低 15-20% 饱和度。

如何让暗黑模式满足 WCAG 无障碍标准？

三条规则覆盖大多数问题：正文文字相对所在表面需要 4.5:1 对比度（大文字 3:1）——在 #121212 背景上意味着至少 #a7a7a7；长正文不要用 100% 不透明度纯白，87% 不透明度（#ffffffde）既减少眩光又保持合规；状态不能仅靠颜色区分——错误红要搭配图标或文字标签，因为 8% 的男性有不同程度的色觉缺陷。用 prefers-contrast 媒体查询测试，如果强调色接近临界值就提供高对比度变体。

StyleKit · 暗色设计规格与提示词

暗黑模式 UI 提示词

暗黑模式设计不仅是反转颜色。它需要仔细处理表面层级（用较浅的暗色表示抬升元素）、降低彩色元素的饱和度、确保适当的对比度（文字至少 4.5:1）、以及策略性地使用强调色。优秀的暗黑模式在低光环境下减轻眼疲劳，同时保持视觉层级和可读性。

8 条提示词5 层表面WCAG 实测EN / ZH

表面层级：亮度即海拔

浅色界面靠阴影表达层级；暗色界面里阴影几乎不可见，改用亮度——越接近用户的表面越亮。选择任意一层查看取值与用途。

规格 02card

卡片

#131316

静置卡片与面板。比基底亮一档，用 1px 边框而非阴影分隔。

规律：每层比下一层亮约 3-4%，以 1px 低对比边框分隔。五层足以表达任何界面。

四条铁律

把这四条写进任何提示词，AI 生成的暗色界面立刻高一个档次。每条附带取值证明。

永远不用纯黑

#000000 在 OLED 上产生拖影，并让所有阴影与层级线索失效。从 #09090b 起步，给界面留出向下的空间。

降饱和、提亮度

浅色主题的饱和色在暗底上会「震动」刺眼。文字与图标提亮一档——blue-500 改 blue-400——填充色才保留 500。

白字压光，三档层级

纯白在暗底上晃眼。主文本 #fafafa、正文 #d4d4d8、说明 #a1a1aa——三档撑起整页层级，全部超过 AAA。

一个强调色，花在刀刃上

暗色界面 90% 是灰阶。强调色只给主操作、当前态和一个关键数据。到处上色等于到处没有重点。

实测对比度

以下每个数值都按 WCAG 相对亮度公式实算。把整张表贴进提示词，AI 就没有理由生成不可读的文字。

Aa	前景 / 背景	对比度	WCAG	用途
Aa	#fafafa / #09090b	19.06	AAA	基底上的主文本
Aa	#d4d4d8 / #131316	12.55	AAA	面板上的正文
Aa	#60a5fa / #09090b	7.83	AAA	强调文本与链接
Aa	#a1a1aa / #09090b	7.76	AAA	基底上的说明文字
Aa	#a1a1aa / #131316	7.24	AAA	面板上的说明文字
Aa	#3b82f6 / #09090b	5.41	AA	强调填充与图标
Aa	#71717a / #09090b	4.12	AA-LG	仅限大号弱化标签，18px+
Aa	#52525b / #09090b	2.57	FAIL	过暗——禁止上线

八条提示词

每条都带具体色值、层级与对比度约束——仪表盘、SaaS、移动端、登录与定价页。展开查看全文，复制后直接粘进 ChatGPT、Claude、Cursor 或 v0。

01暗黑模式仪表盘CHATGPT / CLAUDE

Design a dark mode analytics dashboard. Background colors: #0a0a0a for base, #141414 for cards, #1e1e1e for elevated elements. Text: #f5f5f5 for primary, #a3a3a3 for secondary. Use a single accent color (blue #3b82f6) for interactive elements and data highlights. Cards should have subtle 1px borders in #262626. Charts should use the accent color with varying opacity for data series. Ensure all text meets WCAG AA contrast standards.

02v0 暗色主题应用V0

03Cursor 暗色主题CURSOR

04Claude 暗色主题CLAUDE

05暗黑模式 SaaS 落地页CHATGPT / CLAUDE

06ChatGPT 暗黑模式移动应用CHATGPT / CLAUDE

07Claude 暗黑模式登录页CLAUDE

08Cursor 暗黑模式定价页CURSOR

取舍清单

摘自 StyleKit 的 dark-mode 风格定义。生成结果跑偏时，把违反的那条直接贴回给 AI。

要

使用深色背景 bg-slate-900, bg-gray-900, bg-[#0f172a]
卡片使用略浅的背景 bg-slate-800/50，hover 时提亮 hover:bg-slate-800
边框使用低对比度 border-slate-700，hover 时照亮 hover:border-slate-500
文字使用 text-slate-100 主要, text-slate-400 次要，group-hover 时次要文字提亮 group-hover:text-slate-300
高亮色保持高饱和度 blue-500, green-500
按钮使用内发光 shadow-[inset_0_1px_0_rgba(255,255,255,0.15)] 模拟暗色光源
按钮必须有 active:scale-[0.98] 触觉按压确认
所有可交互元素必须有 focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-900
卡片 hover 时 hover:-translate-y-0.5 + 深色外阴影上浮
使用 rounded-lg 或 rounded-xl 圆角

不要

禁止使用纯白文字 text-white（过于刺眼）
禁止使用高对比度边框
禁止使用纯黑背景 #000000（过于沉闷）
禁止在深色背景上使用深色文字
禁止高亮色使用过多
禁止阴影使用浅色（深色背景上用浅色阴影无法体现层次）
禁止按钮缺少 active:scale-[0.98]（按钮需要触觉确认，否则如同装饰）
禁止 focus:ring 缺少 focus:ring-offset-slate-900（暗色背景上焦点环必须与元素分离才可见）

参考资源

可运行的暗色模板与相关风格——每个风格页都带完整 tokens、组件配方和可导出的 AI 规则。

起步模板

常见问题

还想要别的方向？浏览全部 146 种设计风格，或回到提示词总库。

146 种风格提示词总库

暗黑模式 UI 提示词

8 条提示词5 层表面WCAG 实测EN / ZH

前景 / 背景

对比度

WCAG

#fafafa / #09090b

19.06

AAA

#d4d4d8 / #131316

12.55

AAA

#60a5fa / #09090b

7.83

AAA

#a1a1aa / #09090b

7.76

AAA

#a1a1aa / #131316

7.24

AAA

#3b82f6 / #09090b

5.41

#71717a / #09090b

4.12

AA-LG

#52525b / #09090b

2.57

FAIL