@protolabsai/vitepress-theme

VitePress styled from the protoLabs.studio design tokens. It maps VitePress's --vp-* variables to the @protolabsai/design --pl-* tokens, so every studio docs site is brand-consistent from one source. Change a token, every site restyles — no per-repo hardcoded colors (which is how repos drift to off-brand palettes).

Use it in a repo

pnpm add -D @protolabsai/vitepress-theme @protolabsai/design vitepress

docs/.vitepress/theme/index.ts:

import theme from "@protolabsai/vitepress-theme";
export default theme;

docs/.vitepress/config.mts — force the dark, brand-first ground:

import { defineConfig } from "vitepress";
export default defineConfig({
  appearance: "force-dark",
  // …your nav / sidebar
});

That's it. The theme extends VitePress's default theme and applies the brand mapping; your content and config are otherwise unchanged.

What it maps

--vp-c-bg/-alt/-soft → the dark ground · --vp-c-brand-1/2/3 → the brand lavender/indigo · --vp-c-text-1/2 → fg/fg-muted · --vp-c-divider → border · --vp-font-family-base/-mono → Geist / Geist Mono · the home-hero gradient → --pl-gradient-brand. The dark ground is pinned (docs are dark-first like the marketing site); the brand accent flows live from the tokens.

Override locally

Add your own custom.css after the theme import for repo-specific tweaks — but keep colors referencing --pl-* so you inherit brand changes:

import theme from "@protolabsai/vitepress-theme";
import "./local.css"; // e.g. .service-grid, repo-specific components
export default theme;