Intent

A fundamentally different approach to syntax highlighting. Every theme colors code by grammar. Intent colors code by purpose.

Intent screenshot

The Problem

Traditional syntax themes assign colors based on grammar categories: keywords get one color, strings get another, types get a third. This tells you what a token is syntactically, but nothing about what it does in your program.

You end up mentally parsing your own code every time you read it.

The Idea

Intent organizes color around semantic purpose -- the role each token plays in your program's behavior. When you glance at a line of code, the colors immediately tell you:

Is this line transforming data?
Is it controlling program flow?
Does it cause side effects?
Is it pure structural logic?

This is not a subtle difference. It changes how you read code.

Color System

Intent maps five categories of purpose to five distinct color families against a cool-neutral dark background (#141820).

Intent	Colors	What it covers
Data flow	Warm ambers / golds (`#d4a856` `#c8a040` `#e8a855`)	Variables, parameters, properties, assignments -- anything that holds or moves data
Control flow	Cool blues / teals (`#5c9cf5` `#4ec9b0` `#56d6d6`)	`if`, `for`, `while`, `return`, `switch`, `import` -- anything that directs execution
Side effects	Magenta-red accents (`#e06c88` `#e87070` `#f06090`)	Function calls, I/O operations, decorators, DOM tags -- anything that reaches outside its scope
Pure logic	Neutral silver / gray (`#b0b8c8` `#8890a0`)	Operators, types, interfaces, type annotations -- structural, not behavioral
Literals	Earth tones (`#8cb870` `#c8a86c` `#b88860`)	Strings, numbers, booleans, constants -- fixed values

The mapping is deliberate. Warm colors draw the eye to data as it flows through your program. Cool colors recede, letting control structures form a calm scaffold. Magenta-red demands attention on side effects -- exactly the tokens most likely to introduce bugs. Neutral tones keep structural logic out of the way. Earth tones ground literals as stable, unchanging values.

Why This Matters

Most bugs live at the boundaries between data transformation and side effects. Intent makes those boundaries visible at a glance.

When you scan a function colored by Intent:

A block of amber tells you data is being shaped and moved -- pure transformation, safe to refactor.
A flash of magenta-red tells you something is reaching out -- a network call, a DOM mutation, a database write. That is where you look first during debugging.
A column of blue tells you execution is branching -- review the logic paths.
Silver and gray fading into the background tells you type annotations and operators are present but not demanding attention.

You stop reading token-by-token and start reading by intention.

Technical Details

Intent leverages VS Code's semantic highlighting to identify token roles beyond what TextMate grammars alone can provide. Semantic tokens carry information about whether a symbol is a variable, a parameter, a function call, a type, or a decorator -- and Intent uses all of it.

Design principles:

Function calls are always magenta-red, because every call is a potential side effect
Decorators and annotations are hot pink -- they modify behavior, which is a form of side effect
Type definitions and interfaces are neutral silver -- they describe structure, not behavior
Variables and parameters are amber regardless of their syntactic position

Language Support

Full syntax and semantic highlighting for all VS Code supported languages.

Installation

Open VS Code
Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
Search for "Intent"
Click Install

Or from the command line:

ext install nheo.vs-themes

Part of vs-themes

Intent is part of the vs-themes collection by nheo.

License

MIT

Intent Semantic

nheo