Skip to content
| Marketplace
Sign in
Visual Studio Code>Themes>Catppuccin by tpsTech for VSCodeNew to Visual Studio Code? Get it now.
Catppuccin by tpsTech for VSCode

Catppuccin by tpsTech for VSCode

tpsTech

|
861 installs
| (0) | Free
Soothing pastel theme based on Catppuccin with adjusted syntax highlighting for VSCode
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Logo
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:

  • Visual Studio Marketplace
  • Open-VSX

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 oldeppuccin-pink-accent

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 default-mocha

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 flat-mocha

For absolute minimalism, you can go with minimal; a single shade for the whole workbench.

  • This only uses base (#1e1e2e)
📸 Preview minimal-mocha

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:

  • ErrorLens
  • GitHub Pull Requests and Issues
  • GitLens

Support

If you have any questions regarding this fork, feel free to open an issue.

Development

  1. Clone and open this repository in VSCode.
  2. 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.
  3. Make modifications in ./src to see the changes immediately.

💝 Thanks to the actual Catppuccin team!

Current maintainers

  • backwardspy

Contributions

  • Lichthagel - GitLens extension support
  • suppayami - Workbench appearances

Previous maintainer(s)

  • ghostx31
  • VictorTennekes
  • winston

 

Copyright © 2021-present Catppuccin Org

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft