主题
视觉效果总览
除了交互组件（音乐球、彩纸、光效），主题还内置了以下视觉增强效果。
代码块红绿灯
在代码块左上角添加 macOS 风格的红黄绿三色灯装饰。
- 红灯 (
::after)、黄灯 (code::before)、绿灯 (code::after) - 自动适配有行号和无行号两种布局
效果： 所有代码块顶部左侧出现三个小圆点，模拟 macOS 窗口控制按钮。
暗色模式彩虹边框
暗色模式下，代码块 hover 时展示旋转的彩虹边框。
- 使用
conic-gradient实现多色渐变 @property --anix注册自定义属性驱动旋转动画animation: rotatingx 2s linear infinite reverse匀速旋转- hover 时边框从透明渐变为彩虹色
标题彩色下划线
h1-h4 标题各有不同颜色的下划线装饰：
| 标题 | 亮色 | 暗色 |
|---|---|---|
| h1 | #45abff 蓝 | 自动变暗 |
| h2 | #a29bdb 紫 | 自动变暗 |
| h3 | #8eb78b 绿 | 自动变暗 |
| h4 | #f3bad6 粉 | 自动变暗 |
暗色模式使用 hsl(from ... h s calc(l * 0.5)) 自动计算较暗的变体。
样式属性：
- 线宽：
0.6em - 样式：
solid - 偏移：
-0.4em text-decoration-skip-ink: none
自定义滚动条
亮色和暗色模式下均使用自定义滚动条样式：
亮色：
- 轨道：
#f6f6f7，圆角 - 滑块：
#c1c1c1，圆角，2px 白色边框
暗色：
- 轨道：
#161618 - 滑块：
#2b2b2b
主题切换动画
使用 View Transition API 实现亮暗模式切换时的圆形扩散动画。
- 从切换按钮位置开始扩散
- 切换到暗色时：新内容（暗色）从按钮位置扩散覆盖
- 切换到亮色时：旧内容（暗色）从按钮位置收缩消失
实现方式：
- 通过
provide('toggle-appearance', ...)覆盖默认切换行为 - 使用
document.startViewTransition()API ::view-transition-old(root)和::view-transition-new(root)控制动画层级
Hero 渐变
首页标题使用紫蓝渐变：
css
--vp-home-hero-name-background: linear-gradient(120deg, #bd34fe, #41d1ff);Hero 图片背景使用 45° 双色背景：
css
--vp-home-hero-image-background-image: -webkit-linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);暗色模式下 Hero 图片有 blur 呼吸动画。