Catppuccin Theme Showcase

This page demonstrates how various markdown elements appear when styled with the Catppuccin theme.

Text Formatting

Regular text appears in the default text color. You can make text bold or italic or both. You can also add ~~strikethrough~~ text.

Links

Check out the Catppuccin website for more information.

Lists

Unordered List

Here's an unordered list of Catppuccin accent colors:

• Rosewater
• Flamingo
• Pink
• Mauve
• Red
• Maroon
• Peach
• Yellow
• Green
• Teal
• Sky
• Sapphire
• Blue
• Lavender

Ordered List

The Catppuccin surface colors from darkest to lightest:

1. Crust
2. Mantle
3. Base
4. Surface0
5. Surface1
6. Surface2
7. Overlay0
8. Overlay1
9. Overlay2
10. Subtext0
11. Subtext1
12. Text

Blockquotes

Catppuccin is a community-driven pastel theme that aims to be the middle ground between low and high contrast themes.

This is a nested quote:

Soothing pastel theme for the high-spirited!

Code

Inline Code

Use the --blue CSS variable to apply the blue accent color.

Code Block

/* Catppuccin colors */
:root {
  --rosewater: #f5e0dc;
  --flamingo: #f2cdcd;
  --pink: #f5c2e7;
  --mauve: #cba6f7;
  --red: #f38ba8;
  --maroon: #eba0ac;
}

Tables

| Element | Latte Color | Mocha Color | |---------|-------------|-------------| | Background | #eff1f5 | #1e1e2e | | Text | #4c4f69 | #cdd6f4 | | Headings | #8839ef | #cba6f7 | | Links | #1e66f5 | #89b4fa | | Blockquotes | #6c6f85 | #a6adc8 |

Horizontal Rule

Task List

• [x] Implement Latte theme
• [x] Implement Mocha theme
• [ ] Create additional flavors (Macchiato, Frappé)

Emojis

Catppuccin flavors as emojis: 🍦 Latte (Light) ☕ Mocha (Dark) 🥤 Frappé (Medium-Dark) ☕ Macchiato (Medium)

Images

If this were rendered with full markdown support, an image would appear below: