KnowWhy 换装上线:6 套配色主题与亮暗显示模式
顶部导航新增调色盘入口:显示模式支持跟随系统 / 亮色 / 暗色(默认跟随系统),配色主题新增 5 套来自 getdesign.md 的设计分析色板——Claude 暖调、Notion 蓝调、Vercel 极简、NVIDIA 绿、Supabase 翠绿。
从今天起,KnowWhy 的文章可以用你喜欢的颜色来读了。
顶部导航右侧新增了一个调色盘图标——点开它,你会看到两组选项:**「显示模式」决定页面的亮与暗,「配色主题」**决定页面的气质。两个维度互相独立、自由组合:6 套主题 × 3 种模式,一共 18 种样子。
亮与暗:跟随系统,也可以自己说了算
「显示模式」提供三个选项:
- 跟随系统(默认):跟随你设备的深浅色设置——白天页面是亮的,夜晚系统切换到暗色,页面也会实时跟着变暗,不需要刷新;
- 亮色:始终明亮;
- 暗色:始终深色,夜里阅读更护眼。
你的选择会被记住。下次打开站点,页面会在第一帧渲染之前就恢复上次的偏好,不会出现「先闪一下白屏、再变黑」的尴尬。
值得一提的是,暗色模式不是简单地把颜色反过来。页面上近 30 个颜色令牌(正文、次要文字、卡片面、分割线、玻璃导航、页脚深色面……)在暗色下全部重新取值,并逐一按 WCAG AA 标准校核对比度——「看不清」比「不好看」严重得多,这是我们不愿妥协的一条线。
6 套配色主题:颜色从哪来
原有默认主题(深靛蓝 #1e293b + 琥珀黄 #f59e0b)保持不变。新增的 5 套主题,色板全部来自 getdesign.md——一个收录各大产品设计语言分析文档的网站。这些 Design Analysis 文档(即仓库里的 design/DESIGN-*.md)在我们的用法里只负责一件事:提供颜色。布局与字体一概不动。
| 主题 | 强调色 | 画布 / 深色面 | 气质 |
|---|---|---|---|
| 默认 | 琥珀黄 #f59e0b | 白 #ffffff / 深靛蓝 #0f172a | 站点原装 |
| Claude 暖调 | 珊瑚 #cc785c | 奶油 #faf9f5 / 暖黑 #181715 | 温润、人文 |
| Notion 蓝调 | 蓝 #0075de | 暖纸 #f6f5f4 / 近黑 #000000 | 纸感、安静 |
| Vercel 极简 | 链接蓝 #0070f3 | 近白 #fafafa / 纯黑 #000000 | 克制、工程感 |
| NVIDIA 绿 | 绿 #76b900 | 纸白 #ffffff / 纯黑 #000000 | 锐利、结构化 |
| Supabase 翠绿 | 翡翠绿 #3ecf8e | 纯白 #ffffff / 墨色 #171717 | 清爽、技术感 |
每套主题只取一两个强调色,其余交给灰阶——这也是几份设计分析文档共同的结论:克制的颜色,读起来更久。落到 KnowWhy 上,每套主题还各自翻译了自己的「Know 内容线」颜色:
- Claude 暖调:奶油画布配珊瑚色按钮,Know 线用暖青 #5db8a6;
- Notion 蓝调:暖纸底 + 纯白卡片,单一蓝色 #0075de 只负责重点,Know 线是贴纸感的暖青 #2a9d99;
- Vercel 极简:近白画布上只有 Geist 近黑与链接蓝 #0070f3,Know 线是一抹渐变青 #00dfd8;
- NVIDIA 绿:纸白与纯黑的双面结构,NVIDIA 绿 #76b900 承担所有按钮,hairline #cccccc 负责分层,卡片零投影;
- Supabase 翠绿:翡翠绿 #3ecf8e 是页面上唯一的「色彩事件」,Know 线换成次级紫罗兰 #644fc1。
怎么切换
- 打开顶部导航右侧的调色盘图标;
- 想定亮度,选「显示模式」;想换气质,选「配色主题」;
- 手机浏览器地址栏的配色也会跟着一起变化,与页面保持同色。
颜色背后的原则
翻完这几份设计分析文档,会发现一条反复出现的共识:颜色是配角。界面结构靠留白、字重与层级撑起来,颜色只在需要「指路」的地方出现。这次换装严格照此执行:
- 每套主题的强调色不超过两个;
- 任意「主题 × 模式」组合下,正文与背景的对比度都不低于 4.5:1;
- 分类标识色与代码高亮不随主题联动,保持稳定。
最后
有意思的是,这些设计文档本身就是一份份「知其所以然」的示范:它们不只列出颜色值,还解释每个颜色为什么出现在那里——为什么多数 AI 品牌用冷蓝,而 Claude 选了奶油与珊瑚;为什么 Vercel 敢让整页只剩黑白,只留一缕渐变。颜色不是随手挑的,它是产品性格的一部分。
这也是我们愿意把「换装」当作一次正经更新的原因:知其然,也知其配色之所以然。
愿每一次追问,都让你更靠近世界的真相。