Sonder 的颜色系统围绕纸面底色、墨色文字和低饱和强调色展开。整站只维护一套 CSS 变量，页面组件从变量取值，所以切换色盘或深浅色时不需要逐个页面调整。
内置色盘
| ID | 名称 | 倾向 |
|---|---|---|
green-soft | 苔绿 | 灰绿、安静 |
green-vivid | 叶绿 | 更清晰的植物绿 |
rose-soft | 玫瑰 | 偏灰的暖红 |
pink-soft | 樱粉 | 柔和粉紫 |
purple-soft | 紫藤 | 低饱和紫 |
blue-soft | 墨蓝 | 冷静的蓝色 |
orange-soft | 暖橙 | Sonder 默认色 |
brown-soft | 棕褐 | 旧书与木头 |
在 site.config.toml 中选默认色盘：
[config.theme]palette = "orange-soft"lang = "zh-CN"navStyle = "pill"navStyle 可以在 pill 胶囊导航与 bar 通栏工具条之间切换。两种模式顶部导航的主题色按钮都会列出全部内置色盘。色盘选择结果写入浏览器本地存储，刷新后保留。
深色模式
深色模式沿用同一套色盘变量，只替换纸面、墨色和阴影。文章卡片的底部信息条会根据封面主色生成深色玻璃效果：封面缩略图作为模糊背景，叠一层深色透明层，文字切换为浅色纸墨；卡片外框使用压暗后的封面同色系描边，而不是统一黑边。
浅色模式下，信息条根据封面亮度自动选择深色或浅色文字；深色模式下统一使用浅色文字，并保留封面色彩纹理。
调整色盘
色盘的 CSS 变量在主题样式 src/components/theme/styles/palettes.css 中定义。新增或修改色盘时，建议同时检查：
- 页面底色与卡片表面的对比
- 正文、元信息和发丝线的可读性
- 深色模式下封面信息条与外框的协调程度
- 顶部导航、按钮和焦点状态的强调色
如果只想改默认氛围，优先在 site.config.toml 里切换内置色盘；需要自定义品牌色时，再修改 CSS 变量。