@voidzero-dev/vitepress-theme

@voidzero-dev/vitepress-theme

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

Publishing package

Make to sure to in latest commit

• Update version in package.json and commit it (don't push yet)
• Add tag locally git tag vx.y.z (matching version in package.json)
• Push changes git push origin
• Push to remote git push origin vx.y.z
• Go to GitHub UI > "Releases" > "Tags" > Click the latest tag > "Create release from tag"
• Click "Publish release"

Developing locally

For local development, linking is required between this theme directory and the downstream VoidZero project directories.

• Link theme into docs repos

# In theme
pnpm install
# Make @voidzero-dev/vitepress-theme available for global linking
pnpm link --global

# In project docs
pnpm install
# Link to theme
pnpm link @voidzero-dev/vitepress-theme

• Start VitePress server:

# In project docs
pnpm dev

The downstream project will automatically reflect theme changes via HMR.

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'
// note: import the specific variant directly!
import BaseTheme from '@voidzero-dev/vitepress-theme/src/vite'
import './styles.css'

export default {
    extends: BaseTheme,
    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;
}