样式定制

主题提供了丰富的 CSS 变量，方便你自定义外观。

音乐球 CSS 变量

音乐球组件使用以下 CSS 变量，你可以在自己的样式中覆盖：

亮色模式

.fx-music-ball {
  /* 强调色（进度条、高亮），默认引用全局品牌色变量，启用 heroImageColor 后会动态跟随 */
  --fx-music-accent-start: rgb(var(--fx-beam-c1)); /* 渐变起始色 */
  --fx-music-accent-end: rgb(var(--fx-beam-c2)); /* 渐变结束色 */

  /* 球体背景 */
  --fx-music-bg: rgba(255, 255, 255, 0.45); /* 毛玻璃背景色 */
  --fx-music-bg-blur: 12px; /* 模糊程度 */

  /* 边框和阴影 */
  --fx-music-border: rgba(255, 255, 255, 0.3);
  --fx-music-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

  /* 文字颜色 */
  --fx-music-text: rgba(0, 0, 0, 0.65);
  --fx-music-text-muted: rgba(0, 0, 0, 0.4);

  /* 滑块 */
  --fx-music-slider-track: rgba(0, 0, 0, 0.08);
  --fx-music-slider-thumb: rgb(var(--fx-beam-c2));

  /* 音乐列表弹层 */
  --music-list-bgcolor: rgba(255, 255, 255, 0.5);
  --music-list-bdcolor: rgba(255, 255, 255, 0.3);
  --music-list-sep-color: rgba(0, 0, 0, 0.06);
}

暗色模式

.dark .fx-music-ball {
  --fx-music-bg: rgba(30, 30, 50, 0.55);
  --fx-music-bg-blur: 16px;
  --fx-music-border: rgba(255, 255, 255, 0.08);
  --fx-music-shadow:
    0 4px 20px rgba(0, 0, 0, 0.3), 0 0 12px rgba(var(--fx-beam-c1), 0.15);
  --fx-music-text: rgba(255, 255, 255, 0.7);
  --fx-music-text-muted: rgba(255, 255, 255, 0.4);
  --fx-music-slider-track: rgba(255, 255, 255, 0.1);
  --music-list-bgcolor: rgba(30, 30, 50, 0.6);
  --music-list-bdcolor: rgba(255, 255, 255, 0.06);
  --music-list-sep-color: rgba(255, 255, 255, 0.05);
}

全局样式变量

主题在 custom.css 中定义了以下全局变量：

:root {
  /* 标题装饰色 */
  --decoration-color-blue: #45abff; /* h1 下划线 */
  --decoration-color-yellow: #a29bdb; /* h2 下划线 */
  --decoration-color-green: #8eb78b; /* h3 下划线 */
  --decoration-color-red: #f3bad6; /* h4 下划线 */

  /* 光束边框颜色（RGB 分量），启用 heroImageColor 后会被动态覆盖 */
  --fx-beam-c1: 189, 52, 254;
  --fx-beam-c2: 65, 209, 255;

  /* Hero 区渐变 */
  --vp-home-hero-name-background: linear-gradient(120deg, #bd34fe, #41d1ff);

  /* 布局 */
  --vp-layout-max-width: 1450px;
}

覆盖方式

在你的 .vitepress/theme/index.ts 或自定义 CSS 文件中覆盖变量：

// .vitepress/theme/index.ts
import FxTheme from "@fuxishi/vitepress-theme"
import "@fuxishi/vitepress-theme/style.css"
import "./custom.css" // 你的自定义样式

export default FxTheme

/* .vitepress/theme/custom.css */

/* 将强调色改为绿色系（选择器必须用 .fx-music-ball，优先级高于 :root） */
.fx-music-ball {
  --fx-music-accent-start: #10b981;
  --fx-music-accent-end: #34d399;
  --fx-music-slider-thumb: #34d399;
}

.dark .fx-music-ball {
  --fx-music-bg: rgba(16, 32, 24, 0.55);
  --fx-music-shadow:
    0 4px 20px rgba(0, 0, 0, 0.3), 0 0 12px rgba(16, 185, 129, 0.15);
}

无障碍

所有动画效果都尊重 prefers-reduced-motion 系统设置。当用户开启了减弱动画偏好时，所有动画会被自动禁用。

如果你想完全禁用某个功能，在配置中关闭即可：

themeConfig: {
  confetti: false,              // 关闭彩纸
  musicBall: { enable: false }, // 关闭音乐球
  codeBlockFold: false,         // 关闭代码块折叠
}