@voidzero-dev/vitepress-theme

@voidzero-dev/vitepress-theme

Shared VitePress theme for VoidZero projects, including Vite+, Vite, Vitest, Rolldown, and OXC.

Installation

npm install @voidzero-dev/vitepress-theme
# or
pnpm add @voidzero-dev/vitepress-theme

If developing locally, run pnpm link between the two directories instead.

Usage

1. Configure VitePress

In your .vitepress/config.ts:

import { defineConfig } from 'vitepress'
import { extendConfig } from '@voidzero-dev/vitepress-theme/config'

const config = defineConfig({
  themeConfig: {
    variant: 'viteplus',  // or 'vite', 'vitest', etc.
    nav: [
      { text: 'Home', link: '/' },
      // ... your navigation
    ]
  }
})

// inject theme specific config
export default extendConfig(config)

Note the theme config injects the Tailwind plugin so the downstream project doesn't have to. If the downstream project

2. Import the Theme

In your .vitepress/theme/index.ts:

import type { Theme } from 'vitepress'
import Theme from '@voidzero-dev/vitepress-theme'
import './styles.css'

export default {
    extends: BaseTheme as unknown as Theme,
    Layout
} satisfies Theme

In the CSS, import the CSS from theme (which imports tailwind):

/* styles.css */
@import "@voidzero-dev/vitepress-theme/src/styles/index.css";

@source "./**/*.vue";

/* Project specific branding colors */
:root[data-variant="vite"] {
  --color-brand: #6B1EB9;
}

:root.dark:not([data-theme])[data-variant="vite"],
:root[data-theme="dark"][data-variant="vite"] {
  --color-brand: var(--color-vite);
}

:root[data-theme="light"][data-variant="vite"] {
  --color-brand: #6B1EB9;
}