Catppuccin for VSCode installs statistics

<h3 align="center"> <img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png" width="100" alt="Logo"/><br/> <img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/> Catppuccin for <a href="https://code.visualstudio.com">VSCode</a> <img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/> </h3> <p align="center"> <a href="https://github.com/catppuccin/vscode/stargazers"><img src="https://img.shields.io/github/stars/catppuccin/vscode?colorA=363a4f&colorB=b7bdf8&style=for-the-badge"></a> <a href="https://github.com/catppuccin/vscode/issues"><img src="https://img.shields.io/github/issues/catppuccin/vscode?colorA=363a4f&colorB=f5a97f&style=for-the-badge"></a> <a href="https://github.com/catppuccin/vscode/contributors"><img src="https://img.shields.io/github/contributors/catppuccin/vscode?colorA=363a4f&colorB=a6da95&style=for-the-badge"></a> </p> <p align="center"> <img src="https://github.com/catppuccin/vscode/raw/HEAD/assets/preview.webp"/> </p>

Previews

<details> <summary>🌻 Latte</summary> <img src="https://github.com/catppuccin/vscode/raw/HEAD/assets/latte.webp"/> </details> <details> <summary>🪴 Frappé</summary> <img src="https://github.com/catppuccin/vscode/raw/HEAD/assets/frappe.webp"/> </details> <details> <summary>🌺 Macchiato</summary> <img src="https://github.com/catppuccin/vscode/raw/HEAD/assets/macchiato.webp"/> </details> <details> <summary>🌿 Mocha</summary> <img src="https://github.com/catppuccin/vscode/raw/HEAD/assets/mocha.webp"/> </details>

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.

Using the JSON files

If you need to use the JSON files for libraries like Shiki, the theme files are published to NPM as @catppuccin/vscode.

Nix (Home-Manager) users

If you would like to change the theme configuration, the theme expects to have a mutable directory to write its JSON files into. This means that you will have to either:

• Install this extension in a non-declarative way so that the extension has permissions to write files.
  This means fully excluding nixpkgs.vscode-extensions.catppuccin.catppuccin-vsc from your configuration; Just using programs.vscode.mutableExtensionsDir = true; will NOT WORK.
• Use our catppuccin/nix module to build it with your VSCode configuration, using overrides.
  This is a declarative way to compile the theme with your preferred options. Please refer to the example below for a sample configuration.

{
  # in your inputs:
  inputs.catppuccin.url = "github:catppuccin/nix";

  # in your home-manager options:
  catppuccin = {
    enable = true;
    # optionally configure the extension settings, defaults are shown below:
    vscode = {
      accent = "mauve";
      settings = {
        boldKeywords = true;
        italicComments = true;
        italicKeywords = true;
        colorOverrides = {};
        customUIColors = {};
        workbenchMode = "default";
        bracketMode = "rainbow";
        extraBordersEnabled = false;
      };
    };
  };
  programs.vscode = {
    enable = true;
  };
}

Customization

[!Note] We also have a 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,
  },
}

Catppuccin settings

Catppuccin for VSCode can be customized to your liking. If you like the Catppuccin 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 Mocha",
  // pink as the accent color
  "catppuccin.accentColor": "pink",
  // make Mocha specifically very dark
  // (this preserves other flavors!)
  "catppuccin.colorOverrides": {
    "mocha": {
      "base": "#000000",
      "mantle": "#010101",
      "crust": "#020202",
    },
  },
  // use your accent (pink) on the statusBar as well
  "catppuccin.customUIColors": {
    "mocha": {
      "statusBar.foreground": "accent",
    },
  },
}

<details> <summary>📸 Preview</summary> <img width="1488" alt="oldeppuccin-pink-accent" src="https://user-images.githubusercontent.com/79978224/265295206-47d0c993-5d61-4e93-aa96-6d0d95a24f33.png"> </details>

To see all available options, open your settings and look for Extensions > Catppuccin.

Custom accent color

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: catppuccin.italicKeywords
• italics for comments: catppuccin.italicComments
• bold for keywords: catppuccin.boldKeywords

Flat appearance…