Painting VSCode in My Colors. Making the Terracotta Light Theme
Customizing VSCode with My Own Colors — Creating the Terracotta Light Theme
I created a custom light theme for VSCode with Claude Code. Its name is Terracotta Light. It's a theme that unifies the entire UI with warm terracotta tones, and it was surprisingly simple to make.
Why I Made It
Most default VSCode themes are cold or monochromatic. While there are many dark themes, warm-toned light themes that are easy on the eyes are rare. I was using ayu-light, but the UI frames (like the sidebar and status bar) still felt cold, so I decided to customize it myself.
Core Idea
VSCode themes are divided into two layers.
The first is the base theme. It handles code syntax highlighting (colors for variables, functions, keywords). I used ayu-light's base theme as-is. There's no need to mess with something already well-made.
The second is colorCustomizations. This setting overrides the colors of VSCode's UI framework — things like the editor background, sidebar, tab bar, status bar, and buttons. I changed only this part to a terracotta tone. Placing it in settings.json under workbench.colorCustomizations makes it take precedence over the base theme.
Color Palette
I organized the colors into a total of 8 shades. I named them inspired by natural elements.
Pampas #F4F3EE — The main background color. Instead of pure white (#FFFFFF), I used a very light beige. I unified the entire editor, sidebar, panels, and terminal with this color. It's easy on the eyes even after prolonged use.
Warm Beige #E8E6DF — Used for hover states and card backgrounds. Slightly darker than Pampas for subtle differentiation.
Sand #E2E0D8 — Borders and separators. Subtly delineates areas.
Cloudy #B1ADA1 — Used for secondary elements like inactive text, line numbers, and scrollbars.
Muted #6B6B6B — For text slightly recessed into the background, like inactive tabs or breadcrumbs.
Text #1A1A1A — Body text. Not pure black (#000000), but a very slightly softer tone.
Crail #C15F3C — The star of this theme. A terracotta color. Used for points needing emphasis like the status bar background, buttons, cursors, badges, and active line numbers. Since the overall tone is subdued, this color alone makes it stand out immediately.
Crail Dark #A84E30 — Crail's hover version. Slightly darkens when hovering over buttons.
Scope of Application
The first noticeable change is the status bar turning terracotta. Beyond that, Crail's color subtly appears in places like the editor cursor, active line number, top tab border, badges, and focus border. In the diff editor, added/deleted sections are also highlighted in terracotta shades.
The rest of the entire UI (sidebar, panels, menus, notifications, widgets, etc.) is unified with a Pampas background and Sand borders. Instead of assigning different colors to each complex area, using a single tone actually makes it cleaner.
Installation Method
It's simple. Just two steps.
First, search for ayu in the VSCode extensions, install it, and select the color theme ayu-light.
Next, open the Command Palette with Cmd+Shift+P, select Preferences: Open User Settings (JSON), and paste the entire JSON below.
{
"workbench.colorTheme": "ayu-light",
"editor.fontSize": 12,
"window.zoomLevel": 0,
"workbench.colorCustomizations": {
"foreground": "#1A1A1A",
"editor.foreground": "#1A1A1A",
"editor.background": "#F4F3EE",
"editorWidget.background": "#F4F3EE",
"sideBar.background": "#F4F3EE",
"sideBar.foreground": "#1A1A1A",
"sideBar.border": "#E2E0D8",
"activityBar.background": "#F4F3EE",
"activityBar.foreground": "#C15F3C",
"activityBarBadge.background": "#C15F3C",
"activityBarBadge.foreground": "#F4F3EE",
"titleBar.activeBackground": "#F4F3EE",
"titleBar.inactiveBackground": "#F4F3EE",
"titleBar.activeForeground": "#1A1A1A",
"statusBar.background": "#C15F3C",
"statusBar.foreground": "#F4F3EE",
"statusBar.debuggingBackground": "#C15F3C",
"tab.activeBackground": "#F4F3EE",
"tab.activeForeground": "#1A1A1A",
"tab.inactiveBackground": "#F4F3EE",
"tab.inactiveForeground": "#6B6B6B",
"tab.activeBorderTop": "#C15F3C",
"editorGroupHeader.tabsBackground": "#F4F3EE",
"panel.background": "#F4F3EE",
"panel.border": "#E2E0D8",
"terminal.background": "#F4F3EE",
"terminal.foreground": "#1A1A1A",
"focusBorder": "#C15F3C",
"button.background": "#C15F3C",
"button.foreground": "#F4F3EE",
"button.hoverBackground": "#A84E30",
"button.secondaryBackground": "#E8E6DF",
"button.secondaryForeground": "#1A1A1A",
"button.secondaryHoverBackground": "#E2E0D8",
"button.border": "#E2E0D8",
"checkbox.background": "#F4F3EE",
"checkbox.foreground": "#1A1A1A",
"checkbox.border": "#B1ADA1",
"checkbox.selectBackground": "#C15F3C",
"checkbox.selectBorder": "#C15F3C",
"list.activeSelectionBackground": "#C15F3C30",
"list.activeSelectionForeground": "#1A1A1A",
"list.inactiveSelectionBackground": "#C15F3C20",
"list.inactiveSelectionForeground": "#1A1A1A",
"list.focusBackground": "#C15F3C30",
"list.focusForeground": "#1A1A1A",
"list.hoverBackground": "#E8E6DF",
"list.hoverForeground": "#1A1A1A",
"list.highlightForeground": "#C15F3C",
"list.focusHighlightForeground": "#C15F3C",
"editorLineNumber.foreground": "#B1ADA1",
"editorLineNumber.activeForeground": "#C15F3C",
"editorCursor.foreground": "#C15F3C",
"editor.selectionBackground": "#C15F3C33",
"editor.lineHighlightBackground": "#EEEDEA",
"scrollbarSlider.background": "#B1ADA144",
"scrollbarSlider.hoverBackground": "#B1ADA177",
"input.background": "#F4F3EE",
"input.foreground": "#1A1A1A",
"input.border": "#E2E0D8",
"dropdown.background": "#F4F3EE",
"dropdown.foreground": "#1A1A1A",
"dropdown.border": "#E2E0D8",
"sideBarSectionHeader.background": "#F4F3EE",
"sideBarSectionHeader.foreground": "#1A1A1A",
"sideBarSectionHeader.border": "#E2E0D8",
"panelSectionHeader.background": "#F4F3EE",
"panelSectionHeader.foreground": "#1A1A1A",
"panelSectionHeader.border": "#E2E0D8",
"badge.background": "#C15F3C",
"badge.foreground": "#F4F3EE",
"extensionButton.prominentBackground": "#C15F3C",
"extensionButton.prominentForeground": "#F4F3EE",
"extensionButton.prominentHoverBackground": "#A84E30",
"extensionButton.background": "#C15F3C",
"extensionButton.foreground": "#F4F3EE",
"extensionButton.hoverBackground": "#A84E30",
"notifications.background": "#F4F3EE",
"notifications.foreground": "#1A1A1A",
"notifications.border": "#E2E0D8",
"notificationCenterHeader.background": "#F4F3EE",
"notificationCenterHeader.foreground": "#1A1A1A",
"editorSuggestWidget.background": "#F4F3EE",
"editorSuggestWidget.foreground": "#1A1A1A",
"editorSuggestWidget.border": "#E2E0D8",
"editorSuggestWidget.selectedBackground": "#C15F3C22",
"editorHoverWidget.background": "#F4F3EE",
"editorHoverWidget.foreground": "#1A1A1A",
"editorHoverWidget.border": "#E2E0D8",
"peekViewEditor.background": "#F4F3EE",
"peekViewResult.background": "#F4F3EE",
"peekViewTitle.background": "#F4F3EE",
"peekViewTitleLabel.foreground": "#1A1A1A",
"peekView.border": "#C15F3C",
"menu.background": "#F4F3EE",
"menu.foreground": "#1A1A1A",
"menu.selectionBackground": "#C15F3C22",
"menu.selectionForeground": "#1A1A1A",
"menu.border": "#E2E0D8",
"menubar.selectionBackground": "#C15F3C22",
"menubar.selectionForeground": "#1A1A1A",
"commandCenter.background": "#F4F3EE",
"commandCenter.foreground": "#1A1A1A",
"commandCenter.border": "#E2E0D8",
"quickInput.background": "#F4F3EE",
"quickInput.foreground": "#1A1A1A",
"quickInputList.focusBackground": "#C15F3C22",
"quickInputList.focusForeground": "#1A1A1A",
"debugToolBar.background": "#F4F3EE",
"debugToolBar.border": "#E2E0D8",
"welcomePage.background": "#F4F3EE",
"walkThrough.embeddedEditorBackground": "#F4F3EE",
"toolbar.hoverBackground": "#E8E6DF",
"breadcrumb.background": "#F4F3EE",
"breadcrumb.foreground": "#6B6B6B",
"breadcrumb.focusForeground": "#1A1A1A",
"breadcrumb.activeSelectionForeground": "#C15F3C",
"statusBarItem.prominentHoverBackground": "#E8E6DF",
"pickerGroup.foreground": "#C15F3C",
"pickerGroup.border": "#E2E0D8",
"welcomePage.tileBackground": "#E8E6DF",
"welcomePage.tileBorder": "#E2E0D8",
"welcomePage.tileHoverBackground": "#E2E0D8",
"textBlockQuote.background": "#F4F3EE",
"textBlockQuote.border": "#C15F3C",
"diffEditor.insertedTextBackground": "#C15F3C15",
"diffEditor.removedTextBackground": "#C15F3C10",
"diffEditor.insertedLineBackground": "#C15F3C10",
"diffEditor.removedLineBackground": "#C15F3C08",
"diffEditorGutter.insertedLineBackground": "#C15F3C20",
"diffEditorGutter.removedLineBackground": "#C15F3C15",
"scm.providerBorder": "#E2E0D8",
"editorGutter.addedBackground": "#C15F3C",
"editorGutter.modifiedBackground": "#B1ADA1",
"editorGutter.deletedBackground": "#C15F3C88",
"widget.shadow": "#B1ADA133",
"widget.border": "#E2E0D8",
"multiDiffEditor.headerBackground": "#E8E6DF",
"multiDiffEditor.border": "#E2E0D8",
"multiDiffEditor.background": "#F4F3EE"
}
}
Thoughts
Creating a VSCode theme from scratch is quite complex, but this approach of overlaying UI colors on a base theme has a low barrier to entry. I can borrow a well-made theme for code highlighting and just change the mood of the UI frame.
It's a screen I look at for hours every day, and having it filled with colors I like makes a difference.
Things to Try Next
- Customize code syntax highlighting to match the terracotta tone (
editor.tokenColorCustomizations) - Package it as a VSCode extension and upload it to the Marketplace
- Maybe create a dark mode version too?