🌻 Latte

🪴 Frappé

🌺 Macchiato

🌿 Mocha

1. Initialise your mdBook with the theme files:

   mdbook init --theme <name>

2. Enter the book directory and remove all theme files except index.hbs:

   cd <name>
   # Remove all files except index.hbs
   find ./theme -type f ! -name 'index.hbs' -delete
   # Remove the left over empty directories
   rm -d fonts css

3. Download the catppuccin.css file from the latest GitHub release to the theme directory.

   See the Supported Plugins section below for integrations with other mdBook plugins.

4. Update additional-css key within the book.toml as shown below

   [output.html]
   -additional-css = []
   +additional-css = ["./theme/catppuccin.css"]

5. Edit the index.hbs file to include the Catppuccin flavors:

   - <li role="none"><button role="menuitem" class="theme" id="light">Light</button></li>
   - <li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
   - <li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
   - <li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
   - <li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
   + <li role="none"><button role="menuitem" class="theme" id="latte">Latte</button></li>
   + <li role="none"><button role="menuitem" class="theme" id="frappe">Frappé</button></li>
   + <li role="none"><button role="menuitem" class="theme" id="macchiato">Macchiato</button></li>
   + <li role="none"><button role="menuitem" class="theme" id="mocha">Mocha</button></li>

   Additionally, you can use default-theme and preferred-dark-theme keys for setting default light/dark mode themes in your book.toml.

   E.g. To set the default theme to latte and default dark mode to mocha:

   [output.html]
   + default-theme = "latte"
   + preferred-dark-theme = "mocha"

6. Build using mdbook build and enjoy your new Catppuccin flavors!

This theme also generates CSS files to style elements added by other mdBook plugins. We support the following list of plugins:

The CSS file(s) can be downloaded and added to the additional-css key shown in step 4. of the Usage section.

1. Clone the repository and navigate to the repository root.

   git clone https://github.com/catppuccin/mdbook
   cd mdbook

2. Generate the CSS files:

   pnpm install
   pnpm run build

mdbook-admonish for inspiration on the install command for the now deprecated mdbook-catppuccin binary.

• Hamothy
• winston

Copyright © 2021-present Catppuccin Org