治愈系暗色模式的亮度曲线：不是把所有颜色反转就叫暗色

治愈系暗色模式的亮度曲线不是把所有颜色反转就叫暗色一、暗色模式的设计误区是把亮色主题直接反转很多应用的暗色模式实现就是把亮色主题的颜色反转——白色背景变成黑色黑色文字变成白色中间色调取反。这种做法在技术上最简单但视觉上最失败。高对比度的黑底白字长时间阅读比白底黑字更刺眼中灰色反转后变成暗灰色在黑色背景上几乎看不见。治愈系暗色模式的目标不是暗而是柔。背景不应该是纯黑#000000而是偏暖的深灰#1a1a1e。文字不应该是纯白而是偏暖的浅灰#e8e0d8。所有颜色都需要在暗色背景下重新调整饱和度和亮度不能简单反转。这个调整过程需要一条亮度曲线来指导。二、暗色模式的亮度曲线设计原则亮度曲线定义了从亮色到暗色的映射规则。不是线性映射直接反转而是非线性映射——降低对比度、减少饱和度、偏移色温。flowchart TD A[亮色主题色值] -- B[亮度曲线映射] B -- C[背景亮度不低于8%不高于15%] B -- D[文字亮度不低于70%不高于85%] B -- E[强调色饱和度降低30%] B -- F[色温偏移暖色调5度] C -- G[暗色主题色值输出] D -- G E -- G F -- G背景亮度不低于8%是因为纯黑背景在 OLED 屏幕上会让其他颜色显得过于刺眼。文字亮度不高于85%是因为纯白文字在深色背景上的对比度太强长时间阅读容易疲劳。强调色饱和度降低30%是因为在暗色背景下高饱和度颜色会显得过于荧光。三、亮度曲线映射的实现type ColorMapping { light: string; dark: string; }; // 治愈系暗色模式的亮度曲线参数 const darkCurveConfig { backgroundMinBrightness: 8, // 背景最低亮度百分比 backgroundMaxBrightness: 15, // 背景最高亮度百分比 textMinBrightness: 70, // 文字最低亮度百分比 textMaxBrightness: 85, // 文字最高亮度百分比 saturationDecay: 0.7, // 强调色饱和度衰减到70% warmShift: 5, // 色温偏移5度偏暖 }; // 色值映射函数根据亮度曲线将亮色值转为暗色值 export function mapToDarkMode(lightHex: string, role: bg | text | accent): string { const hsl hexToHSL(lightHex); const config darkCurveConfig; switch (role) { case bg: // 背景亮度映射到8%-15%范围色温偏暖 hsl.l clamp(hsl.l * 0.15, config.backgroundMinBrightness, config.backgroundMaxBrightness); hsl.h hsl.h config.warmShift; break; case text: // 文字亮度映射到70%-85%范围降低饱和度 hsl.l clamp(70 (hsl.l * 0.15), config.textMinBrightness, config.textMaxBrightness); hsl.s hsl.s * 0.3; // 文字饱和度大幅降低避免荧光感 break; case accent: // 强调色饱和度衰减亮度适中 hsl.s hsl.s * config.saturationDecay; hsl.l clamp(hsl.l * 0.6 15, 40, 60); break; } return hslToHex(hsl); } function clamp(value: number, min: number, max: number): number { return Math.max(min, Math.min(max, value)); }三种角色背景、文字、强调色的映射规则完全不同。背景降亮度但保持色温文字降饱和度但保持可读性强调色降饱和度但保持辨识度。这比简单反转的暗色模式在长时间使用下舒适度差距明显。四、暗色模式的切换过渡和无障碍边界暗色模式的切换不能硬切。从亮色到暗色的过渡应该在0.3秒内完成使用transition: background-color 0.3s ease即可。但过渡期间会出现短暂的中间状态颜色在这个状态下可能不协调。测试时应检查过渡中各元素的色彩是否都平滑变化没有某个元素跳变。OLED 屏幕上的暗色模式有纯黑背景的诱惑。纯黑确实省电在 OLED 上比深灰省约5%-10%电量。但治愈系优先考虑阅读舒适度5%-10%的电量节省不值得牺牲视觉体验。如果用户确实需要省电可以提供一个极省电模式选项这个模式下背景才用纯黑但默认应该是深灰。暗色模式还需要适配prefers-color-scheme系统设置。用户如果系统层面选择了暗色应用应该默认跟随。但不应该强制跟随——有些用户在系统层面选暗色但特定应用想用亮色。提供手动切换入口系统设置作为默认值。五、总结治愈系暗色模式不是亮色主题的直接反转而是用亮度曲线做非线性映射。背景亮度8%-15%、文字亮度70%-85%、强调色饱和度衰减30%、色温偏暖5度。三种角色映射规则各不相同。切换过渡0.3秒平滑变化。默认用深灰背景而非纯黑省电模式单独提供。跟随系统 prefers-color-scheme 但保留手动切换入口。