Vergil 主题文档

配色方案

配色方案

Vergil 内置 11 套配色方案,每套都有独特的视觉氛围。配色与暗色模式独立工作——先选配色,再决定是否开启暗色模式。

11 套配色方案

代号名称主色调氛围适用场景
AWarm Parchment暖羊皮纸古典、温润文学、散文、手账
BSlate Blue石板蓝沉稳、理性技术文档、笔记
CWarm Ink暖墨素雅、克制通用博客(默认)
DCreamy Rose奶油玫瑰柔和、浪漫生活、摄影、设计
EButter Amber黄油琥珀温暖、复古旅行、美食、怀旧
FSage Mint鼠尾草薄荷清新、自然户外、植物、健康
GIris Violet鸢尾紫优雅、神秘艺术、音乐、创意
HMidnight Navy午夜海军蓝深邃、专业编程、商业、科技
ICarbon Black碳黑极简、高级摄影、设计、极简主义
JMoss Forest苔藓森林沉稳、自然生态、徒步、阅读
KSandstone砂岩质朴、大地建筑、人文、纪实

如何切换

  1. 点击网站右上角的主题切换图标
  2. 在弹出的面板中选择配色方案(A-K)
  3. 配色会立即生效,选择自动保存到本地

暗色模式有独立的开关,与配色方案互不干扰。你可以任意组合:

  • Warm Parchment + 亮色模式 → 温暖的日间阅读
  • Midnight Navy + 暗色模式 → 深夜代码写作
  • Iris Violet + 暗色模式 → 优雅的夜间浏览

暗色模式

暗色模式不是简单的颜色反转,而是为每套配色单独校准的暗色变量。切换时:

  • 背景色加深,但保持配色的色相倾向
  • 文字对比度自动调整,确保可读性
  • 强调色略微提亮,在暗背景下依然醒目

自定义配色(高级)

如果你想添加第 12 套配色,需要修改源码:

  1. 打开 src/styles/base/theme.css
  2. 新增 html[data-theme="L"] 变量块
  3. 定义 --text-main--bg-main--accent-color 等语义变量
  4. 暗色模式会自动生效(通过 CSS 反转机制)
Tip

如果不确定选哪套,建议先用默认的 C Warm Ink,它经过最多场景测试,兼容性最好。