https://github.com/catppuccin/vitepress
📝 Soothing pastel theme for VitePress
https://github.com/catppuccin/vitepress
catppuccin hacktoberfest theme vitepress vitepress-theme
Last synced: about 2 months ago
JSON representation
📝 Soothing pastel theme for VitePress
- Host: GitHub
- URL: https://github.com/catppuccin/vitepress
- Owner: catppuccin
- License: mit
- Created: 2024-06-09T00:26:44.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-08-06T06:44:44.000Z (2 months ago)
- Last Synced: 2025-08-07T19:48:22.268Z (2 months ago)
- Topics: catppuccin, hacktoberfest, theme, vitepress, vitepress-theme
- Language: TypeScript
- Homepage: http://vitepress.catppuccin.com/
- Size: 1.31 MB
- Stars: 53
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Catppuccin for VitePress
## Previews
🌻 Latte
🪴 Frappé
🌺 Macchiato
🌿 Mocha
## 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`
```ts
import DefaultTheme from "vitepress/theme";
import "@catppuccin/vitepress/theme//.css";
export default DefaultTheme;
```
See ["Extending the Default Theme | VitePress"](https://vitepress.dev/guide/extending-default-theme#extending-the-default-theme) 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`
```ts
export default defineConfig({
// ...
markdown: {
theme: {
light: "catppuccin-latte",
dark: "catppuccin-",
},
},
// ...
});
```
## 💝 Thanks to
- [42Willow](https://github.com/42willow)
- [Strata Docs](https://github.com/StrataWM/strata/blob/5daa4f102a7a03bb73dbe84e43d7ae1cb64d2c54/docs/.vitepress/theme/colors.css)
Copyright © 2021-present Catppuccin Org
