SuperAPI AI 工具集

dark-mode-design

设计与创作

查看项目

更新于 10-15 21:12

技能介绍

用途:为界面实现深色模式,并提供双主题设计策略与颜色重映射方法。

主要能力:

  • 颜色调整:背景使用 #121212 到 #1A1A1A,而非纯黑 #000000;文字使用 #E0E0E0 到 #F0F0F0,而非纯白(纯白会产生光晕);品牌色去饱和 10-20%(鲜艳颜色在深色背景上会振动);状态色(绿、红、黄)需调整明度。
  • 层级表达:浅色模式中抬升等于更亮加阴影;深色模式中抬升等于更亮的表面色,无需阴影。示例变量:--surface-0: #121212;--surface-1: #1E1E1E(卡片);--surface-2: #252525(下拉菜单);--surface-3: #2C2C2C(模态框)。
  • 图片处理:照片略微降低亮度与对比度;浅色背景插画替换为深色背景版本;UI 截图需要深色模式版本。
  • 测试:在真实深色环境中测试;重新检查对比度(数值会变化);在 f.lux/Night Shift 暖色调下测试。

使用方式:按上述变量与调整规则重映射颜色,并针对深色主题单独验证。

适用场景:需要支持深色模式的网站或应用界面设计。

限制:资料未提供具体框架集成、安装命令或完整代码示例。