Monokai Cotalpa Theme for VS Code
🎨 Yet another Monokai color scheme for VS Code.
Installation
- Open the Extensions view (
Ctrl+Shift+X, or Cmd+Shift+X on macOS).
- Search for
Cotalpa and install the one by Ilán Vivanco.
- Open the theme picker (
Ctrl+K Ctrl+T, or Cmd+K Cmd+T on macOS) and choose Monokai Cotalpa.
You can also install it from the command line:
code --install-extension ilanvivanco.cotalpa
Variants
Every variant comes with an italic version, for example Monokai Cotalpa Coffee Italic.
- Monokai Cotalpa: the main theme.
- Monokai Cotalpa Dark: the same colors on darker backgrounds.
- Monokai Cotalpa Coffee: warm, coffee-toned grays.
The theme also covers the newer parts of VS Code: the modern layout, chat, the source control graph, the terminal, symbol icons and more. Semantic highlighting is on, and it uses the same colors as the syntax highlighting.
Customization
If something doesn't look right to you, please open an issue. You can also override any color in your settings.json. The [Monokai Cotalpa*] selector applies the change to every variant:
"workbench.colorCustomizations": {
"[Monokai Cotalpa*]": {
"editor.background": "#1e2223"
}
},
"editor.tokenColorCustomizations": {
"[Monokai Cotalpa*]": {
"comments": "#8e9a9e"
}
}
See the theme color reference for every color you can change. To turn off semantic highlighting, set "editor.semanticHighlighting.enabled": false.
Color reference
| Color |
HEX |
HSL |
| Red |
 #fc988d |
hsl(6, 95%, 77%) |
| Orange |
 #fcbb86 |
hsl(27, 95%, 76%) |
| Yellow |
 #fcdc7d |
hsl(45, 95%, 74%) |
| Green |
 #99d874 |
hsl(98, 56%, 65%) |
| Teal |
 #63ddb6 |
hsl(161, 64%, 63%) |
| Cyan |
 #66d6fb |
hsl(195, 95%, 69%) |
| Blue |
 #74b8fc |
hsl(210, 96%, 72%) |
| Purple |
 #b2aafa |
hsl(246, 89%, 82%) |
| Magenta |
 #e27fb1 |
hsl(330, 63%, 69%) |
|
|
|
| Black |
 #060809 |
hsl(200, 20%, 3%) |
| Dark gray |
 #273136 |
hsl(200, 16%, 18%) |
| Gray |
 #8e9a9e |
hsl(195, 8%, 59%) |
| White |
 #f7f8f9 |
hsl(210, 14%, 97%) |
Font style
I recommend a monospaced font with ligatures, like Cascadia Code or Fira Code.
"editor.fontFamily": "'Cascadia Code', 'Fira Code', Consolas, monospace",
With Cascadia Code and the italic variants, you can also turn on its cursive italic:
"editor.fontLigatures": "'ss01', 'calt'",
Development
The themes are generated from src/: the palette, the color scheme, the variants and the rules for the workbench, the syntax and semantic tokens.
npm install
npm run build # generates themes/ and the theme list in package.json
npm run watch # rebuilds on every change in src/
npm run validate # checks the rules against the VS Code theme color reference
npm run screenshots # takes screenshots of the themes in VS Code, in screenshots/
npm run package # builds the .vsix
To try your changes, press F5 to open a VS Code window with the extension and the demo/ files. In that window VS Code always starts with the first theme, so pick the variant you want to test from the theme picker.
