Getting Started

Version Compatibility

Versions 1.0.9 and earlier are only compatible with VitePress 1.6.4. If you are using VitePress 2.x, please wait for a future theme version that supports it.

Version Warning

Version 1.0.10 has issues with code block folding/unfolding and is deprecated. Please upgrade to 1.0.11 or later.

Installation

Install the theme package in your VitePress project:

npm

npm install @fuxishi/vitepress-theme

pnpm

pnpm add @fuxishi/vitepress-theme

yarn

yarn add @fuxishi/vitepress-theme

Also install the following peerDependencies:

npm install vitepress

Configure Theme

1. Register Theme

Create or modify .vitepress/theme/index.ts:

import FxTheme from "@fuxishi/vitepress-theme"
import "@fuxishi/vitepress-theme/style.css"

export default FxTheme

2. Extend Configuration

Create or modify .vitepress/config.mts:

import { defineConfigWithTheme } from "vitepress"
import fxConfig from "@fuxishi/vitepress-theme/config"
import type { FxThemeConfig } from "@fuxishi/vitepress-theme/config"

export default defineConfigWithTheme<FxThemeConfig>({
  extends: fxConfig,
  lang: "en",
  title: "My Docs",
  description: "A docs site built with @fuxishi/vitepress-theme",
  themeConfig: {
    // Add your navigation, sidebar, and other config here
    nav: [{ text: "Guide", link: "/guide/" }],
    sidebar: {
      "/guide/": [{ text: "Introduction", link: "/guide/" }],
    },
  },
})

3. Start Dev Server

npx vitepress dev

Open your browser to see the themed docs site.

Theme Presets

fxConfig provides the following default configuration:

Option	Preset Value	Description
outline	[2, 3]	Show only h2 and h3 in outline
markdown.lineNumbers	true	Show line numbers in code blocks
vite.ssr.noExternal	Auto-config	Ensures Element Plus, canvas-confetti, node-vibrant, @fuxishi/vitepress-theme work correctly in SSR

You can override any preset value in defineConfigWithTheme.

Next Steps

• Config Reference — Learn about all configuration options
• Customization — Customize theme appearance with CSS variables
• Music Ball — Configure the floating music player