Terra Verde: An Earthy Light Theme for VS Code

Terra Verde: A VS Code light theme built around warm off-whites, forest greens, and terracotta accents — easy on the eyes in bright environments, cohesive enough to disappear into your workflow.

The Light Theme Case

Most developer themes are dark. Dark themes dominate theme marketplaces, forum recommendations, and the unspoken social consensus of what a "serious developer setup" looks like. The association is so strong that using a light theme in public can feel like a statement.

The evidence on dark vs. light readability is more nuanced than the discourse suggests. In bright environments — natural light, open offices, outdoor work — light backgrounds have lower glare than dark ones. The eye adapts to ambient light, and a screen darker than the environment creates strain rather than relieving it.

Terra Verde is a light theme for the hours when a light theme is the right choice.

The Palette

The name is Spanish and Italian for "green earth" — the pigment used in fresco painting since antiquity, known for its warm, muted green tone. The palette is built around that reference:

Background:     #f5f0e8   — warm off-white, like aged paper
Editor bg:      #faf7f2   — slightly lighter, for contrast
Sidebar bg:     #ede8e0   — slightly darker, to separate from editor

Forest green:   #4a7c59   — primary syntax color, keywords
Terracotta:     #b5533c   — strings, warm contrast
Warm brown:     #7a5c3a   — comments, secondary text
Deep teal:      #2d6b6b   — types, interfaces
Dusty gold:     #8a6914   — numbers, constants
Muted purple:   #6b4c8a   — special keywords
Foreground:     #2c2416   — primary text, near-black with warmth

Every color was chosen to have sufficient contrast against the background for WCAG AA compliance, while staying within the warm earth tone family. No pure whites, no pure blacks, no fully saturated colors.

Syntax Highlighting

The theme covers all major language grammars:

# Terra Verde — Python example
class Repository:                    # teal — class name
    """Data access layer."""         # brown — docstring

    def find_by_id(                  # forest green — keyword
        self,
        user_id: int,                # dusty gold — type annotation
    ) -> Optional[User]:             # deep teal — type name
        return self._store.get(user_id)

CACHE_TTL = 300                      # dusty gold — constant
BASE_URL  = "https://api.example"   # terracotta — string

// Terra Verde — JavaScript example
const fetchUser = async (id) => {   // forest green — keyword
  const response = await fetch(     // warm brown — built-in
    `/api/users/${id}`              // terracotta — template literal
  );
  return response.json();
};

The color roles are semantic rather than syntactic — the same color means the same kind of thing across languages. Constants look like constants in Python, JavaScript, Rust, and Go.

UI Elements

The theme extends beyond syntax to the full VS Code UI:

Activity bar: muted terracotta accents on warm gray background
Status bar: forest green with white text, clear without being harsh
Tabs: warm off-white for inactive, paper white for active
Scrollbar: transparent by default, terracotta on hover
Selection highlight: warm gold, visible without dominating
Error/warning markers: standard red and amber, adapted to the warm palette

Installation

code --install-extension lucianofedericopereira.terra-verde-theme

Or search "Terra Verde" in the VS Code Extensions marketplace.

After installation: 1. Ctrl+Shift+P → Preferences: Color Theme 2. Select Terra Verde

Pairing

Terra Verde pairs naturally with: - Font: Cascadia Code or Fira Code — their warmth complements the palette - Icon theme: Material Icon Theme in the muted variant - Terminal: A light terminal theme using the same palette colors

If you use Oh My Posh: the Oh My GruvBox theme, adapted to the light palette, maintains visual consistency between editor and terminal.

On Theme Design

Designing a color theme is primarily a contrast management exercise. Every color decision affects every other color decision. A terracotta that reads well against the main background might clash against the selection highlight. A green that works for keywords might be too close to the green used for added lines in the diff editor.

The iteration count for Terra Verde was higher than expected. The final palette was the eighth major revision — each one fixing a conflict that only appeared when the theme was used with real code for an extended period.

License

MIT