Getting Started

A Starlight theme for the Catppuccin soothing pastel theme. Check out the various examples to see the theme in action.

Prerequisites

You will need to have a Starlight website set up. If you don’t have one yet, you can follow the “Getting Started” guide in the Starlight docs to create one.

Installation

1. The Starlight Catppuccin theme is a Starlight plugin that you can install using your favorite package manager:

   npm

   npm i @catppuccin/starlight

   pnpm

   pnpm add @catppuccin/starlight

   yarn

   yarn add @catppuccin/starlight

2. Configure the plugin in your Starlight configuration in the astro.config.mjs file.

   astro.config.mjs

   import starlight from '@astrojs/starlight'
   import { defineConfig } from 'astro/config'
   import starlightCatppuccin from '@catppuccin/starlight'
   
   export default defineConfig({
     integrations: [
       starlight({
         plugins: [starlightCatppuccin()],
         title: 'My Docs',
       }),
     ],
   })

3. Start the development server to preview the theme in action.

4. (Optional) Customize your theme for light/dark mode using flavor and accent.

   astro.config.mjs

   import starlightCatppuccin from "@catppuccin/starlight";
   
   export default defineConfig({
     // ...
     integrations: [
       starlight({
         // ...
         plugins: [
           starlightCatppuccin({
             dark: { flavor: "macchiato", accent: "sky" },
             light: { flavor: "latte", accent: "sky" },
           }),
         ],
       }),
     ],
   });

   See all options in the configuration reference.