今天花了不少时间打磨博客的视觉细节。
别看只是改颜色这种小事，其实是在重新梳理整个设计语言。
说到这个
最开始只做了暗色模式。
后来发现，我自己白天读的时候也更喜欢浅色背景。
用户也是这样，不是非黑即白。
实现上用了几个关键点：
- 所有颜色都用 CSS 变量定义（比如
--bg-primary、--text-primary） - 通过
data-mode="light"/"dark"/"system"来切换 - 用户偏好存到 localStorage
- 系统主题变了也能自动跟着变
重点不是简单翻转颜色，而是重新设计了一套浅色配色。
深色模式用高对比度保证清晰，浅色模式反而要柔和些，减少眼睛疲劳。
过渡动画加进去后，切换特别顺滑。
第一个坑
字体大小是个容易被忽略的细节。
以前正文字号是 14–15px，在手机上看真的吃力。
现在统一提升到 17px，其他元素按比例放大，舒服多了。
字体选了三套：
- 标题：Playfair Display（衬线，有气质）
- 正文：Inter + Noto Sans SC（无衬线，看得清）
- 代码：JetBrains Mono（等宽，专业）
回到正题
博客面向全球读者，国际化必须做。
用了 React Context + next-intl 来管理翻译，支持 11 种语言：中文、英语、日语、韩语、阿拉伯语、德语、西班牙语、法语、印地语、葡萄牙语、俄语。
所有 UI 文本都通过 t() 函数处理，语言切换也自动保存在本地。
有个小挑战：像阿拉伯语这种从右往左写的语言，布局得单独适配，不然会乱。
配色优化
亮色模式下之前有些灰色文字太淡，看久了眼疼。
现在按 WCAG 2.1 标准来调——至少 4.5:1 的对比度才行。
主文字加深一点，次要文字保持柔和但能看清。
边框和分隔线降低存在感，别抢内容风头。
粒子效果的去留
首页一开始加了粒子背景，想营造点科技感和空间感。
结果实际体验下来：
- 动画占 CPU
- 手机上特别费电
- 分散注意力，影响阅读
最后决定删掉，换成纯色渐变背景。
简洁才是高级感。
设计的本质
这些改动背后，其实就一句话：
让内容成为主角。
任何装饰如果挡住了阅读，就得去掉或弱化。
尊重用户的眼睛。
字号够大、对比舒服、层次清晰，这才是对读者的基本礼貌。
一致性胜过创意。
整个网站颜色、字体、间距统一，比每个页面搞个“不一样”更重要。