Terracotta

A strikingly vibrant, carefully crafted VS Code theme. Five variants for every environment and every pair of eyes.

WCAG-validated syntax, UI, and terminal contrast across all 5 variants. 378 syntax/UI pairs plus 70 terminal ANSI colors validated automatically.

Variants

Terracotta Dark

The primary variant. A deep, neutral dark theme for daily coding. Pure dark backgrounds (#141414) with warm, desaturated accents tuned for extended sessions without eye strain.

Role	Color	Hex
Background		#141414
Foreground		#D4D4D4
Accent		#E98665
Keywords		#E98665
Functions		#3FD2B3
Strings		#D2A436
Types		#C893F2
Numbers		#F287B2
Operators		#A7BED4
Decorators		#D673C4

Terracotta Dark Dimmed

Lower contrast for prolonged night sessions. Built on a softer grey (#1A1A1A) with all syntax colors desaturated and dimmed — easier on the eyes when the lights are off, without losing syntax distinctness.

Role	Color	Hex
Background		#1A1A1A
Foreground		#CCCCCC
Accent		#B86E58
Keywords		#E0976E
Functions		#7CBEB0
Strings		#CCA050
Types		#B8A6DE
Numbers		#E58FA5
Operators		#8EB0C5
Decorators		#B47CA6

Terracotta Light

An editorial warm light theme built on parchment surfaces (#F4EEE4). Navy operators, purple variables, rust parameters, forest functions, and a restrained terracotta accent keep lanes separated on the warm canvas.

Role	Color	Hex
Background		#F4EEE4
Foreground		#2A241F
Accent		#B66743
Keywords		#8C2A0E
Functions		#0A5A30
Strings		#5B5001
Types		#5A2FAE
Numbers		#930E4F
Operators		#124878
Decorators		#943A8D

Terracotta Light Bright

A daylight variant tuned for low chroma and warm-editorial calm: neutral editor (#FAFAFA), brightened warm-neutral chrome, hero terracotta accent (#D8744E), muted slate-ink operators, and a deep violet type lane that keeps Java and TypeScript readable without saturated blue.

Role	Color	Hex
Background		#FAFAFA
Foreground		#1F1F1F
Accent		#D8744E
Keywords		#97300D
Functions		#03604A
Strings		#794A00
Types		#6A2091
Numbers		#A5104E
Operators		#2F5390

Terracotta High Contrast (Color Blind)

Built for pure accessibility on a true black (#000000) background. Uses a scientifically validated palette avoiding red/green combinations entirely. Every syntax element passes WCAG AAA (7:1+), with contrasts reaching 21:1.

Role	Color	Hex	Contrast
Background		#000000	N/A
Foreground		#FFFFFF	21.0:1
Keywords		#FF8A5C	9.0:1
Functions		#00B4BD	8.3:1
Strings		#F0A8DC	13.8:1
Types		#D580FF	8.4:1
Numbers		#FFB000	11.5:1
Operators		#80BFFF	10.8:1
Self/this		#FFD060	14.4:1

Accessible to deuteranopia, protanopia, and tritanopia.

Note: The High Contrast (Color Blind) variant intentionally uses blue for "added" and cyan for "modified" in git decorations instead of the traditional green/blue. This avoids red-green color pairs that are indistinguishable with deuteranopia or protanopia. If you're used to green meaning "added," this is by design, not a bug.

Installation

From the Marketplace

1. Open Extensions in VS Code (Ctrl+Shift+X / Cmd+Shift+X)
2. Search for Terracotta
3. Click Install
4. Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
5. Select Preferences: Color Theme
6. Pick your preferred Terracotta variant

Manual / From Source

git clone https://github.com/ceharsh24/terracotta-theme.git ~/.vscode/extensions/terracotta-theme

Restart VS Code and select a Terracotta variant from Preferences: Color Theme.

Recommended settings

To get the most out of Terracotta, use a font with solid italic and bold support (e.g. JetBrains Mono, Fira Code, Cascadia Code). The theme uses italics for doc blocks and select secondary accents, and bold for markdown headings and bold markup.

The extension sets these defaults when you install it (you can override any in your user settings):

Optional: for a closer match to the repo screenshots and the theme’s design, set a monospace font and size in your user settings.json:

{
  "editor.fontFamily": "JetBrains Mono, Fira Code, Cascadia Code, monospace",
  "editor.fontSize": 14,
  "editor.lineHeight": 1.6
}

Supported Languages

Syntax highlighting has been meticulously mapped for:

Semantic highlighting is enabled out-of-the-box for richer, context-aware coloring when supported by language servers. If colors look off, ensure it is enabled in your settings:

"editor.semanticHighlighting.enabled": true

Theme Anatomy

Each variant provides:

• 380+ workbench colors — precise styling for the editor, sidebar, terminal, diffs, menus, inputs, and every nook of the IDE.
• 140 TextMate token rules — comprehensive coverage across all standard grammars, including JSX/TSX, GraphQL, TOML, Dockerfile, Shell/Bash, and YAML.
• 43+ semantic token rules — deep integration with language servers.

Accessibility & Design

378 syntax/UI pairs plus 70 terminal ANSI colors across all 5 variants are validated against WCAG 2.1 standards using the automated checks in npm test.

WCAG Compliance

A tiered system ensures the best balance of readability and color differentiation:

Tier 1 — keyword, function, string, variable, type, number, operator — the tokens you read thousands of times a day. Tier 2 — comment, constant, parameter, property, tag, attribute, punctuation, regex, macro, decorator — supporting tokens where color differentiation matters more than raw contrast.

Exempt elements — line numbers, inactive tabs/icons/titles, input placeholders, CodeLens, and inlay hints — are intentionally low-contrast per WCAG SC 1.4.3 (inactive user interface components).

Contrast ratios for key syntax elements (foreground vs background):

Design Choices

Warm color harmony with clear separation. Each color family has a dedicated role: terracotta for keywords, teal for functions, ochre for strings, violet/indigo for types, berry for numbers, cocoa for identifiers, olive for properties, and slate for structural syntax. The two light variants now diverge intentionally: Light keeps warmer editorial surfaces, while Light Bright leans cleaner and cooler in its structure lane.

Distinct identifiers vs properties. Terracotta Dark separates all three: variables keep the chartreuse (#D0C060), parameters move to a warm sand (#D5AE93), and member access reads sage (#8FB46E), so a function body tells you at a glance which names came from the signature. Dark Dimmed deliberately keeps variables and parameters on one khaki (#CCBB80) against an olive property (#97AC74) — at that variant's lower chroma there is not enough separation left to split them cleanly. Config keys (JSON, YAML, TOML) stay olive-clay (#B4AC66 Dark) since they never collide with variables.

Deep grey backgrounds. The dark variants use #141414 and #1A1A1A rather than pure black. This reduces halation (the neon glow effect around bright text on black backgrounds) and is easier on eyes with astigmatism.

Distinct light personalities. The Light variant keeps parchment surfaces (#F4EEE4) with warmer biscuit chrome and editorial warmth. Light Bright uses a neutral daylight canvas (#FAFAFA), near-warm chrome, and the same hero terracotta accent so it reads as a separate crisp theme instead of a brighter clone.

True inclusivity. The high-contrast color-blind variant uses a research-backed palette ensuring zero red-green reliance and mathematically guarantees WCAG AAA standards across the board. Accessible to deuteranopia, protanopia, and tritanopia.

Inspiration & Credits

• Cursor IDE — The inspiration behind the neutral dark-grey base.
• IBM Design / Color Blind Safe Palette — accessible color choices
• Wong (2011) — color-blind-safe palette for scientific visualization

Contributing

Contributions are welcome. If you find a language where token colors feel off, open an issue with a code sample and a screenshot.

License

MIT