Monokai v2.1 for VS Code
A dark Monokai variant, ported from the Kate / KDE (KSyntaxHighlighting) color
scheme Monokai v2.1.theme. The original scheme file is kept in this repo as the
source of truth for the palette.
Install
From source (local install)
cp -R monokai-v-2-1-theme ~/.vscode/extensions/
then restart VS Code and pick Monokai v2.1 in
Preferences: Color Theme (⌘K ⌘T).
Package as a .vsix (requires @vscode/vsce):
npx @vscode/vsce package
code --install-extension monokai-v-2-1-theme-2.1.0.vsix
Palette
| Role |
Color |
| Background |
#222222 |
| Normal text |
#f8f8f2 |
| Control flow / import / tag |
#f92672 |
| Keyword / type / built-in |
#66d9ef |
| Function / label |
#a6e22e |
| Constant / number |
#ae81ff |
| String |
#e6db74 |
Parameter / attribute / self |
#fd971f |
| Variable |
#ff80f4 |
| Comment |
#d0d0d0 |
| Operator / punctuation |
#d0d0d0 |
| Error |
#ff5555 |
| Selection / search |
#4c93ff |
| Current line |
#4c4c4c |
| Current line number |
#d1d931 |
How the port was done
Kate themes have three sections; each maps to a different part of a VS Code theme:
text-styles (Keyword, String, DataType, …) → tokenColors, expanded into the
TextMate scopes VS Code grammars actually emit, plus semanticTokenColors so
the TS/Rust/Python language servers agree with the grammar.editor-colors (BackgroundColor, CurrentLine, MarkError, …) → colors
(editor, gutter, minimap, overview ruler, diff, debug).custom-styles (per-language overrides for Go, Rust, JSON, Markdown, TSX,
Makefile, MIPS asm, …) → scope-specific tokenColors entries near the end of
the list, e.g. JSON keys in pink, JSX component tags in cyan, Rust lifetimes
in pink, Makefile targets in green.
Chrome that Kate has no equivalent for (activity bar, tabs, status bar, panels,
notifications, terminal ANSI palette) is derived from the same palette:
#1b1b1b for surfaces behind the editor, #45474e (Kate's Separator) for
borders, #909194 (Kate's LineNumbers) for dimmed text.
Deliberate differences from the Kate scheme
- Selection is translucent. Kate's
TextSelection is an opaque #4c93ff
and it pairs it with a separate selected-text-color per style; VS Code has no
per-token selected color, so opaque blue would swallow the text. Selection uses
#4c93ff66 and search matches #4c93ff99.
Preprocessor stays #329932. It's the one dull color in the scheme, but
it is what the source specifies.- Bold/italic follow Kate: keywords and built-ins bold, data types italic.
Kate's
custom-styles explicitly unset bold on several language items (Qt
macros, JSX component tags, MIPS registers, Makefile variables) — those scopes
carry "fontStyle": "" here so they don't inherit bold from the base rule.
| |
