Customization

The theme provides a rich set of CSS variables for you to customize the appearance.

Music Ball CSS Variables

The music ball component uses the following CSS variables, which you can override in your own styles:

Light Mode

.fx-music-ball {
  /* Accent colors (progress bar, highlight), references global brand color variables by default, follows heroImageColor dynamically when enabled */
  --fx-music-accent-start: rgb(var(--fx-beam-c1)); /* Gradient start color */
  --fx-music-accent-end: rgb(var(--fx-beam-c2)); /* Gradient end color */

  /* Ball background */
  --fx-music-bg: rgba(255, 255, 255, 0.45); /* Frosted glass background */
  --fx-music-bg-blur: 12px; /* Blur amount */

  /* Border and shadow */
  --fx-music-border: rgba(255, 255, 255, 0.3);
  --fx-music-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

  /* Text colors */
  --fx-music-text: rgba(0, 0, 0, 0.65);
  --fx-music-text-muted: rgba(0, 0, 0, 0.4);

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

  /* Music list popup */
  --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 Mode

.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);
}

Global Style Variables

The theme defines the following global variables in custom.css:

:root {
  /* Heading decoration colors */
  --decoration-color-blue: #45abff; /* h1 underline */
  --decoration-color-yellow: #a29bdb; /* h2 underline */
  --decoration-color-green: #8eb78b; /* h3 underline */
  --decoration-color-red: #f3bad6; /* h4 underline */

  /* Beam border colors (RGB components), dynamically overridden when heroImageColor is enabled */
  --fx-beam-c1: 189, 52, 254;
  --fx-beam-c2: 65, 209, 255;

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

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

How to Override

Override variables in your .vitepress/theme/index.ts or a custom CSS file:

// .vitepress/theme/index.ts
import FxTheme from "@fuxishi/vitepress-theme"
import "@fuxishi/vitepress-theme/style.css"
import "./custom.css" // Your custom styles

export default FxTheme

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

/* Change accent colors to green (selector must be .fx-music-ball for higher specificity than :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);
}

Accessibility

All animation effects respect the prefers-reduced-motion system setting. When the user enables the reduced motion preference, all animations are automatically disabled.

If you want to completely disable a feature, simply turn it off in the configuration:

themeConfig: {
  confetti: false,              // Disable confetti
  musicBall: { enable: false }, // Disable music ball
  codeBlockFold: false,         // Disable code block fold
}