@voidzero-dev/vitepress-theme

@voidzero-dev/vitepress-theme

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

Publishing package

pnpm release <version>  # e.g. pnpm release 4.6.1

This updates package.json, commits, tags, and pushes. CI publishes to npm and creates the GitHub 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;
}