SuperAPI AI 工具集

color-mode-and-theme

设计与创作

查看项目

更新于 10-15 15:23

技能介绍

用途

Color Mode and Theme 用于在定义基础调色板或决定是否支持深色模式时,帮助团队做出明确的配色模式决策。它将配色模式视为品牌与使用情境的决策,而非个人偏好,强调应有意识地选择。

主要能力

三种模式的定位

  • 浅色(white design):调性开放、可信、以内容为先、可访问、专业。适合营销站点、电商、编辑内容、面向混合受众的 SaaS、消费类产品,以及内容为核心的 B2B 工具。对多数产品而言是更安全的默认选择,在明亮环境下表现更好,开箱即用的可访问覆盖范围也更广。
  • 深色(dark design):调性高端、专注、沉浸、技术感、高对比数据。适合交易平台、开发者工具、创意工具(视频/音频编辑器)、含密集可视化的数据看板、娱乐与游戏。深色模式在低光环境下长时间使用可减少眼睛疲劳,也让彩色数据可视化(图表、热力图)更突出。需注意:深色模式更难做好,低对比文本、过饱和品牌色、表面层级区分不足是常见失败点;若团队无法妥善维护,浅色模式优于一个做坏的深色模式。
  • 组合(系统默认 + 手动覆盖):尊重 prefers-color-scheme,让操作系统设定默认值,并为想覆盖的用户提供切换开关。这是多数有回访用户基础产品的现代标准做法。指南给出了对应的 CSS 媒体查询与 data-theme 覆盖写法示例。

何时构建主题选择器

主题选择器是一个 UI 控件,会占用空间并增加复杂度,只有在用户控制真正重要时才应构建。指南以表格形式列出各类场景的判断:营销站点/落地页通常不设,选定一种模式即可;面向大众的消费类 SaaS 采用组合方案;开发者工具、技术产品应设;交易平台、金融看板应设;B2B 企业工具(ERP、分析)应设;电商店面通常不设;创意工具应设。规则是:如果用户每天会在工具中花费数小时,就给他们控制权;如果是事务性或偶发使用的产品,就选择符合品牌的模式即可。主题切换器应放在页眉(右上角、账户附近)或用户设置中,不应放在主导航里。

品牌调性与默认模式

品牌既有视觉识别应影响默认模式的选择:干净、极简、可信、开放的品牌对应浅色;高端、专属、大胆、沉浸的品牌对应深色;技术、数据密集、精确的品牌对应深色;活泼、多彩、有活力的品牌对应浅色(深色模式在使用鲜艳品牌色时更难维护);中性、企业、功能性的品牌对应浅色并配合系统默认切换。若品牌使用很深的原色(海军蓝、深绿、近黑),深色模式能自然衬托它;若品牌围绕明亮鲜艳的原色构建,浅色模式能让它舒展。

深色模式令牌原则

主题切换器是第二套调色板,而不是一个开关:每个语义色在两种模式下都需要经过验证的值,而不是靠算法翻转一个值。浅色下通过的对比度在深色中常常失败,饱和度和高度在两种模式下读感不同,这是真实的成本,也是不轻易构建深色模式的原因之一。

深色模式不是简单反转颜色,常见错误与原则包括:

  • 不要使用纯黑(#000000)作为基础表面,改用极深的中性色(如 #0A0A0F、#111827)以获得层次感。
  • 深色模式下的表面层级依靠明度而非阴影:基础、+1、+2 表面逐渐变亮,而不是阴影加重。
  • 略微降低品牌色饱和度:鲜艳颜色在深色背景上可能显得刺眼,降低 10–15% 饱和度可保持可读性。
  • 为反色文本提升字重:深色背景上的浅色文字看起来比同字重的浅色模式更“细”,提升一档字重(如 Regular 到 Medium,或 Medium 到 Semibold)以保持易读性。
  • 文本对比度需要主动验证:深色表面上的浅色文字不会自动符合 WCAG,需检查所有组合。

指南还强调硬编码颜色值的隐患:当一个硬编码颜色恰好等于某个令牌在当前主题下的解析值时,它并不是巧合或局部选择,而是那个令牌以无法跟随主题的形式被写死了。这种表面被冻结在深色模式值上时,在浅色模式下不仅看起来不对,还会反转与相邻元素的关系,原本下沉的变为凸起,原本后退的变为前进;布局仍能渲染,也不报错,唯一的表现是有人说某个界面感觉不对。不要依赖自律,因为字面量在任何令牌审计中天然不可见。应将其机械化:在标记中 grep 字面颜色值,把数量视为一笔有数字的债务,降到零后让新出现的字面量使构建失败。任何通过 grep 存活的字面量都需要书面理由,而“它反正和令牌一样”是唯一永远不成立的理由。

指南给出了深色模式表面色阶的示例令牌,包括基础表面、卡片抬升表面、模态与浮层表面、边框、主文本与次要文本。

评审清单

文末提供核对项:配色模式选择是否有意为之并基于品牌调性与使用情境;若为组合模式,prefers-color-scheme 是否设定默认值;若构建了主题选择器,是否放在低调但可访问的位置;深色模式下表面是否通过明度阶梯而非阴影区分;深色模式下品牌色是否略微降饱和以避免视觉攻击性;两种模式下所有文本/背景对比度是否都验证过(WCAG 2.2 AA);反色文本(浅色在深色上)是否提升一档字重以保持视觉易读性;深色模式基础表面是否避免了纯黑(#000000)。

使用方式

该内容以技能/指南形式提供,需结合具体产品设计流程使用,用于在定义基础调色板或决定深色模式支持时提供判断框架与检查清单。具体安装或集成命令暂未提供。

适用场景

适合产品设计、设计系统建设、前端主题令牌定义等需要在早期确定配色策略并评估深色模式投入产出比的场景。

限制

资料未提供具体的实施代码库、框架集成方式或安装命令。深色模式的具体对比度阈值、完整品牌色降饱和数值等细节需结合实际项目另行确定。