
Catppuccin for VSCode by tpsTech
IMPORTANT NOTICE
!!! This is a fork of the original Catppuccin for VSCode, maintained by tpsTech !!!
Previews
🌻 Latte
🪴 Frappé
🌺 Macchiato
🌿 Mocha
Usage
Preferred method of installation
Install the extension from a Marketplace:
Manual method for installation
Download the VSIX from
the latest GitHub release.
Open the Command Palette and select "Extensions: Install from VSIX...", then open the file you just downloaded.
Customization
[!Note]
Check out the complementary Catppuccin Icon Pack!
VSCode settings
The following settings inside your settings.json
are recommended for this plugin:
{
// we try to make semantic highlighting look good
"editor.semanticHighlighting.enabled": true,
// prevent VSCode from modifying the terminal colors
"terminal.integrated.minimumContrastRatio": 1,
// make the window's titlebar use the workbench colors
"window.titleBarStyle": "custom",
// applicable if you use Go, this is an opt-in flag!
"gopls": {
"ui.semanticTokens": true,
},
}
tpstech-catppuccin-vsc settings
tpstech-catppuccin-vsc for VSCode can be customized to your liking. If you like the colors but feel that they are a bit too bright for working at night, customization got you covered!
{
// use Mocha as the base
"workbench.colorTheme": "Catppuccin by tpsTech Mocha",
// pink as the accent color
"tpstech-catppuccin.accentColor": "pink",
// make Mocha specifically very dark
// (this preserves other flavors!)
"tpstech-catppuccin.colorOverrides": {
"mocha": {
"base": "#000000",
"mantle": "#010101",
"crust": "#020202",
},
},
// use your accent (pink) on the statusBar as well
"tpstech-catppuccin.customUIColors": {
"mocha": {
"statusBar.foreground": "accent",
},
},
}
📸 Preview
To see all available options, open your settings and look for Extensions > Catppuccin by tpsTech
.
Custom accent color
tpstech-catppuccin.accentColor
You can choose any color as your "accent" color. mauve
is our default, but you can add more personality by using your favorite!
Disable italics & bold fonts
You can toggle whether to use
- italics for keywords:
tpstech-catppuccin.italicKeywords
- italics for comments:
tpstech-catppuccin.italicComments
- bold for keywords:
tpstech-catppuccin.boldKeywords
Flat appearance
tpstech-catppuccin.workbenchMode
By default, Catppuccin for VSCode uses three shades of our base
color for the workbench.
For example, in Mocha:
base
: #1e1e2e - the editor background
mantle
: #181825 - the sidebar
crust
: #11111b - the activity bar, status bar, and title bar
📸 Preview
If you'd like a more flat look, you can change it to flat
! This only uses base
and mantle
, reducing it to 2 shades:
base
: #1e1e2e - the editor background
mantle
: #181825 - the sidebar, the activity bar, status bar, and title bar
📸 Preview
For absolute minimalism, you can go with minimal
; a single shade for the whole workbench.
- This only uses
base
(#1e1e2e)
📸 Preview
Paired Brackets
tpstech-catppuccin.bracketMode
By default, we use red
, peach
, yellow
, green
, blue
, and mauve
for matching bracket pairs. You can change that option if you want different colors:
rainbow
is our default setting, using the colors described above.
dimmed
uses the same rainbow colors, but muted by 20%.
monochromatic
only uses grayish colors, from subtext1
to surface2
.
neovim
uses the same colors that nvim-ts-rainbow
uses.
Override palette colors
tpstech-catppuccin.colorOverrides
Colors can be overwritten in the JSON user settings, like so:
{
// ...your other settings...
"tpstech-catppuccin.colorOverrides": {
// make text red red all flavors
"all": {
"text": "#ff0000",
},
// make Mocha "OLEDppuccin" - use black editor background
"mocha": {
"base": "#000000",
"mantle": "#010101",
"crust": "#020202",
},
},
}
Use palette colors on workbench elements (UI)
tpstech-catppuccin.customUIColors
If you want to customize where certain palette colors appear, you can change it like so:
{
"tpstech-catppuccin.customUIColors": {
// make the breadcrumb "text" on "overlay0" for all flavors
"all": {
"breadcrumb.background": "overlay0",
"breadcrumb.foreground": "text",
},
// but for mocha, use "crust" on your currently selected accent.
"mocha": {
// "accent" selects your current accent color.
"breadcrumb.background": "accent",
"breadcrumb.foreground": "crust",
// you can use opacity, by specifying it after a space
// "rosewater 0.5" would mean 50% opacity, here it's 20%
"minimap.background": "rosewater 0.2",
},
},
}
You can find all the available keys here.
[!Note]
This respects your color overrides.
Extension Support
tpstech-catppuccin-vsc for VSCode also themes the following extensions:
Support
If you have any questions regarding this fork, feel free to open an issue.
Development
- Clone and open this repository in VSCode.
- Launch the "Debug & Watch Files" configuration from "Run and Debug". This
will spawn a new instance and also start a task watching the files in
./src
.
The watch task allows for the theme to be hot reloaded based on changes to the
TypeScript instead of the generated JSON.
- Make modifications in
./src
to see the changes immediately.
💝 Thanks to the actual Catppuccin team!
Current maintainers
Contributions
Previous maintainer(s)

Copyright © 2021-present Catppuccin Org
