Terracotta

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

WCAG AAA (7:1) core syntax + WCAG AA (4.5:1) supporting tokens across all 5 variants. 350+ color pairs validated.

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.

Terracotta Dark

Role	Color	Hex
Background		`#141414`
Foreground		`#D4D4D4`
Accent		`#E98665`
Keywords		`#E98665`
Functions		`#4EC9A0`
Strings		`#F0C24E`
Types		`#C28BFF`
Numbers		`#D89050`
Operators		`#7FC7F4`
Decorators		`#C28BFF`

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.

Terracotta Dark Dimmed

Role	Color	Hex
Background		`#1A1A1A`
Foreground		`#CCCCCC`
Accent		`#C4785E`
Keywords		`#E88E70`
Functions		`#45B892`
Strings		`#DBAC3B`
Types		`#BC92F3`
Numbers		`#CC9D4D`
Operators		`#6EABD8`

Terracotta Light

A warm paper-like light theme using a beautifully soft off-white background (#F8F8F6). Deep, saturated jewel-toned syntax colors for crisp daytime reading.

Terracotta Light

Role	Color	Hex
Background		`#F8F8F6`
Foreground		`#242424`
Accent		`#C15F3C`
Keywords		`#9A3016`
Functions		`#006149`
Strings		`#764C00`
Types		`#6530B8`
Numbers		`#A70B50`
Operators		`#0053A7`
Decorators		`#6530B8`

Terracotta Light Bright

Maximum accessibility on a pure white background (#FFFFFF). Core syntax tokens meet WCAG AAA (7:1+), supporting tokens meet AA (4.5:1+). Bold borders and the sharpest contrast profile for bright environments and high-resolution displays.

Terracotta Light Bright

Role	Color	Hex
Background		`#FFFFFF`
Foreground		`#141414`
Accent		`#DA7756`
Keywords		`#9E341A`
Functions		`#00654D`
Strings		`#7C4F00`
Types		`#5E29AD`
Numbers		`#AA0E53`
Operators		`#0055A8`

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.

Terracotta High Contrast Color Blind

Role	Hex	Contrast
Background	`#000000`	N/A
Foreground	`#FFFFFF`	21.0:1
Keywords	`#FF8A5C`	9.0:1
Functions	`#00BFCC`	9.3:1
Strings	`#FFDF33`	15.9:1
Types	`#D580FF`	8.4:1
Numbers	`#FFB000`	11.5:1
Operators	`#80BFFF`	10.8:1
Self/this	`#D580FF`	8.4:1

Accessible to deuteranopia, protanopia, and tritanopia.

Installation

From the Marketplace

Open Extensions in VS Code (Ctrl+Shift+X / Cmd+Shift+X)
Search for Terracotta
Click Install
Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
Select Preferences: Color Theme
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 comments and doc blocks, 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):

Setting	Default	Why
`editor.semanticHighlighting.enabled`	`true`	Enables context-aware colors (functions, types, parameters) that the theme is tuned for.
`editor.bracketPairColorization.enabled`	`true`	Uses the theme’s bracket colors for matching pairs.
`editor.guides.bracketPairs`	`true`	Shows vertical guides for bracket scope.
`editor.renderLineHighlight`	`"line"`	Highlights the current line with the theme’s line highlight.
`editor.cursorBlinking`	`"smooth"`	Matches the theme’s smooth, low-distraction feel.

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:

Language	Language	Language
JavaScript	TypeScript	Python
Rust	Go	Java
C / C++	C#	Ruby
PHP	Swift	Kotlin
HTML	CSS / SCSS	JSON
YAML	SQL	Shell / Bash
Markdown	Dockerfile	TOML

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:

200+ 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

350+ color pairs across all 5 variants are validated against WCAG 2.1 standards using an automated contrast checker (npm test).

WCAG Compliance

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

Category	Pairs	Standard	Result
Core syntax (Tier 1)	~35	AAA (7:1)	100% pass
Supporting syntax (Tier 2)	~80	AA (4.5:1)	100% pass
UI text (active)	~200	AA (4.5:1)	100% pass
UI text (exempt)	~33	—	Intentionally subdued

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):

Variant	Editor	Comment	Keyword	Function	String	Number
Dark	12.4	7.4	7.1	8.9	11.0	7.0
Dark Dimmed	10.8	5.4	7.1	7.1	8.3	7.0
Light	14.6	4.6	7.0	7.0	7.0	7.0
Light Bright	18.4	4.9	7.1	7.1	7.1	7.3
HC (Color Blind)	21.0	8.0	9.0	9.3	15.9	11.5

Design Choices

Warm color harmony with clear separation. Each color family has a dedicated role: terracotta for keywords, green for functions, gold for strings, purple for types, blue for operators, and warm neutrals for variables. Supporting tokens like parameters, properties, and enum members use distinct hues (plum, rose, amber) to avoid brown-mud clustering. Semantic highlighting adds further context-aware coloring when supported.

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.

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

Terracotta Theme

Terracotta Theme

Terracotta

Variants

Terracotta Dark

Terracotta Dark Dimmed

Terracotta Light

Terracotta Light Bright

Terracotta High Contrast (Color Blind)

Installation

From the Marketplace

Manual / From Source

Recommended settings

Supported Languages

Theme Anatomy

Accessibility & Design

WCAG Compliance

Design Choices

Inspiration & Credits

Contributing

License