Catppuccin for VSCode

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.

Note
It is recommended to change window.titleBarStyle to custom in your JSON user settings.

Using the JSON theme only

You can find the compiled theme JSON files (with default settings as documented below) on the compiled branch.

Customization

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!

⚙️ Used settings

     // 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 flavours!)
    "catppuccin.colorOverrides": {
        "mocha": {
            "base": "#000000",
            "mantle": "#010101",
            "crust": "#020202",
        }
    },
    // use your accent (pink) on the statusBar as well
    "catppuccin.customUIColors": {
        "mocha": {
            "statusBar.foreground": "accent"
        }
    },

Open your settings, and look for Extensions > Catppuccin. Available options are documented here.

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 3 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

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

Paired Brackets

catppuccin.bracketMode

By default, we're using 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 flavours
        "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 flavours
        "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 specifing 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.

Support

If you have any questions regarding this port, feel free to open an issue, or ask in our Discord, where have a dedicated forum for support.

Development

1. Clone and open this repository in VSCode.
2. Launch a new instance from "Run and Debug". This will spawn a new instance, which will have the current build of the Theme available.
3. Make modifications to the JSONs in ./themes to see the changes immediately.
4. To preserve changes, they have to be edited in ./src/theme/*.ts, since the theme builds the JSONs from there.

💝 Thanks to

• VictorTennekes
• Gingeh
• BrunDerSchwarzmagier
• ghostx31
• Ren
• Hamothy

 

Copyright © 2021-present Catppuccin Org