个人站点的视觉身份不应该只是“好看”。它应该有记忆点——让人在关闭页面之后，还能想起这个站点的样子。对于一个以中文内容为主的站点，中国古典诗词提供了一个自然的命名空间：不是装饰性的引用，而是从意境中提取色彩和氛围。
三套主题
站点目前有三套主题，分别以三位宋代词人命名：
李煜（li-yu）— 默认主题
李煜的词以“幽夜”和“月光”著称。“无言独上西楼，月如钩”——这种幽暗中带着微光的氛围，映射为站点的默认视觉：
- 背景：接近纯黑的深绿色（
#090b0a），像深夜的竹林。 - 文字：温暖的米白色（
#f0eee5），像月光洒在纸面上。 - 强调色：黄绿色（
#a9c63a），像夜色中隐约可见的萤火。 - 氛围：安静、专注、适合长时间阅读。
苏轼（su-shi）— 暖色主题
苏轼的词有“大江东去”的豪放，也有“明月几时有”的温暖。映射为暖色调的视觉：
- 背景：深棕色（
#120f0b），像旧书的纸页。 - 文字：暖黄色（
#f2e6cf），像烛光下的阅读。 - 强调色：琥珀色（
#d99d4b），像秋天的落叶。 - 氛围：温暖、怀旧、有生活气息。
王维（wang-wei）— 冷色主题
王维的诗以“空山新雨后”的清新著称。映射为冷色调的视觉：
- 背景：深青色（
#0b1410），像雨后的山林。 - 文字：淡绿色（
#e7eddb），像清晨的露水。 - 强调色：嫩绿色（
#a6c968），像春天的新芽。 - 氛围：清新、宁静、有空间感。
技术实现
主题系统使用 CSS Custom Properties 实现，不需要运行时 JavaScript：
:root,
[data-theme='li-yu'] {
--color-paper: #090b0a;
--color-ink: #f0eee5;
--color-accent: #a9c63a;
/* ... */
}
[data-theme='su-shi'] {
--color-paper: #120f0b;
--color-ink: #f2e6cf;
--color-accent: #d99d4b;
/* ... */
}
[data-theme='wang-wei'] {
--color-paper: #0b1410;
--color-ink: #e7eddb;
--color-accent: #a6c968;
/* ... */
}为什么用 CSS 变量而不是 JavaScript 切换
- 零运行时开销：浏览器原生支持 CSS 变量，不需要 JavaScript 计算。
- 无闪烁：主题在页面渲染前就确定（通过
data-theme属性），不会出现先显示默认主题再切换的情况。 - 可缓存：CSS 文件可以被浏览器缓存，切换主题不需要重新加载样式表。
- 可预览：在浏览器开发者工具中修改
data-theme属性即可预览效果。
oklch 色彩空间
站点同时定义了 hex 和 oklch 两种色彩值。oklch 是一种感知均匀的色彩空间，在现代浏览器中提供更一致的视觉效果：
@supports (color: oklch(0% 0 0)) {
:root,
[data-theme='li-yu'] {
--color-paper: oklch(0.15 0.008 130);
--color-ink: oklch(0.94 0.012 105);
--color-accent: oklch(0.75 0.145 116);
/* ... */
}
}系统偏好感知
站点通过 JavaScript 检测系统的亮色/暗色模式设置，并在页面加载前应用对应的主题。这避免了“先显示错误主题再切换”的闪烁问题。
命名的考量
主题命名不是随意的。三位词人的选择考虑了：
- 文化认同：作为中文站点，使用中国古典文化元素比使用西方设计术语更自然。
- 意境匹配：每位词人的作品意境与主题的视觉氛围有对应关系。
- 记忆点：“李煜主题”比“深绿色主题”更容易记住和讨论。
- 扩展性：如果未来需要新增主题，可以从更多词人或诗人中选择。
这不是“用诗词装饰技术”，而是“从诗词中提取设计语言”。
接下来
主题系统会随着站点的演进继续调整。可能的方向包括：
- 更多主题（如李白的“明月”、杜甫的“秋风”）。
- 用户自定义主题（允许访客调整色彩参数）。
- 高对比度模式（无障碍访问）。
- 根据时间自动切换（白天用暖色，夜晚用冷色）。
但核心原则不变：每套主题都应该有清晰的意境，而不只是不同的颜色组合。
评论