theme.config.js —— 视觉主题配置
本页列出 src/config/theme.config.js 中的全部配置项，说明配色、字体、卡片风格、粒子特效与动效参数的含义和默认值。
src/config/theme.config.js 是全站外观的唯一来源：配色、字体、卡片风格、粒子特效、动效参数全部集中于此。
文件结构如下，本文逐一说明每个配置项的用途：
theme.config.js
├── 顶部三个 accent 常量 ← 全站主题色，最常改
├── preset ← 卡片风格预设
├── colors.light / colors.dark ← 浅色 / 深色配色
├── home ← 首页专属配色（星空、粒子颜色）
├── effects ← 特效与动效（模糊、星空、粒子、动画、轮播、Toast）
│ ├── glassBlur
│ ├── starfield
│ ├── contentParticles
│ ├── footerParticles
│ ├── animations
│ ├── swiper
│ └── toast
├── fonts ← 字体
└── brand ← Tailwind 品牌色顶部三个 accent 常量 —— 全站主题色
文件开头的三个常量是强调色的统一来源：
const accentPurple = '#8a2be2'; // 主强调色：主按钮、链接、图标、Swiper 箭头
const accentPink = '#da70d6'; // 辅助强调色：渐变终点、悬停状态
const accentGold = '#ffd700'; // 高亮色：金色渐变文字、徽章提示
修改全站主题色，只需修改这三个常量。 以下内容均会自动生效：
- 按钮、链接、图标的颜色
- 渐变文字（标题、倒计时数字）
- 轮播图箭头
- Tailwind 品牌色
keqing-purple / keqing-pink / keqing-gold（它们在文件底部的brand里引用这三个常量） colors.light里的三个 accent 字段
保存文件后，开发服务器会自动重新生成 CSS 变量，无需手写任何 CSS。
preset —— 卡片风格预设
preset: 'liquid-glass',通过 preset 切换整站卡片（导航栏、倒计时卡片、内容卡片等）的视觉风格，可选预设如下表所示：
| 预设值 | 效果 | 适用场景 |
|---|---|---|
'liquid-glass' | 液态玻璃（默认）：高光、反射、边缘光感 | 追求精致感的活动页 |
'frosted-glass' | 简约毛玻璃：仅 backdrop-filter 模糊 + 边框 | 低调简洁 |
'opaque' | 不透明卡片：实色背景，无模糊 | 需要内容可读性优先 |
'minimal' | 极简扁平：无模糊、无阴影、无内发光 | 极简风 |
预设值在页面加载时写入 <html data-theme-preset="...">：基础液态玻璃样式在 src/styles/LiquidGlass.css，四种预设的覆盖规则在 src/index.css 末尾，切换预设不需要改任何组件代码。
colors —— 全站配色
配色分 light（浅色模式，写到 :root）和 dark（深色模式，写到 .dark）两套，字段名一一对应：
colors: {
light: { /* 浅色 */ },
dark: { /* 深色 */ },
},colors.light 浅色模式字段
下表列出浅色模式的全部字段及其默认值与用途：
| 字段 | 默认值 | 用来干什么 |
|---|---|---|
pageBg | #efe6f3 | 整个网站的大背景色 |
cardBg | rgba(255,255,255,0.55) | 玻璃卡片的底色（导航栏、倒计时卡片等） |
cardBgHover | rgba(255,255,255,0.72) | 鼠标移到卡片上时的底色 |
textPrimary | #1d1d1f | 标题、正文等主要文字颜色 |
textSecondary | #555560 | 说明文字、辅助信息颜色 |
accentPurple | 引用常量 | 主强调色：主按钮、链接、图标、Swiper 箭头 |
accentPink | 引用常量 | 辅助强调色：渐变终点、悬停状态 |
accentGold | 引用常量 | 金色渐变文字、徽章等高亮元素 |
borderColor | rgba(255,255,255,0.6) | 卡片内部边框 |
borderColorOuter | rgba(255,255,255,0.85) | 更明显的外边框 / 分割线 |
shadowColor | rgba(0,0,0,0.1) | 卡片、浮层阴影的底色 |
colors.dark 深色模式字段
下表列出深色模式的全部字段。字段名与浅色模式完全相同，默认值整体更深、强调色更亮：
| 字段 | 默认值 | 与浅色的差异 |
|---|---|---|
pageBg | #08081a | 深蓝黑背景 |
cardBg | rgba(55,55,95,0.65) | 深蓝紫半透明 |
cardBgHover | rgba(70,70,120,0.75) | 悬停更亮 |
textPrimary | #f0f0f5 | 近白 |
textSecondary | #c8c8d4 | 浅灰 |
accentPurple | #c58bff | 比浅色更亮，保证深色下对比度 |
accentPink | #f0a0f0 | 更亮 |
accentGold | #ffe847 | 更亮 |
borderColor | rgba(255,255,255,0.28) | 更明显的边框 |
borderColorOuter | rgba(255,255,255,0.4) | —— |
shadowColor | rgba(0,0,0,0.45) | 更深的阴影 |
字段名到 CSS 变量的映射
vite.config.js 的 injectThemeVariables 插件会把字段名转成 kebab-case 的 CSS 变量：
pageBg → --page-bg
cardBg → --card-bg
textPrimary → --text-primary
accentPurple → --accent-purpleJSX 中可直接使用 bg-[var(--page-bg)]、text-[var(--text-secondary)]；新增字段（如 bannerBg）保存后自动得到 --banner-bg，全站可用。
home —— 首页专属配色
home 配置首页 Hero 星空、内容区粒子、页脚粒子的颜色。配置值分两类消费方式：
- 标量（字符串 / 数字） → 生成 CSS 变量（
--home-hero-nebula1等） - 数组 → 组件直接
import { themeConfig }读取，不生成 CSS 变量
home.hero —— 首屏星空与按钮
下表列出 home.hero 的字段、默认值与用途：
| 字段 | 默认值 | 用来干什么 |
|---|---|---|
nebula1 | rgba(138,43,226,0.22) | Starfield 中第一团星云的颜色（默认紫色） |
nebula2 | rgba(218,112,214,0.20) | 第二团星云（默认粉色） |
nebula3 | rgba(75,0,130,0.18) | 第三团星云（默认深紫） |
starColor | rgba(255,255,255,0.9) | 星星的填充色 |
starGlow | rgba(255,255,255,0.6) | 星星周围的光晕颜色 |
background | radial-gradient(...) | 星空底层的渐变背景（从下到上的深紫夜色） |
primaryButtonBg | accentPurple | 「立即加入」主按钮背景色 |
primaryButtonHoverBg | #9333ea | 主按钮悬停背景色 |
primaryButtonText | #ffffff | 主按钮文字颜色 |
secondaryButtonText | accentPink | 「了解更多」次按钮文字颜色 |
secondaryButtonHoverText | #ffffff | 次按钮悬停文字颜色 |
secondaryButtonHoverBg | rgba(147,51,234,0.30) | 次按钮悬停背景（通常带透明度） |
提示
星云的颜色与大小、位置是两套配置：颜色在此修改，位置 / 大小 / 移动速度在 effects.starfield.nebula.items 修改。
home.contentParticles —— 内容区粒子颜色
下表列出 home.contentParticles 的字段与用途：
| 字段 | 类型 | 用来干什么 |
|---|---|---|
light | 数组 | 浅色模式下飘落花瓣的备选颜色（粒子随机从中取色） |
dark | 数组 | 深色模式下上升粒子的备选颜色（默认紫色调） |
mist | 数组 | 深色模式下背景雾气的颜色（带透明度） |
home.footerParticles —— 页脚粒子颜色
下表列出 home.footerParticles 的字段与用途：
| 字段 | 类型 | 用来干什么 |
|---|---|---|
colors | 数组 | 深色模式页脚上升粒子的备选颜色（默认金 + 粉） |
effects —— 特效与动效
effects 汇集全部特效的开关与参数。每个可开关的特效都有 status: 'enable' | 'disable'。
effects.glassBlur —— 毛玻璃模糊半径
下表列出 glassBlur 的字段与默认值：
| 字段 | 默认值 | 用来干什么 |
|---|---|---|
light | '12px' | 浅色模式下导航栏、卡片的 backdrop-filter 模糊半径 |
dark | '18px' | 深色模式下的模糊半径（通常更大，玻璃感更强） |
effects.starfield —— 首屏星空
Hero 背景的 Canvas 星空（Starfield.jsx）。各字段含义如下表所示：
| 字段 | 类型 | 默认值 | 用来干什么 |
|---|---|---|---|
status | 字符串 | 'enable' | 星空总开关。'disable' 后只显示渐变背景 |
starCount | 对象 | { desktop: 45, mobile: 28 } | 星星数量：桌面端 / 移动端分别配置 |
starSize | 对象 | { min: 0.8, max: 3.0 } | 星星大小范围（像素） |
twinkle | 对象 | 见下 | 星星闪烁动画 |
drift | 对象 | 见下 | 星星缓慢漂移动画 |
nebula | 对象 | 见下 | 三团星云 |
下表列出 twinkle 闪烁参数：
| 字段 | 默认值 | 用来干什么 |
|---|---|---|
durationMin | 1.5 | 单次闪烁周期的下限（秒） |
durationMax | 3.5 | 单次闪烁周期的上限（秒） |
delayMax | 4 | 闪烁最大延迟（秒），让星星错峰闪烁 |
下表列出 drift 漂移参数：
| 字段 | 默认值 | 用来干什么 |
|---|---|---|
durationMin | 20 | 单次漂移周期的下限（秒） |
durationMax | 45 | 单次漂移周期的上限（秒） |
distanceX | -60 | 漂移终点相对起点的水平位移（像素） |
distanceY | -120 | 垂直位移（像素） |
下表列出 nebula 星云参数：
| 字段 | 默认值 | 用来干什么 |
|---|---|---|
blur | '45px' | 星云的模糊半径（越大越柔和） |
opacity | 0.7 | 星云不透明度 |
items | 数组 | 三团星云各自的位置与运动，见下 |
nebula.items 数组每一项的含义如下表所示：
| 字段 | 示例 | 用来干什么 |
|---|---|---|
top | '5%' | 星云中心距顶部的距离 |
left | '15%' | 星云中心距左侧的距离 |
size | '55vw' | 星云直径（vw = 视口宽度的百分比） |
duration | 12 | 漂移动画周期（秒） |
默认三团星云错开分布；增删星云只需增删数组项，颜色在 home.hero.nebula1~3 配置。
effects.contentParticles —— 内容区粒子
首页首屏以下所有板块的背景层（ContentParticles.jsx）。
浅色模式绘制飘落花瓣（带摇摆、旋转、拖尾），深色模式绘制上升粒子 + 雾气 + 闪电。
各字段含义如下表所示：
| 字段 | 类型 | 默认值 | 用来干什么 |
|---|---|---|---|
status | 字符串 | 'enable' | 内容区粒子总开关 |
particleCount | 对象 | { desktop: 45, mobile: 25 } | 粒子数量（花瓣或深色粒子通用） |
mistCount | 对象 | { desktop: 7, mobile: 3 } | 雾气团数量（仅深色模式） |
enableTrail | 布尔 | true | 花瓣拖尾开关（仅桌面端生效） |
enableLightning | 布尔 | true | 闪电开关（仅桌面端生效） |
maxDprMobile | 数字 | 1.5 | 移动端最大设备像素比，限制 Canvas 分辨率保证流畅 |
petal | 对象 | 见下 | 浅色模式花瓣参数 |
darkDot | 对象 | 见下 | 深色模式上升粒子参数 |
mist | 对象 | 见下 | 雾气参数 |
lightning | 对象 | 见下 | 闪电参数 |
下表列出 petal 花瓣参数：
| 字段 | 默认值 | 用来干什么 |
|---|---|---|
sizeMin / sizeMax | 6 / 10 | 花瓣大小范围（像素） |
speedYMin / speedYMax | 0.5 / 1.4 | 下落速度范围（像素/帧） |
speedXSpread | 0.7 | 水平速度随机范围（±该值） |
rotationSpeedSpread | 0.025 | 旋转速度随机范围 |
opacityMin / opacityMax | 0.75 / 0.95 | 不透明度范围 |
swayFrequencyMin / swayFrequencyMax | 0.004 / 0.012 | 左右摇摆频率范围（越大摆得越快） |
trailLengthMin / trailLengthMax | 10 / 16 | 拖尾长度范围 |
下表列出 darkDot 深色粒子参数：
| 字段 | 默认值 | 用来干什么 |
|---|---|---|
sizeMin / sizeMax | 2.5 / 4.5 | 粒子大小范围 |
speedYMin / speedYMax | 0.2 / 0.7 | 上升速度范围 |
speedXSpread | 0.35 | 水平速度随机范围 |
opacityMin / opacityMax | 0.35 / 0.65 | 不透明度范围 |
下表列出 mist 雾气参数：
| 字段 | 默认值 | 用来干什么 |
|---|---|---|
sizeMin / sizeMax | 260 / 560 | 雾气团尺寸范围（像素） |
speedXSpread | 0.28 | 水平漂移速度随机范围 |
speedYSpread | 0.2 | 垂直漂移速度随机范围 |
下表列出 lightning 闪电参数（递归分形算法）：
| 字段 | 默认值 | 用来干什么 |
|---|---|---|
initialTimerMin / initialTimerMax | 120 / 360 | 页面加载后首次出现闪电前的等待帧数 |
recurrenceTimerMin / recurrenceTimerMax | 240 / 600 | 两次闪电之间的等待帧数 |
mainDisplacement | 160 | 主干每次递归的随机偏移幅度（越大越曲折） |
mainDepth | 7 | 主干递归深度（越大分叉越细） |
branchCountMin / branchCountMax | 2 / 3 | 分支数量范围 |
branchDisplacement | 90 | 分支偏移幅度 |
branchDepth | 5 | 分支递归深度 |
maxAgeMin / maxAgeMax | 10 / 18 | 一道闪电的存续帧数 |
提示
闪电与拖尾是其中最耗性能的两项，均已限制为桌面端生效。低端设备优先关闭 enableLightning，再调低 particleCount。
effects.footerParticles —— 页脚粒子
仅深色模式显示（FooterParticles.jsx）：小粒子从页脚底部缓缓升起。
| 字段 | 类型 | 默认值 | 用来干什么 |
|---|---|---|---|
status | 字符串 | 'enable' | 总开关 |
particleCount | 对象 | { desktop: 28, mobile: 16 } | 粒子数量 |
maxDpr | 数字 | 2 | 最大设备像素比 |
sizeMin / sizeMax | 0.5 / 2.5 | 粒子大小范围（像素） | |
speedYMin / speedYMax | 0.2 / 1.0 | 上升速度范围（像素/帧） | |
speedXSpread | 0.4 | 水平速度随机范围 | |
opacityMin / opacityMax | 0.2 / 0.7 | 不透明度范围 | |
lifeMin / lifeMax | 100 / 200 | 粒子生命周期（帧），到点淡出重生 |
effects.animations —— CSS 微交互动画
每个动画可独立开关，关闭后 ThemeContext 会在 <html> 上加 data-disable-* 属性，CSS 检测到就跳过该动画。
| 字段 | 默认值 | 用来干什么 |
|---|---|---|
pageEnter.status | 'enable' | 页面进入时整体淡入上移 |
pageEnter.duration | '0.5s' | 进入动画时长 |
pageEnter.distance | '24px' | 进入动画的上移距离 |
pageEnter.easing | 'ease-out' | 缓动曲线 |
buttonGlow.status | 'enable' | 按钮悬停发光 + 上浮 |
buttonGlow.lift | '-3px' | 悬停上浮距离 |
buttonGlow.activeLift | '-1px' | 按下时回弹距离 |
buttonGlow.shadowSpread | '28px' | 发光阴影扩散距离 |
buttonGlow.shadowBlur | '12px' | 发光层模糊半径 |
cardHover.status | 'enable' | 玻璃卡片悬停上浮 |
cardHover.lift | '-6px' | 上浮距离 |
iconHover.status | 'enable' | 图标悬停缩放 + 旋转 |
iconHover.scale | 1.12 | 放大倍数 |
iconHover.rotate | '-4deg' | 旋转角度 |
linkGlow.status | 'enable' | 链接下方紫色光带从左滑入 |
musicVisualizer.status | 'enable' | 播放器图标区的律动可视化条 |
musicVisualizer.duration | '0.8s' | 律动条动画周期 |
musicVisualizer.barMinHeight | '20%' | 律动条最小高度 |
musicVisualizer.barMaxHeight | '100%' | 律动条最大高度 |
effects.swiper —— 轮播图
| 字段 | 默认值 | 用来干什么 |
|---|---|---|
autoplayDelay | 5000 | 贺图轮播的自动播放间隔（毫秒） |
effects.toast —— 轻提示
| 字段 | 默认值 | 用来干什么 |
|---|---|---|
duration | 2500 | Toast 显示时长（毫秒），如「群号已复制」 |
exitDuration | 350 | Toast 退出动画时长（毫秒） |
fonts —— 字体
fonts: {
title: ['"LXGW Neo ZhiSong"', '"Noto Serif SC"', 'serif'],
body: ['"LXGW WenKai Lite"', '"Noto Serif SC"', 'serif'],
},下表列出字体配置项与用途：
| 字段 | 默认 | 用在哪 |
|---|---|---|
title | 霞鹜新致宋 → 思源宋体 → serif | 页面大标题、页脚品牌名、导航栏站名（Tailwind 类 font-title / CSS 变量 --font-title） |
body | 霞鹜文楷 Lite → 思源宋体 → serif | 正文、说明文字（font-body / --font-body） |
使用规则如下：
- 数组按优先级排列，前面的字体不存在时依次回退
- 字体名带空格时必须加引号（如
'"LXGW Neo ZhiSong"'） - 字体文件通过 npm 包（
@chinese-fonts/lxgw-neo-zhi-song、lxgw-wenkai-lite-webfont）引入，构建插件会自动注入font-display: swap防阻塞
brand —— Tailwind 品牌色
brand: {
purple: accentPurple, // → keqing-purple
pink: accentPink, // → keqing-pink
gold: accentGold, // → keqing-gold
dark: '#0a0a1a', // → keqing-dark
darkLight: '#1a0a2e', // → keqing-dark-light
},供 Tailwind 类使用：bg-keqing-purple、text-keqing-gold、border-keqing-pink 等。前三个颜色引用顶部 accent 常量，修改 accent 常量后此处自动跟随；后两个是深色背景色，通常无需修改。
修改后的生效方式
保存文件即可。vite.config.js 的 injectThemeVariables 插件会重新读取 theme.config.js：
- 把
colors.light/dark中的标量拍平为:root/.dark下的 CSS 变量 - 把
home、effects中的标量拍平为--home-*、--effects-*变量 - 生成
--font-title/--font-body - 注入到
src/index.css的@tailwind之前
开发模式下 Vite 自动重编译；生产模式在下次 npm run build 时生效。