[示例] 为什么我把网站做成黑白的

这是一篇占位文章，用来验证博客系统的排版、代码高亮和目录。你写好真文章之后把它删掉就行。

第一版的配色我改了整整两天。蓝色太冷，橙色太吵，加了渐变之后每一屏都在抢注意力。第三天早上我把所有颜色删掉了，页面忽然安静下来——原来吵的不是颜色，是我没想清楚层级。

留白不是空白

黑白设计里，能用的手段只剩三样：间距、字重、灰阶。听起来少，其实够用：

• 间距负责分组，读者靠距离判断"哪些是一块儿的"；
• 字重负责主次，46px 的细衬线和 16px 的正文之间那点反差，比任何颜色都醒目；
• 灰阶负责远近，#111 是标题，#333 是正文，#999 是日期——三层就够，第四层开始就没人分得清了。

一个具体的例子

列表项的日期用什么颜色？彩色方案里我试过给它一个品牌色的浅色版本，结果它比标题还跳。黑白方案里没得选，只能压到 #999，反而对了：日期本来就是次要信息。

代码也一样

代码块通常是彩色最放肆的地方。这个站上的高亮主题是手写的灰阶：关键字加粗、字符串压深、注释调淡，颜色一概不用。

// 灰阶代码主题：靠深浅 + 粗细区分 token，不靠颜色
const MONO_THEME = {
  name: "bw",
  settings: [
    { scope: ["comment"], settings: { foreground: "#A3A3A3", fontStyle: "italic" } },
    { scope: ["keyword"], settings: { foreground: "#111111", fontStyle: "bold" } },
    { scope: ["string"], settings: { foreground: "#5C5C5C" } },
  ],
};

读了两周，我没有一次想回去看彩色版本。

推倒重做值不值

值。第一版做了十天，第二版三天就搭完了，因为决定变少了：不用挑色，不用调饱和度，不用担心深色模式下某个绿色发脏。剩下的时间全花在排版上，而排版才是真正影响阅读的东西。

如果你也想试试：先把颜色全删掉，看页面会不会崩。会崩，说明结构本来就没立住。