用途:把仅有浅色主题的站点或应用改造成真正的深色主题,而不是简单反色。它强调深色界面按独立主题逻辑运作:层级靠更亮的表面而非阴影表达,高饱和色在深色背景上会刺眼,纯黑配纯白是炫光而非对比。
主要能力与工作流:
- 先令牌化。清点代码库中所有颜色,把组件里的硬编码色提取为语义令牌,如 bg.base、surface、surface.raised、text.primary、text.muted、border、accent、states。
- 按角色设计深色调色板,遵循深色 UI 物理规律:底色用深灰而非 #000(约 #0f1115–#1a1d23,或偏向品牌色);层级越高表面越亮;文字用非纯白(约 #e8eaed,87% 白)并设弱化层级;强调色降饱和、提亮 1–2 级;边框改为低透明度白色;阴影更深更紧或改用表面亮度区分。文本与表面对比度至少满足 WCAG AA。
- 按技术栈接入:Tailwind 的 dark: 类策略(v4 为 @variant dark),或用 [data-theme="dark"] 块重定义自定义属性;开关三态(浅色/深色/跟随系统)、localStorage 持久化、prefers-color-scheme 默认值,以及在 <head> 中防止首屏闪烁的内联脚本。
- 处理难点:带白底的图片与插画、图表与数据可视化配色、表单控件与 color-scheme: dark、第三方嵌入组件、邮件模板与分享图、深色下消失的焦点环。
- 审计:两种模式走查关键路由,检查残留的浅色表面、双重边框、不可读的弱化文字和失去冲击力的强调按钮。
规则:必须用语义令牌集中映射;不用纯黑底色与纯白文字;层级逻辑要翻转;强调色可校准但品牌色相不变;两种模式都是一等公民;系统偏好切换需实时响应无需刷新。
快速命令示例:「Convert this project to dark mode」(完整流程)、「Tokenize my colors first」、「Just design the dark palette」、「Dark mode audit」。
限制:资料未提供具体平台支持范围、收费方式与安装命令;实际效果取决于项目原有颜色结构与组件数量。