Aloe: A VS Code Theme Designed for Calm Contrast

Aloe is a free dark green theme for Visual Studio Code, designed and maintained at Lab829. It uses a restrained palette across syntax, brackets, diffs, tabs, breadcrumbs, the minimap, and the sidebar so the editor feels like one system rather than a collection of unrelated colors.

The theme is available from the Visual Studio Marketplace and Open VSX.

Contrast matters more than a dramatic screenshot

A theme can look impressive in a preview and become distracting during a long coding session. Aloe came from sustained personal use and repeated adjustments to colors that felt too bright, too similar, or too dominant after several hours.

That experience shaped the design goal: preserve enough contrast to scan code and interface state quickly, while avoiding a screen full of competing neon accents. This is a practical preference informed by daily use, not a medical claim about eye strain.

Aloe uses light foreground colors against a dark green background, with separate accents for functions, keywords, types, parameters, strings, numbers, and operators. Six bracket colors make nested structures easier to follow without forcing every bracket into the same high-saturation pair.

Syntax colors should communicate structure

The current theme defines dedicated colors for JSX variables and attributes, function calls and decorators, keywords and control flow, types and interfaces, strings, numbers, and punctuation. Semantic token colors provide the same distinctions when a language server supplies richer information.

The surrounding interface follows the same palette. Tabs, breadcrumbs, panels, widgets, the terminal, the minimap, and source-control decorations use related colors with different levels of emphasis. Diff views also distinguish inserted, modified, and removed content across the editor, gutter, minimap, and overview ruler.

This does not mean every color pair is certified to meet every WCAG success criterion. WCAG contrast guidance is a useful reference, but a VS Code theme includes text, inactive states, controls, transparent overlays, syntax scopes, and host-rendered behavior. Aloe is contrast-aware and open to review, not presented as formally accessibility-certified.

The green palette is a design choice

Aloe takes its name and visual direction from the plant. The green and teal foundation gives the theme a distinct identity while leaving room for amber, blue, purple, and yellow accents where syntax or interface roles need separation.

The palette is also influenced by established community themes such as Dracula and One Dark Pro. Aloe is not based on a claim that green light is physiologically easier on the eyes than blue light. The choice comes from personal preference, sustained use, and the kind of editor environment we wanted to build.

Install Aloe

Open the Extensions view in VS Code, search for Aloe by Lab829, and select Install.

You can also install it from the command line:

code --install-extension Lab829.aloe

You can also review Aloe on the Lab829 Products page. Teams interested in a branded or workflow-specific editor experience can explore Product Design and Development.

The Aloe repository contains the complete palette and theme definitions. If a syntax scope is unclear in your language of choice, or a color becomes difficult to distinguish during real work, open an issue. That kind of specific feedback is how the theme improves.