暗黑模式仪表盘
设计暗色数据分析仪表盘。基础背景使用 #0a0a0a，卡片使用 #141414，浮层表面使用 #1e1e1e；primary 文字为 #f5f5f5，secondary 文字为 #a3a3a3。交互元素和关键数据统一使用蓝色 #3b82f6，卡片使用 1px #262626 细边框。图表数据系列沿用该强调色并通过不同 opacity 区分。所有文字必须满足 WCAG AA 对比度。暗黑模式设计提示词
暗黑模式设计不仅是反转颜色。它需要仔细处理表面层级（用较浅的暗色表示抬升元素）、降低彩色元素的饱和度、确保适当的对比度（文字至少 4.5:1）、以及策略性地使用强调色。优秀的暗黑模式在低光环境下减轻眼疲劳，同时保持视觉层级和可读性。
v0 暗色主题应用
使用 shadcn/ui 的 dark 配色构建 Web 应用。页面包含图标侧边栏、卡片式主内容区和顶部栏。基础背景使用 zinc-950，卡片使用 zinc-900，hover 状态使用 zinc-800，primary 强调色使用 blue-500。提供带主题切换开关的设置页；标题文字统一使用 zinc-100，正文使用 zinc-400。Cursor 暗色主题
创建默认启用 dark mode 的 Next.js 应用。使用以下 CSS 自定义属性管理主题：--background: 0 0% 4%; --card: 0 0% 8%; --border: 0 0% 15%; --foreground: 0 0% 96%; --muted: 0 0% 64%; --accent: 217 91% 60%。建立正确的表面层级，每升高一层就略微变亮；全站使用 Tailwind dark: variants，并加入流畅的主题切换动画。Claude 暗色主题
生成 dark mode first 的 React 组件库，包含 Card、Button、Input、Badge、Table 和 Modal。所有组件通过 CSS 自定义属性取色，确保深浅主题均可使用。dark 色板：background #09090b、surface #18181b、border #27272a、text #fafafa、muted #a1a1aa；light 色板：background #ffffff、surface #f4f4f5、border #e4e4e7、text #09090b、muted #71717a。样式使用 Tailwind CSS 和 dark: modifier。暗黑模式 SaaS 落地页
设计 dark mode SaaS 落地页，包含 hero、功能网格、用户评价区和定价 CTA。基础背景为 #09090b，交替区块为 #101013，卡片为 #18181b 并使用 1px #27272a 边框。标题文字使用 #fafafa，正文使用 #d4d4d8，说明文字使用 #a1a1aa。唯一强调色为 emerald #10b981，只用于 primary CTA、logo mark 和每个区块的一项关键指标。hero 标题为 64px、line-height 1.05，在强调词后添加轻微 radial glow。所有文字必须满足 WCAG AA。ChatGPT 暗黑模式移动应用
为习惯追踪器设计 dark mode 移动端 UI。使用 true dark 色板：background #0b0b0f、surface #15151c、raised surface #1d1d27。底部 tab bar 包含 4 个图标，当前 tab 使用 violet #8b5cf6，未选中项 opacity 为 40%。卡片使用 16px radius 和完整的 1px solid rgba(255,255,255,0.06) 细边框，不使用厚重阴影。进度环在 12% opacity 的轨道上使用强调色。正文为 17px，标题为 28px semibold；所有交互目标至少 44px，正文 opacity 为 87%。Claude 暗黑模式登录页
生成 React dark mode 身份验证页，在同一位置切换登录与注册状态。split layout 左侧展示从深蓝 #1e3a8a 过渡到黑色的轻微动画渐变和产品标语，右侧在 #0a0a0a 背景上放置表单。input 使用 #171717 背景、#262626 边框、2px amber #f59e0b focus ring 和 #a3a3a3 floating label。primary button 使用 amber 背景与 #0a0a0a 文字；社交登录按钮使用 #404040 边框的 outline 样式。加入 inline validation：error #ef4444、success #22c55e，并确保全部表单文字达到 4.5:1 对比度。Cursor 暗黑模式定价页
使用 Tailwind 构建包含三个 tier 的 Next.js dark mode 定价页。页面背景为 #050505，tier 卡片为 #111111，边框为 #1f1f1f。中间的 Pro tier 使用 scale-105、orange #f97316 完整边框和小型 'Most Popular' badge 突出显示。价格数字使用 48px tabular-nums；功能列表的 check 图标使用强调色并设为 70% opacity。加入月付/年付 toggle 和平滑滑动指示器；年付状态以 #525252 删除线显示对应月价。tier 下方放置 FAQ accordion，各项使用完整的 1px #1f1f1f 分隔边框。所有文字符合 WCAG AA。常见问题
什么是暗黑模式 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 同时设计两种模式，让两者都不是事后补充。UI Library 为所有风格提供双模式 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 媒体查询测试，如果强调色接近临界值就提供高对比度变体。