├── .editorconfig ├── .eslintrc ├── .gitattributes ├── .github ├── release-please-config.json ├── release-please-manifest.json └── workflows │ ├── chromatic.yml │ ├── ci.yml │ └── release-please.yml ├── .gitignore ├── .husky ├── .gitignore └── pre-commit ├── .prettierignore ├── .vscode ├── extensions.json └── launch.json ├── LICENSE ├── README.md ├── assets ├── frappe.webp ├── latte.webp ├── macchiato.webp ├── mocha.webp └── preview.webp ├── flake.lock ├── flake.nix ├── package.json ├── packages ├── catppuccin-vsc-pack │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── icon.png │ └── package.json ├── catppuccin-vsc-storybook │ ├── .eslintrc │ ├── .npmrc │ ├── .storybook │ │ ├── main.ts │ │ ├── preview.ts │ │ └── style.css │ ├── LICENSE │ ├── package.json │ ├── stories │ │ └── CodePreview.stories.ts │ └── tsconfig.json ├── catppuccin-vsc-typegen │ ├── .eslintrc │ ├── LICENSE │ ├── package.json │ ├── types │ │ ├── errorlens.d.ts │ │ ├── github-pull-request.d.ts │ │ ├── gitlens.d.ts │ │ ├── textmate-colors.d.ts │ │ ├── token-styling.d.ts │ │ └── workbench-colors.d.ts │ └── update.ts ├── catppuccin-vsc │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── .vscodeignore │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── assets │ ├── build.ts │ ├── icon.png │ ├── package.json │ ├── schemas │ │ ├── colorOverrides.schema.json │ │ └── customUIColors.schema.json │ ├── src │ │ ├── browser.ts │ │ ├── hooks │ │ │ ├── constants.ts │ │ │ ├── generateThemes.ts │ │ │ ├── packageJson.ts │ │ │ └── updateSchemas.ts │ │ ├── main.ts │ │ ├── theme │ │ │ ├── extensions │ │ │ │ ├── error-lens.ts │ │ │ │ ├── github-pull-request.ts │ │ │ │ ├── gitlens.ts │ │ │ │ └── index.ts │ │ │ ├── index.ts │ │ │ ├── semanticTokens.ts │ │ │ ├── tokenColors.ts │ │ │ ├── tokens │ │ │ │ ├── cpp.ts │ │ │ │ ├── cs.ts │ │ │ │ ├── css.ts │ │ │ │ ├── data.ts │ │ │ │ ├── diff.ts │ │ │ │ ├── dotenv.ts │ │ │ │ ├── gdscript.ts │ │ │ │ ├── golang.ts │ │ │ │ ├── graphql.ts │ │ │ │ ├── html.ts │ │ │ │ ├── index.ts │ │ │ │ ├── java.ts │ │ │ │ ├── javascript.ts │ │ │ │ ├── julia.ts │ │ │ │ ├── latex.ts │ │ │ │ ├── liquid.ts │ │ │ │ ├── lua.ts │ │ │ │ ├── markdown.ts │ │ │ │ ├── nix.ts │ │ │ │ ├── php.ts │ │ │ │ ├── python.ts │ │ │ │ ├── regex.ts │ │ │ │ ├── rust.ts │ │ │ │ ├── shell.ts │ │ │ │ └── typst.ts │ │ │ ├── ui │ │ │ │ ├── azureDataStudio.ts │ │ │ │ ├── brackets.ts │ │ │ │ ├── customNames.ts │ │ │ │ ├── index.ts │ │ │ │ └── workbench.ts │ │ │ ├── uiColors.ts │ │ │ └── utils.ts │ │ ├── types │ │ │ └── index.d.ts │ │ └── utils.ts │ └── tsconfig.json └── catppuccin-vscode │ ├── .gitignore │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ ├── compile.ts │ └── index.ts │ ├── tsconfig.json │ └── tsup.config.js ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── renovate.json ├── shell.nix └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # EditorConfig is awesome: https://EditorConfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | charset = utf-8 9 | indent_size = 2 10 | indent_style = space 11 | end_of_line = lf 12 | insert_final_newline = true 13 | trim_trailing_whitespace = true 14 | 15 | # go 16 | [*.go] 17 | indent_style = tab 18 | indent_size = 4 19 | 20 | # python 21 | [*.{ini,py,py.tpl,rst}] 22 | indent_size = 4 23 | 24 | # rust 25 | [*.rs] 26 | indent_size = 4 27 | 28 | # documentation, utils 29 | [*.{md,mdx,diff}] 30 | trim_trailing_whitespace = false 31 | 32 | # windows shell scripts 33 | [*.{cmd,bat,ps1}] 34 | end_of_line = crlf 35 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "es2023": true, 4 | "node": true 5 | }, 6 | "extends": [ 7 | "eslint:recommended", 8 | "plugin:@typescript-eslint/recommended", 9 | "plugin:prettier/recommended", 10 | "plugin:unicorn/recommended" 11 | ], 12 | "parser": "@typescript-eslint/parser", 13 | "parserOptions": { 14 | "ecmaVersion": 2021 15 | }, 16 | "ignorePatterns": ["node_modules", "dist"], 17 | "plugins": ["@typescript-eslint", "prettier"], 18 | "rules": { 19 | "unicorn/filename-case": "off", 20 | "unicorn/prefer-module": "off", 21 | "unicorn/prefer-top-level-await": "off" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | .husky/** linguist-generated 3 | -------------------------------------------------------------------------------- /.github/release-please-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "bootstrap-sha": "55b3e5d6248eb201c0e16424ce6f345757e94bad", 3 | "packages": { 4 | "packages/catppuccin-vsc": { 5 | "component": "catppuccin-vsc" 6 | }, 7 | "packages/catppuccin-vsc-pack": { 8 | "component": "catppuccin-vsc-pack", 9 | "changelog-sections": [ 10 | { "type": "feat", "section": "Features" }, 11 | { "type": "fix", "section": "Bug Fixes" }, 12 | { "type": "perf", "section": "Performance Improvements" }, 13 | { "type": "revert", "section": "Reverts" }, 14 | { "type": "docs", "section": "Documentation" }, 15 | { "type": "style", "section": "Styles", "hidden": true }, 16 | { "type": "chore", "section": "Miscellaneous Chores", "hidden": true }, 17 | { "type": "refactor", "section": "Code Refactoring", "hidden": true }, 18 | { "type": "test", "section": "Tests", "hidden": true }, 19 | { "type": "build", "section": "Build System", "hidden": true }, 20 | { "type": "ci", "section": "Continuous Integration", "hidden": true } 21 | ] 22 | }, 23 | "packages/catppuccin-vscode": { 24 | "component": "@catppuccin/vscode" 25 | } 26 | }, 27 | "plugins": [ 28 | { 29 | "type": "linked-versions", 30 | "groupName": "theme", 31 | "components": ["catppuccin-vsc", "@catppuccin/vscode"] 32 | } 33 | ], 34 | "release-type": "node", 35 | "$schema": "https://raw.githubusercontent.com/googleapis/release-please/main/schemas/config.json" 36 | } 37 | -------------------------------------------------------------------------------- /.github/release-please-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "packages/catppuccin-vsc": "3.17.0", 3 | "packages/catppuccin-vsc-pack": "1.0.2", 4 | "packages/catppuccin-vscode": "3.17.0" 5 | } 6 | -------------------------------------------------------------------------------- /.github/workflows/chromatic.yml: -------------------------------------------------------------------------------- 1 | on: 2 | push: 3 | branches: [main] 4 | paths: 5 | - "packages/catppuccin-vsc/src/theme/**/*.ts" 6 | - "packages/catppuccin-vsc-storybook/**/*" 7 | pull_request: 8 | paths: 9 | - "packages/catppuccin-vsc/src/theme/**/*.ts" 10 | - "packages/catppuccin-vsc-storybook/**/*" 11 | 12 | name: "Chromatic" 13 | 14 | jobs: 15 | chromatic: 16 | runs-on: ubuntu-latest 17 | steps: 18 | - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4 19 | with: 20 | fetch-depth: 0 21 | - name: Install pnpm 22 | uses: pnpm/action-setup@v4 23 | - uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4 24 | with: 25 | node-version: 22 26 | cache: pnpm 27 | - run: pnpm i --frozen-lockfile 28 | 29 | - name: Publish to Chromatic 30 | uses: chromaui/action@649b4fd73c3f7cd7a65bd0b9f131349335ec661b # v11 31 | with: 32 | buildScriptName: storybook:build 33 | exitOnceUploaded: true 34 | projectToken: chpt_e3cba49738d7554 35 | workingDir: packages/catppuccin-vsc-storybook 36 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | on: 2 | push: 3 | branches: [main] 4 | pull_request: 5 | 6 | name: Lint & Build Artifact 7 | jobs: 8 | lint-and-build: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4 12 | - uses: pnpm/action-setup@v4 13 | - uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4 14 | with: 15 | node-version: 22 16 | cache: pnpm 17 | - run: pnpm i --frozen-lockfile 18 | 19 | - name: Lint 20 | run: pnpm lint 21 | 22 | - name: Build 23 | run: pnpm --filter catppuccin-vsc core:build 24 | 25 | - name: Upload Artifact 26 | uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4 27 | with: 28 | name: catppuccin-vsc-${{ github.sha }} 29 | path: packages/catppuccin-vsc/catppuccin-*.vsix 30 | -------------------------------------------------------------------------------- /.github/workflows/release-please.yml: -------------------------------------------------------------------------------- 1 | name: release-please 2 | 3 | on: 4 | push: 5 | branches: [main] 6 | workflow_dispatch: 7 | inputs: 8 | force-release-theme: 9 | description: "Force a release of catppuccin-vsc" 10 | default: false 11 | type: boolean 12 | rev: 13 | description: "The revision to clone for the release" 14 | default: "" 15 | type: string 16 | force-release-theme-tag: 17 | description: "The version to release catppuccin-vsc as" 18 | default: "" 19 | type: string 20 | force-release-pack: 21 | description: "Force a release of catppuccin-vsc-pack" 22 | default: false 23 | type: boolean 24 | force-release-npm: 25 | description: "Force a release of @catppuccin/vscode" 26 | default: false 27 | type: boolean 28 | 29 | jobs: 30 | release-please: 31 | permissions: 32 | contents: write 33 | pull-requests: write 34 | 35 | runs-on: ubuntu-latest 36 | 37 | steps: 38 | - uses: google-github-actions/release-please-action@e4dc86ba9405554aeba3c6bb2d169500e7d3b4ee # v4 39 | with: 40 | config-file: .github/release-please-config.json 41 | manifest-file: .github/release-please-manifest.json 42 | id: release 43 | 44 | outputs: 45 | theme_release: ${{ github.event.inputs.force-release-theme == 'true' || steps.release.outputs['packages/catppuccin-vsc--release_created'] == 'true' }} 46 | theme_tag: ${{ github.event.inputs.force-release-theme-tag || steps.release.outputs['packages/catppuccin-vsc--tag_name'] }} 47 | pack_release: ${{ github.event.inputs.force-release-pack == 'true' || steps.release.outputs['packages/catppuccin-vsc-pack--release_created'] == 'true' }} 48 | npm_release: ${{ github.event.inputs.force-release-npm == 'true' || steps.release.outputs['packages/catppuccin-vscode--release_created'] == 'true' }} 49 | 50 | release-vscode: 51 | permissions: 52 | contents: write 53 | 54 | runs-on: ubuntu-latest 55 | needs: release-please 56 | if: ${{ needs.release-please.outputs.theme_release == 'true' }} 57 | 58 | steps: 59 | - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4 60 | with: 61 | ref: ${{ github.event.inputs.rev || github.sha }} 62 | 63 | - uses: pnpm/action-setup@v4 64 | - uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4 65 | with: 66 | node-version: 22 67 | cache: pnpm 68 | - run: pnpm i --frozen-lockfile 69 | 70 | - name: Build VSCode 71 | id: build-vscode 72 | run: pnpm --filter catppuccin-vsc core:build 73 | 74 | - name: Publish to Visual Studio Marketplace 75 | working-directory: ./packages/catppuccin-vsc 76 | run: | 77 | npx @vscode/vsce publish --pat "${{ secrets.VS_MARKETPLACE_TOKEN }}" --packagePath "${{ steps.build-vscode.outputs.vsixPath }}" 78 | 79 | - name: Publish to Open VSX Registry 80 | working-directory: ./packages/catppuccin-vsc 81 | # continue even if OpenVSX fails 82 | # -> see https://github.com/catppuccin/vscode/issues/51 83 | continue-on-error: true 84 | timeout-minutes: 10 85 | run: | 86 | npx ovsx publish --pat "${{ secrets.OPEN_VSX_TOKEN }}" --packagePath "${{ steps.build-vscode.outputs.vsixPath }}" 87 | 88 | - name: Add files to GH Release 89 | working-directory: ./packages/catppuccin-vsc 90 | env: 91 | GH_TOKEN: ${{ github.token }} 92 | run: | 93 | gh release upload ${{ needs.release-please.outputs.theme_tag }} catppuccin-*.vsix 94 | 95 | release-pack: 96 | runs-on: ubuntu-latest 97 | needs: release-please 98 | if: ${{ needs.release-please.outputs.pack_release == 'true' }} 99 | 100 | steps: 101 | - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4 102 | - uses: pnpm/action-setup@v4 103 | - uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4 104 | with: 105 | node-version: 22 106 | cache: pnpm 107 | - run: pnpm i --frozen-lockfile 108 | 109 | - run: pnpm --filter catppuccin-vsc-pack pack:build 110 | 111 | - name: Publish to Visual Studio Marketplace 112 | working-directory: ./packages/catppuccin-vsc-pack 113 | run: | 114 | npx @vscode/vsce publish --pat "${{ secrets.VS_MARKETPLACE_TOKEN }}" --packagePath ./catppuccin-vsc-pack.vsix 115 | 116 | - name: Publish to Open VSX Registry 117 | working-directory: ./packages/catppuccin-vsc-pack 118 | # continue even if OpenVSX fails 119 | # -> see https://github.com/catppuccin/vscode/issues/51 120 | continue-on-error: true 121 | timeout-minutes: 10 122 | run: | 123 | npx ovsx publish --pat "${{ secrets.OPEN_VSX_TOKEN }}" --packagePath ./catppuccin-vsc-pack.vsix 124 | 125 | release-npm: 126 | permissions: 127 | id-token: write 128 | 129 | runs-on: ubuntu-latest 130 | needs: release-please 131 | if: ${{ needs.release-please.outputs.npm_release == 'true' }} 132 | 133 | steps: 134 | - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4 135 | - uses: pnpm/action-setup@v4 136 | - uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4 137 | with: 138 | node-version: 22 139 | cache: pnpm 140 | registry-url: https://registry.npmjs.org 141 | - run: pnpm i --frozen-lockfile 142 | 143 | - name: Publish compiled NPM package 144 | working-directory: ./packages/catppuccin-vscode 145 | env: 146 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 147 | run: pnpm publish 148 | 149 | mark-vscode-theme-as-latest: 150 | runs-on: ubuntu-latest 151 | 152 | # always run after all other jobs 153 | if: ${{ always() }} 154 | needs: 155 | - release-please 156 | - release-vscode 157 | - release-pack 158 | - release-npm 159 | 160 | steps: 161 | - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4 162 | if: ${{ needs.release-please.outputs.theme_release == 'true' }} 163 | - name: Mark VSCode theme release as latest release 164 | env: 165 | GH_TOKEN: ${{ github.token }} 166 | run: gh release edit ${{ needs.release-please.outputs.theme_tag }} --latest 167 | if: ${{ needs.release-please.outputs.theme_release == 'true' }} 168 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | result 3 | storybook-static/ 4 | .eslintcache 5 | *.tar 6 | *.tar.gz 7 | *.tgz 8 | *.vsix 9 | *.zip 10 | .vscode/ltex.dictionary* 11 | -------------------------------------------------------------------------------- /.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ 2 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | pnpm lint-staged 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | packages/*/themes/*.json 3 | CHANGELOG.md 4 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"] 3 | } 4 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "name": "Watch Files", 6 | "type": "node-terminal", 7 | "request": "launch", 8 | "command": "pnpm --filter catppuccin-vsc core:watch" 9 | }, 10 | { 11 | "name": "Debug Extension", 12 | "type": "extensionHost", 13 | "request": "launch", 14 | "args": [ 15 | "--extensionDevelopmentPath=${workspaceFolder}/packages/catppuccin-vsc" 16 | ], 17 | "outFiles": ["${workspaceFolder}/packages/catppuccin-vsc/dist/*.js"] 18 | } 19 | ], 20 | "compounds": [ 21 | { 22 | "name": "Debug & Watch Files", 23 | "configurations": ["Watch Files", "Debug Extension"], 24 | "stopAll": true 25 | } 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Catppuccin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | Logo
3 | 4 | Catppuccin for VSCode 5 | 6 |

7 | 8 |

9 | 10 | 11 | 12 |

13 | 14 |

15 | 16 |

