白天和夜晚，不该是同一张脸
大多数博客主题的深色模式只是一个简单的色相反转。把白底换成黑底，黑字换成白字，完事。
但这种粗暴的转换忽略了色彩心理学的本质：人类在白天和夜晚对色彩的感知完全不同。
幻梦设计了两套独立的色彩系统，它们不是彼此的负片，而是两个独立的设计方案。
朦胧幻梦：日间的温度
浅色模式取名「朦胧幻梦」，灵感来自清晨透过薄雾的阳光。
调色思路
以暖桃色和杏色为基底，整体色调偏暖，营造舒适、温和的阅读氛围。
| 色阶 | 用途 | 色值参考 |
|---|---|---|
| P9 (最浅) | 页面背景 | 接近纯白，带极淡的暖粉 |
| P5 (中间) | 卡片、容器 | 柔和米白 |
| P1 (最深) | 正文文字 | 深棕而非纯黑 |
纯黑色 #000 在浅色背景上对比度过高，长时间阅读容易眼疲劳。幻梦用深棕色 #2E2825 替代纯黑，保留了足够的可读性，同时减少了对眼睛的攻击性。
卡片层次
/* 幻梦的卡片不是简单的白色方块 */
.card {
background: var(--cbg2); /* 半透明暖白 */
backdrop-filter: blur(16px); /* 毛玻璃模糊 */
border: 1px solid var(--cbd); /* 微妙的边界 */
border-radius: var(--br2); /* 柔和的圆角 */
}
叠加在带背景图的页面上，卡片的半透明效果让背景若隐若现，形成层叠的视觉深度。
夜色幻梦：深夜的温柔
深色模式取名「夜色幻梦」，灵感来自夏夜星空。
为什么不用纯黑？
纯黑 (#000) 的深色模式是设计中的常见错误。屏幕上的纯黑色块与发光像素形成强烈反差，导致文字"光晕"效应——白字周围出现模糊的光环。
幻梦的深色背景使用极深的暖棕色 #0E0A08，保留了一丝温度。它比纯黑看起来更舒适，就像纸质书的米黄页面比纯白更护眼。
卡片在暗处的表现
深色模式下，卡片从"明亮"变为"深邃"，但保持通透感：
[data-theme="dark"] .card {
background: var(--cbg2); /* 半透明深色 */
backdrop-filter: blur(16px); /* 毛玻璃在暗处同样有效 */
}
毛玻璃效果在深色模式下展现出另一种美感——卡片像是用深色水晶雕刻而成，边缘透出微光。
三模式切换逻辑
幻梦支持三种模式：跟随系统、浅色、深色。
class ThemeManager {
// 三模式循环: system → light → dark → system
cycle(): void {
const modes = ['system', 'light', 'dark'];
const next = (modes.indexOf(this.mode) + 1) % 3;
this.setMode(modes[next]);
}
// 跟随系统时，监听系统偏好变化
watchSystem(): void {
window.matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change', e => {
if (this.mode === 'system') {
this.apply(e.matches ? 'dark' : 'light');
}
});
}
}
选择通过 localStorage 持久化，页面刷新不会丢失。
从色彩到粒子
两套色彩系统的差异不止于 CSS 变量。Canvas 粒子系统也根据当前主题自动切换：
- 浅色模式：糖果色粒子（粉、紫、橙、黄混合），轻快活泼
- 深色模式：星光粒子（白、暖白、橙色光谱三种）+ 绿色萤火虫 + 周期性流星
配色的一致性让整个体验从背景、卡片到粒子动画，都处在同一个审美体系中。
色彩是设计的第一语言。好的色彩系统让你说不出哪里好，但觉得一切都刚刚好。
评论