界面皮肤
界面皮肤
皮肤决定界面的形状和质感：圆角有多大、按钮长什么样、卡片靠投影还是描边、页面底下铺不铺底纹。颜色不归皮肤管，颜色永远来自配色方案。所以任何皮肤都能配任何一套配色，暗色模式也照常生效。
切换皮肤
皮肤是站长在配置里选定的，访客不能切换。打开 src/data/config/identity.ts，改 skin 这一项：
export const siteInfo = { title: 'Vergil', locale: 'zh-CN', skin: 'island', // ...};填了不认识的值会退回 default，站点不会因此报错。
内置皮肤
| 值 | 样子 |
|---|---|
default | 主题原本的样子：小圆角、轻投影、贴边的毛玻璃顶栏 |
island | 治愈系海岛风：大圆角和胶囊按钮，页面铺一层波点底，顶栏变成悬浮的胶囊。列表页标题是燕尾飘带，选项卡和分页换成实心胶囊，标签变成浅色小签，代码块统一用暖深棕底，搜索弹窗的边缘带一点手工感的起伏。只有主按钮底下压一道实色台阶，按下去会陷进去，其余按钮和卡片都只用很轻的投影或描边 |
island 的默认配色是 L 暖奶油，这是专门为它调的一套；默认皮肤的默认配色是 C。访客自己切过配色后以他的选择为准。海岛配别的配色也成立，比如配 C 暖墨就是暖白底加橙色胶囊和橙色飘带。
皮肤不管字体，字体仍然由字体配置决定。想更接近原型，可以把西文字体换成 Nunito 这类圆体。
写一套新皮肤
皮肤放在 src/styles/skins/ 下，所有规则都挂在 html[data-skin="你的皮肤名"] 下面，这样默认皮肤完全不受影响。样式多的话可以像 island/ 那样建一个文件夹，按区域拆成几份，再用 index.css 汇总。写完以后做两件事：在 src/styles/global.css 末尾 @import 它，再把名字加进 src/utils/skin.ts 的 skins 列表，并在同一个文件的 defaultSchemes 里给它指定一套默认配色。
皮肤能动的东西分三层。
第一层是 设计 token。在皮肤的根选择器里重新定义 --radius-*、--shadow-*、--ease-out，全站所有 rounded-lg、shadow-md 这类工具类都会跟着变，这一层改动面最大、成本最低。
第二层是组件上的 ui-* 挂钩类。它们本身没有样式，只是给皮肤一个稳定的抓手：
| 挂钩 | 在哪 |
|---|---|
ui-topbar | 顶部导航栏的外壳，里面的 <nav> 是内容条 |
ui-btn | Button 组件渲染出来的按钮或链接 |
ui-label | 侧栏各小组件的小标题（最近更新、热力图、标签等） |
ui-btn-primary | 主按钮，比如开屏页和文档封面上的「开始使用」 |
ui-title | 列表页的页面标题（文章、项目、文档、专栏、工具） |
ui-tag / ui-tag-sep | 文章卡片和文章末尾的标签、分类链接，以及标签之间的逗号 |
ui-pagination / ui-icon-btn | 分页条和它两侧的翻页圆钮 |
ui-fab | 右下角的悬浮圆钮（回到顶部、目录） |
ui-modal / ui-input | 搜索弹窗和里面的输入框 |
ui-tooltip | 热力图的提示浮层 |
card-interactive | 可点击的卡片，比如文章列表里的每一篇 |
第三层是内容指令。指令的类名（.md-tabs-nav、.md-directive-folding 这些）本身就是公开的，皮肤可以直接匹配。大部分指令的圆角和描边读的是 --md-radius、--md-radius-sm、--md-radius-lg、--md-border 这组变量，在皮肤根选择器里改掉它们就能一次统一。
配色也可以反过来给皮肤递信息。海岛皮肤会读两个可选的配色变量：--bg-panel 有值时，它把正文栏放进一块这个颜色的圆角面板，两条侧栏仍然直接放在页面底色上；--bg-dot 指定波点底纹的颜色。配色 L 两个都提供了：正文面板比页面底色浅一档，让阅读区从暖奶油底上浮起来。其他配色不提供，海岛皮肤下就没有面板。
皮肤只匹配 token、挂钩类和指令类名，不要去匹配组件内部的 Tailwind 类名，那些类名随时可能因为重构而变。颜色一律从 --text-main、--bg-card、--accent-color 这些配色变量里取，需要派生色就用 color-mix() 混出来，别写死色值，否则换一套配色就对不上了。确实需要固定颜色的地方要写清楚理由，比如海岛皮肤的代码块固定用暖深棕底，因为 Shiki 的配色只分亮暗两套，没法跟着配色变。