反转是错的
把纯黑背景 + 纯白文字叫做"深色模式"，就像把照片的反相滤镜叫做"艺术处理"。这不是设计，是偷懒。
真正的问题是：人类在暗环境中对色彩的感知发生了系统性变化。
同时对比效应
在暗背景上，同样的色彩看起来更亮。白色文字在黑色背景上会产生"光晕效应"——文字周围的像素看起来在发光，导致笔画变粗、字号听起来比实际更大。
解决方案很简单也很反直觉：暗色模式的文字不应该是纯白。
[data-theme="dark"] {
--ctp: #EDE0D8; /* 暖灰色，不是 #FFFFFF */
}
把文字从纯白降到 90-95% 亮度，同时保持足够的对比度（10:1）。你几乎看不出它不是纯白，但你的眼睛会感谢你。
饱和度需要调整
鲜艳的色彩在暗背景上表现得更加"激进"。同样的蓝色在白色背景上显得柔和，在黑色背景上却像霓虹灯。
/* 浅色模式 */
--cp4: #7B68A0; /* 柔和的紫色 */
/* 深色模式 */
--cp4: #9B88B8; /* 更亮更柔的紫色，补偿暗背景的对比效应 */
暗色模式下的色彩比浅色模式略微"褪色"，饱和度降低约 10-15%。
阴影在暗处的悖论
box-shadow 在暗背景上几乎不可见。阴影的语义是"凸起"——浅色背景上的暗影暗示光源在上方。但暗色背景上这个隐喻失效了。
解决方案：用发光替代阴影。
[data-theme="dark"] .card:hover {
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.05),
0 8px 32px rgba(0, 0, 0, 0.4);
}
卡片 hover 时外围出现微弱的白色光环代替传统阴影，暗示层次提升。
视觉层级重建
浅色模式下，视觉层级靠"暗度"区分：越重要的元素越深。深色模式下这个规则反转：越重要的元素越亮。
:root { --ctp: #2E2825; --csm: #8A8078; --ctx: #C0B8B0; }
[data-theme="dark"] { --ctp: #EDE0D8; --csm: #A09890; --ctx: #6A6058; }
正文最亮，辅助文字次之，最次要的信息最暗。这是一个完整的反转——不是颜色值的反转，而是亮度层级的反转。
深色模式不是浅色模式的负片。它是夜晚专用的另一套视觉语言。
评论