用途:从已完成的浅色主题推导出深色主题,或修复现有深色模式的问题。核心思路是把角色重新绑定到色阶,而不是镜像像素:ink/canvas 对会翻转,但层级不翻转——两种主题中抬升的表面都比其页面更亮,机械反转会得到浮在灰色上的黑色卡片。
主要能力:提供角色到角色的映射表(canvas、抬升表面、边框、ink、强调色、状态色、阴影、图片);给出推导顺序:先表面(最暗 canvas,逐级变亮),再边框与描边,再 ink 并逐对测量,再强调色与状态色(色度与明度同调),最后图片、插画与阴影。
关键规则:层级在两种主题中都指向更亮;最暗 canvas 用 #171717 而非 #000,最亮 ink 用 #fafafa 而非 #fff;阴影折叠为 1px 白色描边 0 0 0 1px rgb(255 255 255 / 0.09),悬停 0.14;层级描边用半透明白,分隔边框用实色 #2a2a2a;品牌色度回撤 20–30% 并上移明度;根元素声明 color-scheme: dark;素材最大平坦区域需低于 L 0.6,禁止 filter: invert();主题切换时暂停过渡;深色集需重新测量所有对比对。
使用方式:先找到主题切换机制([data-theme] 属性、.dark 类、prefers-color-scheme 或 next-themes 等 provider),把所有深色值放在该机制之后,不引入第二套切换方式,也不用逐组件 dark: 覆盖。
适用场景与限制:适用于已有浅色主题、需要完整深色主题的项目;若产品不在夜间、深色编辑器旁或媒体场景使用,可只发布浅色版。资料未提供具体安装命令、平台与收费信息。