用途:为界面实现深色模式,并提供双主题设计策略与颜色重映射方法。
主要能力:
- 颜色调整:背景使用 #121212 到 #1A1A1A,而非纯黑 #000000;文字使用 #E0E0E0 到 #F0F0F0,而非纯白(纯白会产生光晕);品牌色去饱和 10-20%(鲜艳颜色在深色背景上会振动);状态色(绿、红、黄)需调整明度。
- 层级表达:浅色模式中抬升等于更亮加阴影;深色模式中抬升等于更亮的表面色,无需阴影。示例变量:--surface-0: #121212;--surface-1: #1E1E1E(卡片);--surface-2: #252525(下拉菜单);--surface-3: #2C2C2C(模态框)。
- 图片处理:照片略微降低亮度与对比度;浅色背景插画替换为深色背景版本;UI 截图需要深色模式版本。
- 测试:在真实深色环境中测试;重新检查对比度(数值会变化);在 f.lux/Night Shift 暖色调下测试。
使用方式:按上述变量与调整规则重映射颜色,并针对深色主题单独验证。
适用场景:需要支持深色模式的网站或应用界面设计。
限制:资料未提供具体框架集成、安装命令或完整代码示例。