Catppuccin by tpsTech for VSCode - Visual Studio Marketplace

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

backwardspy

Contributions

Lichthagel - GitLens extension support
suppayami - Workbench appearances

Previous maintainer(s)