用途:Dark Mode Adapter 是一个专注于深色模式实现的设计技能。当用户提供浅色模式的颜色与设计时,它负责生成合适的深色模式适配方案,以保证可读性与视觉层级。
主要能力:
- 分析浅色模式配色方案,将每个颜色映射为对应的深色模式取值;
- 确保深色模式下具备合适的对比度;
- 以不同方式处理海拔和阴影;
- 提供 CSS / 自定义属性映射,例如:
@media (prefers-color-scheme: dark) { :root { --bg-primary: #121212; --text-primary: #E0E0E0; } }
它强调深色模式不是颜色反转:反转会产生错误结果,深色模式以深灰(而非纯黑)作为背景,如 #121212 而不是 #000000。海拔在浅色模式下用阴影表现,在深色模式下则通过表面明度区分: Layer 0(基础):#121212 Layer 1(抬升):#1D1D1D Layer 2(覆盖层):#252525
使用方式:提供浅色模式配色与设计,技能会给出深色模式适配结果、颜色映射和 CSS 自定义属性示例。输出格式示例包含颜色映射与 CSS Custom Properties 段落。缺失的上下文仅在阻碍给出正确答案时才会询问,否则会说明所做假设。
质量与约束:对比度与可读性需在预期的最小显示尺寸下验证;尺寸、出血与安全区域需匹配指定的输出媒介;颜色不得作为传达含义的唯一手段,需辅以图标或文字;需确认预期用途下的素材许可与字体嵌入权利。不要在没有说明媒介及其约束的情况下交付设计;不要仅依赖颜色传达状态或含义;不要在未确认目标平台规格的情况下交付导出物。
适用场景:为已有浅色界面添加深色模式,包括配色映射、层级与阴影处理、CSS 变量输出。限制:不用于从零创建新配色方案;资料中未提供更多平台、收费或价格信息。