{"id":13614098,"url":"https://github.com/catppuccin/vscode","last_synced_at":"2025-05-13T23:04:42.461Z","repository":{"id":37267930,"uuid":"437178490","full_name":"catppuccin/vscode","owner":"catppuccin","description":"🦌 Soothing pastel theme for VSCode","archived":false,"fork":false,"pushed_at":"2025-05-01T21:36:26.000Z","size":10613,"stargazers_count":1673,"open_issues_count":15,"forks_count":60,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-05-01T22:27:35.127Z","etag":null,"topics":["catppuccin","fancy","hacktoberfest","pastel-colors","theme","vscode","vscode-theme"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=Catppuccin.catppuccin-vsc-pack","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/catppuccin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"catppuccin","open_collective":"catppuccin"}},"created_at":"2021-12-11T03:32:58.000Z","updated_at":"2025-05-01T21:35:35.000Z","dependencies_parsed_at":"2023-02-15T20:15:25.464Z","dependency_job_id":"ad9279fa-aaa8-4a38-a06b-1065cc07c550","html_url":"https://github.com/catppuccin/vscode","commit_stats":{"total_commits":505,"total_committers":32,"mean_commits":15.78125,"dds":"0.41980198019801984","last_synced_commit":"7b0ff73aa9e9718cbe418a3f90f771aa14a655b8"},"previous_names":[],"tags_count":69,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catppuccin%2Fvscode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catppuccin%2Fvscode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catppuccin%2Fvscode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catppuccin%2Fvscode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/catppuccin","download_url":"https://codeload.github.com/catppuccin/vscode/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254040568,"owners_count":22004566,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["catppuccin","fancy","hacktoberfest","pastel-colors","theme","vscode","vscode-theme"],"created_at":"2024-08-01T20:00:56.902Z","updated_at":"2025-05-13T23:04:42.411Z","avatar_url":"https://github.com/catppuccin.png","language":"TypeScript","funding_links":["https://github.com/sponsors/catppuccin","https://opencollective.com/catppuccin"],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003ch3 align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png\" width=\"100\" alt=\"Logo\"/\u003e\u003cbr/\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png\" height=\"30\" width=\"0px\"/\u003e\n\tCatppuccin for \u003ca href=\"https://code.visualstudio.com\"\u003eVSCode\u003c/a\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png\" height=\"30\" width=\"0px\"/\u003e\n\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/catppuccin/vscode/stargazers\"\u003e\u003cimg src=\"https://img.shields.io/github/stars/catppuccin/vscode?colorA=363a4f\u0026colorB=b7bdf8\u0026style=for-the-badge\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/catppuccin/vscode/issues\"\u003e\u003cimg src=\"https://img.shields.io/github/issues/catppuccin/vscode?colorA=363a4f\u0026colorB=f5a97f\u0026style=for-the-badge\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/catppuccin/vscode/contributors\"\u003e\u003cimg src=\"https://img.shields.io/github/contributors/catppuccin/vscode?colorA=363a4f\u0026colorB=a6da95\u0026style=for-the-badge\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/preview.webp\"/\u003e\n\u003c/p\u003e\n\n## Previews\n\n\u003cdetails\u003e\n\u003csummary\u003e🌻 Latte\u003c/summary\u003e\n\u003cimg src=\"assets/latte.webp\"/\u003e\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003e🪴 Frappé\u003c/summary\u003e\n\u003cimg src=\"assets/frappe.webp\"/\u003e\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003e🌺 Macchiato\u003c/summary\u003e\n\u003cimg src=\"assets/macchiato.webp\"/\u003e\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003e🌿 Mocha\u003c/summary\u003e\n\u003cimg src=\"assets/mocha.webp\"/\u003e\n\u003c/details\u003e\n\n## Usage\n\n### Preferred method of installation\n\nInstall the extension from a Marketplace:\n\n- [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=Catppuccin.catppuccin-vsc)\n- [Open-VSX](https://open-vsx.org/extension/Catppuccin/catppuccin-vsc)\n\n### Manual method for installation\n\nDownload the VSIX from\n[the latest GitHub release](https://github.com/catppuccin/vscode/releases/latest).\nOpen the Command Palette and select \"Extensions: Install from VSIX...\", then open the file you just downloaded.\n\n### Using the JSON files\n\nIf you need to use the JSON files for libraries like [Shiki](https://www.npmjs.com/package/shiki), the theme files are published to NPM as [`@catppuccin/vscode`](https://www.npmjs.com/package/@catppuccin/vscode).\n\n### Nix (Home-Manager) users\n\nIf you would like to change the theme configuration, the theme expects to have a mutable directory to write its JSON files into.\nThis means that you will have to either:\n\n- Install this extension in a non-declarative way so that the extension has permissions to write files.\\\n  This means fully excluding `nixpkgs.vscode-extensions.catppuccin.catppuccin-vsc` from your configuration; Just using `programs.vscode.mutableExtensionsDir = true;` will **NOT WORK**.\n- Use our [catppuccin/nix](https://github.com/catppuccin/nix) module to build it with your VSCode configuration, using overrides.\\\n  This is a declarative way to compile the theme with your preferred options. **Please refer to the example below for a sample configuration.**\n\n```nix\n{\n  # in your inputs:\n  inputs.catppuccin.url = \"github:catppuccin/nix\";\n\n  # in your home-manager options:\n  catppuccin = {\n    enable = true;\n    # optionally configure the extension settings, defaults are shown below:\n    vscode = {\n      accent = \"mauve\";\n      settings = {\n        boldKeywords = true;\n        italicComments = true;\n        italicKeywords = true;\n        colorOverrides = {};\n        customUIColors = {};\n        workbenchMode = \"default\";\n        bracketMode = \"rainbow\";\n        extraBordersEnabled = false;\n      };\n    };\n  };\n  programs.vscode = {\n    enable = true;\n  };\n}\n```\n\n## Customization\n\n\u003e [!Note]\n\u003e We also have a [Catppuccin Icon Pack](https://marketplace.visualstudio.com/items?itemName=Catppuccin.catppuccin-vsc-icons)!\n\n### VSCode settings\n\nThe following settings inside your `settings.json` are recommended for this plugin:\n\n```jsonc\n{\n  // we try to make semantic highlighting look good\n  \"editor.semanticHighlighting.enabled\": true,\n  // prevent VSCode from modifying the terminal colors\n  \"terminal.integrated.minimumContrastRatio\": 1,\n  // make the window's titlebar use the workbench colors\n  \"window.titleBarStyle\": \"custom\",\n\n  // applicable if you use Go, this is an opt-in flag!\n  \"gopls\": {\n    \"ui.semanticTokens\": true,\n  },\n}\n```\n\n### Catppuccin settings\n\nCatppuccin 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!\n\n```jsonc\n{\n  // use Mocha as the base\n  \"workbench.colorTheme\": \"Catppuccin Mocha\",\n  // pink as the accent color\n  \"catppuccin.accentColor\": \"pink\",\n  // make Mocha specifically very dark\n  // (this preserves other flavors!)\n  \"catppuccin.colorOverrides\": {\n    \"mocha\": {\n      \"base\": \"#000000\",\n      \"mantle\": \"#010101\",\n      \"crust\": \"#020202\",\n    },\n  },\n  // use your accent (pink) on the statusBar as well\n  \"catppuccin.customUIColors\": {\n    \"mocha\": {\n      \"statusBar.foreground\": \"accent\",\n    },\n  },\n}\n```\n\n\u003cdetails\u003e\n\u003csummary\u003e📸 Preview\u003c/summary\u003e\n\u003cimg width=\"1488\" alt=\"oldeppuccin-pink-accent\" src=\"https://user-images.githubusercontent.com/79978224/265295206-47d0c993-5d61-4e93-aa96-6d0d95a24f33.png\"\u003e\n\u003c/details\u003e\n\nTo see all available options, open your settings and look for `Extensions \u003e Catppuccin`.\n\n### Custom accent color\n\n`catppuccin.accentColor`\n\nYou can choose any color as your \"accent\" color. `mauve` is our default, but you can add more personality by using your favorite!\n\n### Disable italics \u0026 bold fonts\n\nYou can toggle whether to use\n\n- italics for keywords: `catppuccin.italicKeywords`\n- italics for comments: `catppuccin.italicComments`\n- bold for keywords: `catppuccin.boldKeywords`\n\n### Flat appearance\n\n`catppuccin.workbenchMode`\n\nBy default, Catppuccin for VSCode uses three shades of our `base` color for the workbench.\nFor example, in Mocha:\n\n- `base`: #1e1e2e - the editor background\n- `mantle`: \\#181825 - the sidebar\n- `crust`: #11111b - the activity bar, status bar, and title bar\n\n\u003cdetails\u003e\n\u003csummary\u003e📸 Preview\u003c/summary\u003e\n\u003cimg width=\"1488\" alt=\"default-mocha\" src=\"assets/mocha.webp\"\u003e\n\u003c/details\u003e\n\nIf you'd like a more flat look, you can change it to `flat`! This only uses `base` and `mantle`, reducing it to 2 shades:\n\n- `base`: #1e1e2e - the editor background\n- `mantle`: \\#181825 - the sidebar, the activity bar, status bar, and title bar\n\n\u003cdetails\u003e\n\u003csummary\u003e📸 Preview\u003c/summary\u003e\n\u003cimg width=\"1488\" alt=\"flat-mocha\" src=\"https://user-images.githubusercontent.com/79978224/265295217-e20e6195-2969-44db-aa57-8e901bc52817.png\"\u003e\n\u003c/details\u003e\n\nFor absolute minimalism, you can go with `minimal`; a single shade for the whole workbench.\n\n- This only uses `base` (#1e1e2e)\n\n\u003cdetails\u003e\n\u003csummary\u003e📸 Preview\u003c/summary\u003e\n\u003cimg width=\"1488\" alt=\"minimal-mocha\" src=\"https://user-images.githubusercontent.com/79978224/265295213-e04f74fc-48a2-4d3e-b379-5d5a4d15da8a.png\"\u003e\n\u003c/details\u003e\n\n### Paired Brackets\n\n`catppuccin.bracketMode`\n\nBy default, we use `red`, `peach`, `yellow`, `green`, `blue`, and `mauve` for matching bracket pairs. You can change that option if you want different colors:\n\n- `rainbow` is our default setting, using the colors described above.\n- `dimmed` uses the same rainbow colors, but muted by 20%.\n- `monochromatic` only uses grayish colors, from `subtext1` to `surface2`.\n- `neovim` uses the same colors that [`nvim-ts-rainbow`](https://github.com/p00f/nvim-ts-rainbow) uses in our [Neovim port](https://github.com/catppuccin/nvim).\n\n### Override palette colors\n\n`catppuccin.colorOverrides`\n\nColors can be overwritten in the JSON user settings, like so:\n\n```jsonc\n{\n  // ...your other settings...\n  \"catppuccin.colorOverrides\": {\n    // make text red red all flavors\n    \"all\": {\n      \"text\": \"#ff0000\",\n    },\n    // make Mocha \"OLEDppuccin\" - use black editor background\n    \"mocha\": {\n      \"base\": \"#000000\",\n      \"mantle\": \"#010101\",\n      \"crust\": \"#020202\",\n    },\n  },\n}\n```\n\n### Use palette colors on workbench elements (UI)\n\n`catppuccin.customUIColors`\n\nIf you want to customize where certain palette colors appear, you can change it like so:\n\n```jsonc\n{\n  \"catppuccin.customUIColors\": {\n    // make the breadcrumb \"text\" on \"overlay0\" for all flavors\n    \"all\": {\n      \"breadcrumb.background\": \"overlay0\",\n      \"breadcrumb.foreground\": \"text\",\n    },\n    // but for mocha, use \"crust\" on your currently selected accent.\n    \"mocha\": {\n      // \"accent\" selects your current accent color.\n      \"breadcrumb.background\": \"accent\",\n      \"breadcrumb.foreground\": \"crust\",\n      // you can use opacity, by specifying it after a space\n      // \"rosewater 0.5\" would mean 50% opacity, here it's 20%\n      \"minimap.background\": \"rosewater 0.2\",\n    },\n  },\n}\n```\n\nYou can find all the available keys [here](https://code.visualstudio.com/api/references/theme-color).\n\n\u003e [!Note]\n\u003e This respects your [color overrides](#override-palette-colors).\n\n## Extension Support\n\nCatppuccin for VSCode also themes the following extensions:\n\n- [ErrorLens](https://github.com/usernamehw/vscode-error-lens)\n- [GitHub Pull Requests and Issues](https://github.com/microsoft/vscode-pull-request-github)\n- [GitLens](https://github.com/gitkraken/vscode-gitlens)\n\n## Support\n\nIf you have any questions regarding this port, feel free to [open an issue](https://github.com/catppuccin/vscode/issues) or ask in [our Discord](https://discord.catppuccin.com), where we have a [dedicated forum](https://discord.com/channels/907385605422448742/1020275848940626002) for support.\n\n## Development\n\n1. Clone and open this repository in VSCode.\n2. Launch the \"Debug \u0026 Watch Files\" configuration from \"Run and Debug\". This\n   will spawn a new instance and also start a task watching the files in `./src`.\n   The watch task allows for the theme to be hot reloaded based on changes to the\n   TypeScript instead of the generated JSON.\n3. Make modifications in `./src` to see the changes immediately.\n\n## 💝 Thanks to\n\n**Current maintainers**\n\n- [backwardspy](https://github.com/backwardspy)\n\n**Contributions**\n\n- [Lichthagel](https://github.com/Lichthagel) - GitLens extension support\n- [suppayami](https://github.com/suppayami) - Workbench appearances\n\n**Previous maintainer(s)**\n\n- [ghostx31](https://github.com/ghostx31)\n- [VictorTennekes](https://github.com/VictorTennekes)\n- [winston](https://github.com/nekowinston)\n\n\u0026nbsp;\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/footers/gray0_ctp_on_line.png\" /\u003e\u003c/p\u003e\n\u003cp align=\"center\"\u003eCopyright \u0026copy; 2021-present \u003ca href=\"https://github.com/catppuccin\" target=\"_blank\"\u003eCatppuccin Org\u003c/a\u003e\n\u003cp align=\"center\"\u003e\u003ca href=\"https://github.com/catppuccin/catppuccin/blob/main/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/static/v1.svg?style=for-the-badge\u0026label=License\u0026message=MIT\u0026logoColor=d9e0ee\u0026colorA=363a4f\u0026colorB=b7bdf8\"/\u003e\u003c/a\u003e\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcatppuccin%2Fvscode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcatppuccin%2Fvscode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcatppuccin%2Fvscode/lists"}