Cindervale: Building a VS Code Theme That Goes Beyond Syntax Highlighting

Most VS Code themes start with a background color and a handful of syntax colors. I wanted to approach the problem differently.

Introducing Cindervale, an open-source Visual Studio Code theme built around a simple idea: the entire editor should feel like one coherent visual environment, not just a code window with a different background.

Cindervale is now published on the Visual Studio Marketplace, and the source code is available on GitHub.

GitHub: https://github.com/erenthedeveloper0/cindervale
Visual Studio Marketplace: https://marketplace.visualstudio.com/items?itemName=erenthedeveloper0.cindervale-theme

A different approach to color

I wanted to move away from the usual neon-heavy palettes, pure black backgrounds, and aggressively contrasting syntax colors. Cindervale uses a warmer, more restrained visual language.

There are four variants:

• Cindervale Dark: Warm charcoal and walnut surfaces, copper and burgundy accents, and ivory typography.
• Cindervale Light: Warm ivory surfaces, terracotta, soft wine, sage, and muted blue.
• Cindervale Accessible Dark: The original dark surfaces with a separate, more distinguishable syntax and interface palette.
• Cindervale Accessible Light: The same accessible approach with warm paper-like light surfaces.

The goal is to maintain a recognizable identity across all four variants without simply inverting one palette to produce another.

Syntax highlighting should be consistent

One of the most important design decisions was creating a consistent color language across different programming languages. For example:

• Coral represents functions, methods, and React components.
• Plum represents keywords, tags, JSON and YAML keys, and CSS selectors.
• Amber represents types, classes, and attributes.
• Eucalyptus represents strings and CSS values.
• Blue represents imports, exports, namespaces, and CSS properties.
• Berry represents constants and enum members.

This means the same general visual logic carries between a TypeScript component, a stylesheet, a Markdown document, and a JSON configuration file.

Semantic highlighting is aligned with TextMate highlighting so that syntax colors remain consistent when a language server provides semantic tokens.

The editor interface matters too

A theme shouldn't stop at the text editor. Cindervale includes styling for the broader VS Code workbench:

• Activity bar, sidebar, tabs, and status bar.
• Command palette, menus, notifications, and hover interfaces.
• Source control, debugging, and testing.
• Notebooks, chat, and inline suggestions.
• Git decorations, diagnostics, and diff and merge editors.
• Bracket pairs, indent guides, and the minimap.

It also includes a coordinated 16-color terminal palette.

Accessibility was worth a separate design direction

The development of Cindervale Accessible Dark and Cindervale Accessible Light was one of the most interesting parts of the project. The original palette has a warm visual identity, but certain colors can become difficult to distinguish under simulated color-vision deficiencies. Instead of simply increasing saturation or changing the background, I developed separate syntax and interface palettes.

The accessible variants use five syntax accents:

• Violet for keywords.
• Blue for functions.
• Ochre for types.
• Ember for strings.
• Teal for numbers.

They also use differences in lightness, not only hue, to distinguish adjacent syntax roles.

The project includes contrast audits and color-vision simulations for protanopia, deuteranopia, and tritanopia. These simulations are useful engineering checks, not a guarantee that every color will work equally well for every individual. The measurements and methodology are documented in the repository.

Built to be tested, not just looked at

I also wanted the project to have a maintainable development workflow. The theme files are generated from a structured palette in src/, rather than being maintained as unrelated collections of generated JSON files.

The repository includes checks for:

• Theme schema and manifest validity.
• Registered VS Code color IDs.
• Contrast measurements.
• Color-vision simulations.
• Syntax token assignments using VS Code's own TextMate engine.
• VSIX package contents.

There are also dedicated commands for building, testing, checking contrast, and checking color-vision distinctions.

Try Cindervale

Installation:

code --install-extension erenthedeveloper0.cindervale-theme

Then open the VS Code theme picker: Ctrl/Cmd + K followed by Ctrl/Cmd + T

Choose one of:

• Cindervale Dark
• Cindervale Light
• Cindervale Accessible Dark
• Cindervale Accessible Light

The project is open source under the MIT license.

Feedback and contributions

Cindervale is an ongoing project, and I would particularly appreciate feedback from developers using different programming languages and editor configurations. I'm interested in practical feedback about:

• Syntax colors that feel inconsistent.
• Workbench elements that don't fit the palette.
• Colors that are difficult to distinguish.
• Differences between how the theme looks across languages.

You can open an issue directly on GitHub with a screenshot and a code sample.

GitHub: https://github.com/erenthedeveloper0/cindervale
Marketplace: https://marketplace.visualstudio.com/items?itemName=erenthedeveloper0.cindervale-theme

Thanks for checking out Cindervale.