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.
Customization
You can easily tailor Calmppuccin to fit your personal preferences using the
built-in graphical interface or by editing your settings.json
directly.
1. Using the Customization UI (Recommended)
This is the easiest and most powerful way to configure everything in one place. The UI gives you full control over accent colors,
font styles, and granular syntax colors, with a live preview pane that updates instantly as you make changes.
🛠️ Customization UI
You can open the custom UI in two main ways:
Via the Command Palette (Quickest Method):
- Open the Command Palette (
Ctrl
+ Shift
+ P
, Cmd
+ Shift
+ P
or F1
).
- Type
Calmppuccin
and select Calmppuccin: Customize Theme.
Via the Settings Menu:
- Open VS Code Settings (
Crtl
+ ,
)
- Seach for
Calmppuccin
.
- Find the setting titled
Calmppuccin: Open Customization UI
and click the link within its description to open the panel.
Changes are saved automatically. A notification will appear prompting you to reload VS Code to apply them.
2. Using the Standard Settings UI
This is a quick way to change only the accent color
- Open your VS Code Settings (
Ctrl
+ ,
).
- In the search bar, type
Calmppuccin Accent
.
- Use the dropdown menu to select your desired accent color.
3. Editing settings.json
(For Power Users)
For those who prefer editing JSON directly, you can modify your settings.json file.
🎨 Accent Color
Add the following line to set your accent color. Replace mauve
with any of the available options below.
// Use a predefined accent
"calmppuccin.accent": "mauve",
// Use a custom hex color
"calmppuccin.accent": "custom",
"calmppuccin.customAccentColor": "#36d9ce"
🎨 Available Accents:
blue
flamingo
green
lavender
maroon
mauve
peach
pink
red
rosewater
sapphire
sky
teal
yellow
custom
✒️ Font Styles
You can control the font style for each syntax element directly in the JSON.
A helpful shortcut:
- Go to the standard Settings UI and search for
Calmppuccin: Font Styles
.
- Click the
Edit in settings.json
link.
- This will automatically add the entire
calmppuccin.fontStyles
object with all default values to your file, making it easy to edit.
Here is an example of the structure:
"calmppuccin.fontStyles": {
"commentFontStyle": "italic",
"variableFontStyle": "none",
"keywordFontStyle": "none",
// ... and so on for all other elements
}
Available Font Style Options:
none
(will be replaced with an empty string)
italic
bold
italic bold
underline
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.
Highly Customizable: Personalize your coding environment by selecting from a palette of
14 accent colors and applying unique font styles (like italic or bold) to individual syntax elements.
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
Note: These extensions are not required, but it provides a more consistent icon set.\
Recommended: Catppuccin Icons for VSCode
- Automatic Syncing: Calmppuccin now automatically syncs with this icon pack! When you switch your color theme (e.g., from Mocha to Latte), the icon flavor will update to match.
- Note: For the custom
Nitro Cold Brew
and Oledppuccin
themes, the icons will sync to the Mocha
flavor.
Alternative 1: Atom Material Icons
Alternative 2: Material Icon Theme
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"
Acknowledgements
This theme was built from the ground up and is heavily inspired by the amazing Catppuccin theme.
While Calmppuccin aims for a gentler, more subdued palette, it would not exist without the incredible
foundation and color philosophy established by the Catppuccin team.