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.

Customization

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

Custom accent colour

catppuccin.accentColor

You can choose any colour as your "accent" colour. mauve is our default, but you can add more personality by using your favourite!

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

Override palette colours

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 colours on workbench elements (UI)

catppuccin.customUIColors

If you want to customize where certain palette colours 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 colour.
            "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.

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