🎨 全局主题色选择器使用与配置指南

全局主题色选择器 是专为博客与站点定制的视觉调优工具。它摒弃了繁琐的系统原生调色盘，提供极简、顺滑的交互体验，帮助开发者快速确定并预览站点的主色调（themeColor）。

---

🚀 核心功能

• 色相顺滑调节 (Hue Slider)：拖动滑块即可快速在全光谱间无缝切换色相。
• 精选调色盘：内置 12 款高质感设计色彩（如 Quasar Blue、Emerald、Indigo、Amber 等），一键套用。
• 十六进制直接输入：支持手动精确输入 Hex 色值（如 #015EFB）。
• 纯净色值复制：点击复制按钮仅提取 Hex 颜色代码（例如 #F59E0B），无多余冗余字符。
• 实时 UI 舞台预览：
  • 导航标识微光点发光效果。
  • Solid / Ghost 按钮与 Pill 标签。
  • 文章卡片悬浮与描边微交互。
  • 阅读进度条与 Markdown 正文高亮。
• 明暗模式无缝切换：可随时在 Dark / Light 模式间切换预览效果。

---

📖 使用步骤

步骤 1：挑选主色彩

• 方法 A（滑动选取）：拖动「色相顺滑调节」滑块，实时观察右侧预览舞台的色彩变化。
• 方法 B（快捷预设）：点击「精选高质感调色盘」中的任意色块，快速应用预设品牌色。
• 方法 C（精确 Hex）：在「十六进制色值」输入框中直接输入 6 位 Hex 色值。

步骤 2：多场景效果预览

• 在右侧「UI PREVIEW STAGE」中，检查按钮、标签、卡片以及文章正文高亮部分的显示效果。
• 点击右上角 Dark / Light 切换标签，确保主题色在暗色与亮色背景下均具备良好的对比度与视觉美感。

步骤 3：导出并应用到项目

1. 点击 「复制色值 (#XXXXXX)」 按钮，色值会自动写入剪贴板。
2. 打开项目的 src/config.ts 文件，将色值替换到 themeColor 属性中：

// src/config.ts
export const SITE_CONFIG = {
  themeColor: '#015EFB', // 将复制的 Hex 色值粘贴于此
};