思考啊 · 文章摘要 2026-05-12 21:38:57

明暗主题与国际化：博客视觉系统的迭代

快速浏览文章核心观点与关键要点

文章摘要键盘导航 slate-elegant

轻读

01 今天花了不少时间打磨博客的视觉… 今天花了不少时间打磨博客的视觉细节
02 最开始只做了暗色模式 我自己白天读的时候也更喜欢浅色背景
03 实现上用了几个关键点 - 所有颜色都用 CSS 变量定义（比如 `--bg-primar…

际化语言比如通过去后

概览

📝 1113 字⏱️ 4 分钟

文章要点

✦

今天花了不少时间打磨博客的视觉…

今天花了不少时间打磨博客的视觉细节

语言色这种小事

◆

最开始只做了暗色模式

我自己白天读的时候也更喜欢浅色背景

暗色模式后来发现

●

实现上用了几个关键点

- 所有颜色都用 CSS 变量定义（比如 `--bg-primar…

比如通过

数据文章统计概览

文章数据

📝

1,113

字数

⏱️

4分钟

阅读

🎞️

11

页数

🎯

3

观点页

📑

6

章节

🔑

际化

关键词

目录共 6 个章节

内容结构

01说到这个→

02第一个坑→

03回到正题→

04配色优化→

05粒子效果的去留→

06设计的本质→

章节要点

说到这个

1今天花了不少时间打磨博客的视觉…今天花了不少时间打磨博客的视觉细节
2最开始只做了暗色模式我自己白天读的时候也更喜欢浅色背景

02

第一个坑

第 2 个章节

章节要点

第一个坑

“1实现上用了几个关键点- 所有颜色都用 CSS 变量定义（比如 `--bg-primar…比如通过CSS

03

回到正题

第 3 个章节

章节要点

回到正题

1重点不是简单翻转颜色而是重新设计了一套浅色配色
2字体大小是个容易被忽略的细节以前正文字号是 14–15px

总结核心收获

关键要点

01

说到这个

今天花了不少时间打磨博客的视觉细节。别看只是改颜色这种小事，其实是在重新梳理整个设计语言。

02

第一个坑

最开始只做了暗色模式。后来发现，我自己白天读的时候也更喜欢浅色背景。用户也是这样，不是非黑即白。

03

回到正题

实现上用了几个关键点： - 所有颜色都用 CSS 变量定义（比如 `--bg-primary`、`--text-primary`） - 通过 `data-mo…

04

配色优化

重点不是简单翻转颜色，而是重新设计了一套浅色配色。深色模式用高对比度保证清晰，浅色模式反而要柔和些，减少眼睛疲劳。过渡动画加进去后，切换特别顺滑。

“

今天花了不少时间打磨博客的视觉细节

SIKAOA 4 min read

返回原文 ↗

上一篇从 Markdown 到 MP4：jianfe… 下一篇从 WordPress 到 Next.js：博…