Usage

1. Install the theme package to your project with your preferred package manager:

   npm

   npm install @catppuccin/vitepress

   Yarn

   yarn add @catppuccin/vitepress

   pnpm

   pnpm add @catppuccin/vitepress

   Bun

   bun add @catppuccin/vitepress

2. Add the theme to your VitePress theme configuration file:

   .vitepress/theme/index.ts

   import DefaultTheme from "vitepress/theme";
   import "@catppuccin/vitepress/theme/<flavor>/<accent>.css";
   
   export default DefaultTheme;

   NOTE

   Latte is included in all flavors as the light mode variant.

   See "Extending the Default Theme | VitePress" for more information.

3. Configure syntax highlighting in your VitePress configuration file:

   .vitepress/config.mts

   export default defineConfig({
     // ...
     markdown: {
       theme: {
         light: 'catppuccin-latte',
         dark: 'catppuccin-<flavor>',
       },
     },
     // ...
   });

 

Copyright © 2021-present Catppuccin Org