DEV Community

Cover image for Cindervale: Building a VS Code Theme That Goes Beyond Syntax Highlighting
Eren Sümer
Eren Sümer

Posted on

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

#opensource #vscode

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
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)