样式定制

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

音乐球 CSS 变量

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

亮色模式

:root {
  /* 强调色（进度条、高亮） */
  --fx-music-accent-start: #bd34fe;  /* 渐变起始色 */
  --fx-music-accent-end: #41d1ff;    /* 渐变结束色 */

  /* 球体背景 */
  --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: #41d1ff;

  /* 音乐列表弹层 */
  --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-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(189, 52, 254, 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 下划线 */

  /* 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 */

/* 将强调色改为绿色系 */
:root {
  --fx-music-accent-start: #10b981;
  --fx-music-accent-end: #34d399;
  --fx-music-slider-thumb: #34d399;
}

.dark {
  --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 }, // 关闭音乐球
}