CodeNebula — VS Code Color Theme

A warm, sophisticated VS Code theme inspired by the Claude desktop app — featuring the same deep terracotta accents, warm neutral backgrounds, and earthy palette that makes Claude's UI feel so distinctive.

Available in Dark and Light variants.

Preview

CodeNebula Dark

Background: Deep warm near-black (#1C1917)
Keywords: Claude orange (#D97757)
Functions: Sage green (#A8C7B5)
Strings: Warm amber (#C4896A)
Comments: Muted warm brown (#6B5C52)

CodeNebula Light

Background: Warm cream parchment (#FAF7F4)
Keywords: Terracotta (#C15C35)
Functions: Forest green (#2E7D5A)
Strings: Sienna (#A0522D)
Comments: Warm gray-brown (#9E8070)

Installation

Option 1 — VS Code Marketplace

Open VS Code
Press Ctrl+Shift+X (or Cmd+Shift+X on Mac) to open Extensions
Search for "CodeNebula"
Click Install

Option 2 — Install from VSIX (manual)

Download the .vsix file
Open VS Code → Extensions → ... menu → Install from VSIX...
Select the downloaded .vsix file

Option 3 — Install from folder (development)

Copy the codenebulaark folder to your VS Code extensions directory:
- macOS/Linux: ~/.vscode/extensions/
- Windows: %USERPROFILE%\.vscode\extensions\
Restart VS Code

Activating the Theme

Press Ctrl+Shift+P (or Cmd+Shift+P) to open the Command Palette
Type "Color Theme" and select Preferences: Color Theme
Choose CodeNebula Dark or CodeNebula Light

Recommended Font Setup

This theme is designed to pair beautifully with Fira Code — a monospace font with programming ligatures that complement Claude's clean aesthetic.

1. Install Fira Code

Download from: https://github.com/tonsky/FiraCode/releases

Or on macOS with Homebrew:

brew install --cask font-fira-code

On Ubuntu/Debian:

sudo apt install fonts-firacode

2. Configure VS Code Settings

Add these to your settings.json (Ctrl+Shift+P → Open User Settings (JSON)):

{
  "editor.fontFamily": "'Fira Code', 'Fira Mono', monospace",
  "editor.fontLigatures": true,
  "editor.fontSize": 14,
  "editor.lineHeight": 1.7,
  "editor.letterSpacing": 0.3,
  "editor.fontWeight": "400",
  "terminal.integrated.fontFamily": "'Fira Code', monospace",
  "terminal.integrated.fontSize": 13
}

Complete Recommended Settings

For the full Claude-inspired experience, add these to settings.json:

{
  // Font
  "editor.fontFamily": "'Fira Code', 'Fira Mono', monospace",
  "editor.fontLigatures": true,
  "editor.fontSize": 14,
  "editor.lineHeight": 1.7,
  "editor.letterSpacing": 0.3,

  // Layout feel
  "editor.minimap.enabled": false,
  "editor.renderLineHighlight": "line",
  "editor.cursorBlinking": "smooth",
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.smoothScrolling": true,
  "editor.padding.top": 12,
  "editor.padding.bottom": 12,
  "workbench.editor.tabSizing": "shrink",
  "editor.bracketPairColorization.enabled": false,

  // Sidebar
  "workbench.tree.indent": 16,
  "workbench.tree.renderIndentGuides": "onHover"
}

Color Palette Reference

Dark Theme

Role	Hex
Editor Background	`#1C1917`
Sidebar Background	`#171412`
Text	`#F5EDE3`
Comments	`#6B5C52`
Keywords	`#D97757`
Strings	`#C4896A`
Functions	`#A8C7B5`
Numbers	`#D4A478`
Types/Classes	`#C9A882`
Accent (Status Bar)	`#D97757`

Light Theme

Role	Hex
Editor Background	`#FAF7F4`
Sidebar Background	`#F0EBE5`
Text	`#1C1512`
Comments	`#9E8070`
Keywords	`#C15C35`
Strings	`#A0522D`
Functions	`#2E7D5A`
Numbers	`#9A6030`
Types/Classes	`#7A5C48`
Accent (Status Bar)	`#C15C35`

Language Support

Syntax highlighting is tuned for:

Python (self/cls, decorators, magic methods, type hints)
JavaScript / TypeScript (JSX, template literals, decorators)
HTML / CSS / SCSS
JSON / YAML / TOML
Markdown
Shell / Bash
Diff / Git
All other languages via TextMate grammar + semantic tokens

License

MIT — feel free to fork and adapt.

CodeNebula

vigneshwar_gaonkar