17 | 18 | ## Previews 19 | 20 |
21 | 🌻 Latte 22 | 23 |
24 |
25 | 🪴 Frappé 26 | 27 |
28 |
29 | 🌺 Macchiato 30 | 31 |
32 |
33 | 🌿 Mocha 34 | 35 |
36 | 37 | ## Usage 38 | 39 | ### Preferred method of installation 40 | 41 | Install the extension from a Marketplace: 42 | 43 | - [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=Catppuccin.catppuccin-vsc) 44 | - [Open-VSX](https://open-vsx.org/extension/Catppuccin/catppuccin-vsc) 45 | 46 | ### Manual method for installation 47 | 48 | Download the VSIX from 49 | [the latest GitHub release](https://github.com/catppuccin/vscode/releases/latest). 50 | Open the Command Palette and select "Extensions: Install from VSIX...", then open the file you just downloaded. 51 | 52 | ### Using the JSON files 53 | 54 | If 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). 55 | 56 | ### Nix (Home-Manager) users 57 | 58 | If you would like to change the theme configuration, the theme expects to have a mutable directory to write its JSON files into. 59 | This means that you will have to either: 60 | 61 | - Install this extension in a non-declarative way so that the extension has permissions to write files.\ 62 | This means fully excluding `nixpkgs.vscode-extensions.catppuccin.catppuccin-vsc` from your configuration; Just using `programs.vscode.mutableExtensionsDir = true;` will **NOT WORK**. 63 | - Use our [catppuccin/nix](https://github.com/catppuccin/nix) module to build it with your VSCode configuration, using overrides.\ 64 | This is a declarative way to compile the theme with your preferred options. **Please refer to the example below for a sample configuration.** 65 | 66 | ```nix 67 | { 68 | # in your inputs: 69 | inputs.catppuccin.url = "github:catppuccin/nix"; 70 | 71 | # in your home-manager options: 72 | catppuccin = { 73 | enable = true; 74 | # optionally configure the extension settings, defaults are shown below: 75 | vscode = { 76 | accent = "mauve"; 77 | settings = { 78 | boldKeywords = true; 79 | italicComments = true; 80 | italicKeywords = true; 81 | colorOverrides = {}; 82 | customUIColors = {}; 83 | workbenchMode = "default"; 84 | bracketMode = "rainbow"; 85 | extraBordersEnabled = false; 86 | }; 87 | }; 88 | }; 89 | programs.vscode = { 90 | enable = true; 91 | }; 92 | } 93 | ``` 94 | 95 | ## Customization 96 | 97 | > [!Note] 98 | > We also have a [Catppuccin Icon Pack](https://marketplace.visualstudio.com/items?itemName=Catppuccin.catppuccin-vsc-icons)! 99 | 100 | ### VSCode settings 101 | 102 | The following settings inside your `settings.json` are recommended for this plugin: 103 | 104 | ```jsonc 105 | { 106 | // we try to make semantic highlighting look good 107 | "editor.semanticHighlighting.enabled": true, 108 | // prevent VSCode from modifying the terminal colors 109 | "terminal.integrated.minimumContrastRatio": 1, 110 | // make the window's titlebar use the workbench colors 111 | "window.titleBarStyle": "custom", 112 | 113 | // applicable if you use Go, this is an opt-in flag! 114 | "gopls": { 115 | "ui.semanticTokens": true, 116 | }, 117 | } 118 | ``` 119 | 120 | ### Catppuccin settings 121 | 122 | 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! 123 | 124 | ```jsonc 125 | { 126 | // use Mocha as the base 127 | "workbench.colorTheme": "Catppuccin Mocha", 128 | // pink as the accent color 129 | "catppuccin.accentColor": "pink", 130 | // make Mocha specifically very dark 131 | // (this preserves other flavors!) 132 | "catppuccin.colorOverrides": { 133 | "mocha": { 134 | "base": "#000000", 135 | "mantle": "#010101", 136 | "crust": "#020202", 137 | }, 138 | }, 139 | // use your accent (pink) on the statusBar as well 140 | "catppuccin.customUIColors": { 141 | "mocha": { 142 | "statusBar.foreground": "accent", 143 | }, 144 | }, 145 | } 146 | ``` 147 | 148 |
149 | 📸 Preview 150 | oldeppuccin-pink-accent 151 |
152 | 153 | To see all available options, open your settings and look for `Extensions > Catppuccin`. 154 | 155 | ### Custom accent color 156 | 157 | `catppuccin.accentColor` 158 | 159 | You can choose any color as your "accent" color. `mauve` is our default, but you can add more personality by using your favorite! 160 | 161 | ### Disable italics & bold fonts 162 | 163 | You can toggle whether to use 164 | 165 | - italics for keywords: `catppuccin.italicKeywords` 166 | - italics for comments: `catppuccin.italicComments` 167 | - bold for keywords: `catppuccin.boldKeywords` 168 | 169 | ### Flat appearance 170 | 171 | `catppuccin.workbenchMode` 172 | 173 | By default, Catppuccin for VSCode uses three shades of our `base` color for the workbench. 174 | For example, in Mocha: 175 | 176 | - `base`: #1e1e2e - the editor background 177 | - `mantle`: \#181825 - the sidebar 178 | - `crust`: #11111b - the activity bar, status bar, and title bar 179 | 180 |
181 | 📸 Preview 182 | default-mocha 183 |
184 | 185 | 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: 186 | 187 | - `base`: #1e1e2e - the editor background 188 | - `mantle`: \#181825 - the sidebar, the activity bar, status bar, and title bar 189 | 190 |
191 | 📸 Preview 192 | flat-mocha 193 |
194 | 195 | For absolute minimalism, you can go with `minimal`; a single shade for the whole workbench. 196 | 197 | - This only uses `base` (#1e1e2e) 198 | 199 |
200 | 📸 Preview 201 | minimal-mocha 202 |
203 | 204 | ### Paired Brackets 205 | 206 | `catppuccin.bracketMode` 207 | 208 | 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: 209 | 210 | - `rainbow` is our default setting, using the colors described above. 211 | - `dimmed` uses the same rainbow colors, but muted by 20%. 212 | - `monochromatic` only uses grayish colors, from `subtext1` to `surface2`. 213 | - `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). 214 | 215 | ### Override palette colors 216 | 217 | `catppuccin.colorOverrides` 218 | 219 | Colors can be overwritten in the JSON user settings, like so: 220 | 221 | ```jsonc 222 | { 223 | // ...your other settings... 224 | "catppuccin.colorOverrides": { 225 | // make text red red all flavors 226 | "all": { 227 | "text": "#ff0000", 228 | }, 229 | // make Mocha "OLEDppuccin" - use black editor background 230 | "mocha": { 231 | "base": "#000000", 232 | "mantle": "#010101", 233 | "crust": "#020202", 234 | }, 235 | }, 236 | } 237 | ``` 238 | 239 | ### Use palette colors on workbench elements (UI) 240 | 241 | `catppuccin.customUIColors` 242 | 243 | If you want to customize where certain palette colors appear, you can change it like so: 244 | 245 | ```jsonc 246 | { 247 | "catppuccin.customUIColors": { 248 | // make the breadcrumb "text" on "overlay0" for all flavors 249 | "all": { 250 | "breadcrumb.background": "overlay0", 251 | "breadcrumb.foreground": "text", 252 | }, 253 | // but for mocha, use "crust" on your currently selected accent. 254 | "mocha": { 255 | // "accent" selects your current accent color. 256 | "breadcrumb.background": "accent", 257 | "breadcrumb.foreground": "crust", 258 | // you can use opacity, by specifying it after a space 259 | // "rosewater 0.5" would mean 50% opacity, here it's 20% 260 | "minimap.background": "rosewater 0.2", 261 | }, 262 | }, 263 | } 264 | ``` 265 | 266 | You can find all the available keys [here](https://code.visualstudio.com/api/references/theme-color). 267 | 268 | > [!Note] 269 | > This respects your [color overrides](#override-palette-colors). 270 | 271 | ## Extension Support 272 | 273 | Catppuccin for VSCode also themes the following extensions: 274 | 275 | - [ErrorLens](https://github.com/usernamehw/vscode-error-lens) 276 | - [GitHub Pull Requests and Issues](https://github.com/microsoft/vscode-pull-request-github) 277 | - [GitLens](https://github.com/gitkraken/vscode-gitlens) 278 | 279 | ## Support 280 | 281 | If 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. 282 | 283 | ## Development 284 | 285 | 1. Clone and open this repository in VSCode. 286 | 2. Launch the "Debug & Watch Files" configuration from "Run and Debug". This 287 | will spawn a new instance and also start a task watching the files in `./src`. 288 | The watch task allows for the theme to be hot reloaded based on changes to the 289 | TypeScript instead of the generated JSON. 290 | 3. Make modifications in `./src` to see the changes immediately. 291 | 292 | ## 💝 Thanks to 293 | 294 | **Current maintainers** 295 | 296 | - [backwardspy](https://github.com/backwardspy) 297 | 298 | **Contributions** 299 | 300 | - [Lichthagel](https://github.com/Lichthagel) - GitLens extension support 301 | - [suppayami](https://github.com/suppayami) - Workbench appearances 302 | 303 | **Previous maintainer(s)** 304 | 305 | - [ghostx31](https://github.com/ghostx31) 306 | - [VictorTennekes](https://github.com/VictorTennekes) 307 | - [winston](https://github.com/nekowinston) 308 | 309 |   310 | 311 |

312 |

Copyright © 2021-present Catppuccin Org 313 |

314 | -------------------------------------------------------------------------------- /assets/frappe.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/vscode/67bd19a1d06ebda18bcc8a8902c1c5eb70bd01f8/assets/frappe.webp -------------------------------------------------------------------------------- /assets/latte.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/vscode/67bd19a1d06ebda18bcc8a8902c1c5eb70bd01f8/assets/latte.webp -------------------------------------------------------------------------------- /assets/macchiato.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/vscode/67bd19a1d06ebda18bcc8a8902c1c5eb70bd01f8/assets/macchiato.webp -------------------------------------------------------------------------------- /assets/mocha.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/vscode/67bd19a1d06ebda18bcc8a8902c1c5eb70bd01f8/assets/mocha.webp -------------------------------------------------------------------------------- /assets/preview.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/vscode/67bd19a1d06ebda18bcc8a8902c1c5eb70bd01f8/assets/preview.webp -------------------------------------------------------------------------------- /flake.lock: -------------------------------------------------------------------------------- 1 | { 2 | "nodes": { 3 | "nixpkgs": { 4 | "locked": { 5 | "lastModified": 1732837521, 6 | "narHash": "sha256-jNRNr49UiuIwaarqijgdTR2qLPifxsVhlJrKzQ8XUIE=", 7 | "owner": "NixOS", 8 | "repo": "nixpkgs", 9 | "rev": "970e93b9f82e2a0f3675757eb0bfc73297cc6370", 10 | "type": "github" 11 | }, 12 | "original": { 13 | "owner": "NixOS", 14 | "ref": "nixos-unstable", 15 | "repo": "nixpkgs", 16 | "type": "github" 17 | } 18 | }, 19 | "root": { 20 | "inputs": { 21 | "nixpkgs": "nixpkgs" 22 | } 23 | } 24 | }, 25 | "root": "root", 26 | "version": 7 27 | } 28 | -------------------------------------------------------------------------------- /flake.nix: -------------------------------------------------------------------------------- 1 | { 2 | inputs.nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable"; 3 | 4 | outputs = {nixpkgs, ...} @ inputs: let 5 | systems = ["aarch64-darwin" "aarch64-linux" "x86_64-darwin" "x86_64-linux"]; 6 | forAllSystems = fn: nixpkgs.lib.genAttrs systems (system: fn nixpkgs.legacyPackages.${system}); 7 | in { 8 | packages = forAllSystems (pkgs: rec { 9 | default = catppuccin-vsc; 10 | catppuccin-vsc = throw "catppuccin/vscode: This VSCode extension has been moved to catppuccin/nix."; 11 | }); 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@catppuccin/vscode-monorepo", 3 | "private": true, 4 | "license": "MIT", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/catppuccin/vscode.git", 8 | "directory": "." 9 | }, 10 | "bugs": { 11 | "url": "https://github.com/catppuccin/vscode/issues" 12 | }, 13 | "sponsor": { 14 | "url": "https://opencollective.com/catppuccin" 15 | }, 16 | "lint-staged": { 17 | "*.ts": "pnpm eslint --cache --fix", 18 | "*.{ts,json,md}": "pnpm prettier --write" 19 | }, 20 | "scripts": { 21 | "g:typecheck": "tsc --noEmit -p packages/catppuccin-vsc && tsc --noEmit -p packages/catppuccin-vsc-storybook", 22 | "lint": "eslint . --ext .ts \"$@\" && pnpm g:typecheck", 23 | "postinstall": "husky && pnpm --filter @catppuccin/vscode compiled:pack" 24 | }, 25 | "packageManager": "pnpm@10.10.0", 26 | "engines": { 27 | "node": ">=20.0.0" 28 | }, 29 | "devDependencies": { 30 | "@typescript-eslint/eslint-plugin": "^8.0.0", 31 | "@typescript-eslint/parser": "^8.0.0", 32 | "eslint-config-prettier": "^10.0.0", 33 | "eslint-plugin-prettier": "^5.1.3", 34 | "eslint-plugin-unicorn": "^52.0.0", 35 | "husky": "^9.0.11", 36 | "lint-staged": "^15.2.2", 37 | "prettier": "^3.2.5", 38 | "@tsconfig/node22": "catalog:", 39 | "@types/node": "catalog:", 40 | "@vscode/vsce": "catalog:", 41 | "eslint": "catalog:", 42 | "tsup": "catalog:", 43 | "tsx": "catalog:", 44 | "typescript": "catalog:" 45 | }, 46 | "dependenciesMeta": { 47 | "keytar": { 48 | "built": false 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc-pack/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## [1.0.2](https://github.com/catppuccin/vscode/compare/catppuccin-vsc-pack-v1.0.1...catppuccin-vsc-pack-v1.0.2) (2024-03-10) 4 | 5 | 6 | ### Documentation 7 | 8 | * JSDoc & other improvements/corrections ([#338](https://github.com/catppuccin/vscode/issues/338)) ([1ca9076](https://github.com/catppuccin/vscode/commit/1ca9076bba78dad492cd75819511b5bc08255974)) 9 | 10 | ## [1.0.1](https://github.com/catppuccin/vscode/compare/catppuccin-vsc-pack-v1.0.0...catppuccin-vsc-pack-v1.0.1) (2024-01-05) 11 | 12 | 13 | ### Documentation 14 | 15 | * fix URLs in title ([9449c7c](https://github.com/catppuccin/vscode/commit/9449c7c13c37aff544bee2bb97d69d97438623e3)) 16 | 17 | ## [1.0.0](https://github.com/catppuccin/vscode/compare/catppuccin-vsc-pack-v0.1.0...catppuccin-vsc-pack-v1.0.0) (2024-01-04) 18 | 19 | 20 | ### Features 21 | 22 | * add extension pack icon ([#268](https://github.com/catppuccin/vscode/issues/268)) ([b657b8a](https://github.com/catppuccin/vscode/commit/b657b8a100e8bffc26481b380c4005feca7edca1)) 23 | 24 | 25 | ### Continuous Integration 26 | 27 | * add extension pack to release please ([#258](https://github.com/catppuccin/vscode/issues/258)) ([c356e5a](https://github.com/catppuccin/vscode/commit/c356e5a1c62445f61dc78b0c662b4bbb99198313)) 28 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc-pack/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Catppuccin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc-pack/README.md: -------------------------------------------------------------------------------- 1 |

2 | Logo
3 | 4 | Catppuccin Extension Pack for VSCode 5 | 6 |

7 | 8 |

9 | 10 | 11 | 12 |

13 | 14 | This extension pack is a collection of all official [Catppuccin](https://github.com/catppuccin) extensions for VSCode. 15 | 16 | - [**Catppuccin** for VSCode](https://marketplace.visualstudio.com/items?itemName=Catppuccin.catppuccin-vsc) 17 | - [**Catppuccin Icons** for VSCode](https://marketplace.visualstudio.com/items?itemName=Catppuccin.catppuccin-vsc-icons) 18 | 19 | Please see the respective extensions for usage instructions & more information. 20 | 21 |   22 | 23 |

24 | 25 |

26 | 27 |

28 | Copyright © 2021-present Catppuccin Org 29 |

30 | 31 |

32 | 33 |

34 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc-pack/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/vscode/67bd19a1d06ebda18bcc8a8902c1c5eb70bd01f8/packages/catppuccin-vsc-pack/icon.png -------------------------------------------------------------------------------- /packages/catppuccin-vsc-pack/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "catppuccin-vsc-pack", 3 | "description": "Soothing pastel theme pack for VSCode", 4 | "version": "1.0.2", 5 | "displayName": "Catppuccin Pack", 6 | "publisher": "catppuccin", 7 | "icon": "icon.png", 8 | "private": true, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/catppuccin/vscode.git", 12 | "directory": "packages/catppuccin-vsc-pack" 13 | }, 14 | "engines": { 15 | "vscode": "^1.70.0", 16 | "node": ">=20.0.0" 17 | }, 18 | "categories": [ 19 | "Extension Packs" 20 | ], 21 | "extensionPack": [ 22 | "Catppuccin.catppuccin-vsc", 23 | "Catppuccin.catppuccin-vsc-icons" 24 | ], 25 | "devDependencies": { 26 | "@vscode/vsce": "catalog:" 27 | }, 28 | "scripts": { 29 | "pack:build": "vsce package --no-dependencies --out catppuccin-vsc-pack.vsix" 30 | }, 31 | "license": "MIT", 32 | "homepage": "https://github.com/catppuccin/vscode/tree/main/packages/catppuccin-vsc-pack#readme", 33 | "bugs": { 34 | "url": "https://github.com/catppuccin/vscode/issues" 35 | }, 36 | "sponsor": { 37 | "url": "https://opencollective.com/catppuccin" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc-storybook/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["plugin:storybook/recommended"] 3 | } 4 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc-storybook/.npmrc: -------------------------------------------------------------------------------- 1 | public-hoist-pattern[]=*storybook* -------------------------------------------------------------------------------- /packages/catppuccin-vsc-storybook/.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from "@storybook/web-components-vite"; 2 | import { mergeConfig } from "vite"; 3 | 4 | const config: StorybookConfig = { 5 | stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(ts|tsx)"], 6 | addons: ["@storybook/addon-essentials", "@storybook/addon-themes"], 7 | framework: { 8 | name: "@storybook/web-components-vite", 9 | options: {}, 10 | }, 11 | viteFinal: async (config) => { 12 | return mergeConfig(config, { 13 | // allow top level await 14 | build: { 15 | target: ["es2022", "edge89", "firefox89", "chrome89", "safari15"], 16 | }, 17 | // doesn't allow files served from yarn global cache (used for fontsource) 18 | server: { fs: { strict: false } }, 19 | }); 20 | }, 21 | }; 22 | export default config; 23 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc-storybook/.storybook/preview.ts: -------------------------------------------------------------------------------- 1 | import type { Preview } from "@storybook/web-components"; 2 | import { withThemeByClassName } from "@storybook/addon-themes"; 3 | import "@fontsource/jetbrains-mono/latin-400.css"; 4 | import "@fontsource/jetbrains-mono/latin-ext-400-italic.css"; 5 | import "./style.css"; 6 | 7 | const preview: Preview = { 8 | parameters: { 9 | viewport: { 10 | viewports: { 11 | xl: { name: "XL", styles: { width: "2400px" } }, 12 | }, 13 | }, 14 | layout: "fullscreen", 15 | }, 16 | decorators: [ 17 | withThemeByClassName({ 18 | themes: { 19 | latte: "latte", 20 | frappe: "frappe", 21 | macchiato: "macchiato", 22 | mocha: "mocha", 23 | }, 24 | defaultTheme: "mocha", 25 | }), 26 | ], 27 | }; 28 | 29 | export default preview; 30 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc-storybook/.storybook/style.css: -------------------------------------------------------------------------------- 1 | @import "@catppuccin/palette/css/catppuccin.css"; 2 | 3 | .shiki { 4 | font-family: "JetBrains Mono", monospace; 5 | font-size: 200%; 6 | } 7 | 8 | .mocha { 9 | background-color: var(--ctp-mocha-base); 10 | color: var(--ctp-mocha-text); 11 | } 12 | .macchiato { 13 | background-color: var(--ctp-macchiato-base); 14 | color: var(--ctp-macchiato-text); 15 | } 16 | .frappe { 17 | background-color: var(--ctp-frappe-base); 18 | color: var(--ctp-frappe-text); 19 | } 20 | .latte { 21 | background-color: var(--ctp-latte-base); 22 | color: var(--ctp-latte-text); 23 | } 24 | 25 | html.mocha .shiki, 26 | html.mocha .shiki span { 27 | background-color: var(--shiki-dark-bg) !important; 28 | color: var(--shiki-dark) !important; 29 | } 30 | html.macchiato .shiki, 31 | html.macchiato .shiki span { 32 | background-color: var(--shiki-macchiato-bg) !important; 33 | color: var(--shiki-macchiato) !important; 34 | } 35 | html.frappe .shiki, 36 | html.frappe .shiki span { 37 | background-color: var(--shiki-frappe-bg) !important; 38 | color: var(--shiki-frappe) !important; 39 | } 40 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc-storybook/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Catppuccin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc-storybook/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@catppuccin/vsc-storybook", 3 | "license": "MIT", 4 | "private": true, 5 | "devDependencies": { 6 | "@fontsource/jetbrains-mono": "^5.2.5", 7 | "@storybook/addon-essentials": "^8.6.7", 8 | "@storybook/addon-themes": "^8.6.7", 9 | "@storybook/blocks": "^8.6.7", 10 | "@storybook/web-components": "^8.6.7", 11 | "@storybook/web-components-vite": "^8.6.7", 12 | "chromatic": "^11.27.0", 13 | "eslint-plugin-storybook": "^0.12.0", 14 | "lit": "^3.2.1", 15 | "shiki": "^1.29.2", 16 | "storybook": "^8.6.7", 17 | "vite": "^6.0.0", 18 | "@catppuccin/palette": "catalog:", 19 | "@catppuccin/vscode": "workspace:*", 20 | "@tsconfig/node22": "catalog:", 21 | "@types/node": "catalog:", 22 | "eslint": "catalog:", 23 | "tsx": "catalog:", 24 | "typescript": "catalog:" 25 | }, 26 | "scripts": { 27 | "storybook:chromatic": "chromatic --exit-zero-on-changes --exit-once-uploaded --project-token chpt_e3cba49738d7554", 28 | "storybook:build": "pnpm --filter catppuccin-vsc core:build && storybook build", 29 | "storybook:dev": "storybook dev -p 6006" 30 | }, 31 | "engines": { 32 | "node": ">=20.0.0" 33 | }, 34 | "repository": { 35 | "type": "git", 36 | "url": "https://github.com/catppuccin/vscode.git", 37 | "directory": "packages/catppuccin-vsc-storybook" 38 | }, 39 | "homepage": "https://github.com/catppuccin/vscode/tree/main/packages/catppuccin-vsc-storybook#readme", 40 | "bugs": { 41 | "url": "https://github.com/catppuccin/vscode/issues" 42 | }, 43 | "sponsor": { 44 | "url": "https://opencollective.com/catppuccin" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc-storybook/stories/CodePreview.stories.ts: -------------------------------------------------------------------------------- 1 | import { getHighlighter, type ThemeInput } from "shiki"; 2 | import { latte, frappe, macchiato, mocha } from "@catppuccin/vscode"; 3 | import type { Meta, StoryObj } from "@storybook/web-components"; 4 | import { html, unsafeStatic } from "lit/static-html.js"; 5 | 6 | type CodePreviewProperties = { 7 | code: string; 8 | lang: string; 9 | }; 10 | 11 | const highlighter = await getHighlighter({ 12 | themes: [latte, frappe, macchiato, mocha] as unknown[] as ThemeInput[], 13 | langs: [ 14 | "bash", 15 | "coffeescript", 16 | "cpp", 17 | "csharp", 18 | "css", 19 | "d", 20 | "dart", 21 | "diff", 22 | "gdscript", 23 | "go", 24 | "haskell", 25 | "html", 26 | "java", 27 | "javascript", 28 | "json", 29 | "jsx", 30 | "kotlin", 31 | "liquid", 32 | "lua", 33 | "markdown", 34 | "nix", 35 | "php", 36 | "python", 37 | "r", 38 | "rust", 39 | "scala", 40 | "sql", 41 | "svelte", 42 | "toml", 43 | "typescript", 44 | "yaml", 45 | ], 46 | }); 47 | 48 | const meta: Meta = { 49 | title: "Syntax", 50 | parameters: { 51 | layout: "fullscreen", 52 | chromatic: { 53 | modes: { 54 | dark: { 55 | viewport: "xl", 56 | theme: "mocha", 57 | }, 58 | light: { 59 | viewport: "xl", 60 | theme: "latte", 61 | }, 62 | }, 63 | }, 64 | }, 65 | }; 66 | 67 | export default meta; 68 | type Story = StoryObj; 69 | 70 | const StoryBuilder = async ({ 71 | file, 72 | lang, 73 | }: { 74 | file: string; 75 | lang: string; 76 | }): Promise => { 77 | const code = await fetch( 78 | `https://raw.githubusercontent.com/catppuccin/catppuccin/main/samples/${file}`, 79 | ).then((response) => response.text()); 80 | 81 | const codeHtml = highlighter.codeToHtml(code, { 82 | lang, 83 | themes: { 84 | light: "catppuccin-latte", 85 | frappe: "catppuccin-frappe", 86 | macchiato: "catppuccin-macchiato", 87 | dark: "catppuccin-mocha", 88 | }, 89 | }); 90 | 91 | return { 92 | args: { 93 | code: `https://raw.githubusercontent.com/catppuccin/catppuccin/main/samples/${file}`, 94 | lang, 95 | }, 96 | render: () => html` 97 |
98 |
99 | ${unsafeStatic(codeHtml)} 100 |
101 |
102 | `, 103 | }; 104 | }; 105 | 106 | export const Bash = await StoryBuilder({ lang: "bash", file: "bash.sh" }); 107 | export const Coffeescript = await StoryBuilder({ 108 | lang: "coffee", 109 | file: "coffeescript.coffee", 110 | }); 111 | export const Cpp = await StoryBuilder({ lang: "cpp", file: "cpp.cpp" }); 112 | export const Cs = await StoryBuilder({ lang: "csharp", file: "cs.cs" }); 113 | export const Css = await StoryBuilder({ lang: "css", file: "css.css" }); 114 | export const D = await StoryBuilder({ lang: "d", file: "d.d" }); 115 | export const Dart = await StoryBuilder({ lang: "dart", file: "dart.dart" }); 116 | export const Diff = await StoryBuilder({ lang: "diff", file: "diff.diff" }); 117 | export const GDScript = await StoryBuilder({ 118 | lang: "gdscript", 119 | file: "gdscript.gd", 120 | }); 121 | export const Go = await StoryBuilder({ lang: "go", file: "go.go" }); 122 | export const Haskell = await StoryBuilder({ 123 | lang: "haskell", 124 | file: "haskell.hs", 125 | }); 126 | export const Html = await StoryBuilder({ lang: "html", file: "html.html" }); 127 | export const Java = await StoryBuilder({ lang: "java", file: "java.java" }); 128 | export const JavaScript = await StoryBuilder({ 129 | lang: "javascript", 130 | file: "javascript.js", 131 | }); 132 | export const Json = await StoryBuilder({ lang: "json", file: "json.json" }); 133 | export const JSX = await StoryBuilder({ lang: "jsx", file: "jsx.jsx" }); 134 | export const Kotlin = await StoryBuilder({ lang: "kotlin", file: "kotlin.kt" }); 135 | export const Liquid = await StoryBuilder({ 136 | lang: "liquid", 137 | file: "liquid.liquid", 138 | }); 139 | export const Lua = await StoryBuilder({ lang: "lua", file: "lua.lua" }); 140 | export const Markdown = await StoryBuilder({ 141 | lang: "markdown", 142 | file: "markdown.md", 143 | }); 144 | export const Nix = await StoryBuilder({ lang: "nix", file: "nix.nix" }); 145 | export const Php = await StoryBuilder({ lang: "php", file: "php.php" }); 146 | export const Python = await StoryBuilder({ lang: "python", file: "python.py" }); 147 | export const R = await StoryBuilder({ lang: "r", file: "r.r" }); 148 | export const Rust = await StoryBuilder({ lang: "rust", file: "rust.rs" }); 149 | export const Scala = await StoryBuilder({ lang: "scala", file: "scala.scala" }); 150 | export const Sql = await StoryBuilder({ lang: "sql", file: "sql.sql" }); 151 | export const Svelte = await StoryBuilder({ 152 | lang: "svelte", 153 | file: "svelte.svelte", 154 | }); 155 | export const Toml = await StoryBuilder({ lang: "toml", file: "toml.toml" }); 156 | export const Typescript = await StoryBuilder({ 157 | lang: "typescript", 158 | file: "typescript.ts", 159 | }); 160 | export const Yaml = await StoryBuilder({ lang: "yaml", file: "yaml.yaml" }); 161 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc-storybook/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "lib": ["DOM"] 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc-typegen/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | // using Node APIs here is fine 4 | "no-restricted-imports": "off", 5 | "no-restricted-modules": "off" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc-typegen/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Catppuccin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc-typegen/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@catppuccin/vsc-typegen", 3 | "license": "MIT", 4 | "private": true, 5 | "devDependencies": { 6 | "json-schema-to-typescript": "^15.0.4", 7 | "tsx": "catalog:", 8 | "typescript": "catalog:" 9 | }, 10 | "scripts": { 11 | "typegen:update": "tsx update.ts" 12 | }, 13 | "engines": { 14 | "node": ">=20.0.0" 15 | }, 16 | "repository": { 17 | "type": "git", 18 | "url": "https://github.com/catppuccin/vscode.git", 19 | "directory": "packages/catppuccin-vsc-typegen" 20 | }, 21 | "homepage": "https://github.com/catppuccin/vscode/tree/main/packages/catppuccin-vsc-typegen#readme", 22 | "bugs": { 23 | "url": "https://github.com/catppuccin/vscode/issues" 24 | }, 25 | "sponsor": { 26 | "url": "https://opencollective.com/catppuccin" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc-typegen/types/errorlens.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file was automatically generated. 3 | * DO NOT MODIFY IT BY HAND. 4 | * Instead, run `pnpm --filter @catppuccin/vsc-typegen typegen:update` to regenerate this file. 5 | */ 6 | export interface ErrorLensColors { 7 | /** 8 | * Background color of the entire line containing error. 9 | */ 10 | "errorLens.errorBackground": string; 11 | 12 | /** 13 | * Background color of the error message. 14 | */ 15 | "errorLens.errorMessageBackground": string; 16 | 17 | /** 18 | * Background color of the error range (when errorLens.problemRangeDecorationEnabled setting enabled). 19 | */ 20 | "errorLens.errorRangeBackground": string; 21 | 22 | /** 23 | * Background color of the entire line containing error (Only in light themes). 24 | */ 25 | "errorLens.errorBackgroundLight": string; 26 | 27 | /** 28 | * Text color used to highlight lines containing errors. 29 | */ 30 | "errorLens.errorForeground": string; 31 | 32 | /** 33 | * Text color used to highlight lines containing errors (Only in light themes). 34 | */ 35 | "errorLens.errorForegroundLight": string; 36 | 37 | /** 38 | * Background color used to highlight lines containing warnings. 39 | */ 40 | "errorLens.warningBackground": string; 41 | 42 | /** 43 | * Background color of the warning message. 44 | */ 45 | "errorLens.warningMessageBackground": string; 46 | 47 | /** 48 | * Background color of the warning range (when errorLens.problemRangeDecorationEnabled setting enabled). 49 | */ 50 | "errorLens.warningRangeBackground": string; 51 | 52 | /** 53 | * Background color used to highlight lines containing warnings (Only in light themes). 54 | */ 55 | "errorLens.warningBackgroundLight": string; 56 | 57 | /** 58 | * Text color used to highlight lines containing warnings. 59 | */ 60 | "errorLens.warningForeground": string; 61 | 62 | /** 63 | * Text color used to highlight lines containing warnings (Only in light themes). 64 | */ 65 | "errorLens.warningForegroundLight": string; 66 | 67 | /** 68 | * Background color used to highlight lines containing info. 69 | */ 70 | "errorLens.infoBackground": string; 71 | 72 | /** 73 | * Background color of the info message. 74 | */ 75 | "errorLens.infoMessageBackground": string; 76 | 77 | /** 78 | * Background color of the info range (when errorLens.problemRangeDecorationEnabled setting enabled). 79 | */ 80 | "errorLens.infoRangeBackground": string; 81 | 82 | /** 83 | * Background color used to highlight lines containing info (Only in light themes). 84 | */ 85 | "errorLens.infoBackgroundLight": string; 86 | 87 | /** 88 | * Text color used to highlight lines containing info. 89 | */ 90 | "errorLens.infoForeground": string; 91 | 92 | /** 93 | * Text color used to highlight lines containing info (Only in light themes). 94 | */ 95 | "errorLens.infoForegroundLight": string; 96 | 97 | /** 98 | * Background color used to highlight lines containing hints. 99 | */ 100 | "errorLens.hintBackground": string; 101 | 102 | /** 103 | * Background color of the hint message. 104 | */ 105 | "errorLens.hintMessageBackground": string; 106 | 107 | /** 108 | * Background color of the hint range (when errorLens.problemRangeDecorationEnabled setting enabled). 109 | */ 110 | "errorLens.hintRangeBackground": string; 111 | 112 | /** 113 | * Background color used to highlight lines containing hints (Only in light themes). 114 | */ 115 | "errorLens.hintBackgroundLight": string; 116 | 117 | /** 118 | * Text color used to highlight lines containing hints. 119 | */ 120 | "errorLens.hintForeground": string; 121 | 122 | /** 123 | * Text color used to highlight lines containing hints (Only in light themes). 124 | */ 125 | "errorLens.hintForegroundLight": string; 126 | 127 | /** 128 | * Status bar icon item error color. Foreground is used when the `errorLens.statusBarIconsUseBackground` setting is disabled. 129 | */ 130 | "errorLens.statusBarIconErrorForeground": string; 131 | 132 | /** 133 | * Status bar icon item error color. Foreground is used when the `errorLens.statusBarIconsUseBackground` setting is disabled. 134 | */ 135 | "errorLens.statusBarIconWarningForeground": string; 136 | 137 | /** 138 | * Status bar item error color. 139 | */ 140 | "errorLens.statusBarErrorForeground": string; 141 | 142 | /** 143 | * Status bar item warning color. 144 | */ 145 | "errorLens.statusBarWarningForeground": string; 146 | 147 | /** 148 | * Status bar item info color. 149 | */ 150 | "errorLens.statusBarInfoForeground": string; 151 | 152 | /** 153 | * Status bar item hint color. 154 | */ 155 | "errorLens.statusBarHintForeground": string; 156 | } 157 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc-typegen/types/github-pull-request.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file was automatically generated. 3 | * DO NOT MODIFY IT BY HAND. 4 | * Instead, run `pnpm --filter @catppuccin/vsc-typegen typegen:update` to regenerate this file. 5 | */ 6 | export interface GitHubPullRequestColors { 7 | /** 8 | * The color used for the assignees and labels fields in a new issue editor. 9 | */ 10 | "issues.newIssueDecoration": string; 11 | 12 | /** 13 | * The color used for indicating that an issue is open. 14 | */ 15 | "issues.open": string; 16 | 17 | /** 18 | * The color used for indicating that an issue is closed. 19 | */ 20 | "issues.closed": string; 21 | 22 | /** 23 | * The color used for indicating that a pull request is merged. 24 | */ 25 | "pullRequests.merged": string; 26 | 27 | /** 28 | * The color used for indicating that a pull request is a draft. 29 | */ 30 | "pullRequests.draft": string; 31 | 32 | /** 33 | * The color used for indicating that a pull request is open. 34 | */ 35 | "pullRequests.open": string; 36 | 37 | /** 38 | * The color used for indicating that a pull request is closed. 39 | */ 40 | "pullRequests.closed": string; 41 | 42 | /** 43 | * The color used for indicating a notification on a pull request 44 | */ 45 | "pullRequests.notification": string; 46 | } 47 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc-typegen/types/gitlens.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file was automatically generated. 3 | * DO NOT MODIFY IT BY HAND. 4 | * Instead, run `pnpm --filter @catppuccin/vsc-typegen typegen:update` to regenerate this file. 5 | */ 6 | export interface GitLensColors { 7 | /** 8 | * Specifies the background color of the file blame annotations 9 | */ 10 | "gitlens.gutterBackgroundColor": string; 11 | 12 | /** 13 | * Specifies the foreground color of the file blame annotations 14 | */ 15 | "gitlens.gutterForegroundColor": string; 16 | 17 | /** 18 | * Specifies the foreground color of an uncommitted line in the file blame annotations 19 | */ 20 | "gitlens.gutterUncommittedForegroundColor": string; 21 | 22 | /** 23 | * Specifies the background color of the inline blame annotation for the current line 24 | */ 25 | "gitlens.trailingLineBackgroundColor": string; 26 | 27 | /** 28 | * Specifies the foreground color of the inline blame annotation for the current line 29 | */ 30 | "gitlens.trailingLineForegroundColor": string; 31 | 32 | /** 33 | * Specifies the background color of the associated line highlights in blame annotations 34 | */ 35 | "gitlens.lineHighlightBackgroundColor": string; 36 | 37 | /** 38 | * Specifies the scroll bar color of the associated line highlights in blame annotations 39 | */ 40 | "gitlens.lineHighlightOverviewRulerColor": string; 41 | 42 | /** 43 | * Specifies the icon color of open issues in the GitLens views 44 | */ 45 | "gitlens.openAutolinkedIssueIconColor": string; 46 | 47 | /** 48 | * Specifies the icon color of closed issues in the GitLens views 49 | */ 50 | "gitlens.closedAutolinkedIssueIconColor": string; 51 | 52 | /** 53 | * Specifies the icon color of closed pull requests in the GitLens views 54 | */ 55 | "gitlens.closedPullRequestIconColor": string; 56 | 57 | /** 58 | * Specifies the icon color of open pull requests in the GitLens views 59 | */ 60 | "gitlens.openPullRequestIconColor": string; 61 | 62 | /** 63 | * Specifies the icon color of merged pull requests in the GitLens views 64 | */ 65 | "gitlens.mergedPullRequestIconColor": string; 66 | 67 | /** 68 | * Specifies the icon color of unpublished changes in the GitLens views 69 | */ 70 | "gitlens.unpublishedChangesIconColor": string; 71 | 72 | /** 73 | * Specifies the icon color of unpublished commits in the GitLens views 74 | */ 75 | "gitlens.unpublishedCommitIconColor": string; 76 | 77 | /** 78 | * Specifies the icon color of unpulled changes in the GitLens views 79 | */ 80 | "gitlens.unpulledChangesIconColor": string; 81 | 82 | /** 83 | * Specifies the decoration foreground color of added files 84 | */ 85 | "gitlens.decorations.addedForegroundColor": string; 86 | 87 | /** 88 | * Specifies the decoration foreground color of copied files 89 | */ 90 | "gitlens.decorations.copiedForegroundColor": string; 91 | 92 | /** 93 | * Specifies the decoration foreground color of deleted files 94 | */ 95 | "gitlens.decorations.deletedForegroundColor": string; 96 | 97 | /** 98 | * Specifies the decoration foreground color of ignored files 99 | */ 100 | "gitlens.decorations.ignoredForegroundColor": string; 101 | 102 | /** 103 | * Specifies the decoration foreground color of modified files 104 | */ 105 | "gitlens.decorations.modifiedForegroundColor": string; 106 | 107 | /** 108 | * Specifies the decoration foreground color of untracked files 109 | */ 110 | "gitlens.decorations.untrackedForegroundColor": string; 111 | 112 | /** 113 | * Specifies the decoration foreground color of renamed files 114 | */ 115 | "gitlens.decorations.renamedForegroundColor": string; 116 | 117 | /** 118 | * Specifies the decoration foreground color of branches that are ahead of their upstream 119 | */ 120 | "gitlens.decorations.branchAheadForegroundColor": string; 121 | 122 | /** 123 | * Specifies the decoration foreground color of branches that are behind their upstream 124 | */ 125 | "gitlens.decorations.branchBehindForegroundColor": string; 126 | 127 | /** 128 | * Specifies the decoration foreground color of branches that are both ahead and behind their upstream 129 | */ 130 | "gitlens.decorations.branchDivergedForegroundColor": string; 131 | 132 | /** 133 | * Specifies the decoration foreground color of branches that are up to date with their upstream 134 | */ 135 | "gitlens.decorations.branchUpToDateForegroundColor": string; 136 | 137 | /** 138 | * Specifies the decoration foreground color of branches that are not yet published to an upstream 139 | */ 140 | "gitlens.decorations.branchUnpublishedForegroundColor": string; 141 | 142 | /** 143 | * Specifies the decoration foreground color of branches that have a missing upstream 144 | */ 145 | "gitlens.decorations.branchMissingUpstreamForegroundColor": string; 146 | 147 | /** 148 | * Specifies the decoration foreground color of the status during a rebase operation with conflicts 149 | */ 150 | "gitlens.decorations.statusMergingOrRebasingConflictForegroundColor": string; 151 | 152 | /** 153 | * Specifies the decoration foreground color of the status during a rebase operation 154 | */ 155 | "gitlens.decorations.statusMergingOrRebasingForegroundColor": string; 156 | 157 | /** 158 | * Specifies the decoration foreground color of workspace repos which are missing a local path 159 | */ 160 | "gitlens.decorations.workspaceRepoMissingForegroundColor": string; 161 | 162 | /** 163 | * Specifies the decoration foreground color of workspaces which are currently open as a Code Workspace file 164 | */ 165 | "gitlens.decorations.workspaceCurrentForegroundColor": string; 166 | 167 | /** 168 | * Specifies the decoration foreground color of workspace repos which are open in the current workspace 169 | */ 170 | "gitlens.decorations.workspaceRepoOpenForegroundColor": string; 171 | 172 | /** 173 | * Specifies the decoration foreground color for worktrees that have uncommitted changes 174 | */ 175 | "gitlens.decorations.worktreeHasUncommittedChangesForegroundColor": string; 176 | 177 | /** 178 | * Specifies the decoration foreground color for worktrees cannot be found on disk 179 | */ 180 | "gitlens.decorations.worktreeMissingForegroundColor": string; 181 | 182 | /** 183 | * Specifies the color for the first commit lane of the _Commit Graph_ visualization 184 | */ 185 | "gitlens.graphLane1Color": string; 186 | 187 | /** 188 | * Specifies the color for the second commit lane of the _Commit Graph_ visualization 189 | */ 190 | "gitlens.graphLane2Color": string; 191 | 192 | /** 193 | * Specifies the color for the third commit lane of the _Commit Graph_ visualization 194 | */ 195 | "gitlens.graphLane3Color": string; 196 | 197 | /** 198 | * Specifies the color for the fourth commit lane of the _Commit Graph_ visualization 199 | */ 200 | "gitlens.graphLane4Color": string; 201 | 202 | /** 203 | * Specifies the color for the fifth commit lane of the _Commit Graph_ visualization 204 | */ 205 | "gitlens.graphLane5Color": string; 206 | 207 | /** 208 | * Specifies the color for the sixth commit lane of the _Commit Graph_ visualization 209 | */ 210 | "gitlens.graphLane6Color": string; 211 | 212 | /** 213 | * Specifies the color for the seventh commit lane of the _Commit Graph_ visualization 214 | */ 215 | "gitlens.graphLane7Color": string; 216 | 217 | /** 218 | * Specifies the color for the eighth commit lane of the _Commit Graph_ visualization 219 | */ 220 | "gitlens.graphLane8Color": string; 221 | 222 | /** 223 | * Specifies the color for the ninth commit lane of the _Commit Graph_ visualization 224 | */ 225 | "gitlens.graphLane9Color": string; 226 | 227 | /** 228 | * Specifies the color for the tenth commit lane of the _Commit Graph_ visualization 229 | */ 230 | "gitlens.graphLane10Color": string; 231 | 232 | /** 233 | * Specifies the color for denoting lines added in the _Changes_ column on the _Commit Graph_ 234 | */ 235 | "gitlens.graphChangesColumnAddedColor": string; 236 | 237 | /** 238 | * Specifies the color for denoting lines deleted in the _Changes_ column on the _Commit Graph_ 239 | */ 240 | "gitlens.graphChangesColumnDeletedColor": string; 241 | 242 | /** 243 | * Specifies the color marking HEAD on the minimap of the _Commit Graph_ 244 | */ 245 | "gitlens.graphMinimapMarkerHeadColor": string; 246 | 247 | /** 248 | * Specifies the color marking HEAD on the scrollbar of the _Commit Graph_ 249 | */ 250 | "gitlens.graphScrollMarkerHeadColor": string; 251 | 252 | /** 253 | * Specifies the color marking HEAD's upstream on the minimap of the _Commit Graph_ 254 | */ 255 | "gitlens.graphMinimapMarkerUpstreamColor": string; 256 | 257 | /** 258 | * Specifies the color marking HEAD's upstream on the scrollbar of the _Commit Graph_ 259 | */ 260 | "gitlens.graphScrollMarkerUpstreamColor": string; 261 | 262 | /** 263 | * Specifies the color marking highlights (matches) on the minimap of the _Commit Graph_ 264 | */ 265 | "gitlens.graphMinimapMarkerHighlightsColor": string; 266 | 267 | /** 268 | * Specifies the color marking highlights (matches) on the scrollbar of the _Commit Graph_ 269 | */ 270 | "gitlens.graphScrollMarkerHighlightsColor": string; 271 | 272 | /** 273 | * Specifies the color marking local branches on the minimap of the _Commit Graph_ 274 | */ 275 | "gitlens.graphMinimapMarkerLocalBranchesColor": string; 276 | 277 | /** 278 | * Specifies the color marking local branches on the scrollbar of the _Commit Graph_ 279 | */ 280 | "gitlens.graphScrollMarkerLocalBranchesColor": string; 281 | 282 | /** 283 | * Specifies the color marking pull requests on the minimap of the _Commit Graph_ 284 | */ 285 | "gitlens.graphMinimapMarkerPullRequestsColor": string; 286 | 287 | /** 288 | * Specifies the color marking pull requests on the scrollbar of the _Commit Graph_ 289 | */ 290 | "gitlens.graphScrollMarkerPullRequestsColor": string; 291 | 292 | /** 293 | * Specifies the color marking remote branches on the minimap of the _Commit Graph_ 294 | */ 295 | "gitlens.graphMinimapMarkerRemoteBranchesColor": string; 296 | 297 | /** 298 | * Specifies the color marking remote branches on the scrollbar of the _Commit Graph_ 299 | */ 300 | "gitlens.graphScrollMarkerRemoteBranchesColor": string; 301 | 302 | /** 303 | * Specifies the color marking stashes on the minimap of the _Commit Graph_ 304 | */ 305 | "gitlens.graphMinimapMarkerStashesColor": string; 306 | 307 | /** 308 | * Specifies the color marking stashes on the scrollbar of the _Commit Graph_ 309 | */ 310 | "gitlens.graphScrollMarkerStashesColor": string; 311 | 312 | /** 313 | * Specifies the color marking tags on the minimap of the _Commit Graph_ 314 | */ 315 | "gitlens.graphMinimapMarkerTagsColor": string; 316 | 317 | /** 318 | * Specifies the color marking tags on the scrollbar of the _Commit Graph_ 319 | */ 320 | "gitlens.graphScrollMarkerTagsColor": string; 321 | 322 | /** 323 | * Specifies the color of the _Launchpad_ indicator icon when the priority is mergeable 324 | */ 325 | "gitlens.launchpadIndicatorMergeableColor": string; 326 | 327 | /** 328 | * Specifies the color of the _Launchpad_ indicator icon in the hover when the priority is mergeable 329 | */ 330 | "gitlens.launchpadIndicatorMergeableHoverColor": string; 331 | 332 | /** 333 | * Specifies the color of the _Launchpad_ indicator icon when the priority is blocked 334 | */ 335 | "gitlens.launchpadIndicatorBlockedColor": string; 336 | 337 | /** 338 | * Specifies the color of the _Launchpad_ indicator icon in the hover when the priority is blocked 339 | */ 340 | "gitlens.launchpadIndicatorBlockedHoverColor": string; 341 | 342 | /** 343 | * Specifies the color of the _Launchpad_ indicator icon when the priority is follow-up or needs review 344 | */ 345 | "gitlens.launchpadIndicatorAttentionColor": string; 346 | 347 | /** 348 | * Specifies the color of the _Launchpad_ indicator icon in the hover when the priority is follow-up or needs review 349 | */ 350 | "gitlens.launchpadIndicatorAttentionHoverColor": string; 351 | } 352 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc-typegen/types/textmate-colors.d.ts: -------------------------------------------------------------------------------- 1 | export type _1 = 2 | | "comment" 3 | | "comment.block" 4 | | "comment.block.documentation" 5 | | "comment.line" 6 | | "constant" 7 | | "constant.character" 8 | | "constant.character.escape" 9 | | "constant.numeric" 10 | | "constant.numeric.integer" 11 | | "constant.numeric.float" 12 | | "constant.numeric.hex" 13 | | "constant.numeric.octal" 14 | | "constant.other" 15 | | "constant.regexp" 16 | | "constant.rgb-value" 17 | | "emphasis" 18 | | "entity" 19 | | "entity.name" 20 | | "entity.name.class" 21 | | "entity.name.function" 22 | | "entity.name.method" 23 | | "entity.name.section" 24 | | "entity.name.selector" 25 | | "entity.name.tag" 26 | | "entity.name.type" 27 | | "entity.other" 28 | | "entity.other.attribute-name" 29 | | "entity.other.inherited-class" 30 | | "invalid" 31 | | "invalid.deprecated" 32 | | "invalid.illegal" 33 | | "keyword" 34 | | "keyword.control" 35 | | "keyword.operator" 36 | | "keyword.operator.new" 37 | | "keyword.operator.assignment" 38 | | "keyword.operator.arithmetic" 39 | | "keyword.operator.logical" 40 | | "keyword.other" 41 | | "markup" 42 | | "markup.bold" 43 | | "markup.changed" 44 | | "markup.deleted" 45 | | "markup.heading" 46 | | "markup.inline.raw" 47 | | "markup.inserted" 48 | | "markup.italic" 49 | | "markup.list" 50 | | "markup.list.numbered" 51 | | "markup.list.unnumbered" 52 | | "markup.other" 53 | | "markup.quote" 54 | | "markup.raw" 55 | | "markup.underline" 56 | | "markup.underline.link" 57 | | "meta" 58 | | "meta.block" 59 | | "meta.cast" 60 | | "meta.class" 61 | | "meta.function" 62 | | "meta.function-call" 63 | | "meta.preprocessor" 64 | | "meta.return-type" 65 | | "meta.selector" 66 | | "meta.tag" 67 | | "meta.type.annotation" 68 | | "meta.type" 69 | | "punctuation.definition.string.begin" 70 | | "punctuation.definition.string.end" 71 | | "punctuation.separator" 72 | | "punctuation.separator.continuation" 73 | | "punctuation.terminator" 74 | | "storage" 75 | | "storage.modifier" 76 | | "storage.type" 77 | | "string" 78 | | "string.interpolated" 79 | | "string.other" 80 | | "string.quoted" 81 | | "string.quoted.double" 82 | | "string.quoted.other" 83 | | "string.quoted.single" 84 | | "string.quoted.triple" 85 | | "string.regexp" 86 | | "string.unquoted" 87 | | "strong" 88 | | "support" 89 | | "support.class" 90 | | "support.constant" 91 | | "support.function" 92 | | "support.other" 93 | | "support.type" 94 | | "support.type.property-name" 95 | | "support.variable" 96 | | "variable" 97 | | "variable.language" 98 | | "variable.name" 99 | | "variable.other" 100 | | "variable.other.readwrite" 101 | | "variable.parameter"; 102 | export type TextmateColors = { 103 | /** 104 | * Description of the rule. 105 | */ 106 | name?: string; 107 | /** 108 | * Scope selector against which this rule matches. 109 | */ 110 | scope?: _1 | _1[] | string[] | string; 111 | settings: Settings; 112 | }[]; 113 | 114 | /** 115 | * Colors and styles for the token. 116 | */ 117 | export interface Settings { 118 | background?: string; 119 | /** 120 | * Font style of the rule: 'italic', 'bold', 'underline', 'strikethrough' or a combination. The empty string unsets inherited settings. 121 | */ 122 | fontStyle?: string; 123 | /** 124 | * Foreground color for the token. 125 | */ 126 | foreground?: string; 127 | } 128 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc-typegen/types/token-styling.d.ts: -------------------------------------------------------------------------------- 1 | export interface SemanticTokens { 2 | /** 3 | * Style to use for symbols that are abstract. 4 | */ 5 | "*.abstract"?: Style | string; 6 | /** 7 | * Style to use for symbols that are async. 8 | */ 9 | "*.async"?: Style | string; 10 | /** 11 | * Style for all symbol declarations. 12 | */ 13 | "*.declaration"?: Style | string; 14 | /** 15 | * Style to use for symbols that are deprecated. 16 | */ 17 | "*.deprecated"?: Style | string; 18 | /** 19 | * Style to use for references in documentation. 20 | */ 21 | "*.documentation"?: Style | string; 22 | /** 23 | * Style to use for write accesses. 24 | */ 25 | "*.modification"?: Style | string; 26 | /** 27 | * Style to use for symbols that are read-only. 28 | */ 29 | "*.readonly"?: Style | string; 30 | /** 31 | * Style to use for symbols that are static. 32 | */ 33 | "*.static"?: Style | string; 34 | /** 35 | * Style for classes. 36 | */ 37 | class?: Style | string; 38 | /** 39 | * Style for comments. 40 | */ 41 | comment?: Style | string; 42 | /** 43 | * Style for decorators & annotations. 44 | */ 45 | decorator?: Style | string; 46 | /** 47 | * Style for enums. 48 | */ 49 | enum?: Style | string; 50 | /** 51 | * Style for enum members. 52 | */ 53 | enumMember?: Style | string; 54 | /** 55 | * Style for events. 56 | */ 57 | event?: Style | string; 58 | /** 59 | * Style for functions 60 | */ 61 | function?: Style | string; 62 | /** 63 | * Style for interfaces. 64 | */ 65 | interface?: Style | string; 66 | /** 67 | * Style for keywords. 68 | */ 69 | keyword?: Style | string; 70 | /** 71 | * Style for labels. 72 | */ 73 | label?: Style | string; 74 | /** 75 | * Style for macros. 76 | */ 77 | macro?: Style | string; 78 | /** 79 | * Style for member functions 80 | */ 81 | member?: Style | string; 82 | /** 83 | * Style for method (member functions) 84 | */ 85 | method?: Style | string; 86 | /** 87 | * Style for namespaces. 88 | */ 89 | namespace?: Style | string; 90 | /** 91 | * Style for numbers. 92 | */ 93 | number?: Style | string; 94 | /** 95 | * Style for operators. 96 | */ 97 | operator?: Style | string; 98 | /** 99 | * Style for parameters. 100 | */ 101 | parameter?: Style | string; 102 | /** 103 | * Style for properties. 104 | */ 105 | property?: Style | string; 106 | /** 107 | * Style for expressions. 108 | */ 109 | regexp?: Style | string; 110 | /** 111 | * Style for strings. 112 | */ 113 | string?: Style | string; 114 | /** 115 | * Style for structs. 116 | */ 117 | struct?: Style | string; 118 | /** 119 | * Style for types. 120 | */ 121 | type?: Style | string; 122 | /** 123 | * Style for type parameters. 124 | */ 125 | typeParameter?: Style | string; 126 | /** 127 | * Style for variables. 128 | */ 129 | variable?: Style | string; 130 | /** 131 | * This interface was referenced by `SemanticTokens`'s JSON-Schema definition 132 | * via the `patternProperty` "^(\w+[-_\w+]*|\*)(\.\w+[-_\w+]*)*(:\w+[-_\w+]*)?$". 133 | */ 134 | [k: string]: Style | string; 135 | } 136 | 137 | /** 138 | * Colors and styles for the token. 139 | */ 140 | export interface Style { 141 | background?: string; 142 | /** 143 | * Sets or unsets the font style to bold. Note, the presence of 'fontStyle' overrides this 144 | * setting. 145 | */ 146 | bold?: boolean; 147 | /** 148 | * Sets the all font styles of the rule: 'italic', 'bold', 'underline' or 'strikethrough' or 149 | * a combination. All styles that are not listed are unset. The empty string unsets all 150 | * styles. 151 | */ 152 | fontStyle?: string; 153 | /** 154 | * Foreground color for the token. 155 | */ 156 | foreground?: string; 157 | /** 158 | * Sets or unsets the font style to italic. Note, the presence of 'fontStyle' overrides this 159 | * setting. 160 | */ 161 | italic?: boolean; 162 | /** 163 | * Sets or unsets the font style to strikethrough. Note, the presence of 'fontStyle' 164 | * overrides this setting. 165 | */ 166 | strikethrough?: boolean; 167 | /** 168 | * Sets or unsets the font style to underline. Note, the presence of 'fontStyle' overrides 169 | * this setting. 170 | */ 171 | underline?: boolean; 172 | } 173 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc-typegen/update.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-explicit-any */ 2 | import path from "node:path"; 3 | import { writeFileSync } from "node:fs"; 4 | import { compile, JSONSchema } from "json-schema-to-typescript"; 5 | 6 | // v1.98.2 7 | const vscodeSchemasRoot = 8 | "https://raw.githubusercontent.com/ota-meshi/extract-vscode-schemas/bd18db29edb183a0d8b0b8250b22dbd4428a0da8/resources/vscode/schemas/"; 9 | 10 | const bannerComment = `/** 11 | * This file was automatically generated. 12 | * DO NOT MODIFY IT BY HAND. 13 | * Instead, run \`pnpm --filter @catppuccin/vsc-typegen typegen:update\` to regenerate this file. 14 | */`; 15 | 16 | const mappings = [ 17 | // json-schema-to-typescript breaks on new schemas because of an internal 18 | // rule where it cannot accept both "definitions" and "$defs" and therefore 19 | // refuses to parse the file. The following commented out schemas must 20 | // be converted to Typescript manually. 21 | // 22 | // ref: https://github.com/bcherny/json-schema-to-typescript/blob/a5834aa990a58b98a02824e1521f27d4235e1e12/src/normalizer.ts#L210-L215 23 | // { 24 | // schema: vscodeSchemasRoot + "token-styling.json", 25 | // name: "SemanticTokens", 26 | // fname: "token-styling.d.ts", 27 | // kind: "jsonschema", 28 | // }, 29 | // { 30 | // schema: vscodeSchemasRoot + "textmate-colors.json", 31 | // name: "TextmateColors", 32 | // fname: "textmate-colors.d.ts", 33 | // kind: "jsonschema", 34 | // }, 35 | { 36 | schema: vscodeSchemasRoot + "workbench-colors.json", 37 | name: "WorkbenchColors", 38 | fname: "workbench-colors.d.ts", 39 | kind: "jsonschema", 40 | }, 41 | { 42 | schema: 43 | "https://raw.githubusercontent.com/usernamehw/vscode-error-lens/v3.24.0/package.json", 44 | name: "ErrorLensColors", 45 | fname: "errorlens.d.ts", 46 | kind: "extension-packagejson", 47 | }, 48 | { 49 | schema: 50 | "https://raw.githubusercontent.com/gitkraken/vscode-gitlens/v16.3.3/package.json", 51 | name: "GitLensColors", 52 | fname: "gitlens.d.ts", 53 | kind: "extension-packagejson", 54 | }, 55 | { 56 | schema: 57 | "https://github.com/microsoft/vscode-pull-request-github/raw/v0.106.0/package.json", 58 | name: "GitHubPullRequestColors", 59 | fname: "github-pull-request.d.ts", 60 | kind: "extension-packagejson", 61 | }, 62 | ]; 63 | 64 | for (const { schema, name, fname, kind } of mappings) { 65 | fetch(schema) 66 | .then((data) => data.json()) 67 | .then((data) => { 68 | switch (kind) { 69 | case "jsonschema": { 70 | return compile(data as JSONSchema, name, { 71 | additionalProperties: false, 72 | bannerComment, 73 | }); 74 | } 75 | case "extension-packagejson": { 76 | return fromVSIXColors(name, data); 77 | } 78 | default: { 79 | throw new Error(`Unknown kind: ${kind}`); 80 | } 81 | } 82 | }) 83 | .then((typeDefs) => 84 | writeFileSync(path.join(__dirname, "types", fname), typeDefs, "utf8"), 85 | ); 86 | } 87 | 88 | const fromVSIXColors = (interfaceName: string, data: any) => { 89 | let content = `${bannerComment} 90 | export interface ${interfaceName} {`; 91 | data.contributes.colors.map((color: any) => { 92 | content += ` 93 | /** 94 | * ${color.description} 95 | */ 96 | "${color.id}": string; 97 | `; 98 | }); 99 | return content + "}\n"; 100 | }; 101 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line no-restricted-modules, @typescript-eslint/no-var-requires 2 | const nodeStdLibrary = require("node:module").builtinModules.map( 3 | (module) => `node:${module}`, 4 | ); 5 | 6 | /** @type {import("eslint").Linter["config"]} */ 7 | module.exports = { 8 | rules: { 9 | "no-restricted-imports": ["error", { paths: nodeStdLibrary }], 10 | "no-restricted-modules": ["error", { paths: nodeStdLibrary }], 11 | }, 12 | overrides: [ 13 | { 14 | files: "./src/hooks/**/*.ts", 15 | rules: { 16 | "no-restricted-imports": ["off", { paths: nodeStdLibrary }], 17 | "no-restricted-modules": ["off", { paths: nodeStdLibrary }], 18 | }, 19 | }, 20 | ], 21 | }; 22 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/.gitignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | themes/ 3 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/.vscodeignore: -------------------------------------------------------------------------------- 1 | * 2 | **/* 3 | !CHANGELOG.md 4 | !LICENSE 5 | !README.md 6 | !icon.png 7 | !dist/*.cjs 8 | !package.json 9 | !themes/*.json 10 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Catppuccin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/README.md: -------------------------------------------------------------------------------- 1 | ../../README.md -------------------------------------------------------------------------------- /packages/catppuccin-vsc/assets: -------------------------------------------------------------------------------- 1 | ../../assets -------------------------------------------------------------------------------- /packages/catppuccin-vsc/build.ts: -------------------------------------------------------------------------------- 1 | import { setOutput } from "@actions/core"; 2 | import { createVSIX } from "@vscode/vsce"; 3 | import { build } from "tsup"; 4 | import { getFlag } from "type-flag"; 5 | 6 | import { updatePackageJson, readPackageJsonVersion } from "@/hooks/packageJson"; 7 | import generateThemes from "@/hooks/generateThemes"; 8 | 9 | const development = getFlag("--dev", Boolean); 10 | 11 | await generateThemes(); 12 | 13 | const packageJsonVersion = await readPackageJsonVersion(); 14 | if (!development) { 15 | console.debug( 16 | `Regenerating package.json with version "${packageJsonVersion}"`, 17 | ); 18 | await updatePackageJson(); 19 | } 20 | 21 | await build({ 22 | clean: true, 23 | entry: ["src/browser.ts", "src/main.ts", "src/hooks/generateThemes.ts"], 24 | external: ["vscode"], 25 | minify: !development, 26 | sourcemap: development, 27 | target: "node16", 28 | }); 29 | 30 | const packagePath = `catppuccin-vsc-${packageJsonVersion}.vsix`; 31 | 32 | await createVSIX({ dependencies: false, packagePath }); 33 | 34 | // the upload step in the CI required the path to the vsix file 35 | if (process.env.GITHUB_ACTIONS) setOutput("vsixPath", packagePath); 36 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/vscode/67bd19a1d06ebda18bcc8a8902c1c5eb70bd01f8/packages/catppuccin-vsc/icon.png -------------------------------------------------------------------------------- /packages/catppuccin-vsc/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "catppuccin-vsc", 3 | "license": "MIT", 4 | "private": true, 5 | "displayName": "Catppuccin for VSCode", 6 | "publisher": "Catppuccin", 7 | "description": "🦌 Soothing pastel theme for VSCode", 8 | "version": "3.17.0", 9 | "type": "module", 10 | "engines": { 11 | "vscode": "^1.80.0", 12 | "node": ">=20.0.0" 13 | }, 14 | "categories": [ 15 | "Themes" 16 | ], 17 | "extensionKind": [ 18 | "ui", 19 | "workspace" 20 | ], 21 | "activationEvents": [ 22 | "onStartupFinished" 23 | ], 24 | "capabilities": { 25 | "untrustedWorkspaces": { 26 | "supported": true 27 | }, 28 | "virtualWorkspaces": true 29 | }, 30 | "main": "dist/main.cjs", 31 | "browser": "dist/browser.cjs", 32 | "contributes": { 33 | "themes": [ 34 | { 35 | "label": "Catppuccin Mocha", 36 | "uiTheme": "vs-dark", 37 | "path": "./themes/mocha.json" 38 | }, 39 | { 40 | "label": "Catppuccin Macchiato", 41 | "uiTheme": "vs-dark", 42 | "path": "./themes/macchiato.json" 43 | }, 44 | { 45 | "label": "Catppuccin Frappé", 46 | "uiTheme": "vs-dark", 47 | "path": "./themes/frappe.json" 48 | }, 49 | { 50 | "label": "Catppuccin Latte", 51 | "uiTheme": "vs", 52 | "path": "./themes/latte.json" 53 | } 54 | ], 55 | "configuration": { 56 | "title": "Catppuccin", 57 | "properties": { 58 | "catppuccin.boldKeywords": { 59 | "scope": "application", 60 | "type": "boolean", 61 | "default": true, 62 | "markdownDescription": "Controls whether to use **bold** for keywords." 63 | }, 64 | "catppuccin.italicComments": { 65 | "scope": "application", 66 | "type": "boolean", 67 | "default": true, 68 | "markdownDescription": "Controls whether to use *italics* for comments." 69 | }, 70 | "catppuccin.italicKeywords": { 71 | "scope": "application", 72 | "type": "boolean", 73 | "default": true, 74 | "markdownDescription": "Controls whether to use *italics* for keywords." 75 | }, 76 | "catppuccin.colorOverrides": { 77 | "scope": "application", 78 | "type": "object", 79 | "default": {}, 80 | "markdownDescription": "Custom color overrides. Assign your own hex codes to palette colors. See [the docs](https://github.com/catppuccin/vscode#override-palette-colors) for reference.", 81 | "$ref": "https://esm.sh/gh/catppuccin/vscode@catppuccin-vsc-v3.17.0/packages/catppuccin-vsc/schemas/colorOverrides.schema.json" 82 | }, 83 | "catppuccin.customUIColors": { 84 | "scope": "application", 85 | "type": "object", 86 | "default": {}, 87 | "markdownDescription": "Customize UI colors. Map `workbench.colorCustomizations` to palette colors. See [the docs](https://github.com/catppuccin/vscode#use-palette-colors-on-workbench-elements-ui) for reference.", 88 | "$ref": "https://esm.sh/gh/catppuccin/vscode@catppuccin-vsc-v3.17.0/packages/catppuccin-vsc/schemas/customUIColors.schema.json" 89 | }, 90 | "catppuccin.accentColor": { 91 | "scope": "application", 92 | "type": "string", 93 | "default": "mauve", 94 | "description": "Controls which accent color to use.", 95 | "enum": [ 96 | "rosewater", 97 | "flamingo", 98 | "pink", 99 | "mauve", 100 | "red", 101 | "maroon", 102 | "peach", 103 | "yellow", 104 | "green", 105 | "teal", 106 | "sky", 107 | "sapphire", 108 | "blue", 109 | "lavender" 110 | ] 111 | }, 112 | "catppuccin.workbenchMode": { 113 | "scope": "application", 114 | "type": "string", 115 | "default": "default", 116 | "description": "Controls how the workbench should be styled.", 117 | "enum": [ 118 | "default", 119 | "flat", 120 | "minimal" 121 | ], 122 | "enumDescriptions": [ 123 | "The default look, using 3 shades of the base color.", 124 | "A more flat look, using 2 shades of the base color.", 125 | "A minimal look, using 1 shade of the base color." 126 | ] 127 | }, 128 | "catppuccin.bracketMode": { 129 | "scope": "application", 130 | "type": "string", 131 | "default": "rainbow", 132 | "description": "Controls how bracket pairs should be themed", 133 | "enum": [ 134 | "rainbow", 135 | "dimmed", 136 | "monochromatic", 137 | "neovim" 138 | ], 139 | "enumDescriptions": [ 140 | "Uses 6 rainbow colors for matching bracket pairs.", 141 | "Uses the same 6 rainbow colors as `rainbow`, but has a dimmed appearance.", 142 | "A monochromatic, grey appearance for matching bracket pairs.", 143 | "Uses the same bracket pair colors as our neovim port." 144 | ] 145 | }, 146 | "catppuccin.extraBordersEnabled": { 147 | "scope": "application", 148 | "type": "boolean", 149 | "default": false, 150 | "description": "Controls whether borders should be enabled on some additional UI elements." 151 | }, 152 | "catppuccin.syncWithIconPack": { 153 | "scope": "application", 154 | "type": "boolean", 155 | "default": true, 156 | "markdownDescription": "Controls whether to sync the currently active Catppuccin flavor with the [Catppuccin Icon Pack](https://github.com/catppuccin/vscode-icons)" 157 | } 158 | } 159 | } 160 | }, 161 | "repository": { 162 | "type": "git", 163 | "url": "https://github.com/catppuccin/vscode.git", 164 | "directory": "packages/catppuccin-vsc" 165 | }, 166 | "bugs": { 167 | "url": "https://github.com/catppuccin/vscode/issues" 168 | }, 169 | "sponsor": { 170 | "url": "https://opencollective.com/catppuccin" 171 | }, 172 | "icon": "icon.png", 173 | "__metadata": { 174 | "publisherDisplayName": "Catppuccin", 175 | "publisherId": "e7d2ed61-53e0-4dd4-afbe-f536c3bb4316", 176 | "id": "69264e4d-cd3b-468a-8f2b-e69673c7d864", 177 | "isPreReleaseVersion": false 178 | }, 179 | "devDependencies": { 180 | "@actions/core": "^1.11.1", 181 | "@types/tinycolor2": "^1.4.6", 182 | "@types/vscode": "~1.80.0", 183 | "tinycolor2": "^1.6.0", 184 | "type-flag": "^3.0.0", 185 | "@catppuccin/palette": "catalog:", 186 | "@catppuccin/vsc-typegen": "workspace:*", 187 | "@tsconfig/node22": "catalog:", 188 | "@types/node": "catalog:", 189 | "@vscode/vsce": "catalog:", 190 | "tsup": "catalog:", 191 | "tsx": "catalog:", 192 | "typescript": "catalog:" 193 | }, 194 | "scripts": { 195 | "core:build": "tsx build.ts", 196 | "core:dev": "tsx build.ts --dev", 197 | "core:watch": "tsx watch build.ts --dev", 198 | "schema:ui": "tsx src/hooks/updateSchemas.ts" 199 | }, 200 | "homepage": "https://github.com/catppuccin/vscode/tree/main/packages/catppuccin-vsc#readme" 201 | } 202 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/schemas/colorOverrides.schema.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "http://json-schema.org/draft-07/schema#", 3 | "type": "object", 4 | "additionalProperties": false, 5 | "required": [], 6 | "properties": { 7 | "all": { 8 | "$ref": "#/$defs/overrides", 9 | "title": "Overrides applying to all flavors" 10 | }, 11 | "latte": { 12 | "$ref": "#/$defs/overrides", 13 | "title": "Overrides applying to Latte flavor" 14 | }, 15 | "frappe": { 16 | "$ref": "#/$defs/overrides", 17 | "title": "Overrides applying to Frappé flavor" 18 | }, 19 | "macchiato": { 20 | "$ref": "#/$defs/overrides", 21 | "title": "Overrides applying to Macchiato flavor" 22 | }, 23 | "mocha": { 24 | "$ref": "#/$defs/overrides", 25 | "title": "Overrides applying to Mocha flavor" 26 | } 27 | }, 28 | "$defs": { 29 | "colorOverride": { 30 | "format": "color-hex", 31 | "defaultSnippets": [ 32 | { 33 | "body": "${1:#ff0000}" 34 | } 35 | ] 36 | }, 37 | "overrides": { 38 | "type": "object", 39 | "additionalProperties": false, 40 | "properties": { 41 | "base": { 42 | "$ref": "#/$defs/colorOverride" 43 | }, 44 | "mantle": { 45 | "$ref": "#/$defs/colorOverride" 46 | }, 47 | "crust": { 48 | "$ref": "#/$defs/colorOverride" 49 | }, 50 | "overlay0": { 51 | "$ref": "#/$defs/colorOverride" 52 | }, 53 | "overlay1": { 54 | "$ref": "#/$defs/colorOverride" 55 | }, 56 | "overlay2": { 57 | "$ref": "#/$defs/colorOverride" 58 | }, 59 | "surface0": { 60 | "$ref": "#/$defs/colorOverride" 61 | }, 62 | "surface1": { 63 | "$ref": "#/$defs/colorOverride" 64 | }, 65 | "surface2": { 66 | "$ref": "#/$defs/colorOverride" 67 | }, 68 | "subtext0": { 69 | "$ref": "#/$defs/colorOverride" 70 | }, 71 | "subtext1": { 72 | "$ref": "#/$defs/colorOverride" 73 | }, 74 | "text": { 75 | "$ref": "#/$defs/colorOverride" 76 | }, 77 | "rosewater": { 78 | "$ref": "#/$defs/colorOverride" 79 | }, 80 | "flamingo": { 81 | "$ref": "#/$defs/colorOverride" 82 | }, 83 | "pink": { 84 | "$ref": "#/$defs/colorOverride" 85 | }, 86 | "mauve": { 87 | "$ref": "#/$defs/colorOverride" 88 | }, 89 | "red": { 90 | "$ref": "#/$defs/colorOverride" 91 | }, 92 | "maroon": { 93 | "$ref": "#/$defs/colorOverride" 94 | }, 95 | "peach": { 96 | "$ref": "#/$defs/colorOverride" 97 | }, 98 | "yellow": { 99 | "$ref": "#/$defs/colorOverride" 100 | }, 101 | "green": { 102 | "$ref": "#/$defs/colorOverride" 103 | }, 104 | "teal": { 105 | "$ref": "#/$defs/colorOverride" 106 | }, 107 | "sky": { 108 | "$ref": "#/$defs/colorOverride" 109 | }, 110 | "sapphire": { 111 | "$ref": "#/$defs/colorOverride" 112 | }, 113 | "blue": { 114 | "$ref": "#/$defs/colorOverride" 115 | }, 116 | "lavender": { 117 | "$ref": "#/$defs/colorOverride" 118 | } 119 | } 120 | } 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/browser.ts: -------------------------------------------------------------------------------- 1 | import { 2 | workspace, 3 | ConfigurationChangeEvent, 4 | window, 5 | ExtensionContext, 6 | } from "vscode"; 7 | 8 | export const activate = (context: ExtensionContext) => { 9 | context.subscriptions.push( 10 | workspace.onDidChangeConfiguration((event: ConfigurationChangeEvent) => { 11 | if (event.affectsConfiguration("catppuccin")) { 12 | window.showErrorMessage( 13 | "VSCode Web doesn't support advanced Catppuccin options at the moment.", 14 | ); 15 | } 16 | }), 17 | ); 18 | }; 19 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/hooks/constants.ts: -------------------------------------------------------------------------------- 1 | import path from "node:path"; 2 | import { fileURLToPath } from "node:url"; 3 | 4 | const root = 5 | typeof __dirname === "undefined" 6 | ? path.dirname(fileURLToPath(import.meta.url)) 7 | : __dirname; 8 | 9 | export const repoRoot = path.join(root, "../.."); 10 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/hooks/generateThemes.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Script to generate theme files for all flavors, Node compatible. 3 | * Fires as a hook before packaging. 4 | */ 5 | 6 | import { mkdir, writeFile } from "node:fs/promises"; 7 | import path from "node:path"; 8 | import { flavorEntries } from "@catppuccin/palette"; 9 | 10 | import { compileTheme, defaultOptions } from "@/theme"; 11 | import { repoRoot } from "./constants"; 12 | 13 | const flavors = flavorEntries.map(([flavorName]) => flavorName); 14 | 15 | // options can also be passed as a JSON string as an environment variable 16 | const optEnvironmentVariable = process.env.CATPPUCCIN_OPTIONS; 17 | const optEnvironment = optEnvironmentVariable 18 | ? JSON.parse(optEnvironmentVariable) 19 | : {}; 20 | 21 | const main = async () => { 22 | await mkdir(path.join(repoRoot, "themes"), { recursive: true }); 23 | 24 | flavors.map((flavor) => { 25 | const options = { ...defaultOptions, ...optEnvironment }; 26 | const theme = compileTheme(flavor, options); 27 | writeFile( 28 | path.join(repoRoot, `themes/${flavor}.json`), 29 | JSON.stringify(theme, undefined, 2), 30 | ); 31 | }); 32 | }; 33 | 34 | export default main; 35 | if (typeof require !== "undefined" && require.main === module) { 36 | console.log("Compiling themes..."); 37 | main(); 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/hooks/packageJson.ts: -------------------------------------------------------------------------------- 1 | import { readFile, writeFile } from "node:fs/promises"; 2 | import path from "node:path"; 3 | 4 | import { repoRoot } from "./constants"; 5 | 6 | export const accents = [ 7 | "rosewater", 8 | "flamingo", 9 | "pink", 10 | "mauve", 11 | "red", 12 | "maroon", 13 | "peach", 14 | "yellow", 15 | "green", 16 | "teal", 17 | "sky", 18 | "sapphire", 19 | "blue", 20 | "lavender", 21 | ]; 22 | 23 | const configuration = (version: string) => { 24 | return { 25 | title: "Catppuccin", 26 | properties: { 27 | "catppuccin.boldKeywords": { 28 | scope: "application", 29 | type: "boolean", 30 | default: true, 31 | markdownDescription: "Controls whether to use **bold** for keywords.", 32 | }, 33 | "catppuccin.italicComments": { 34 | scope: "application", 35 | type: "boolean", 36 | default: true, 37 | markdownDescription: "Controls whether to use *italics* for comments.", 38 | }, 39 | "catppuccin.italicKeywords": { 40 | scope: "application", 41 | type: "boolean", 42 | default: true, 43 | markdownDescription: "Controls whether to use *italics* for keywords.", 44 | }, 45 | "catppuccin.colorOverrides": { 46 | scope: "application", 47 | type: "object", 48 | default: {}, 49 | markdownDescription: 50 | "Custom color overrides. Assign your own hex codes to palette colors. See [the docs](https://github.com/catppuccin/vscode#override-palette-colors) for reference.", 51 | $ref: `https://esm.sh/gh/catppuccin/vscode@catppuccin-vsc-v${version}/packages/catppuccin-vsc/schemas/colorOverrides.schema.json`, 52 | }, 53 | "catppuccin.customUIColors": { 54 | scope: "application", 55 | type: "object", 56 | default: {}, 57 | markdownDescription: 58 | "Customize UI colors. Map `workbench.colorCustomizations` to palette colors. See [the docs](https://github.com/catppuccin/vscode#use-palette-colors-on-workbench-elements-ui) for reference.", 59 | $ref: `https://esm.sh/gh/catppuccin/vscode@catppuccin-vsc-v${version}/packages/catppuccin-vsc/schemas/customUIColors.schema.json`, 60 | }, 61 | "catppuccin.accentColor": { 62 | scope: "application", 63 | type: "string", 64 | default: "mauve", 65 | description: "Controls which accent color to use.", 66 | enum: accents, 67 | }, 68 | "catppuccin.workbenchMode": { 69 | scope: "application", 70 | type: "string", 71 | default: "default", 72 | description: "Controls how the workbench should be styled.", 73 | enum: ["default", "flat", "minimal"], 74 | enumDescriptions: [ 75 | "The default look, using 3 shades of the base color.", 76 | "A more flat look, using 2 shades of the base color.", 77 | "A minimal look, using 1 shade of the base color.", 78 | ], 79 | }, 80 | "catppuccin.bracketMode": { 81 | scope: "application", 82 | type: "string", 83 | default: "rainbow", 84 | description: "Controls how bracket pairs should be themed", 85 | enum: ["rainbow", "dimmed", "monochromatic", "neovim"], 86 | enumDescriptions: [ 87 | "Uses 6 rainbow colors for matching bracket pairs.", 88 | "Uses the same 6 rainbow colors as `rainbow`, but has a dimmed appearance.", 89 | "A monochromatic, grey appearance for matching bracket pairs.", 90 | "Uses the same bracket pair colors as our neovim port.", 91 | ], 92 | }, 93 | "catppuccin.extraBordersEnabled": { 94 | scope: "application", 95 | type: "boolean", 96 | default: false, 97 | description: 98 | "Controls whether borders should be enabled on some additional UI elements.", 99 | }, 100 | "catppuccin.syncWithIconPack": { 101 | scope: "application", 102 | type: "boolean", 103 | default: true, 104 | markdownDescription: 105 | "Controls whether to sync the currently active Catppuccin flavor with the [Catppuccin Icon Pack](https://github.com/catppuccin/vscode-icons)", 106 | }, 107 | }, 108 | }; 109 | }; 110 | 111 | const readPackageJsonVersion = async () => { 112 | return await readFile(path.join(repoRoot, "package.json"), "utf8").then( 113 | (data) => { 114 | const json = JSON.parse(data); 115 | return json.version; 116 | }, 117 | ); 118 | }; 119 | 120 | const updatePackageJson = async () => { 121 | return await readFile(path.join(repoRoot, "package.json"), "utf8") 122 | .then((data) => JSON.parse(data)) 123 | .then((data) => { 124 | return { 125 | ...data, 126 | contributes: { 127 | ...data.contributes, 128 | configuration: configuration(data.version), 129 | }, 130 | }; 131 | }) 132 | .then((data) => { 133 | writeFile( 134 | path.join(repoRoot, "package.json"), 135 | JSON.stringify(data, undefined, 2) + "\n", 136 | "utf8", 137 | ); 138 | return data; 139 | }); 140 | }; 141 | 142 | export { updatePackageJson, readPackageJsonVersion }; 143 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/hooks/updateSchemas.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-explicit-any */ 2 | 3 | import { writeFile } from "node:fs/promises"; 4 | import path from "node:path"; 5 | import { flavors } from "@catppuccin/palette"; 6 | 7 | import { repoRoot } from "./constants"; 8 | import { accents } from "./packageJson"; 9 | 10 | // VSCode 1.98.2 11 | const vscodeSchemasRoot = 12 | "https://raw.githubusercontent.com/ota-meshi/extract-vscode-schemas/bd18db29edb183a0d8b0b8250b22dbd4428a0da8/resources/vscode/schemas/"; 13 | 14 | const ctpColors = flavors.mocha.colorEntries.map(([name]) => name); 15 | 16 | const customUiColorsSchema = (workbenchColors: any) => { 17 | const validColors = [...accents, "accent"]; 18 | return { 19 | $schema: "http://json-schema.org/draft-07/schema#", 20 | type: "object", 21 | additionalProperties: false, 22 | required: [], 23 | properties: { 24 | all: { $ref: "#/$defs/catppuccinWorkbenchColors" }, 25 | latte: { $ref: "#/$defs/catppuccinWorkbenchColors" }, 26 | frappe: { $ref: "#/$defs/catppuccinWorkbenchColors" }, 27 | macchiato: { $ref: "#/$defs/catppuccinWorkbenchColors" }, 28 | mocha: { $ref: "#/$defs/catppuccinWorkbenchColors" }, 29 | }, 30 | $defs: { 31 | catppuccinColor: { 32 | anyOf: [ 33 | // allow plain color names, 34 | { enum: [...ctpColors, "accent"] }, 35 | // custom hex codes, 36 | { format: "color-hex" }, 37 | // and plain color names + opacity 38 | { 39 | type: "string", 40 | pattern: `^(${validColors.join("|")})\\s\\d\\.\\d+$`, 41 | }, 42 | ], 43 | }, 44 | catppuccinWorkbenchColors: { 45 | type: "object", 46 | additionalProperties: false, 47 | required: [], 48 | properties: workbenchColors, 49 | }, 50 | }, 51 | }; 52 | }; 53 | 54 | await fetch(vscodeSchemasRoot + "workbench-colors.json") 55 | .then((data) => data.json()) 56 | .then((data: any) => { 57 | const workbenchColors = {} as { 58 | [name: string]: { description: string; $ref: string }; 59 | }; 60 | for (const [name, { description }] of Object.entries( 61 | data.properties, 62 | )) { 63 | workbenchColors[name] = { 64 | description, 65 | $ref: "#/$defs/catppuccinColor", 66 | }; 67 | } 68 | const schema = customUiColorsSchema(workbenchColors); 69 | writeFile( 70 | path.join(repoRoot, "schemas/customUIColors.schema.json"), 71 | JSON.stringify(schema, undefined, 2) + "\n", 72 | "utf8", 73 | ); 74 | }); 75 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/main.ts: -------------------------------------------------------------------------------- 1 | import { ExtensionContext, Uri, window, workspace } from "vscode"; 2 | import type { ThemePaths } from "./types"; 3 | import * as utils from "./utils"; 4 | 5 | export const activate = async (context: ExtensionContext) => { 6 | const base = context.extensionUri; 7 | const paths: ThemePaths = { 8 | latte: Uri.joinPath(base, "themes", "latte.json"), 9 | frappe: Uri.joinPath(base, "themes", "frappe.json"), 10 | macchiato: Uri.joinPath(base, "themes", "macchiato.json"), 11 | mocha: Uri.joinPath(base, "themes", "mocha.json"), 12 | }; 13 | 14 | const config = utils.getConfiguration(); 15 | 16 | // regenerate on a fresh install if non-default config is set 17 | if ((await utils.isFreshInstall(context)) && !utils.isDefaultConfig()) { 18 | utils.updateThemes(config, paths, utils.UpdateTrigger.FRESH_INSTALL); 19 | } 20 | 21 | context.subscriptions.push( 22 | workspace.onDidChangeConfiguration((event) => { 23 | // regenerate the theme files when the config changes 24 | if (event.affectsConfiguration("catppuccin")) { 25 | utils.updateThemes( 26 | utils.getConfiguration(), 27 | paths, 28 | utils.UpdateTrigger.CONFIG_CHANGE, 29 | ); 30 | } 31 | // call the icon pack sync when the config changes 32 | if ( 33 | event.affectsConfiguration("workbench.colorTheme") && 34 | config.syncWithIconPack 35 | ) { 36 | utils.syncToIconPack(); 37 | } 38 | }), 39 | 40 | // call the icon pack sync when the theme changes 41 | window.onDidChangeActiveColorTheme(() => { 42 | if (config.syncWithIconPack) { 43 | utils.syncToIconPack(); 44 | } 45 | }), 46 | ); 47 | 48 | // call the icon pack sync on activation 49 | if (config.syncWithIconPack) { 50 | utils.syncToIconPack(); 51 | } 52 | }; 53 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/extensions/error-lens.ts: -------------------------------------------------------------------------------- 1 | import type { ErrorLensColors, ThemeContext } from "@/types"; 2 | import { opacity } from "@/theme/utils"; 3 | 4 | export default function colors( 5 | context: ThemeContext, 6 | ): Partial { 7 | const { palette } = context; 8 | 9 | return { 10 | "errorLens.errorBackground": opacity(palette.red, 0.15), 11 | "errorLens.errorBackgroundLight": opacity(palette.red, 0.15), 12 | "errorLens.errorForeground": palette.red, 13 | "errorLens.errorForegroundLight": palette.red, 14 | "errorLens.errorMessageBackground": opacity(palette.red, 0.15), 15 | "errorLens.hintBackground": opacity(palette.green, 0.15), 16 | "errorLens.hintBackgroundLight": opacity(palette.green, 0.15), 17 | "errorLens.hintForeground": palette.green, 18 | "errorLens.hintForegroundLight": palette.green, 19 | "errorLens.hintMessageBackground": opacity(palette.green, 0.15), 20 | "errorLens.infoBackground": opacity(palette.blue, 0.15), 21 | "errorLens.infoBackgroundLight": opacity(palette.blue, 0.15), 22 | "errorLens.infoForeground": palette.blue, 23 | "errorLens.infoForegroundLight": palette.blue, 24 | "errorLens.infoMessageBackground": opacity(palette.blue, 0.15), 25 | "errorLens.statusBarErrorForeground": palette.red, 26 | "errorLens.statusBarHintForeground": palette.green, 27 | "errorLens.statusBarIconErrorForeground": palette.red, 28 | "errorLens.statusBarIconWarningForeground": palette.peach, 29 | "errorLens.statusBarInfoForeground": palette.blue, 30 | "errorLens.statusBarWarningForeground": palette.peach, 31 | "errorLens.warningBackground": opacity(palette.peach, 0.15), 32 | "errorLens.warningBackgroundLight": opacity(palette.peach, 0.15), 33 | "errorLens.warningForeground": palette.peach, 34 | "errorLens.warningForegroundLight": palette.peach, 35 | "errorLens.warningMessageBackground": opacity(palette.peach, 0.15), 36 | }; 37 | } 38 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/extensions/github-pull-request.ts: -------------------------------------------------------------------------------- 1 | import type { GitHubPullRequestColors, ThemeContext } from "@/types"; 2 | 3 | export default function colors( 4 | context: ThemeContext, 5 | ): Partial { 6 | const { palette } = context; 7 | 8 | return { 9 | "issues.closed": palette.mauve, 10 | "issues.newIssueDecoration": palette.rosewater, 11 | "issues.open": palette.green, 12 | "pullRequests.closed": palette.red, 13 | "pullRequests.draft": palette.overlay2, 14 | "pullRequests.merged": palette.mauve, 15 | "pullRequests.notification": palette.text, 16 | "pullRequests.open": palette.green, 17 | }; 18 | } 19 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/extensions/gitlens.ts: -------------------------------------------------------------------------------- 1 | import type { GitLensColors, ThemeContext } from "@/types"; 2 | import { opacity, shade, transparent } from "@/theme/utils"; 3 | 4 | export default function colors(context: ThemeContext): Partial { 5 | const { palette, options } = context; 6 | 7 | const graphLaneColors = [ 8 | palette.mauve, 9 | palette.yellow, 10 | palette.blue, 11 | palette.flamingo, 12 | palette.green, 13 | palette.lavender, 14 | palette.rosewater, 15 | palette.red, 16 | palette.teal, 17 | palette.pink, 18 | palette.peach, 19 | palette.sapphire, 20 | palette.maroon, 21 | palette.sky, 22 | ]; 23 | 24 | const accentIndex = graphLaneColors.indexOf(palette[options.accent]); 25 | 26 | return { 27 | "gitlens.gutterBackgroundColor": opacity(palette.surface0, 0.3), 28 | "gitlens.gutterForegroundColor": palette.text, 29 | "gitlens.gutterUncommittedForegroundColor": palette[options.accent], 30 | "gitlens.trailingLineBackgroundColor": transparent, 31 | "gitlens.trailingLineForegroundColor": opacity(palette.text, 0.3), 32 | "gitlens.lineHighlightBackgroundColor": opacity( 33 | palette[options.accent], 34 | 0.15, 35 | ), 36 | "gitlens.lineHighlightOverviewRulerColor": opacity( 37 | palette[options.accent], 38 | 0.8, 39 | ), 40 | "gitlens.openAutolinkedIssueIconColor": palette.green, 41 | "gitlens.closedAutolinkedIssueIconColor": palette.mauve, 42 | "gitlens.closedPullRequestIconColor": palette.red, 43 | "gitlens.openPullRequestIconColor": palette.green, 44 | "gitlens.mergedPullRequestIconColor": palette.mauve, 45 | "gitlens.unpublishedChangesIconColor": palette.green, 46 | "gitlens.unpublishedCommitIconColor": palette.green, 47 | "gitlens.unpulledChangesIconColor": palette.peach, 48 | // "gitlens.decorations.addedForegroundColor": "", // (default: gitDecoration.addedResourceForeground) 49 | // "gitlens.decorations.copiedForegroundColor": "", // (default: gitDecoration.renamedResourceForeground) 50 | // "gitlens.decorations.deletedForegroundColor": "", // (default: gitDecoration.deletedResourceForeground) 51 | // "gitlens.decorations.ignoredForegroundColor": "", // (default: gitDecoration.ignoredResourceForeground) 52 | // "gitlens.decorations.modifiedForegroundColor": "", // (default: gitDecoration.modifiedResourceForeground) 53 | // "gitlens.decorations.untrackedForegroundColor": "", // (default: gitDecoration.untrackedResourceForeground) 54 | // "gitlens.decorations.renamedForegroundColor": "", // (default: gitDecoration.renamedResourceForeground) 55 | "gitlens.decorations.branchAheadForegroundColor": palette.green, 56 | "gitlens.decorations.branchBehindForegroundColor": palette.peach, 57 | "gitlens.decorations.branchDivergedForegroundColor": palette.yellow, 58 | // "gitlens.decorations.branchUpToDateForegroundColor": palette.text, // (default: sideBar.foreground) 59 | "gitlens.decorations.branchUnpublishedForegroundColor": palette.green, 60 | "gitlens.decorations.branchMissingUpstreamForegroundColor": palette.peach, 61 | "gitlens.decorations.statusMergingOrRebasingConflictForegroundColor": 62 | palette.maroon, 63 | "gitlens.decorations.statusMergingOrRebasingForegroundColor": 64 | palette.yellow, 65 | "gitlens.decorations.workspaceRepoMissingForegroundColor": palette.subtext0, 66 | "gitlens.decorations.workspaceCurrentForegroundColor": 67 | palette[options.accent], 68 | "gitlens.decorations.workspaceRepoOpenForegroundColor": 69 | palette[options.accent], 70 | "gitlens.decorations.worktreeHasUncommittedChangesForegroundColor": 71 | palette.peach, 72 | "gitlens.decorations.worktreeMissingForegroundColor": palette.maroon, 73 | "gitlens.graphLane1Color": graphLaneColors[accentIndex], 74 | "gitlens.graphLane2Color": 75 | graphLaneColors[(accentIndex + 1) % graphLaneColors.length], 76 | "gitlens.graphLane3Color": 77 | graphLaneColors[(accentIndex + 2) % graphLaneColors.length], 78 | "gitlens.graphLane4Color": 79 | graphLaneColors[(accentIndex + 3) % graphLaneColors.length], 80 | "gitlens.graphLane5Color": 81 | graphLaneColors[(accentIndex + 4) % graphLaneColors.length], 82 | "gitlens.graphLane6Color": 83 | graphLaneColors[(accentIndex + 5) % graphLaneColors.length], 84 | "gitlens.graphLane7Color": 85 | graphLaneColors[(accentIndex + 6) % graphLaneColors.length], 86 | "gitlens.graphLane8Color": 87 | graphLaneColors[(accentIndex + 7) % graphLaneColors.length], 88 | "gitlens.graphLane9Color": 89 | graphLaneColors[(accentIndex + 8) % graphLaneColors.length], 90 | "gitlens.graphLane10Color": 91 | graphLaneColors[(accentIndex + 9) % graphLaneColors.length], 92 | "gitlens.graphChangesColumnAddedColor": palette.green, 93 | "gitlens.graphChangesColumnDeletedColor": palette.red, 94 | "gitlens.graphMinimapMarkerHeadColor": palette.green, 95 | "gitlens.graphScrollMarkerHeadColor": palette.green, 96 | "gitlens.graphMinimapMarkerUpstreamColor": shade(palette.green, -0.05), 97 | "gitlens.graphScrollMarkerUpstreamColor": shade(palette.green, -0.05), 98 | "gitlens.graphMinimapMarkerHighlightsColor": palette.yellow, 99 | "gitlens.graphScrollMarkerHighlightsColor": palette.yellow, 100 | "gitlens.graphMinimapMarkerLocalBranchesColor": palette.blue, 101 | "gitlens.graphScrollMarkerLocalBranchesColor": palette.blue, 102 | "gitlens.graphMinimapMarkerRemoteBranchesColor": shade(palette.blue, -0.05), 103 | "gitlens.graphScrollMarkerRemoteBranchesColor": shade(palette.blue, -0.05), 104 | "gitlens.graphMinimapMarkerStashesColor": palette.mauve, 105 | "gitlens.graphScrollMarkerStashesColor": palette.mauve, 106 | "gitlens.graphMinimapMarkerTagsColor": palette.flamingo, 107 | "gitlens.graphScrollMarkerTagsColor": palette.flamingo, 108 | }; 109 | } 110 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/extensions/index.ts: -------------------------------------------------------------------------------- 1 | import type { ThemeContext } from "@/types"; 2 | import errorLens from "./error-lens"; 3 | import gitHubPullRequest from "./github-pull-request"; 4 | import gitLens from "./gitlens"; 5 | 6 | export default function extensions(context: ThemeContext) { 7 | return { 8 | ...errorLens(context), 9 | ...gitHubPullRequest(context), 10 | ...gitLens(context), 11 | }; 12 | } 13 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/index.ts: -------------------------------------------------------------------------------- 1 | import { flavors } from "@catppuccin/palette"; 2 | 3 | import type { 4 | CatppuccinPaletteAnsi, 5 | CatppuccinFlavor, 6 | CatppuccinPalette, 7 | ThemeContext, 8 | ThemeOptions, 9 | } from "@/types"; 10 | import { getTokenColors } from "./tokenColors"; 11 | import { getSemanticTokens } from "./semanticTokens"; 12 | import { getUiColors } from "./uiColors"; 13 | 14 | export const defaultOptions: ThemeOptions = { 15 | accent: "mauve", 16 | boldKeywords: true, 17 | italicComments: true, 18 | italicKeywords: true, 19 | colorOverrides: {}, 20 | workbenchMode: "default", 21 | bracketMode: "rainbow", 22 | extraBordersEnabled: false, 23 | customUIColors: {}, 24 | syncWithIconPack: true, 25 | }; 26 | 27 | export const compileTheme = ( 28 | flavor: CatppuccinFlavor = "mocha", 29 | options: ThemeOptions = defaultOptions, 30 | ) => { 31 | const flavorData = flavors[flavor]; 32 | const ctpPalette = {} as CatppuccinPalette; 33 | const paletteAnsi = { 34 | normal: {}, 35 | bright: {}, 36 | } as CatppuccinPaletteAnsi; 37 | for (const [k, v] of flavorData.colorEntries) { 38 | ctpPalette[k] = v.hex; 39 | } 40 | for (const [k, v] of flavorData.ansiColorEntries) { 41 | paletteAnsi.normal[k] = v.normal.hex; 42 | paletteAnsi.bright[k] = v.bright.hex; 43 | } 44 | 45 | const palette: CatppuccinPalette = { 46 | ...ctpPalette, 47 | ...options.colorOverrides?.all, 48 | ...options.colorOverrides?.[flavor], 49 | }; 50 | 51 | const context: ThemeContext = { 52 | flavor, 53 | palette, 54 | paletteAnsi, 55 | options, 56 | isLatte: flavor === "latte", 57 | }; 58 | 59 | return { 60 | name: `Catppuccin ${flavorData.name}`, 61 | type: context.isLatte ? "light" : "dark", 62 | colors: getUiColors(context), 63 | semanticHighlighting: true, 64 | semanticTokenColors: getSemanticTokens(context), 65 | tokenColors: getTokenColors(context), 66 | }; 67 | }; 68 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/semanticTokens.ts: -------------------------------------------------------------------------------- 1 | import type { SemanticTokens, ThemeContext } from "@/types"; 2 | 3 | export const getSemanticTokens = (context: ThemeContext): SemanticTokens => { 4 | const { palette } = context; 5 | 6 | return { 7 | enumMember: { foreground: palette.teal }, 8 | selfKeyword: { foreground: palette.red }, 9 | boolean: { foreground: palette.peach }, 10 | number: { foreground: palette.peach }, 11 | "variable.defaultLibrary": { foreground: palette.maroon }, 12 | 13 | // Python types 14 | "class:python": { foreground: palette.yellow }, 15 | "class.builtin:python": { foreground: palette.mauve }, 16 | "variable.typeHint:python": { foreground: palette.yellow }, 17 | "function.decorator:python": { foreground: palette.peach }, 18 | 19 | // ignore `const`s being peach in JS & TS 20 | "variable.readonly:javascript": { foreground: palette.text }, 21 | "variable.readonly:typescript": { foreground: palette.text }, 22 | "property.readonly:javascript": { foreground: palette.text }, 23 | "property.readonly:typescript": { foreground: palette.text }, 24 | // ditto for React 25 | "variable.readonly:javascriptreact": { foreground: palette.text }, 26 | "variable.readonly:typescriptreact": { foreground: palette.text }, 27 | "property.readonly:javascriptreact": { foreground: palette.text }, 28 | "property.readonly:typescriptreact": { foreground: palette.text }, 29 | 30 | // Scala, also dealing with constants 31 | "variable.readonly:scala": { foreground: palette.text }, 32 | 33 | // Golang builtin readonly defaultLibrary (nil) 34 | "type.defaultLibrary:go": { foreground: palette.mauve }, 35 | "variable.readonly.defaultLibrary:go": { foreground: palette.mauve }, 36 | 37 | // TOML syntax 38 | tomlArrayKey: { foreground: palette.blue, fontStyle: "" }, 39 | tomlTableKey: { foreground: palette.blue, fontStyle: "" }, 40 | 41 | // Rust attributes 42 | "builtinAttribute.attribute.library:rust": { foreground: palette.blue }, 43 | "generic.attribute:rust": { foreground: palette.text }, 44 | 45 | // Nix 46 | "constant.builtin.readonly:nix": { foreground: palette.mauve }, 47 | 48 | // Typst 49 | heading: { foreground: palette.red }, 50 | "text.emph": { foreground: palette.red, fontStyle: "italic" }, 51 | "text.strong": { foreground: palette.red, fontStyle: "bold" }, 52 | "text.math": { foreground: palette.flamingo }, 53 | pol: { foreground: palette.flamingo }, 54 | }; 55 | }; 56 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/tokenColors.ts: -------------------------------------------------------------------------------- 1 | import type { TextmateColors, ThemeContext } from "@/types"; 2 | import tokens from "./tokens"; 3 | 4 | export const getTokenColors = (context: ThemeContext): TextmateColors => { 5 | const { options } = context; 6 | 7 | return tokens(context).map((token) => { 8 | if (token.name === "Comments") return token; 9 | 10 | let fontStyle = token.settings.fontStyle; 11 | if (!options.italicKeywords && fontStyle !== undefined) { 12 | fontStyle = fontStyle?.replace("italic", ""); 13 | } 14 | if ( 15 | !options.boldKeywords && 16 | fontStyle !== undefined && 17 | token.scope !== "markup.bold" 18 | ) { 19 | fontStyle = fontStyle?.replace("bold", ""); 20 | } 21 | 22 | token = { 23 | ...token, 24 | settings: { ...token.settings, fontStyle }, 25 | }; 26 | return token; 27 | }); 28 | }; 29 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/tokens/cpp.ts: -------------------------------------------------------------------------------- 1 | import type { TextmateColors, ThemeContext } from "@/types"; 2 | 3 | const tokens = (context: ThemeContext): TextmateColors => { 4 | const { palette } = context; 5 | 6 | return [ 7 | { 8 | name: "C++ extern keyword", 9 | scope: "storage.modifier.specifier.extern.cpp", 10 | settings: { 11 | foreground: palette.mauve, 12 | }, 13 | }, 14 | { 15 | name: "C++ scope resolution", 16 | scope: [ 17 | "entity.name.scope-resolution.template.call.cpp", 18 | "entity.name.scope-resolution.parameter.cpp", 19 | "entity.name.scope-resolution.cpp", 20 | "entity.name.scope-resolution.function.definition.cpp", 21 | ], 22 | settings: { 23 | foreground: palette.yellow, 24 | }, 25 | }, 26 | { 27 | name: "C++ doc keywords", 28 | scope: "storage.type.class.doxygen", 29 | settings: { 30 | fontStyle: "", 31 | }, 32 | }, 33 | { 34 | name: "C++ operators", 35 | scope: ["storage.modifier.reference.cpp"], 36 | settings: { 37 | foreground: palette.teal, 38 | }, 39 | }, 40 | ]; 41 | }; 42 | 43 | export default tokens; 44 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/tokens/cs.ts: -------------------------------------------------------------------------------- 1 | import type { TextmateColors, ThemeContext } from "@/types"; 2 | 3 | const tokens = (context: ThemeContext): TextmateColors => { 4 | const { palette } = context; 5 | 6 | return [ 7 | { 8 | name: "C# Interpolated Strings", 9 | scope: "meta.interpolation.cs", 10 | settings: { 11 | foreground: palette.text, 12 | }, 13 | }, 14 | { 15 | name: "C# xml-style docs", 16 | scope: "comment.block.documentation.cs", 17 | settings: { 18 | foreground: palette.text, 19 | }, 20 | }, 21 | ]; 22 | }; 23 | 24 | export default tokens; 25 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/tokens/css.ts: -------------------------------------------------------------------------------- 1 | import type { TextmateColors, ThemeContext } from "@/types"; 2 | 3 | const tokens = (context: ThemeContext): TextmateColors => { 4 | const { palette } = context; 5 | 6 | return [ 7 | { 8 | name: "Classes, reflecting the className color in JSX", 9 | scope: [ 10 | "source.css entity.other.attribute-name.class.css", 11 | "entity.other.attribute-name.parent-selector.css punctuation.definition.entity.css", 12 | ], 13 | settings: { 14 | foreground: palette.yellow, 15 | }, 16 | }, 17 | { 18 | name: "Operators", 19 | scope: "punctuation.separator.operator.css", 20 | settings: { 21 | foreground: palette.teal, 22 | }, 23 | }, 24 | { 25 | name: "Pseudo classes", 26 | scope: "source.css entity.other.attribute-name.pseudo-class", 27 | settings: { 28 | foreground: palette.teal, 29 | }, 30 | }, 31 | { 32 | scope: "source.css constant.other.unicode-range", 33 | settings: { 34 | foreground: palette.peach, 35 | }, 36 | }, 37 | { 38 | scope: "source.css variable.parameter.url", 39 | settings: { 40 | foreground: palette.green, 41 | fontStyle: "", 42 | }, 43 | }, 44 | { 45 | name: "CSS vendored property names", 46 | scope: ["support.type.vendored.property-name"], 47 | settings: { 48 | foreground: palette.sky, 49 | }, 50 | }, 51 | { 52 | name: "Less/SCSS right-hand variables (@/$-prefixed)", 53 | scope: [ 54 | "source.css meta.property-value variable", 55 | "source.css meta.property-value variable.other.less", 56 | "source.css meta.property-value variable.other.less punctuation.definition.variable.less", 57 | // the left hand equivalent, initial assignment 58 | "meta.definition.variable.scss", 59 | // "meta.property-list variable.scss", 60 | ], 61 | settings: { 62 | foreground: palette.maroon, 63 | }, 64 | }, 65 | { 66 | name: "CSS variables (--prefixed)", 67 | scope: [ 68 | "source.css meta.property-list variable", 69 | // ditto for less 70 | "meta.property-list variable.other.less", 71 | "meta.property-list variable.other.less punctuation.definition.variable.less", 72 | ], 73 | settings: { 74 | foreground: palette.blue, 75 | }, 76 | }, 77 | { 78 | name: "CSS Percentage values, styled the same as numbers", 79 | scope: "keyword.other.unit.percentage.css", 80 | settings: { 81 | foreground: palette.peach, 82 | }, 83 | }, 84 | { 85 | name: "CSS Attribute selectors, styled the same as strings", 86 | scope: "source.css meta.attribute-selector", 87 | settings: { 88 | foreground: palette.green, 89 | }, 90 | }, 91 | ]; 92 | }; 93 | 94 | export default tokens; 95 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/tokens/data.ts: -------------------------------------------------------------------------------- 1 | import type { TextmateColors, ThemeContext } from "@/types"; 2 | 3 | const tokens = (context: ThemeContext): TextmateColors => { 4 | const { palette } = context; 5 | 6 | return [ 7 | { 8 | name: "JSON/YAML keys, other left-hand assignments", 9 | scope: [ 10 | "keyword.other.definition.ini", 11 | "punctuation.support.type.property-name.json", 12 | "support.type.property-name.json", 13 | "punctuation.support.type.property-name.toml", 14 | "support.type.property-name.toml", 15 | "entity.name.tag.yaml", 16 | "punctuation.support.type.property-name.yaml", 17 | "support.type.property-name.yaml", 18 | ], 19 | settings: { 20 | foreground: palette.blue, 21 | fontStyle: "", 22 | }, 23 | }, 24 | { 25 | name: "JSON/YAML constants", 26 | scope: ["constant.language.json", "constant.language.yaml"], 27 | settings: { 28 | foreground: palette.peach, 29 | }, 30 | }, 31 | { 32 | name: "YAML anchors", 33 | scope: ["entity.name.type.anchor.yaml", "variable.other.alias.yaml"], 34 | settings: { 35 | foreground: palette.yellow, 36 | fontStyle: "", 37 | }, 38 | }, 39 | { 40 | name: "TOML tables / ini groups", 41 | scope: [ 42 | "support.type.property-name.table", 43 | "entity.name.section.group-title.ini", 44 | ], 45 | settings: { 46 | foreground: palette.yellow, 47 | }, 48 | }, 49 | { 50 | name: "TOML dates", 51 | scope: "constant.other.time.datetime.offset.toml", 52 | settings: { 53 | foreground: palette.pink, 54 | }, 55 | }, 56 | { 57 | name: "YAML anchor puctuation", 58 | scope: [ 59 | "punctuation.definition.anchor.yaml", 60 | "punctuation.definition.alias.yaml", 61 | ], 62 | settings: { 63 | foreground: palette.pink, 64 | }, 65 | }, 66 | { 67 | name: "YAML triple dashes", 68 | scope: "entity.other.document.begin.yaml", 69 | settings: { 70 | foreground: palette.pink, 71 | }, 72 | }, 73 | ]; 74 | }; 75 | 76 | export default tokens; 77 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/tokens/diff.ts: -------------------------------------------------------------------------------- 1 | import type { TextmateColors, ThemeContext } from "@/types"; 2 | 3 | const tokens = (context: ThemeContext): TextmateColors => { 4 | const { palette } = context; 5 | 6 | return [ 7 | { 8 | name: "Markup Diff", 9 | scope: "markup.changed.diff", 10 | settings: { 11 | foreground: palette.peach, 12 | }, 13 | }, 14 | { 15 | name: "Diff", 16 | scope: [ 17 | "meta.diff.header.from-file", 18 | "meta.diff.header.to-file", 19 | "punctuation.definition.from-file.diff", 20 | "punctuation.definition.to-file.diff", 21 | ], 22 | settings: { 23 | foreground: palette.blue, 24 | }, 25 | }, 26 | { 27 | name: "Diff Inserted", 28 | scope: "markup.inserted.diff", 29 | settings: { 30 | foreground: palette.green, 31 | }, 32 | }, 33 | { 34 | name: "Diff Deleted", 35 | scope: "markup.deleted.diff", 36 | settings: { 37 | foreground: palette.red, 38 | }, 39 | }, 40 | ]; 41 | }; 42 | 43 | export default tokens; 44 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/tokens/dotenv.ts: -------------------------------------------------------------------------------- 1 | import type { TextmateColors, ThemeContext } from "@/types"; 2 | 3 | const tokens = (context: ThemeContext): TextmateColors => { 4 | const { palette } = context; 5 | 6 | return [ 7 | { 8 | name: "dotenv left-hand side assignments", 9 | scope: ["variable.other.env"], 10 | settings: { 11 | foreground: palette.blue, 12 | }, 13 | }, 14 | { 15 | name: "dotenv reference to existing env variable", 16 | scope: ["string.quoted variable.other.env"], 17 | settings: { 18 | foreground: palette.text, 19 | }, 20 | }, 21 | ]; 22 | }; 23 | 24 | export default tokens; 25 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/tokens/gdscript.ts: -------------------------------------------------------------------------------- 1 | import type { TextmateColors, ThemeContext } from "@/types"; 2 | 3 | const tokens = (context: ThemeContext): TextmateColors => { 4 | const { palette } = context; 5 | 6 | return [ 7 | { 8 | name: "GDScript functions", 9 | scope: "support.function.builtin.gdscript", 10 | settings: { 11 | foreground: palette.blue, 12 | }, 13 | }, 14 | { 15 | name: "GDScript constants", 16 | scope: "constant.language.gdscript", 17 | settings: { 18 | foreground: palette.peach, 19 | }, 20 | }, 21 | ]; 22 | }; 23 | 24 | export default tokens; 25 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/tokens/golang.ts: -------------------------------------------------------------------------------- 1 | import type { TextmateColors, ThemeContext } from "@/types"; 2 | 3 | const tokens = (context: ThemeContext): TextmateColors => { 4 | const { palette } = context; 5 | 6 | return [ 7 | { 8 | name: "Comment keywords", 9 | scope: "comment meta.annotation.go", 10 | settings: { 11 | foreground: palette.maroon, 12 | }, 13 | }, 14 | { 15 | name: "go:embed, go:build, etc.", 16 | scope: "comment meta.annotation.parameters.go", 17 | settings: { 18 | foreground: palette.peach, 19 | }, 20 | }, 21 | { 22 | name: "Go constants (nil, true, false)", 23 | // nil should be peach, but TextMate doesn't offer a fine-grained enough scope 24 | scope: "constant.language.go", 25 | settings: { 26 | foreground: palette.peach, 27 | }, 28 | }, 29 | ]; 30 | }; 31 | 32 | export default tokens; 33 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/tokens/graphql.ts: -------------------------------------------------------------------------------- 1 | import type { TextmateColors, ThemeContext } from "@/types"; 2 | 3 | const tokens = (context: ThemeContext): TextmateColors => { 4 | const { palette } = context; 5 | 6 | return [ 7 | { 8 | name: "GraphQL variables", 9 | scope: "variable.graphql", 10 | settings: { 11 | foreground: palette.text, 12 | }, 13 | }, 14 | { 15 | name: "GraphQL aliases", 16 | scope: "string.unquoted.alias.graphql", 17 | settings: { 18 | foreground: palette.flamingo, 19 | }, 20 | }, 21 | { 22 | name: "GraphQL enum members", 23 | scope: "constant.character.enum.graphql", 24 | settings: { 25 | foreground: palette.teal, 26 | }, 27 | }, 28 | { 29 | name: "GraphQL field in types", 30 | scope: 31 | "meta.objectvalues.graphql constant.object.key.graphql string.unquoted.graphql", 32 | settings: { 33 | foreground: palette.flamingo, 34 | }, 35 | }, 36 | ]; 37 | }; 38 | 39 | export default tokens; 40 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/tokens/html.ts: -------------------------------------------------------------------------------- 1 | import type { TextmateColors, ThemeContext } from "@/types"; 2 | 3 | const tokens = (context: ThemeContext): TextmateColors => { 4 | const { palette } = context; 5 | 6 | return [ 7 | { 8 | name: "HTML/XML DOCTYPE as keyword", 9 | scope: [ 10 | "keyword.other.doctype", 11 | "meta.tag.sgml.doctype punctuation.definition.tag", 12 | "meta.tag.metadata.doctype entity.name.tag", 13 | "meta.tag.metadata.doctype punctuation.definition.tag", 14 | ], 15 | settings: { 16 | foreground: palette.mauve, 17 | }, 18 | }, 19 | { 20 | name: "HTML/XML-like ", 21 | scope: ["entity.name.tag"], 22 | settings: { 23 | foreground: palette.blue, 24 | fontStyle: "", 25 | }, 26 | }, 27 | { 28 | name: "Special characters like &", 29 | scope: [ 30 | "text.html constant.character.entity", 31 | "text.html constant.character.entity punctuation", 32 | "constant.character.entity.xml", 33 | "constant.character.entity.xml punctuation", 34 | // ditto for JSX / TSX 35 | "constant.character.entity.js.jsx", 36 | "constant.charactger.entity.js.jsx punctuation", 37 | "constant.character.entity.tsx", 38 | "constant.character.entity.tsx punctuation", 39 | ], 40 | settings: { 41 | foreground: palette.red, 42 | }, 43 | }, 44 | { 45 | name: "HTML/XML tag attribute values", 46 | scope: ["entity.other.attribute-name"], 47 | settings: { 48 | foreground: palette.yellow, 49 | }, 50 | }, 51 | { 52 | name: "Components", 53 | scope: [ 54 | "support.class.component", 55 | "support.class.component.jsx", 56 | "support.class.component.tsx", 57 | "support.class.component.vue", 58 | ], 59 | settings: { 60 | foreground: palette.pink, 61 | fontStyle: "", 62 | }, 63 | }, 64 | ]; 65 | }; 66 | 67 | export default tokens; 68 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/tokens/index.ts: -------------------------------------------------------------------------------- 1 | import type { TextmateColors, ThemeContext } from "@/types"; 2 | 3 | import cpp from "./cpp"; 4 | import cs from "./cs"; 5 | import css from "./css"; 6 | import data from "./data"; 7 | import diff from "./diff"; 8 | import dotenv from "./dotenv"; 9 | import gdscript from "./gdscript"; 10 | import golang from "./golang"; 11 | import graphql from "./graphql"; 12 | import html from "./html"; 13 | import java from "./java"; 14 | import javascript from "./javascript"; 15 | import julia from "./julia"; 16 | import latex from "./latex"; 17 | import liquid from "./liquid"; 18 | import lua from "./lua"; 19 | import markdown from "./markdown"; 20 | import nix from "./nix"; 21 | import php from "./php"; 22 | import python from "./python"; 23 | import regex from "./regex"; 24 | import rust from "./rust"; 25 | import shell from "./shell"; 26 | import typst from "./typst"; 27 | 28 | export default function tokens(context: ThemeContext): TextmateColors { 29 | const { options, palette } = context; 30 | 31 | return [ 32 | { 33 | name: "Basic text & variable names (incl. leading punctuation)", 34 | scope: [ 35 | "text", 36 | "source", 37 | "variable.other.readwrite", 38 | "punctuation.definition.variable", 39 | ], 40 | settings: { 41 | foreground: palette.text, 42 | }, 43 | }, 44 | { 45 | name: "Parentheses, Brackets, Braces", 46 | scope: "punctuation", 47 | settings: { 48 | foreground: palette.overlay2, 49 | fontStyle: "", 50 | }, 51 | }, 52 | { 53 | name: "Comments", 54 | scope: ["comment", "punctuation.definition.comment"], 55 | settings: { 56 | foreground: palette.overlay2, 57 | fontStyle: options.italicComments ? "italic" : "", 58 | }, 59 | }, 60 | { 61 | scope: ["string", "punctuation.definition.string"], 62 | settings: { 63 | foreground: palette.green, 64 | }, 65 | }, 66 | { 67 | scope: "constant.character.escape", 68 | settings: { 69 | foreground: palette.pink, 70 | }, 71 | }, 72 | { 73 | name: "Booleans, constants, numbers", 74 | scope: [ 75 | "constant.numeric", 76 | "variable.other.constant", 77 | "entity.name.constant", 78 | "constant.language.boolean", 79 | "constant.language.false", 80 | "constant.language.true", 81 | "keyword.other.unit.user-defined", 82 | "keyword.other.unit.suffix.floating-point", 83 | ], 84 | settings: { 85 | foreground: palette.peach, 86 | }, 87 | }, 88 | { 89 | scope: [ 90 | "keyword", 91 | "keyword.operator.word", 92 | "keyword.operator.new", 93 | "variable.language.super", 94 | "support.type.primitive", 95 | "storage.type", 96 | "storage.modifier", 97 | // include punctuation like $ and @ if they're part of the keyword 98 | "punctuation.definition.keyword", 99 | ], 100 | settings: { 101 | foreground: palette.mauve, 102 | fontStyle: "", 103 | }, 104 | }, 105 | { 106 | scope: "entity.name.tag.documentation", 107 | settings: { 108 | foreground: palette.mauve, 109 | }, 110 | }, 111 | { 112 | name: "Punctuation", 113 | scope: [ 114 | "keyword.operator", 115 | "punctuation.accessor", 116 | "punctuation.definition.generic", 117 | "meta.function.closure punctuation.section.parameters", 118 | "punctuation.definition.tag", 119 | "punctuation.separator.key-value", 120 | ], 121 | settings: { 122 | foreground: palette.teal, 123 | }, 124 | }, 125 | { 126 | scope: [ 127 | "entity.name.function", 128 | "meta.function-call.method", 129 | "support.function", 130 | "support.function.misc", 131 | "variable.function", 132 | ], 133 | settings: { 134 | foreground: palette.blue, 135 | fontStyle: "italic", 136 | }, 137 | }, 138 | { 139 | name: "Classes", 140 | scope: [ 141 | "entity.name.class", 142 | "entity.other.inherited-class", 143 | "support.class", 144 | "meta.function-call.constructor", 145 | "entity.name.struct", 146 | ], 147 | settings: { 148 | foreground: palette.yellow, 149 | fontStyle: "italic", 150 | }, 151 | }, 152 | { 153 | name: "Enum", 154 | scope: "entity.name.enum", 155 | settings: { 156 | foreground: palette.yellow, 157 | fontStyle: "italic", 158 | }, 159 | }, 160 | { 161 | name: "Enum member", 162 | scope: [ 163 | "meta.enum variable.other.readwrite", 164 | "variable.other.enummember", 165 | ], 166 | settings: { 167 | foreground: palette.teal, 168 | }, 169 | }, 170 | { 171 | name: "Object properties", 172 | scope: "meta.property.object", 173 | settings: { 174 | foreground: palette.teal, 175 | }, 176 | }, 177 | { 178 | name: "Types", 179 | scope: [ 180 | "meta.type", 181 | "meta.type-alias", 182 | "support.type", 183 | "entity.name.type", 184 | ], 185 | settings: { 186 | foreground: palette.yellow, 187 | fontStyle: "italic", 188 | }, 189 | }, 190 | { 191 | name: "Decorators", 192 | scope: [ 193 | "meta.annotation variable.function", 194 | "meta.annotation variable.annotation.function", 195 | "meta.annotation punctuation.definition.annotation", 196 | "meta.decorator", 197 | "punctuation.decorator", 198 | ], 199 | settings: { 200 | foreground: palette.peach, 201 | }, 202 | }, 203 | { 204 | scope: ["variable.parameter", "meta.function.parameters"], 205 | settings: { 206 | foreground: palette.maroon, 207 | fontStyle: "italic", 208 | }, 209 | }, 210 | { 211 | name: "Built-ins", 212 | scope: ["constant.language", "support.function.builtin"], 213 | settings: { 214 | foreground: palette.red, 215 | }, 216 | }, 217 | { 218 | scope: "entity.other.attribute-name.documentation", 219 | settings: { 220 | foreground: palette.red, 221 | }, 222 | }, 223 | { 224 | name: "Preprocessor directives", 225 | scope: ["keyword.control.directive", "punctuation.definition.directive"], 226 | settings: { 227 | foreground: palette.yellow, 228 | }, 229 | }, 230 | { 231 | name: "Type parameters", 232 | scope: "punctuation.definition.typeparameters", 233 | settings: { 234 | foreground: palette.sky, 235 | }, 236 | }, 237 | { 238 | name: "Namespaces", 239 | scope: "entity.name.namespace", 240 | settings: { 241 | foreground: palette.yellow, 242 | }, 243 | }, 244 | { 245 | name: "Property names (left hand assignments in json/yaml/css/less)", 246 | scope: [ 247 | "support.type.property-name.css", 248 | "support.type.property-name.less", 249 | ], 250 | settings: { 251 | foreground: palette.blue, 252 | fontStyle: "", 253 | }, 254 | }, 255 | { 256 | name: "This/Self keyword", 257 | scope: [ 258 | "variable.language.this", 259 | // leading punctuation like $this in PHP 260 | "variable.language.this punctuation.definition.variable", 261 | ], 262 | settings: { 263 | foreground: palette.red, 264 | }, 265 | }, 266 | { 267 | name: "Object properties", 268 | scope: "variable.object.property", 269 | settings: { 270 | foreground: palette.text, 271 | }, 272 | }, 273 | { 274 | name: "String template interpolation", 275 | scope: ["string.template variable", "string variable"], 276 | settings: { 277 | foreground: palette.text, 278 | }, 279 | }, 280 | { 281 | name: "`new` as bold", 282 | scope: "keyword.operator.new", 283 | settings: { 284 | fontStyle: "bold", 285 | }, 286 | }, 287 | 288 | // per-language tokens 289 | ...[ 290 | cpp, 291 | cs, 292 | css, 293 | data, 294 | diff, 295 | dotenv, 296 | gdscript, 297 | golang, 298 | graphql, 299 | html, 300 | java, 301 | javascript, 302 | julia, 303 | latex, 304 | liquid, 305 | lua, 306 | markdown, 307 | nix, 308 | php, 309 | python, 310 | regex, 311 | rust, 312 | shell, 313 | typst, 314 | ].flatMap((element) => element(context)), 315 | ]; 316 | } 317 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/tokens/java.ts: -------------------------------------------------------------------------------- 1 | import type { TextmateColors, ThemeContext } from "@/types"; 2 | 3 | const tokens = (context: ThemeContext): TextmateColors => { 4 | const { palette } = context; 5 | 6 | return [ 7 | { 8 | name: "Annotations", 9 | scope: ["punctuation.definition.annotation", "storage.type.annotation"], 10 | settings: { 11 | foreground: palette.peach, 12 | }, 13 | }, 14 | { 15 | name: "Java enums", 16 | scope: "constant.other.enum.java", 17 | settings: { 18 | foreground: palette.teal, 19 | }, 20 | }, 21 | { 22 | name: "Java imports", 23 | scope: "storage.modifier.import.java", 24 | settings: { 25 | foreground: palette.text, 26 | }, 27 | }, 28 | { 29 | name: "Javadoc", 30 | scope: 31 | "comment.block.javadoc.java keyword.other.documentation.javadoc.java", 32 | settings: { fontStyle: "" }, 33 | }, 34 | ]; 35 | }; 36 | 37 | export default tokens; 38 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/tokens/javascript.ts: -------------------------------------------------------------------------------- 1 | import type { TextmateColors, ThemeContext } from "@/types"; 2 | 3 | const tokens = (context: ThemeContext): TextmateColors => { 4 | const { palette } = context; 5 | 6 | return [ 7 | { 8 | name: "Exported Variable", 9 | scope: "meta.export variable.other.readwrite.js", 10 | settings: { 11 | foreground: palette.maroon, 12 | }, 13 | }, 14 | { 15 | name: "JS/TS constants & properties", 16 | scope: [ 17 | "variable.other.constant.js", 18 | "variable.other.constant.ts", 19 | "variable.other.property.js", 20 | "variable.other.property.ts", 21 | ], 22 | settings: { 23 | foreground: palette.text, 24 | }, 25 | }, 26 | { 27 | name: "JSDoc; these are mainly params, so styled as such", 28 | scope: [ 29 | "variable.other.jsdoc", 30 | "comment.block.documentation variable.other", 31 | ], 32 | settings: { 33 | foreground: palette.maroon, 34 | fontStyle: "", 35 | }, 36 | }, 37 | { 38 | name: "JSDoc keywords", 39 | scope: "storage.type.class.jsdoc", 40 | settings: { 41 | fontStyle: "", 42 | }, 43 | }, 44 | { 45 | scope: "support.type.object.console.js", 46 | settings: { 47 | foreground: palette.text, 48 | }, 49 | }, 50 | { 51 | name: "Node constants as keywords (module, etc.)", 52 | scope: ["support.constant.node", "support.type.object.module.js"], 53 | settings: { 54 | foreground: palette.mauve, 55 | }, 56 | }, 57 | { 58 | name: "implements as keyword", 59 | scope: "storage.modifier.implements", 60 | settings: { 61 | foreground: palette.mauve, 62 | }, 63 | }, 64 | { 65 | name: "Builtin types", 66 | scope: [ 67 | "constant.language.null.js", 68 | "constant.language.null.ts", 69 | "constant.language.undefined.js", 70 | "constant.language.undefined.ts", 71 | "support.type.builtin.ts", 72 | ], 73 | settings: { 74 | foreground: palette.mauve, 75 | }, 76 | }, 77 | { 78 | scope: "variable.parameter.generic", 79 | settings: { 80 | foreground: palette.yellow, 81 | }, 82 | }, 83 | { 84 | name: "Arrow functions", 85 | scope: [ 86 | "keyword.declaration.function.arrow.js", 87 | "storage.type.function.arrow.ts", 88 | ], 89 | settings: { 90 | foreground: palette.teal, 91 | }, 92 | }, 93 | { 94 | name: "Decorator punctuations (decorators inherit from blue functions, instead of styleguide peach)", 95 | scope: "punctuation.decorator.ts", 96 | settings: { 97 | foreground: palette.blue, 98 | fontStyle: "italic", 99 | }, 100 | }, 101 | { 102 | name: "Extra JS/TS keywords", 103 | scope: [ 104 | "keyword.operator.expression.in.js", 105 | "keyword.operator.expression.in.ts", 106 | "keyword.operator.expression.infer.ts", 107 | "keyword.operator.expression.instanceof.js", 108 | "keyword.operator.expression.instanceof.ts", 109 | "keyword.operator.expression.is", 110 | "keyword.operator.expression.keyof.ts", 111 | "keyword.operator.expression.of.js", 112 | "keyword.operator.expression.of.ts", 113 | "keyword.operator.expression.typeof.ts", 114 | ], 115 | settings: { 116 | foreground: palette.mauve, 117 | }, 118 | }, 119 | ]; 120 | }; 121 | 122 | export default tokens; 123 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/tokens/julia.ts: -------------------------------------------------------------------------------- 1 | import type { TextmateColors, ThemeContext } from "@/types"; 2 | 3 | const tokens = (context: ThemeContext): TextmateColors => { 4 | const { palette } = context; 5 | 6 | return [ 7 | { 8 | name: "Julia macros", 9 | scope: "support.function.macro.julia", 10 | settings: { 11 | foreground: palette.teal, 12 | fontStyle: "italic", 13 | }, 14 | }, 15 | { 16 | name: "Julia language constants (true, false)", 17 | scope: "constant.language.julia", 18 | settings: { 19 | foreground: palette.peach, 20 | }, 21 | }, 22 | { 23 | name: "Julia other constants (these seem to be arguments inside arrays)", 24 | scope: "constant.other.symbol.julia", 25 | settings: { 26 | foreground: palette.maroon, 27 | }, 28 | }, 29 | ]; 30 | }; 31 | 32 | export default tokens; 33 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/tokens/latex.ts: -------------------------------------------------------------------------------- 1 | import type { TextmateColors, ThemeContext } from "@/types"; 2 | 3 | const tokens = (context: ThemeContext): TextmateColors => { 4 | const { palette } = context; 5 | 6 | return [ 7 | { 8 | name: "LaTeX preamble", 9 | scope: "text.tex keyword.control.preamble", 10 | settings: { 11 | foreground: palette.teal, 12 | }, 13 | }, 14 | { 15 | name: "LaTeX be functions", 16 | scope: "text.tex support.function.be", 17 | settings: { 18 | foreground: palette.sky, 19 | }, 20 | }, 21 | { 22 | name: "LaTeX math", 23 | scope: "constant.other.general.math.tex", 24 | settings: { 25 | foreground: palette.flamingo, 26 | }, 27 | }, 28 | ]; 29 | }; 30 | 31 | export default tokens; 32 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/tokens/liquid.ts: -------------------------------------------------------------------------------- 1 | import type { TextmateColors, ThemeContext } from "@/types"; 2 | 3 | const tokens = (context: ThemeContext): TextmateColors => { 4 | const { palette } = context; 5 | 6 | return [ 7 | { 8 | name: "Liquid Builtin Objects & User Defined Variables", 9 | scope: "variable.language.liquid", 10 | settings: { 11 | foreground: palette.pink, 12 | }, 13 | }, 14 | ]; 15 | }; 16 | 17 | export default tokens; 18 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/tokens/lua.ts: -------------------------------------------------------------------------------- 1 | import type { TextmateColors, ThemeContext } from "@/types"; 2 | 3 | const tokens = (context: ThemeContext): TextmateColors => { 4 | const { palette } = context; 5 | 6 | return [ 7 | { 8 | name: "Lua docstring keywords", 9 | scope: 10 | "comment.line.double-dash.documentation.lua storage.type.annotation.lua", 11 | settings: { 12 | foreground: palette.mauve, 13 | fontStyle: "", 14 | }, 15 | }, 16 | { 17 | name: "Lua docstring variables", 18 | scope: [ 19 | "comment.line.double-dash.documentation.lua entity.name.variable.lua", 20 | "comment.line.double-dash.documentation.lua variable.lua", 21 | ], 22 | settings: { 23 | foreground: palette.text, 24 | }, 25 | }, 26 | ]; 27 | }; 28 | 29 | export default tokens; 30 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/tokens/markdown.ts: -------------------------------------------------------------------------------- 1 | import type { TextmateColors, ThemeContext } from "@/types"; 2 | 3 | const tokens = (context: ThemeContext): TextmateColors => { 4 | const { palette } = context; 5 | 6 | return [ 7 | { 8 | scope: [ 9 | "heading.1.markdown punctuation.definition.heading.markdown", 10 | "heading.1.markdown", 11 | "heading.1.quarto punctuation.definition.heading.quarto", 12 | "heading.1.quarto", 13 | "markup.heading.atx.1.mdx", 14 | "markup.heading.atx.1.mdx punctuation.definition.heading.mdx", 15 | "markup.heading.setext.1.markdown", 16 | "markup.heading.heading-0.asciidoc", 17 | ], 18 | settings: { 19 | foreground: palette.red, 20 | }, 21 | }, 22 | { 23 | scope: [ 24 | "heading.2.markdown punctuation.definition.heading.markdown", 25 | "heading.2.markdown", 26 | "heading.2.quarto punctuation.definition.heading.quarto", 27 | "heading.2.quarto", 28 | "markup.heading.atx.2.mdx", 29 | "markup.heading.atx.2.mdx punctuation.definition.heading.mdx", 30 | "markup.heading.setext.2.markdown", 31 | "markup.heading.heading-1.asciidoc", 32 | ], 33 | settings: { 34 | foreground: palette.peach, 35 | }, 36 | }, 37 | { 38 | scope: [ 39 | "heading.3.markdown punctuation.definition.heading.markdown", 40 | "heading.3.markdown", 41 | "heading.3.quarto punctuation.definition.heading.quarto", 42 | "heading.3.quarto", 43 | "markup.heading.atx.3.mdx", 44 | "markup.heading.atx.3.mdx punctuation.definition.heading.mdx", 45 | "markup.heading.heading-2.asciidoc", 46 | ], 47 | settings: { 48 | foreground: palette.yellow, 49 | }, 50 | }, 51 | { 52 | scope: [ 53 | "heading.4.markdown punctuation.definition.heading.markdown", 54 | "heading.4.markdown", 55 | "heading.4.quarto punctuation.definition.heading.quarto", 56 | "heading.4.quarto", 57 | "markup.heading.atx.4.mdx", 58 | "markup.heading.atx.4.mdx punctuation.definition.heading.mdx", 59 | "markup.heading.heading-3.asciidoc", 60 | ], 61 | settings: { 62 | foreground: palette.green, 63 | }, 64 | }, 65 | { 66 | scope: [ 67 | "heading.5.markdown punctuation.definition.heading.markdown", 68 | "heading.5.markdown", 69 | "heading.5.quarto punctuation.definition.heading.quarto", 70 | "heading.5.quarto", 71 | "markup.heading.atx.5.mdx", 72 | "markup.heading.atx.5.mdx punctuation.definition.heading.mdx", 73 | "markup.heading.heading-4.asciidoc", 74 | ], 75 | settings: { 76 | foreground: palette.sapphire, 77 | }, 78 | }, 79 | { 80 | scope: [ 81 | "heading.6.markdown punctuation.definition.heading.markdown", 82 | "heading.6.markdown", 83 | "heading.6.quarto punctuation.definition.heading.quarto", 84 | "heading.6.quarto", 85 | "markup.heading.atx.6.mdx", 86 | "markup.heading.atx.6.mdx punctuation.definition.heading.mdx", 87 | "markup.heading.heading-5.asciidoc", 88 | ], 89 | settings: { 90 | foreground: palette.lavender, 91 | }, 92 | }, 93 | { 94 | scope: "markup.bold", 95 | settings: { 96 | foreground: palette.red, 97 | fontStyle: "bold", 98 | }, 99 | }, 100 | { 101 | scope: "markup.italic", 102 | settings: { 103 | foreground: palette.red, 104 | fontStyle: "italic", 105 | }, 106 | }, 107 | { 108 | scope: "markup.strikethrough", 109 | settings: { 110 | foreground: palette.subtext0, 111 | fontStyle: "strikethrough", 112 | }, 113 | }, 114 | { 115 | name: "Markdown auto links", 116 | scope: ["punctuation.definition.link", "markup.underline.link"], 117 | settings: { 118 | foreground: palette.blue, 119 | }, 120 | }, 121 | { 122 | name: "Markdown links", 123 | scope: [ 124 | "text.html.markdown punctuation.definition.link.title", 125 | "text.html.quarto punctuation.definition.link.title", 126 | "string.other.link.title.markdown", 127 | "string.other.link.title.quarto", 128 | "markup.link", 129 | // references like 130 | // > [1]: http://example.com "Example" 131 | "punctuation.definition.constant.markdown", 132 | "punctuation.definition.constant.quarto", 133 | "constant.other.reference.link.markdown", 134 | "constant.other.reference.link.quarto", 135 | "markup.substitution.attribute-reference", 136 | ], 137 | settings: { 138 | foreground: palette.lavender, 139 | }, 140 | }, 141 | { 142 | name: "Markdown code spans", 143 | scope: [ 144 | "punctuation.definition.raw.markdown", 145 | "punctuation.definition.raw.quarto", 146 | "markup.inline.raw.string.markdown", 147 | "markup.inline.raw.string.quarto", 148 | "markup.raw.block.markdown", 149 | "markup.raw.block.quarto", 150 | ], 151 | settings: { 152 | foreground: palette.green, 153 | }, 154 | }, 155 | { 156 | name: "Markdown triple backtick language identifier", 157 | scope: "fenced_code.block.language", 158 | settings: { 159 | foreground: palette.sky, 160 | }, 161 | }, 162 | { 163 | name: "Markdown triple backticks", 164 | scope: [ 165 | "markup.fenced_code.block punctuation.definition", 166 | "markup.raw support.asciidoc", 167 | ], 168 | settings: { 169 | foreground: palette.overlay2, 170 | }, 171 | }, 172 | { 173 | name: "Markdown quotes", 174 | scope: ["markup.quote", "punctuation.definition.quote.begin"], 175 | settings: { 176 | foreground: palette.pink, 177 | }, 178 | }, 179 | { 180 | name: "Markdown separators", 181 | scope: "meta.separator.markdown", 182 | settings: { 183 | foreground: palette.teal, 184 | }, 185 | }, 186 | { 187 | name: "Markdown list bullets", 188 | scope: [ 189 | "punctuation.definition.list.begin.markdown", 190 | "punctuation.definition.list.begin.quarto", 191 | "markup.list.bullet", 192 | ], 193 | settings: { 194 | foreground: palette.teal, 195 | }, 196 | }, 197 | { 198 | name: "Quarto headings", 199 | scope: "markup.heading.quarto", 200 | settings: { 201 | fontStyle: "bold", 202 | }, 203 | }, 204 | ]; 205 | }; 206 | 207 | export default tokens; 208 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/tokens/nix.ts: -------------------------------------------------------------------------------- 1 | import type { TextmateColors, ThemeContext } from "@/types"; 2 | 3 | const tokens = (context: ThemeContext): TextmateColors => { 4 | const { palette } = context; 5 | 6 | return [ 7 | { 8 | name: "Nix attribute names", 9 | scope: [ 10 | "entity.other.attribute-name.multipart.nix", 11 | "entity.other.attribute-name.single.nix", 12 | ], 13 | settings: { 14 | foreground: palette.blue, 15 | }, 16 | }, 17 | { 18 | name: "Nix parameter names", 19 | scope: "variable.parameter.name.nix", 20 | settings: { 21 | foreground: palette.text, 22 | fontStyle: "", 23 | }, 24 | }, 25 | { 26 | name: "Nix interpolated parameter names", 27 | scope: "meta.embedded variable.parameter.name.nix", 28 | settings: { 29 | foreground: palette.lavender, 30 | fontStyle: "", 31 | }, 32 | }, 33 | { 34 | name: "Nix paths", 35 | scope: "string.unquoted.path.nix", 36 | settings: { 37 | foreground: palette.pink, 38 | fontStyle: "", 39 | }, 40 | }, 41 | ]; 42 | }; 43 | 44 | export default tokens; 45 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/tokens/php.ts: -------------------------------------------------------------------------------- 1 | import type { TextmateColors, ThemeContext } from "@/types"; 2 | 3 | const tokens = (context: ThemeContext): TextmateColors => { 4 | const { palette } = context; 5 | 6 | return [ 7 | { 8 | name: "PHP Attributes", 9 | scope: ["support.attribute.builtin", "meta.attribute.php"], 10 | settings: { 11 | foreground: palette.yellow, 12 | }, 13 | }, 14 | { 15 | name: "PHP Parameters (needed for the leading dollar sign)", 16 | scope: "meta.function.parameters.php punctuation.definition.variable.php", 17 | settings: { 18 | foreground: palette.maroon, 19 | }, 20 | }, 21 | { 22 | name: "PHP Constants (null, __FILE__, etc.)", 23 | scope: "constant.language.php", 24 | settings: { 25 | foreground: palette.mauve, 26 | }, 27 | }, 28 | { 29 | name: "PHP functions", 30 | scope: "text.html.php support.function", 31 | settings: { 32 | foreground: palette.sky, 33 | }, 34 | }, 35 | { 36 | name: "PHPdoc keywords", 37 | scope: "keyword.other.phpdoc.php", 38 | settings: { 39 | fontStyle: "", 40 | }, 41 | }, 42 | ]; 43 | }; 44 | 45 | export default tokens; 46 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/tokens/python.ts: -------------------------------------------------------------------------------- 1 | import type { TextmateColors, ThemeContext } from "@/types"; 2 | 3 | const tokens = (context: ThemeContext): TextmateColors => { 4 | const { palette } = context; 5 | 6 | return [ 7 | { 8 | name: "Python argument functions reset to text, otherwise they inherit blue from function-call", 9 | scope: [ 10 | "support.variable.magic.python", 11 | "meta.function-call.arguments.python", 12 | ], 13 | settings: { 14 | foreground: palette.text, 15 | }, 16 | }, 17 | { 18 | name: "Python double underscore functions", 19 | scope: ["support.function.magic.python"], 20 | settings: { 21 | foreground: palette.sky, 22 | fontStyle: "italic", 23 | }, 24 | }, 25 | { 26 | name: "Python `self` keyword", 27 | scope: [ 28 | "variable.parameter.function.language.special.self.python", 29 | "variable.language.special.self.python", 30 | ], 31 | settings: { 32 | foreground: palette.red, 33 | fontStyle: "italic", 34 | }, 35 | }, 36 | { 37 | name: "python keyword flow/logical (for ... in)", 38 | scope: ["keyword.control.flow.python", "keyword.operator.logical.python"], 39 | settings: { 40 | foreground: palette.mauve, 41 | }, 42 | }, 43 | { 44 | name: "python storage type", 45 | scope: "storage.type.function.python", 46 | settings: { 47 | foreground: palette.mauve, 48 | }, 49 | }, 50 | { 51 | name: "python function support", 52 | scope: [ 53 | "support.token.decorator.python", 54 | "meta.function.decorator.identifier.python", 55 | ], 56 | settings: { 57 | foreground: palette.sky, 58 | }, 59 | }, 60 | { 61 | name: "python function calls", 62 | scope: ["meta.function-call.python"], 63 | settings: { 64 | foreground: palette.blue, 65 | }, 66 | }, 67 | { 68 | name: "python function decorators", 69 | scope: [ 70 | "entity.name.function.decorator.python", 71 | "punctuation.definition.decorator.python", 72 | ], 73 | settings: { 74 | foreground: palette.peach, 75 | fontStyle: "italic", 76 | }, 77 | }, 78 | { 79 | name: "python placeholder reset to normal string", 80 | scope: "constant.character.format.placeholder.other.python", 81 | settings: { 82 | foreground: palette.pink, 83 | }, 84 | }, 85 | { 86 | name: "Python exception & builtins such as exit()", 87 | scope: [ 88 | "support.type.exception.python", 89 | "support.function.builtin.python", 90 | ], 91 | settings: { 92 | foreground: palette.peach, 93 | }, 94 | }, 95 | { 96 | name: "entity.name.type", 97 | scope: ["support.type.python"], 98 | settings: { 99 | foreground: palette.mauve, 100 | }, 101 | }, 102 | { 103 | name: "python constants (True/False)", 104 | scope: "constant.language.python", 105 | settings: { 106 | foreground: palette.peach, 107 | }, 108 | }, 109 | { 110 | name: "Arguments accessed later in the function body", 111 | scope: ["meta.indexed-name.python", "meta.item-access.python"], 112 | settings: { 113 | foreground: palette.maroon, 114 | fontStyle: "italic", 115 | }, 116 | }, 117 | { 118 | name: "Python f-strings/binary/unicode storage types", 119 | scope: "storage.type.string.python", 120 | settings: { 121 | foreground: palette.green, 122 | fontStyle: "italic", 123 | }, 124 | }, 125 | { 126 | name: "Python type hints", 127 | scope: "meta.function.parameters.python", 128 | settings: { 129 | fontStyle: "", 130 | }, 131 | }, 132 | ]; 133 | }; 134 | 135 | export default tokens; 136 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/tokens/regex.ts: -------------------------------------------------------------------------------- 1 | import type { TextmateColors, ThemeContext } from "@/types"; 2 | 3 | const tokens = (context: ThemeContext): TextmateColors => { 4 | const { palette } = context; 5 | 6 | return [ 7 | { 8 | name: "Regex string begin/end in JS/TS", 9 | scope: [ 10 | "string.regexp punctuation.definition.string.begin", 11 | "string.regexp punctuation.definition.string.end", 12 | ], 13 | settings: { 14 | foreground: palette.pink, 15 | }, 16 | }, 17 | { 18 | name: "Regex anchors (^, $)", 19 | scope: "keyword.control.anchor.regexp", 20 | settings: { 21 | foreground: palette.mauve, 22 | }, 23 | }, 24 | { 25 | name: "Regex regular string match", 26 | scope: "string.regexp.ts", 27 | settings: { 28 | foreground: palette.text, 29 | }, 30 | }, 31 | { 32 | name: "Regex group parenthesis & backreference (\\1, \\2, \\3, ...)", 33 | scope: [ 34 | "punctuation.definition.group.regexp", 35 | "keyword.other.back-reference.regexp", 36 | ], 37 | settings: { 38 | foreground: palette.green, 39 | }, 40 | }, 41 | { 42 | name: "Regex character class []", 43 | scope: "punctuation.definition.character-class.regexp", 44 | settings: { 45 | foreground: palette.yellow, 46 | }, 47 | }, 48 | { 49 | name: "Regex character classes (\\d, \\w, \\s)", 50 | scope: "constant.other.character-class.regexp", 51 | settings: { 52 | foreground: palette.pink, 53 | }, 54 | }, 55 | { 56 | name: "Regex range", 57 | scope: "constant.other.character-class.range.regexp", 58 | settings: { 59 | foreground: palette.rosewater, 60 | }, 61 | }, 62 | { 63 | name: "Regex quantifier", 64 | scope: "keyword.operator.quantifier.regexp", 65 | settings: { 66 | foreground: palette.teal, 67 | }, 68 | }, 69 | { 70 | name: "Regex constant/numeric", 71 | scope: "constant.character.numeric.regexp", 72 | settings: { 73 | foreground: palette.peach, 74 | }, 75 | }, 76 | { 77 | name: "Regex lookaheads, negative lookaheads, lookbehinds, negative lookbehinds", 78 | scope: [ 79 | "punctuation.definition.group.no-capture.regexp", 80 | "meta.assertion.look-ahead.regexp", 81 | "meta.assertion.negative-look-ahead.regexp", 82 | ], 83 | settings: { 84 | foreground: palette.blue, 85 | }, 86 | }, 87 | ]; 88 | }; 89 | 90 | export default tokens; 91 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/tokens/rust.ts: -------------------------------------------------------------------------------- 1 | import type { TextmateColors, ThemeContext } from "@/types"; 2 | 3 | const tokens = (context: ThemeContext): TextmateColors => { 4 | const { palette } = context; 5 | 6 | return [ 7 | { 8 | name: "Rust attribute", 9 | scope: [ 10 | "meta.annotation.rust", 11 | "meta.annotation.rust punctuation", 12 | "meta.attribute.rust", 13 | "punctuation.definition.attribute.rust", 14 | ], 15 | settings: { 16 | foreground: palette.yellow, 17 | fontStyle: "italic", 18 | }, 19 | }, 20 | { 21 | name: "Rust attribute strings", 22 | scope: [ 23 | "meta.attribute.rust string.quoted.double.rust", 24 | "meta.attribute.rust string.quoted.single.char.rust", 25 | ], 26 | settings: { 27 | fontStyle: "", 28 | }, 29 | }, 30 | { 31 | name: "Rust keyword", 32 | scope: [ 33 | "entity.name.function.macro.rules.rust", 34 | "storage.type.module.rust", 35 | "storage.modifier.rust", 36 | "storage.type.struct.rust", 37 | "storage.type.enum.rust", 38 | "storage.type.trait.rust", 39 | "storage.type.union.rust", 40 | "storage.type.impl.rust", 41 | "storage.type.rust", 42 | "storage.type.function.rust", 43 | "storage.type.type.rust", 44 | ], 45 | settings: { 46 | foreground: palette.mauve, 47 | fontStyle: "", 48 | }, 49 | }, 50 | { 51 | name: "Rust u/i32, u/i64, etc.", 52 | scope: "entity.name.type.numeric.rust", 53 | settings: { 54 | foreground: palette.mauve, 55 | fontStyle: "", 56 | }, 57 | }, 58 | { 59 | name: "Rust generic", 60 | scope: "meta.generic.rust", 61 | settings: { 62 | foreground: palette.peach, 63 | }, 64 | }, 65 | { 66 | name: "Rust impl", 67 | scope: "entity.name.impl.rust", 68 | settings: { 69 | foreground: palette.yellow, 70 | fontStyle: "italic", 71 | }, 72 | }, 73 | { 74 | name: "Rust module", 75 | scope: "entity.name.module.rust", 76 | settings: { 77 | foreground: palette.peach, 78 | }, 79 | }, 80 | { 81 | name: "Rust trait", 82 | scope: "entity.name.trait.rust", 83 | settings: { 84 | foreground: palette.yellow, 85 | fontStyle: "italic", 86 | }, 87 | }, 88 | { 89 | name: "Rust struct", 90 | scope: "storage.type.source.rust", 91 | settings: { 92 | foreground: palette.yellow, 93 | }, 94 | }, 95 | { 96 | name: "Rust union", 97 | scope: "entity.name.union.rust", 98 | settings: { 99 | foreground: palette.yellow, 100 | }, 101 | }, 102 | { 103 | name: "Rust enum member", 104 | scope: "meta.enum.rust storage.type.source.rust", 105 | settings: { 106 | foreground: palette.teal, 107 | }, 108 | }, 109 | { 110 | name: "Rust macro", 111 | scope: [ 112 | "support.macro.rust", 113 | "meta.macro.rust support.function.rust", 114 | "entity.name.function.macro.rust", 115 | ], 116 | settings: { 117 | foreground: palette.blue, 118 | fontStyle: "italic", 119 | }, 120 | }, 121 | { 122 | name: "Rust lifetime", 123 | scope: ["storage.modifier.lifetime.rust", "entity.name.type.lifetime"], 124 | settings: { 125 | foreground: palette.blue, 126 | fontStyle: "italic", 127 | }, 128 | }, 129 | { 130 | name: "Rust string formatting", 131 | scope: "string.quoted.double.rust constant.other.placeholder.rust", 132 | settings: { 133 | foreground: palette.pink, 134 | }, 135 | }, 136 | { 137 | name: "Rust return type generic", 138 | scope: 139 | "meta.function.return-type.rust meta.generic.rust storage.type.rust", 140 | settings: { 141 | foreground: palette.text, 142 | }, 143 | }, 144 | { 145 | name: "Rust functions", 146 | scope: "meta.function.call.rust", 147 | settings: { 148 | foreground: palette.blue, 149 | }, 150 | }, 151 | { 152 | name: "Rust angle brackets", 153 | scope: "punctuation.brackets.angle.rust", 154 | settings: { 155 | foreground: palette.sky, 156 | }, 157 | }, 158 | { 159 | name: "Rust constants", 160 | scope: "constant.other.caps.rust", 161 | settings: { 162 | foreground: palette.peach, 163 | }, 164 | }, 165 | { 166 | name: "Rust function parameters", 167 | scope: ["meta.function.definition.rust variable.other.rust"], 168 | settings: { 169 | foreground: palette.maroon, 170 | }, 171 | }, 172 | { 173 | name: "Rust closure variables", 174 | scope: "meta.function.call.rust variable.other.rust", 175 | settings: { 176 | foreground: palette.text, 177 | }, 178 | }, 179 | { 180 | name: "Rust self", 181 | scope: "variable.language.self.rust", 182 | settings: { 183 | foreground: palette.red, 184 | }, 185 | }, 186 | { 187 | name: "Rust metavariable names", 188 | scope: [ 189 | "variable.other.metavariable.name.rust", 190 | "meta.macro.metavariable.rust keyword.operator.macro.dollar.rust", 191 | ], 192 | settings: { 193 | foreground: palette.pink, 194 | }, 195 | }, 196 | ]; 197 | }; 198 | 199 | export default tokens; 200 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/tokens/shell.ts: -------------------------------------------------------------------------------- 1 | import type { TextmateColors, ThemeContext } from "@/types"; 2 | 3 | const tokens = (context: ThemeContext): TextmateColors => { 4 | const { palette } = context; 5 | 6 | return [ 7 | { 8 | name: "Shell shebang", 9 | scope: [ 10 | "comment.line.shebang", 11 | "comment.line.shebang punctuation.definition.comment", 12 | "comment.line.shebang", 13 | "punctuation.definition.comment.shebang.shell", 14 | "meta.shebang.shell", 15 | ], 16 | settings: { 17 | foreground: palette.pink, 18 | fontStyle: "italic", 19 | }, 20 | }, 21 | { 22 | name: "Shell shebang command", 23 | scope: "comment.line.shebang constant.language", 24 | settings: { 25 | foreground: palette.teal, 26 | fontStyle: "italic", 27 | }, 28 | }, 29 | { 30 | name: "Shell interpolated command", 31 | scope: [ 32 | "meta.function-call.arguments.shell punctuation.definition.variable.shell", 33 | "meta.function-call.arguments.shell punctuation.section.interpolation", 34 | "meta.function-call.arguments.shell punctuation.definition.variable.shell", 35 | "meta.function-call.arguments.shell punctuation.section.interpolation", 36 | ], 37 | settings: { 38 | foreground: palette.red, 39 | }, 40 | }, 41 | { 42 | name: "Shell interpolated command variable", 43 | scope: 44 | "meta.string meta.interpolation.parameter.shell variable.other.readwrite", 45 | settings: { 46 | foreground: palette.peach, 47 | fontStyle: "italic", 48 | }, 49 | }, 50 | { 51 | scope: [ 52 | "source.shell punctuation.section.interpolation", 53 | "punctuation.definition.evaluation.backticks.shell", 54 | ], 55 | settings: { 56 | foreground: palette.teal, 57 | }, 58 | }, 59 | { 60 | name: "Shell EOF", 61 | scope: "entity.name.tag.heredoc.shell", 62 | settings: { 63 | foreground: palette.mauve, 64 | }, 65 | }, 66 | { 67 | name: "Shell quoted variable", 68 | scope: "string.quoted.double.shell variable.other.normal.shell", 69 | settings: { 70 | foreground: palette.text, 71 | }, 72 | }, 73 | ]; 74 | }; 75 | 76 | export default tokens; 77 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/tokens/typst.ts: -------------------------------------------------------------------------------- 1 | import type { TextmateColors, ThemeContext } from "@/types"; 2 | 3 | const tokens = (context: ThemeContext): TextmateColors => { 4 | const { palette } = context; 5 | 6 | return [ 7 | { 8 | scope: ["markup.heading.typst"], 9 | settings: { 10 | foreground: palette.red, 11 | }, 12 | }, 13 | ]; 14 | }; 15 | 16 | export default tokens; 17 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/ui/azureDataStudio.ts: -------------------------------------------------------------------------------- 1 | import type { ThemeContext } from "@/types"; 2 | 3 | /** 4 | * Contains extra keys used in Azure Data Studio that might be missing or 5 | * deprecated in VSCode. 6 | */ 7 | const azureDataStudio = (context: ThemeContext): Record => { 8 | const { options, palette } = context; 9 | const accent = palette[options.accent]; 10 | 11 | return { 12 | "button.secondaryBorder": accent, 13 | "table.headerBackground": palette.surface0, 14 | "table.headerForeground": palette.text, 15 | "list.focusAndSelectionBackground": palette.surface1, 16 | }; 17 | }; 18 | 19 | export default azureDataStudio; 20 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/ui/brackets.ts: -------------------------------------------------------------------------------- 1 | import { shade } from "@/theme/utils"; 2 | import { ThemeContext, WorkbenchColors } from "@/types"; 3 | 4 | type PickStartsWith = { 5 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 6 | [K in keyof T as K extends `${S}${infer R}` ? K : never]: T[K]; 7 | }; 8 | 9 | type BracketHLs = keyof PickStartsWith< 10 | WorkbenchColors, 11 | "editorBracketHighlight" 12 | >; 13 | 14 | const brackets = (context: ThemeContext): Record => { 15 | const { isLatte, options, palette } = context; 16 | 17 | // invert the shade of dimmed brackets if current theme is latte 18 | const dimAmount = -0.07 * (isLatte ? -1 : 1); 19 | 20 | const styles = { 21 | rainbow: { 22 | "editorBracketHighlight.foreground1": palette.red, 23 | "editorBracketHighlight.foreground2": palette.peach, 24 | "editorBracketHighlight.foreground3": palette.yellow, 25 | "editorBracketHighlight.foreground4": palette.green, 26 | "editorBracketHighlight.foreground5": palette.sapphire, 27 | "editorBracketHighlight.foreground6": palette.mauve, 28 | "editorBracketHighlight.unexpectedBracket.foreground": palette.maroon, 29 | }, 30 | dimmed: { 31 | "editorBracketHighlight.foreground1": shade(palette.red, dimAmount), 32 | "editorBracketHighlight.foreground2": shade(palette.peach, dimAmount), 33 | "editorBracketHighlight.foreground3": shade(palette.yellow, dimAmount), 34 | "editorBracketHighlight.foreground4": shade(palette.green, dimAmount), 35 | "editorBracketHighlight.foreground5": shade(palette.sapphire, dimAmount), 36 | "editorBracketHighlight.foreground6": shade(palette.mauve, dimAmount), 37 | "editorBracketHighlight.unexpectedBracket.foreground": shade( 38 | palette.maroon, 39 | dimAmount, 40 | ), 41 | }, 42 | monochromatic: { 43 | "editorBracketHighlight.foreground1": palette.subtext1, 44 | "editorBracketHighlight.foreground2": palette.subtext0, 45 | "editorBracketHighlight.foreground3": palette.overlay2, 46 | "editorBracketHighlight.foreground4": palette.overlay1, 47 | "editorBracketHighlight.foreground5": palette.overlay0, 48 | "editorBracketHighlight.foreground6": palette.surface2, 49 | "editorBracketHighlight.unexpectedBracket.foreground": palette.maroon, 50 | }, 51 | neovim: { 52 | "editorBracketHighlight.foreground1": palette.red, 53 | "editorBracketHighlight.foreground2": palette.teal, 54 | "editorBracketHighlight.foreground3": palette.yellow, 55 | "editorBracketHighlight.foreground4": palette.blue, 56 | "editorBracketHighlight.foreground5": palette.pink, 57 | "editorBracketHighlight.foreground6": palette.flamingo, 58 | "editorBracketHighlight.unexpectedBracket.foreground": palette.maroon, 59 | }, 60 | }; 61 | 62 | return styles[options.bracketMode]; 63 | }; 64 | 65 | export default brackets; 66 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/ui/customNames.ts: -------------------------------------------------------------------------------- 1 | import type { ThemeContext, ColorName } from "@/types"; 2 | import { opacity } from "@/theme/utils"; 3 | import { flavors } from "@catppuccin/palette"; 4 | 5 | type CustomNamedColors = Record; 6 | 7 | const ctpColors = new Set(Object.keys(flavors.mocha.colors)); 8 | 9 | class CustomUIColorError extends Error { 10 | constructor(key: string, value: string, message = "") { 11 | super( 12 | `Invalid value: "${value}" for key "${key}" in "catppuccin.customUIColors".\n${message}`, 13 | ); 14 | this.name = "CustomUIColorError"; 15 | } 16 | } 17 | 18 | /** 19 | * @throws if the value is not a valid 'colorName' or 'colorName opacityValue' 20 | * @returns a tuple of [colorName, opacityValue] 21 | */ 22 | const parseCustomUiColor = (k: string, v: string): [string, number] => { 23 | const entry = v.split(" "); 24 | if (entry.length > 2) { 25 | throw new CustomUIColorError( 26 | k, 27 | v, 28 | 'Too many arguments, expected "colorName" or "colorName opacityValue".', 29 | ); 30 | } 31 | let opacityValue = 1; 32 | if (entry.length == 2) { 33 | opacityValue = Number(entry[1]); 34 | if (Number.isNaN(opacityValue)) { 35 | throw new CustomUIColorError(k, v, "Opacity value is not a number."); 36 | } 37 | if (opacityValue < 0 || opacityValue > 1) { 38 | throw new CustomUIColorError( 39 | k, 40 | v, 41 | "Opacity value is not between 0 and 1.", 42 | ); 43 | } 44 | } 45 | return [entry[0], opacityValue]; 46 | }; 47 | const hexColorRegex = /^#([\dA-Fa-f]{3,4}){1,2}$/; 48 | 49 | const customNamedColors = (context: ThemeContext): CustomNamedColors => { 50 | const { flavor, palette, options } = context; 51 | const accent = palette[options.accent]; 52 | 53 | const customUIColors = { 54 | ...options.customUIColors.all, 55 | ...options.customUIColors[flavor], 56 | }; 57 | 58 | for (const [k, v] of Object.entries(customUIColors)) { 59 | // don't change custom hex colors 60 | if (hexColorRegex.test(v)) continue; 61 | 62 | const [parsedColor, opacityValue] = parseCustomUiColor(k, v); 63 | 64 | let color: string; 65 | if (parsedColor === "accent") { 66 | color = accent; 67 | } else if (ctpColors.has(parsedColor)) { 68 | color = palette[parsedColor as ColorName]; 69 | } else { 70 | throw new CustomUIColorError(k, v, "Invalid color name."); 71 | } 72 | 73 | customUIColors[k] = opacity(color, opacityValue); 74 | } 75 | 76 | return customUIColors; 77 | }; 78 | 79 | export default customNamedColors; 80 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/ui/index.ts: -------------------------------------------------------------------------------- 1 | import { ThemeContext } from "@/types"; 2 | 3 | import azureDataStudio from "./azureDataStudio"; 4 | import brackets from "./brackets"; 5 | import workbench from "./workbench"; 6 | 7 | import customNamedColors from "./customNames"; 8 | 9 | const uiCustomizations = (context: ThemeContext) => { 10 | return { 11 | ...brackets(context), 12 | ...workbench(context), 13 | ...customNamedColors(context), 14 | ...azureDataStudio(context), 15 | }; 16 | }; 17 | 18 | export default uiCustomizations; 19 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/ui/workbench.ts: -------------------------------------------------------------------------------- 1 | import { ThemeContext, WorkbenchColors } from "@/types"; 2 | import { opacity } from "@/theme/utils"; 3 | 4 | type WorkbenchPartial = Partial>; 5 | 6 | const workbench = (context: ThemeContext): WorkbenchPartial => { 7 | const { options, palette } = context; 8 | 9 | const styles = { 10 | default: {}, 11 | flat: { 12 | "activityBar.background": palette.mantle, 13 | "breadcrumb.background": palette.base, 14 | "commandCenter.background": palette.mantle, 15 | "debugToolBar.background": palette.mantle, 16 | "editorGroupHeader.tabsBackground": palette.mantle, 17 | "minimap.background": opacity(palette.base, 0.5), 18 | "statusBar.background": palette.mantle, 19 | "statusBar.noFolderBackground": palette.mantle, 20 | "tab.border": palette.base, 21 | "titleBar.activeBackground": palette.mantle, 22 | "titleBar.inactiveBackground": palette.mantle, 23 | "scrollbar.shadow": palette.mantle, 24 | }, 25 | minimal: { 26 | "activityBar.background": palette.base, 27 | "breadcrumb.background": palette.base, 28 | "commandCenter.background": palette.base, 29 | "debugToolBar.background": palette.base, 30 | "editor.background": palette.base, 31 | "editorWidget.background": palette.base, 32 | "editorGroupHeader.tabsBackground": palette.base, 33 | "minimap.background": opacity(palette.base, 0.5), 34 | "statusBar.background": palette.base, 35 | "statusBar.noFolderBackground": palette.base, 36 | "sideBar.background": palette.base, 37 | "sideBarSectionHeader.background": palette.base, 38 | "tab.border": palette.base, 39 | "tab.inactiveBackground": palette.base, 40 | "titleBar.activeBackground": palette.base, 41 | "titleBar.inactiveBackground": palette.base, 42 | }, 43 | }; 44 | 45 | return styles[options.workbenchMode]; 46 | }; 47 | 48 | export default workbench; 49 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/theme/utils.ts: -------------------------------------------------------------------------------- 1 | import tinycolor from "tinycolor2"; 2 | 3 | /** 4 | * @param {string} color1 6-character hex color, like "#FF69B4". 5 | * @param {string} color2 6-character hex color, like "#FF69B4". 6 | * @param {number} amount ratio of color1 to color2. value between 0 and 1. 7 | * @returns {string} returns the mixed color. 8 | */ 9 | export const mix = (color1: string, color2: string, amount: number): string => 10 | tinycolor.mix(color1, color2, amount * 100).toHexString(); 11 | 12 | /** 13 | * @param {string} color 6-character hex color, like "#FF69B4". 14 | * @param {number} opacity how much opacity to apply. value between 0 and 1. 15 | * @returns {string} color with the specified opacity, hex-encoded. 16 | */ 17 | export const opacity = (color: string, opacity: number): string => 18 | tinycolor(color).setAlpha(opacity).toHex8String(); 19 | 20 | /** 21 | * @param {string} color 6-character hex color, like "#FF69B4". 22 | * @param {number} magnitude represents the magnitude by which hexColor should be lightened or darkened. value between 0 and 1. 23 | * @returns {string} returns the lightened or darkened color. 24 | */ 25 | export const shade = (color: string, magnitude: number): string => 26 | magnitude > 0 27 | ? tinycolor(color) 28 | .lighten(magnitude * 100) 29 | .toHexString() 30 | : tinycolor(color) 31 | .darken(Math.abs(magnitude * 100)) 32 | .toHexString(); 33 | 34 | export const transparent = "#00000000"; 35 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/types/index.d.ts: -------------------------------------------------------------------------------- 1 | import type { 2 | AccentName, 3 | Colors, 4 | AnsiColors, 5 | FlavorName, 6 | } from "@catppuccin/palette"; 7 | 8 | import type { Uri } from "vscode"; 9 | 10 | // vscode schemas 11 | export type * from "@catppuccin/vsc-typegen/types/textmate-colors"; 12 | export type * from "@catppuccin/vsc-typegen/types/workbench-colors"; 13 | export type * from "@catppuccin/vsc-typegen/types/token-styling"; 14 | 15 | // extensions 16 | export type * from "@catppuccin/vsc-typegen/types/errorlens"; 17 | export type * from "@catppuccin/vsc-typegen/types/github-pull-request"; 18 | export type * from "@catppuccin/vsc-typegen/types/gitlens"; 19 | 20 | export type CatppuccinAccent = AccentName; 21 | export type CatppuccinFlavor = FlavorName; 22 | export { type ColorName } from "@catppuccin/palette"; 23 | export type CatppuccinWorkbenchMode = "default" | "flat" | "minimal"; 24 | export type CatppuccinBracketMode = 25 | | "rainbow" 26 | | "dimmed" 27 | | "monochromatic" 28 | | "neovim"; 29 | 30 | export type CatppuccinPalette = Colors; 31 | export type CatppuccinPaletteAnsi = { 32 | normal: AnsiColors; 33 | bright: AnsiColors; 34 | }; 35 | 36 | type FlavorsPlusAll = { all: T } & { [k in CatppuccinFlavor]: T }; 37 | 38 | export type ColorOverrides = Partial< 39 | FlavorsPlusAll> 40 | >; 41 | 42 | export type CustomUIColors = Partial>>; 43 | 44 | export type ThemeOptions = { 45 | /** The accent color to use */ 46 | accent: CatppuccinAccent; 47 | /** Controls whether to use *italics* for comments. */ 48 | italicComments: boolean; 49 | /** Controls whether to use *italics* for keywords. */ 50 | italicKeywords: boolean; 51 | /** Controls whether to use **bold** for keywords. */ 52 | boldKeywords: boolean; 53 | /** 54 | * Custom color overrides. 55 | * Assign your own hex codes to palette colors. 56 | * See [the docs](https://github.com/catppuccin/vscode/tree/main/packages/catppuccin-vsc#override-palette-colors) for reference. 57 | */ 58 | colorOverrides: ColorOverrides; 59 | /** Controls how the workbench should be styled. */ 60 | workbenchMode: CatppuccinWorkbenchMode; 61 | /** 62 | * Controls how bracket pairs should be themed. 63 | */ 64 | bracketMode: CatppuccinBracketMode; 65 | /** Controls whether borders should be enabled on some additional UI elements. */ 66 | extraBordersEnabled: boolean; 67 | /** 68 | * Customize UI colors. 69 | * Map `workbench.colorCustomizations` to palette colors. 70 | * See [the docs](https://github.com/catppuccin/vscode/tree/main/packages/catppuccin-vsc#use-palette-colors-on-workbench-elements-ui) for reference. 71 | */ 72 | customUIColors: CustomUIColors; 73 | 74 | /** 75 | * Controls whether to sync the currently active Catppuccin flavor with the [Catppuccin Icon Pack](https://github.com/catppuccin/vscode-icons) 76 | */ 77 | syncWithIconPack: boolean; 78 | }; 79 | 80 | export type ThemePaths = { 81 | latte: Uri; 82 | frappe: Uri; 83 | macchiato: Uri; 84 | mocha: Uri; 85 | }; 86 | 87 | export type ThemeContext = { 88 | flavor: CatppuccinFlavor; 89 | palette: CatppuccinPalette; 90 | paletteAnsi: CatppuccinPaletteAnsi; 91 | options: ThemeOptions; 92 | isLatte: boolean; 93 | }; 94 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/src/utils.ts: -------------------------------------------------------------------------------- 1 | import { flavorEntries } from "@catppuccin/palette"; 2 | import { 3 | ColorThemeKind, 4 | ConfigurationTarget, 5 | ExtensionContext, 6 | FilePermission, 7 | Uri, 8 | commands, 9 | extensions, 10 | window, 11 | workspace, 12 | } from "vscode"; 13 | import { compileTheme, defaultOptions } from "./theme"; 14 | import type { 15 | CatppuccinAccent, 16 | CatppuccinBracketMode, 17 | CatppuccinWorkbenchMode, 18 | ColorOverrides, 19 | CustomUIColors, 20 | ThemeOptions, 21 | ThemePaths, 22 | } from "./types"; 23 | 24 | // the reason why an update has been triggered, and a reload is needed 25 | export enum UpdateTrigger { 26 | CONFIG_CHANGE = "Configuration changed", 27 | FRESH_INSTALL = "Update detected", 28 | } 29 | 30 | type Entry = { [K in keyof T]: [K, T[K]] }[keyof T]; 31 | 32 | const filterObject = ( 33 | object: T, 34 | function_: (entry: Entry, index: number, array: Entry[]) => boolean, 35 | ) => { 36 | return Object.fromEntries( 37 | (Object.entries(object) as Entry[]).filter((element, index, array) => 38 | function_(element, index, array), 39 | ), 40 | ) as Partial; 41 | }; 42 | 43 | export const promptToReload = (trigger: UpdateTrigger) => { 44 | const message = `Catppuccin: ${trigger} - Reload required.`; 45 | const action = "Reload window"; 46 | window.showInformationMessage(message, action).then((selectedAction) => { 47 | if (selectedAction === action) { 48 | commands.executeCommand("workbench.action.reloadWindow"); 49 | } 50 | }); 51 | }; 52 | 53 | const writeThemeFile = async (uri: Uri, data: unknown): Promise => { 54 | return workspace.fs 55 | .writeFile(uri, Buffer.from(JSON.stringify(data, undefined, 2))) 56 | .then( 57 | () => {}, 58 | (error) => { 59 | window.showErrorMessage(error.message); 60 | }, 61 | ); 62 | }; 63 | 64 | const fileExists = async (uri: Uri): Promise => { 65 | return workspace.fs.stat(uri).then( 66 | () => true, 67 | () => false, 68 | ); 69 | }; 70 | 71 | // TODO: listen to this to determine if a user is using Nix, redirect to README 72 | export const isMutable = async (uri: Uri): Promise => { 73 | return workspace.fs.stat(uri).then( 74 | (stat) => stat.permissions !== FilePermission.Readonly, 75 | (error) => error, 76 | ); 77 | }; 78 | 79 | export const isFreshInstall = async ( 80 | context: ExtensionContext, 81 | ): Promise => { 82 | console.log("Checking if catppuccin is installed for the first time."); 83 | const flagUri = Uri.file(context.asAbsolutePath("themes/.flag")); 84 | if (await fileExists(flagUri)) { 85 | console.log("Catppuccin has been installed before."); 86 | return false; 87 | } else { 88 | console.log("Catppuccin is installed for the first time!"); 89 | return workspace.fs.writeFile(flagUri, Buffer.from("")).then( 90 | () => true, 91 | () => "error", 92 | ); 93 | } 94 | }; 95 | 96 | export const isDefaultConfig = (): boolean => { 97 | console.log("Checking if catppuccin is using default config."); 98 | const state = 99 | JSON.stringify(getConfiguration()) === JSON.stringify(defaultOptions); 100 | console.log(`Catppuccin is using ${state ? "default" : "custom"} config.`); 101 | 102 | return state; 103 | }; 104 | 105 | export const getConfiguration = (): ThemeOptions => { 106 | const config = workspace.getConfiguration("catppuccin"); 107 | const options = { 108 | accent: config.get("accentColor"), 109 | boldKeywords: config.get("boldKeywords"), 110 | italicKeywords: config.get("italicKeywords"), 111 | italicComments: config.get("italicComments"), 112 | colorOverrides: config.get("colorOverrides"), 113 | workbenchMode: config.get("workbenchMode"), 114 | bracketMode: config.get("bracketMode"), 115 | extraBordersEnabled: config.get("extraBordersEnabled"), 116 | customUIColors: config.get("customUIColors"), 117 | syncWithIconPack: config.get("syncWithIconPack"), 118 | } satisfies Partial; 119 | return { 120 | ...defaultOptions, 121 | ...filterObject(options, ([, value]) => value !== undefined), 122 | }; 123 | }; 124 | 125 | export const updateThemes = async ( 126 | options: ThemeOptions, 127 | paths: ThemePaths, 128 | trigger: UpdateTrigger, 129 | ) => { 130 | const flavors = flavorEntries.map(([flavorName]) => flavorName); 131 | 132 | const promises = flavors.map(async (flavor): Promise => { 133 | const theme = compileTheme(flavor, options); 134 | return writeThemeFile(paths[flavor], theme); 135 | }); 136 | 137 | Promise.all(promises) 138 | .then(() => { 139 | promptToReload(trigger); 140 | }) 141 | .catch((error) => { 142 | window.showErrorMessage( 143 | "Failed to save re-compiled theme: \n" + error.message, 144 | ); 145 | }); 146 | }; 147 | 148 | const getActiveTheme = (): string => { 149 | // if `window.autoDetectColorScheme` is enabled, we have to check the active color theme "kind" 150 | // and then use that to look up one of the `workbench.preferred*ColorTheme` settings. 151 | // if not, we can use the theme specified by `workbench.colorTheme`. 152 | // 153 | // this really feels like a function that should be in the API, but I couldn't find it. 154 | const workbench = workspace.getConfiguration("workbench"); 155 | const autoDetectColorScheme = workspace 156 | .getConfiguration("window") 157 | .get("autoDetectColorScheme"); 158 | 159 | if (autoDetectColorScheme) { 160 | const prefs = { 161 | [ColorThemeKind.Light]: "preferredLightColorTheme", 162 | [ColorThemeKind.Dark]: "preferredDarkColorTheme", 163 | [ColorThemeKind.HighContrastLight]: 164 | "preferredHighContrastLightColorTheme", 165 | [ColorThemeKind.HighContrast]: "preferredHighContrastColorTheme", 166 | }; 167 | return workbench.get(prefs[window.activeColorTheme.kind]) ?? ""; 168 | } else { 169 | return workbench.get("colorTheme") ?? ""; 170 | } 171 | }; 172 | 173 | export const syncToIconPack = () => { 174 | const id = "catppuccin.catppuccin-vsc-icons"; 175 | // bail if the icon pack isn't installed 176 | if (extensions.getExtension(id) === undefined) return; 177 | 178 | // mapping the Catppuccin Theme names to the icon pack names 179 | const uiThemesToIconThemes = { 180 | "Catppuccin Latte": "catppuccin-latte", 181 | "Catppuccin Frappé": "catppuccin-frappe", 182 | "Catppuccin Macchiato": "catppuccin-macchiato", 183 | "Catppuccin Mocha": "catppuccin-mocha", 184 | }; 185 | 186 | // check if the current editor theme is a Catppuccin theme 187 | const uiTheme = getActiveTheme(); 188 | const ctpThemeActive = Object.keys(uiThemesToIconThemes).includes(uiTheme); 189 | 190 | // and only sync to a Catppuccin icon flavor if the user's currently using Catppuccin for icons 191 | const ctpIconsActive = Object.values(uiThemesToIconThemes).includes( 192 | workspace.getConfiguration("workbench").get("iconTheme") ?? "", 193 | ); 194 | 195 | if (ctpThemeActive && ctpIconsActive) { 196 | const iconTheme = 197 | uiThemesToIconThemes[uiTheme as keyof typeof uiThemesToIconThemes]; 198 | workspace 199 | .getConfiguration("workbench") 200 | .update("iconTheme", iconTheme, ConfigurationTarget.Global); 201 | } 202 | }; 203 | -------------------------------------------------------------------------------- /packages/catppuccin-vsc/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "paths": { 5 | "@/*": ["./src/*"] 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /packages/catppuccin-vscode/.gitignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | themes/ 3 | -------------------------------------------------------------------------------- /packages/catppuccin-vscode/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## [3.17.0](https://github.com/catppuccin/vscode/compare/@catppuccin/vscode-v3.16.1...@catppuccin/vscode-v3.17.0) (2025-03-28) 4 | 5 | 6 | ### Miscellaneous Chores 7 | 8 | * **@catppuccin/vscode:** Synchronize theme versions 9 | 10 | ## [3.16.1](https://github.com/catppuccin/vscode/compare/@catppuccin/vscode-v3.16.0...@catppuccin/vscode-v3.16.1) (2025-02-11) 11 | 12 | 13 | ### Miscellaneous Chores 14 | 15 | * **@catppuccin/vscode:** Synchronize theme versions 16 | 17 | ## [3.16.0](https://github.com/catppuccin/vscode/compare/@catppuccin/vscode-v3.15.2...@catppuccin/vscode-v3.16.0) (2024-11-08) 18 | 19 | 20 | ### Features 21 | 22 | * apply new ANSI terminal colours ([#446](https://github.com/catppuccin/vscode/issues/446)) ([034def5](https://github.com/catppuccin/vscode/commit/034def5822b59d35b14095511260c3b161aee947)) 23 | 24 | ## [3.15.2](https://github.com/catppuccin/vscode/compare/@catppuccin/vscode-v3.15.1...@catppuccin/vscode-v3.15.2) (2024-08-24) 25 | 26 | 27 | ### Miscellaneous Chores 28 | 29 | * **@catppuccin/vscode:** Synchronize theme versions 30 | 31 | ## [3.15.1](https://github.com/catppuccin/vscode/compare/@catppuccin/vscode-v3.15.0...@catppuccin/vscode-v3.15.1) (2024-08-06) 32 | 33 | 34 | ### Miscellaneous Chores 35 | 36 | * **@catppuccin/vscode:** Synchronize theme versions 37 | 38 | ## [3.15.0](https://github.com/catppuccin/vscode/compare/@catppuccin/vscode-v3.14.0...@catppuccin/vscode-v3.15.0) (2024-07-06) 39 | 40 | 41 | ### Miscellaneous Chores 42 | 43 | * **@catppuccin/vscode:** Synchronize theme versions 44 | 45 | ## [3.14.0](https://github.com/catppuccin/vscode/compare/@catppuccin/vscode-v3.13.0...@catppuccin/vscode-v3.14.0) (2024-04-24) 46 | 47 | 48 | ### Miscellaneous Chores 49 | 50 | * **@catppuccin/vscode:** Synchronize theme versions 51 | 52 | ## [3.13.0](https://github.com/catppuccin/vscode/compare/@catppuccin/vscode-v3.12.0...@catppuccin/vscode-v3.13.0) (2024-03-15) 53 | 54 | 55 | ### Miscellaneous Chores 56 | 57 | * **@catppuccin/vscode:** Synchronize theme versions 58 | 59 | ## [3.12.0](https://github.com/catppuccin/vscode/compare/@catppuccin/vscode-v3.11.2...@catppuccin/vscode-v3.12.0) (2024-03-10) 60 | 61 | 62 | ### Features 63 | 64 | * **npm:** customization API ([#334](https://github.com/catppuccin/vscode/issues/334)) ([27cee1d](https://github.com/catppuccin/vscode/commit/27cee1d384b5a1bb46b29f288ff5a3d1074f9eaf)) 65 | 66 | 67 | ### Bug Fixes 68 | 69 | * also shim in `compile()` ([ef62768](https://github.com/catppuccin/vscode/commit/ef627682c24ab674e3a251737d222d64f6d2a177)) 70 | * re-add theme JSON files ([#339](https://github.com/catppuccin/vscode/issues/339)) ([8e5d69a](https://github.com/catppuccin/vscode/commit/8e5d69ad57f4d622a7301a1317078d17045fcaf5)) 71 | * shim theme name for shiki ([#336](https://github.com/catppuccin/vscode/issues/336)) ([e48b0a1](https://github.com/catppuccin/vscode/commit/e48b0a1b5f8bbef46c3329b4d9420e78cad5b84c)) 72 | 73 | ## [3.11.2](https://github.com/catppuccin/vscode/compare/@catppuccin/vscode-v3.11.1...@catppuccin/vscode-v3.11.2) (2024-02-26) 74 | 75 | 76 | ### Miscellaneous Chores 77 | 78 | * **@catppuccin/vscode:** Synchronize theme versions 79 | 80 | ## [3.11.1](https://github.com/catppuccin/vscode/compare/@catppuccin/vscode-v3.11.0...@catppuccin/vscode-v3.11.1) (2024-02-08) 81 | 82 | 83 | ### Miscellaneous Chores 84 | 85 | * **@catppuccin/vscode:** Synchronize theme versions 86 | 87 | ## [3.11.0](https://github.com/catppuccin/vscode/compare/@catppuccin/vscode-v3.10.1...@catppuccin/vscode-v3.11.0) (2024-01-10) 88 | 89 | 90 | ### Bug Fixes 91 | 92 | * **distribution:** remove postinstall hook ([#290](https://github.com/catppuccin/vscode/issues/290)) ([fdc716b](https://github.com/catppuccin/vscode/commit/fdc716bbad1a8fddd8cd3e087a5a64a5b823d97a)) 93 | 94 | ## [3.10.1](https://github.com/catppuccin/vscode/compare/@catppuccin/vscode-v3.10.0...@catppuccin/vscode-v3.10.1) (2024-01-05) 95 | 96 | 97 | ### Miscellaneous Chores 98 | 99 | * **@catppuccin/vscode:** Synchronize theme versions 100 | 101 | ## [3.10.0](https://github.com/catppuccin/vscode/compare/@catppuccin/vscode-v3.9.0...@catppuccin/vscode-v3.10.0) (2024-01-04) 102 | 103 | 104 | ### Miscellaneous Chores 105 | 106 | * **@catppuccin/vscode:** Synchronize theme versions 107 | 108 | 109 | ### Dependencies 110 | 111 | * The following workspace dependencies were updated 112 | * devDependencies 113 | * catppuccin-vsc bumped to 3.10.0 114 | -------------------------------------------------------------------------------- /packages/catppuccin-vscode/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Catppuccin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/catppuccin-vscode/README.md: -------------------------------------------------------------------------------- 1 |

2 | Logo
3 | 4 | Catppuccin for VSCode 5 | 6 |

7 | 8 |

9 | 10 | 11 | 12 |

13 | 14 | Simple NPM package containing all compiled themes of [Catppuccin for VSCode](https://github.com/catppuccin/vscode). 15 | 16 | ### Usage 17 | 18 | You can use these definitions with libraries like [Shiki](https://github.com/shikijs/shiki). 19 | 20 | ```console 21 | npm install @catppuccin/vscode 22 | pnpm add @catppuccin/vscode 23 | yarn add @catppuccin/vscode 24 | ``` 25 | 26 | ### API 27 | 28 | ```ts 29 | // the themes with default options 30 | import { latte, frappe, macchiato, mocha } from "@catppuccin/vscode"; 31 | 32 | // alternatively, import the JSON files: 33 | import latte from "@catppuccin/vscode/themes/latte.json" with { type: "json" }; 34 | import frappe from "@catppuccin/vscode/themes/frappe.json" with { type: "json" }; 35 | import macchiato from "@catppuccin/vscode/themes/macchiato.json" with { type: "json" }; 36 | import mocha from "@catppuccin/vscode/themes/mocha.json" with { type: "json" }; 37 | ``` 38 | 39 | To customize the theme, you can use the `compile()` function, optionally passing in [options that the VSCode theme supports](https://github.com/catppuccin/vscode/tree/main/packages/catppuccin-vsc#catppuccin-settings). 40 | 41 | ```ts 42 | import { compile } from "@catppuccin/vscode"; 43 | 44 | const myMocha = compile("mocha", { 45 | colorOverrides: { 46 | mocha: { 47 | base: "#000000", 48 | mantle: "#010101", 49 | crust: "#020202", 50 | }, 51 | }, 52 | }); 53 | ``` 54 | 55 |   56 | 57 |

58 | 59 |

60 | 61 |

62 | Copyright © 2021-present Catppuccin Org 63 |

64 | 65 |

66 | 67 |

68 | -------------------------------------------------------------------------------- /packages/catppuccin-vscode/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@catppuccin/vscode", 3 | "version": "3.17.0", 4 | "description": "🦌 Soothing pastel theme for VSCode, NPM version", 5 | "license": "MIT", 6 | "type": "module", 7 | "publishConfig": { 8 | "access": "public", 9 | "provenance": true, 10 | "registry": "https://registry.npmjs.org" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/catppuccin/vscode.git", 15 | "directory": "packages/catppuccin-vscode" 16 | }, 17 | "files": [ 18 | "dist/*", 19 | "themes/*" 20 | ], 21 | "main": "dist/index.cjs", 22 | "module": "dist/index.js", 23 | "exports": { 24 | ".": { 25 | "types": "./dist/index.d.ts", 26 | "import": "./dist/index.js", 27 | "require": "./dist/index.cjs" 28 | }, 29 | "./themes/*.json": { 30 | "import": "./themes/*.json", 31 | "require": "./themes/*.json" 32 | } 33 | }, 34 | "dependencies": { 35 | "@catppuccin/palette": "catalog:" 36 | }, 37 | "devDependencies": { 38 | "@tsconfig/node22": "catalog:", 39 | "@types/node": "catalog:", 40 | "catppuccin-vsc": "workspace:*", 41 | "tsup": "catalog:", 42 | "typescript": "catalog:" 43 | }, 44 | "engines": { 45 | "node": ">=22.0.0" 46 | }, 47 | "scripts": { 48 | "build": "pnpm tsup", 49 | "compiled:pack": "pnpm pack", 50 | "prepack": "pnpm --filter catppuccin-vsc core:build && pnpm build" 51 | }, 52 | "homepage": "https://github.com/catppuccin/vscode/tree/main/packages/catppuccin-vscode#readme", 53 | "bugs": { 54 | "url": "https://github.com/catppuccin/vscode/issues" 55 | }, 56 | "sponsor": { 57 | "url": "https://opencollective.com/catppuccin" 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /packages/catppuccin-vscode/src/compile.ts: -------------------------------------------------------------------------------- 1 | import { ThemeOptions } from "catppuccin-vsc/src/types"; 2 | import { FlavorName } from "@catppuccin/palette"; 3 | import { compileTheme, defaultOptions } from "catppuccin-vsc/src/theme"; 4 | 5 | /** 6 | * Compiles the Catppuccin for VSCode theme with optional custom overrides. 7 | * 8 | * @param flavor The base flavor to compile 9 | * @param overrides Overrides to apply 10 | * @returns The compiled theme 11 | * 12 | * @example 13 | * ```ts 14 | * import { compile } from "@catppuccin/vscode"; 15 | * 16 | * const myMocha = compile("mocha", { 17 | * italicComments: false, 18 | * italicKeywords: false, 19 | * boldKeywords: false, 20 | * colorOverrides: { 21 | * mocha: { 22 | * base: "#000000", 23 | * }, 24 | * } 25 | * } 26 | * ``` 27 | */ 28 | export const compile = ( 29 | flavor: FlavorName, 30 | overrides: Partial = {}, 31 | ) => { 32 | const options: ThemeOptions = { 33 | ...defaultOptions, 34 | ...overrides, 35 | }; 36 | const compiled = compileTheme(flavor, options); 37 | 38 | // like in the original file, we need to shim the name for the Shiki theme 39 | return { 40 | ...compiled, 41 | name: `catppuccin-${flavor}`, 42 | }; 43 | }; 44 | -------------------------------------------------------------------------------- /packages/catppuccin-vscode/src/index.ts: -------------------------------------------------------------------------------- 1 | import latteJson from "catppuccin-vsc/themes/latte.json" with { type: "json" }; 2 | import frappeJson from "catppuccin-vsc/themes/frappe.json" with { type: "json" }; 3 | import macchiatoJson from "catppuccin-vsc/themes/macchiato.json" with { type: "json" }; 4 | import mochaJson from "catppuccin-vsc/themes/mocha.json" with { type: "json" }; 5 | 6 | export { compile } from "./compile.js"; 7 | 8 | // shim the name for the Shiki theme, as the name is used for the className 9 | 10 | export const latte = { 11 | ...latteJson, 12 | name: "catppuccin-latte", 13 | }; 14 | export const frappe = { 15 | ...frappeJson, 16 | name: "catppuccin-frappe", 17 | }; 18 | export const macchiato = { 19 | ...macchiatoJson, 20 | name: "catppuccin-macchiato", 21 | }; 22 | export const mocha = { 23 | ...mochaJson, 24 | name: "catppuccin-mocha", 25 | }; 26 | -------------------------------------------------------------------------------- /packages/catppuccin-vscode/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/node22/tsconfig.json", 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "moduleResolution": "node", 6 | "noEmit": true, 7 | "paths": { 8 | "@/*": ["../catppuccin-vsc/src/*"] 9 | }, 10 | "resolveJsonModule": true 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/catppuccin-vscode/tsup.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "tsup"; 2 | import { mkdir, readdir, unlink, writeFile } from "node:fs/promises"; 3 | import { join } from "node:path"; 4 | 5 | import mocha from "catppuccin-vsc/themes/mocha.json" with { type: "json" }; 6 | import macchiato from "catppuccin-vsc/themes/macchiato.json" with { type: "json" }; 7 | import frappe from "catppuccin-vsc/themes/frappe.json" with { type: "json" }; 8 | import latte from "catppuccin-vsc/themes/latte.json" with { type: "json" }; 9 | 10 | export default defineConfig({ 11 | clean: true, 12 | entryPoints: ["src/index.ts", "src/compile.ts"], 13 | format: ["esm", "cjs"], 14 | dts: { resolve: true }, 15 | minify: false, 16 | sourcemap: false, 17 | target: "node16", 18 | async onSuccess() { 19 | // create the dir 20 | const root = new URL("themes", import.meta.url).pathname; 21 | await mkdir(root, { recursive: true }); 22 | // empty the dir 23 | const files = await readdir(root); 24 | await Promise.all(files.map((file) => unlink(join(root, file)))); 25 | // write the files 26 | await Promise.all([ 27 | writeFile(join(root, "mocha.json"), JSON.stringify(mocha)), 28 | writeFile(join(root, "macchiato.json"), JSON.stringify(macchiato)), 29 | writeFile(join(root, "frappe.json"), JSON.stringify(frappe)), 30 | writeFile(join(root, "latte.json"), JSON.stringify(latte)), 31 | ]); 32 | }, 33 | }); 34 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - packages/* 3 | catalog: 4 | "@catppuccin/palette": ^1.7.1 5 | "@tsconfig/node22": ^22.0.1 6 | "@types/node": ^22.0.0 7 | "@vscode/vsce": ^3.3.0 8 | "eslint": ^8.57.1 9 | "tsup": ^8.4.0 10 | "tsx": ^4.19.3 11 | "typescript": ^5.8.2 12 | onlyBuiltDependencies: 13 | - "@vscode/vsce-sign" 14 | - esbuild 15 | ignoredBuiltDependencies: 16 | - keytar 17 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://docs.renovatebot.com/renovate-schema.json", 3 | "extends": ["local>catppuccin/renovate-config"], 4 | "ignoreDeps": ["@types/vscode"] 5 | } 6 | -------------------------------------------------------------------------------- /shell.nix: -------------------------------------------------------------------------------- 1 | { 2 | pkgs ? import { 3 | config = { }; 4 | overlays = [ ]; 5 | }, 6 | }: 7 | pkgs.mkShell { 8 | packages = with pkgs; [ 9 | nodejs_22 10 | (pnpm.override { nodejs = nodejs_22; }) 11 | ]; 12 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/node22/tsconfig.json", 3 | "compilerOptions": { 4 | "module": "ES2022", 5 | "moduleResolution": "node", 6 | "noEmit": true, 7 | "resolveJsonModule": true, 8 | "skipLibCheck": true, 9 | "strict": true, 10 | "strictNullChecks": true, 11 | "target": "ES2021" 12 | } 13 | } 14 | --------------------------------------------------------------------------------