Drift Theme

A collection of 8 pastel VS Code themes designed for dual-font setups with full ligature and italic support.

4 dark variants. 4 light variants. Soft colors that don't fight for your attention.

Themes

Dark

Drift Ocean	Drift Midnight

Drift Dusk	Drift Forest

Light

Drift Shore	Drift Morning

Drift Dawn	Drift Sage

Features

• 8 variants across 4 color families (blue, indigo, neutral, green) each with a dark/light pair
• 462 UI colors per theme covering every VS Code surface including sticky scroll, bracket pairs, inlay hints, command center, Copilot, diff, merge, testing, and debug views
• Italic-first with 12 italic scopes for cursive font variants (comments, keywords, parameters, imports, decorators, and more)
• 33 semantic token rules including *.deprecated (strikethrough), *.async (italic), *.abstract (italic), *.static.declaration (bold)
• Pastel palette with WCAG AA contrast compliance on all syntax colors
• Palette-driven build system for easy customization

Recommended Fonts

This theme is designed for fonts that combine monospace regular with cursive italic variants. The italic scopes (keywords, comments, parameters, etc.) render in the cursive style.

Good options:

• Victor Mono (free)
• Cascadia Code (free)
• Fira Code iScript (free)
• Operator Mono (paid)
• Dank Mono (paid)

Add to your VS Code settings.json:

{
  "editor.fontFamily": "'Victor Mono', monospace",
  "editor.fontLigatures": true,
  "editor.fontSize": 14,
  "editor.lineHeight": 1.6
}

What Renders in Italic

Token	Example	Why
Comments	// todo	Visually distinct from code
Keywords	if, const, return	Control flow stands out
Parameters	(name, age)	Input values
Imports	import, from	Module boundaries
this/self	this.value	Context reference
Interfaces	interface Foo	Type definitions
Decorators	@Component	Metadata
HTML attributes	class="..."	Attribute vs tag

Function calls are not italic — only declarations. So myFunc is cursive when defined, monospace when called.

Customization

The themes are generated from simple palette JSON files (~60 color values each). To create your own variant:

cp palettes/_template.json palettes/my-variant.json
# Edit colors in my-variant.json
npm run build

See GUIDE.md for the full development guide.

License

MIT