返回博客
2024/10/02更新 2026/06/171 min
主题变量:不要只换颜色
把主题拆成颜色、字体、边框、阴影、动效和组件气质,而不是简单切换 light/dark。

主题不只是 palette
如果主题切换只修改背景和文字颜色,很快就会显得像演示,而不是完整体验。Setobox 的主题需要切换这些层级:
- 色彩变量
- 字体族
- 圆角
- 阴影
- 加载动画
- 文章卡片
- 按钮和标签
为什么用 UnoCSS
UnoCSS 适合把设计 token 和 utility 写在一起。这里用 CSS variables 控制主题值,再用 UnoCSS shortcuts 把常用组件样式固定下来。
这让主题既能被全局切换,也能在局部组件里做更明显的风格差异。
三套首发主题
light-clean 用来保证阅读性,dark-clean 用来体现终端和日志感,dark-pixel 则负责更强烈的风格化展示。
三者共享内容结构,但组件呈现和加载方式不同。