@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

1. Update version in package.json
2. Add tag locally git tag vx.y.z (matching version in package.json)
3. Push changes git push origin
4. Push to remote git push origin vx.y.z
5. Go to GitHub UI > "Releases" > "Tags" > Click the latest tag > "Create release from tag"
6. Click "Publish release"

Developing locally

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

1. 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

2. 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";
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;
}