Catppuccin Darker for VSCode

🌙 Ultra-dark variant of Catppuccin - A fork featuring an even darker theme with custom colors for those who prefer minimal, low-contrast environments.

What Makes This Different?

This darker variant features:

Ultra-dark backgrounds: #181818 base, #282828 mantle, #292929 crust
Subtle blue accents: #8AB4FB instead of the default purple
Minimal contrast: Perfect for late-night coding sessions
Consistent theming: Every UI element carefully tuned for the darker palette
All original flavors: Latte, Frappé, Macchiato, and Mocha are still available

Previews

🌙 Darker

🌻 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.

Using the JSON files

If you need to use the JSON files for libraries like Shiki, you can find the theme files in the themes/ directory of this repository. The original Catppuccin themes 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 the ultra-dark Darker variant
  "workbench.colorTheme": "Catppuccin Dark",
  // blue as the accent color (matches the theme)
  "catppuccin.accentColor": "blue",
  // the Dark theme already has ultra-dark colors built-in
  // but you can still override them if needed
  "catppuccin.colorOverrides": {
    "dark": {
      "base": "#181818",
      "mantle": "#282828",
      "crust": "#292929",
    },
  },
  // customize UI elements with the darker palette
  "catppuccin.customUIColors": {
    "dark": {
      "statusBar.foreground": "accent",
      "tab.activeBorderTop": "blue",
    },
  },
}

📸 Preview

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

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

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 in our Neovim port.

Override palette colors

catppuccin.colorOverrides

Colors can be overwritten in the JSON user settings, like so:

{
  // ...your other settings...
  "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)

catppuccin.customUIColors

If you want to customize where certain palette colors appear, you can change it like so:

{
  "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

Catppuccin for VSCode also themes the following extensions:

Support

If you have any questions regarding this darker variant, feel free to open an issue. For general Catppuccin support, you can ask in their Discord.

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

Catppuccin Darker Maintainer

Carl Weis - Ultra-dark variant implementation

Original Catppuccin VSCode Theme

backwardspy - Current maintainer
Lichthagel - GitLens extension support
suppayami - Workbench appearances
ghostx31 - Previous maintainer
VictorTennekes - Previous maintainer
winston - Previous maintainer

Catppuccin Darker for VSCode

Carl Weis