Soy Themes

VS Code themes with minimal syntax highlighting and a fully colored UI, in Gruvbox, Solarized and Nord variants.

The editor colors only what helps you read code: comments, strings, constants and definitions. Keywords, variables and function calls stay the plain text color, and comments are prominent rather than dimmed. The rest of the workbench (sidebar, tabs, status bar, terminal, git decorations and so on) uses the full palette.

Inspiration and credits

• I am sorry, but everyone is getting syntax highlighting wrong by Nikita Prokopov (tonsky) sets out the principles for the syntax highlighting.
• Alabaster, also by tonsky, is the reference implementation of those principles for VS Code.
• Gruvbox Theme by jdinhify provides the theme generator and the UI color mappings this project is built on.

Both projects are MIT licensed; their notices are reproduced in LICENSE.

The color palettes are Gruvbox by Pavel Pertsev, Solarized by Ethan Schoonover and Nord by Sven Greb.

This project was created with help from an LLM. Claude helped write the code, documentation, and screenshot tooling.

Why “Soy”?

Soybeans are amazing! They can be plain (minimalist) but also made into a wide variety of foods (variants): soymilk, tofu, miso, edamame, etc.

Installation

• VS Code: search for "Soy Themes" in the Extensions view, or install it from the Visual Studio Marketplace.
• Manually, including in VSCodium, Cursor and other editors based on VS Code: download the .vsix from GitHub Releases and run Extensions: Install from VSIX....

Then run Preferences: Color Theme and pick one of the Soy variants.

Variants

Soy Gruvbox Dark - Medium Contrast	Soy Gruvbox Light - Medium Contrast
Soy Gruvbox Dark - Hard Contrast	Soy Gruvbox Light - Hard Contrast
Soy Gruvbox Dark - Soft Contrast	Soy Gruvbox Light - Soft Contrast
Soy Solarized Dark	Soy Solarized Light
Soy Nord

How code is colored

The syntax highlighting follows the principles in Nikita Prokopov's article I am sorry, but everyone is getting syntax highlighting wrong and his Alabaster theme:

• Few colors. There are four highlight colors, few enough to remember, so you can look for "the green thing" when you want a string.
• Highlight what you search for, not what is everywhere. Keywords like if and function are obvious from their shape, and variables and calls make up most of the code. Coloring them would color everything.
• Definitions, not uses. A function, class or type is colored where it is declared, which shows the structure of a file at a glance. Calls and references are plain text.
• Comments are prominent. If code needed an explanation, that explanation should be the first thing you read, not a faded grey.
• Punctuation is slightly dimmed so the names around it stand out.
• No bold or italics in code.

Each variant takes these colors from its own palette:

Language servers

Language servers for TypeScript, Python, Rust and others send semantic tokens, which VS Code uses on top of the grammar's colors. Soy colors those the same way: declarations get the definition color, and everything else stays plain.

Some grammars can't tell a definition from a use, and then the language server decides:

• Go: type declarations are plain unless gopls semantic tokens are on ("gopls": { "ui.semanticTokens": true }).
• C#: method calls are colored like method declarations.

Palettes

Each variant uses only the colors of its original palette, with no blended or adjusted shades. Where a palette's usual color for something is too faint to read, the closest palette color with enough contrast is used instead. Body text aims for a contrast ratio of at least 4.5:1 against the background, and highlights at least 3:1. For example:

• Solarized Light uses base01 for body text rather than base00 (4.1:1), and orange for comments because yellow is 3.0:1. Its green strings are 2.97:1, the one color just under target, kept so strings are green in both Solarized variants.
• Nord has no shade between nord3 (1.7:1) and nord4, so punctuation is not dimmed, and dimmed UI text such as ignored files uses nord10.

The terminal uses the official ANSI colors of Solarized and Nord.

Development

The generator is plain TypeScript with no dependencies. It runs on Deno, Node (22.18 or later, which runs .ts files directly) or Bun.

deno task build        # or: node src/main.ts / bun src/main.ts
deno task check        # format, lint, type check and contrast check
deno task preview      # show how a variant colors the samples
deno task screenshots  # regenerate the images in images/
deno task package      # build the .vsix extension package

Node and Bun can run the scripts directly, e.g. node scripts/check.ts or bun scripts/preview.ts.

build writes one JSON file per variant to themes/ and updates contributes.themes in package.json to match src/variants.ts. Commit the generated themes along with the source changes.

check fails if a variant is inconsistent (for example, its syntax text color differs from the editor foreground) or the generated files are out of date, and warns about any color below its contrast target. CI runs it on every push and pull request, along with the build on Node and Bun and a test package. See RELEASING.md for publishing.

To try the themes, open this folder in VS Code and press F5. This opens an Extension Development Host window where the Soy themes are available in Preferences: Color Theme. Rebuild and reload that window (Developer: Reload Window) to see changes. The files in samples/ cover the cases that matter for the syntax rules, and Developer: Inspect Editor Tokens and Scopes shows which rule colored a token.

Previewing syntax colors in the terminal

scripts/preview.ts colors files with VS Code's own grammars and TextMate engine, so you can check syntax rules without opening VS Code. It reads the grammars from your VS Code installation, and uses the two development dependencies in package.json (Deno fetches them automatically; with Node or Bun, run npm install or bun install first).

deno task preview                                  # all samples, first variant
deno task preview --variant soy-nord samples/sample.py
deno task preview --plain samples/sample.ts        # [text|role] markup
deno task preview --plain --scopes Settings samples/sample.ts

In a terminal it prints the code in the theme's colors. With --plain, or when the output is piped, colored tokens are marked as [text|role] instead, and --scopes <text> lists the TextMate scopes of matching tokens. Semantic highlighting needs a language server, so the preview shows TextMate colors only. If VS Code is installed somewhere unusual, pass its built-in extensions folder with --extensions <dir>.

Screenshots

scripts/screenshots.ts draws a simplified VS Code window for each variant, using the theme's colors and the same tokenizer as the preview, and saves it to images/<variant>.png with headless Chrome, Chromium or Edge. The window is an approximation; the code colors are what VS Code shows without a language server. Rerun it after changing colors, or pass --variant <id> for one variant and --chrome <path> if the browser isn't found.

Layout

License

MIT