Previews

Usage

1. Install the theme package to your project with npm install @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;

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

[!NOTE] Latte is included in all flavors as the light mode variant.

3. Configure syntax highlighting in your VitePress configuration file:

   .vitepress/config.mts

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

💝 Thanks to

• 42Willow
• Strata Docs