Catppuccin Theme: Flavors, Colors, and Where to Start

Shop the Catppuccin Keycap Set

Catppuccin is a pastel color theme built to follow you from the code editor to the terminal, browser, notes app, and the rest of the desktop. It is not one dark background with a handful of purple highlights. It is a named 26-color palette, offered in four “flavors,” with ports that reuse the same visual language across hundreds of tools.

If you came here after seeing a purple terminal screenshot, the flavor was probably Mocha. That is the darkest and most photographed version, but it is only one quarter of the system. This guide explains what Catppuccin is, how its colors are organized, what changes between Latte, Frappé, Macchiato, and Mocha, and where to start without spending an evening auditioning every port.

What is the Catppuccin theme?

Catppuccin is an open-source, community-run theme project. Its own description is “a soothing pastel theme for the high-spirited.” The soothing part comes from backgrounds that avoid pure black and accents that favor soft mauve, blue, peach, green, and teal over hard neon. The high-spirited part is the candy-shop color range: Catppuccin is calm, but it is not monochrome.

The project works more like a small design system than a single editor skin. Every color has a stable name and purpose. Base is the main app background. Text is the primary foreground. Mauve, Blue, Peach, and the other accents can be assigned to syntax, buttons, graphs, or status indicators. A port adapts those roles to its app instead of inventing a new palette that merely looks close.

That structure is the reason Catppuccin travels well. A VS Code theme and a terminal config do not render the same components, yet the two still feel related because they draw from the same named card. The result is especially attractive if you want one visual system across a full desk setup rather than one handsome editor window.

Catppuccin is one palette system in four brightness levels, not four unrelated themes with coffee names.

The four Catppuccin flavors

Catppuccin calls its variants flavors: Latte, Frappé, Macchiato, and Mocha. Latte is light. The other three are dark, moving from the lighter, muted Frappé to the deep Mocha. The names and roles stay consistent, but each flavor has its own tuned values; Latte is not Mocha passed through an invert filter.

Mocha is the safest first install if you want the version you have seen online. Its purple-navy Base gives the pastel accents room to glow, while Mantle and Crust create darker layers for sidebars and window chrome. The tradeoff is quiet comments and line numbers on dim or low-contrast displays.

Macchiato preserves the dark feel but lifts the background. It is often the practical answer for someone who likes Mocha in screenshots and finds it a little crushed during the workday. Frappé lifts and mutes the scene again; choose it when bright accents are more tiring than helpful.

Latte is a proper light palette. Its accents become darker and more saturated so they stay legible on the pale Base. It keeps the same Catppuccin vocabulary without pretending that colors tuned for a midnight background will work on cream. For a closer decision between all four, use the Catppuccin flavor comparison.

How the palette is organized

Each flavor contains 26 colors divided into three useful groups. You do not need to memorize them to install a theme, but the groups explain why a complete Catppuccin port feels more coherent than a loose pastel preset.

Fourteen accent colors

Rosewater, Flamingo, Pink, Mauve, Red, Maroon, Peach, Yellow, Green, Teal, Sky, Sapphire, Blue, and Lavender make up the expressive layer. Editors use them for syntax categories; other apps use them for links, selections, warnings, success states, charts, or badges.

The familiar Mocha accents include Mauve #cba6f7, Blue #89b4fa, Peach #fab387, and Green #a6e3a1. They are distinct enough to separate code tokens without turning the editor into a traffic-light display.

Three foreground colors

Text is the strongest general foreground, with Subtext 1 and Subtext 0 stepping down for supporting copy. This small hierarchy lets a port separate a document title, body copy, and secondary label without reaching for an unrelated gray.

Nine surface colors

Overlay 2 through Overlay 0, Surface 2 through Surface 0, Base, Mantle, and Crust build the neutral frame. In a typical dark editor, Base holds the code, Mantle can hold the sidebar, Crust can sit behind the lowest layer, and the Surface and Overlay steps handle selections, borders, inactive tabs, and comments.

