Previews
🌻 Latte
🪴 Frappé
🌺 Macchiato
🌿 Mocha
🪻 Nitro Cold Brew
🐾 Oledppuccin
Calmppuccin: A Soothing and Optimized VS Code Theme
Calmppuccin is a visually refined theme for Visual Studio Code, designed to
offer a harmonious coding experience. Inspired by the popular
Catppuccin theme
Calmppuccin takes the beloved pastel palette and transforms it into a gentler,
less intense version, perfect for long coding sessions without eye strain.
Installation
To install the Calmppuccin extension in Visual Studio Code, open the Extensions view
by clicking the Extensions icon in the Activity Bar or pressing Ctrl+Shift+X. In the search bar,
enter Calmppuccin, locate the extension in the results, and select Install to add it to your editor.
Customizing the Accent Color
All Calmppuccin flavors (Latte, Mocha, etc.) share a dynamic accent color, which you can easily change to fit your preference.
There are two ways to configure your accent color:
- Open your VS Code Settings (
Ctrl + ,).
- In the search bar, type
Calmppuccin.
- You will see a setting called "Calmppuccin: Accent" with a dropdown menu.
- Select your desired accent color from the list.
- A notification will prompt you to reload VS Code. Click "Reload Window" to apply the changes across all theme flavors.
2. Editing settings.json
For those who prefer editing JSON directly, you can add the following line to your settings.json file.
"calmppuccin.accent": "mauve"
Replace "mauve" with any of the available accent options below.
🎨 Accents
blueflamingogreenlavendermaroonmauvepeachpinkredrosewatersapphireskytealyellow
Key Features
Enhanced Syntax Highlighting:
Carefully optimized color choices ensure clear and
distinguishable syntax elements, making code easier to read and navigate.
Reduced Eye Strain:
Subtle and muted tones create a calming workspace that
minimizes visual fatigue, ideal for developers working for extended periods.
Also with new theme variants like Nitro Cold Brew (even darker and more subdued) and
Oledppuccin, specifically designed for OLED screens and pitch-black rooms.
Aesthetic Balance: Strikes the perfect balance between functionality and beauty,
blending soothing colors with practical design.
Customizable: Offers flexibility to tweak background colors, text shades, and
accents to suit individual preferences.
Calmppuccin is more than just a theme, it's an invitation to code in comfort and style.
Whether you're debugging complex codebases or crafting new projects, Calmppuccin
ensures your workspace remains a serene and productive environment.
Recommendations
Ensure you have semantic highlighting enabled in your settings.json by adding or
verifying this line:
"editor.semanticHighlighting.enabled": true
You could also use it witout semantic highlighting, but it's not recommended.
Icons
Font and Font Settings
Editor Font: Monaspace Neon or alternatively JetBrains Mono
- Note: Font weight is set to "normal" which is the default weight for both fonts.
If you want to customize it, vscode supports font weight from 100 to 900 (400 is normal).
Change the font size to your preference (e.g. "editor.fontSize": 15).
Download Monaspace Neon
Download Jetbrains Mono
- Settings for Monaspace Neon:
"editor.fontFamily": "'Monaspace Neon', monospace",
"editor.fontLigatures": "'calt', 'liga', 'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'ss07', 'ss08', 'ss09', 'cv01' 2",
"editor.fontWeight": "normal"
- Settings for Jetbrains Mono:
"editor.fontFamily": "'Jetbrains Mono', monospace",
"editor.fontLigatures": true,
"editor.fontWeight": "normal"
Terminal Font: Jetbrains Mono Nerd Font
Download Jetbrains Mono Nerd Font
- Settings for Jetbrains Mono Nerd Font:
"terminal.integrated.fontFamily": "'JetbrainsMono Nerd Font', monospace",
"terminal.integrated.cursorStyle": "line",
"terminal.integrated.fontWeight": "normal"