This is where most of the theme’s character actually lives. The accents get attention, but the closely related purple-gray surfaces are what allow an app to show depth without introducing stark black panels. You can copy every official value from the Catppuccin hex palette chart.

Why Catppuccin looks consistent across apps

A color palette alone does not guarantee a good port. Catppuccin’s advantage is the community around that palette: maintainers adapt it to editors, terminals, shells, browsers, note tools, launchers, chat clients, and operating-system components. The official project site groups those integrations as ports and publishes setup instructions for each one.

The result is consistency with room for local decisions. A terminal has only a compact ANSI color set. A code editor has syntax scopes, tabs, a file tree, diagnostics, and source-control states. Obsidian has prose, callouts, links, and graph nodes. A good port maps the same Catppuccin roles onto those different jobs rather than forcing every app into an identical screenshot.

That also means two ports can disagree slightly about syntax or UI emphasis and both still be Catppuccin. The palette is stable; the mapping belongs to the port. If one app feels wrong, check its flavor and port options before manually replacing hex values.

Where should you start?

1. Choose one app you use every day. Start with the editor or terminal, not the entire operating system. You will learn more from two hours of real work than from twenty screenshots.
2. Install Mocha first if you prefer dark mode. It is the recognizable default and gives you a clear baseline. If comments, inactive tabs, or the file tree feel too dim, move to Macchiato before customizing individual colors.
3. Install Latte first if you already prefer light mode. Do not use a dark flavor because it looks better in someone else’s desk photo.
4. Add a second port only after the first feels right. Match the same flavor in the terminal, browser, or notes app. This keeps you from debugging five integrations while you are still deciding between Mocha and Macchiato.
5. Customize last. Port settings for accent color, transparency, italics, bold syntax, and integrations are usually safer than replacing palette values by hand.

For a concrete first setup, the editor is the easiest place to judge syntax and UI contrast. Follow the Catppuccin VS Code setup guide if you use Visual Studio Code, or the Catppuccin Neovim setup guide if your configuration lives in Lua. You can then carry the same flavor into your shell with the terminal setup guide.

Is Catppuccin right for your setup?

Choose Catppuccin if you want a soft palette, several genuine brightness options, and broad app coverage. It is particularly good for a desk where visual continuity matters: editor, terminal, browser chrome, wallpaper, and accessories can all speak the same color language.

Look elsewhere if you want pure black, extremely loud contrast, a nearly monochrome editor, or comments as bright as executable code. Catppuccin intentionally lets secondary interface elements recede. You can override that behavior, but a theme built around sharper contrast may be a better starting point.

If the choice is between Catppuccin and another popular dark family, compare the design idea before comparing individual hex codes. Tokyo Night vs Catppuccin covers the cool-neon versus warm-pastel decision. Catppuccin’s real strength is not that Mauve beats Blue; it is that the same named system remains usable from Latte at noon to Mocha after midnight.

Catppuccin theme FAQ

Is Catppuccin only a VS Code theme?

No. VS Code is one port in a much larger ecosystem. Catppuccin is a palette project with integrations for many editors, terminals, applications, and desktop tools.

Which Catppuccin flavor is the default?

Mocha is the dark flavor most people recognize from screenshots and the most sensible first choice when a guide does not specify one. A particular port may ship with a different default, so check its settings.

Is Catppuccin good for readability?

Primary text is clear on the intended background, but secondary text is deliberately subdued. Readability depends on the flavor, display, room lighting, and port. If Mocha feels too deep, try Macchiato; if you work in strong daylight, try Latte.

Can I mix Catppuccin flavors?

Yes. The shared color names make a mixed setup less chaotic than combining unrelated themes. Still, matching one flavor across adjacent apps produces the most consistent desktop. A useful exception is switching between Latte by day and Mocha or Macchiato at night.

Palette names and values in this guide follow the official Catppuccin palette. Browse current integrations and installation instructions through the official ports directory.