Terracotta Light Themes

Name: Terracotta Light Themes
Author: hokyoun

Publisher: hokyounThemes in package: 2

Two warm, paper-like light themes with complete static syntax and semantic highlighting.

Open in VS Code GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Terracotta Light Themes — Terracotta Claude Light

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

/**
 * Fetch user data by ID
 * @param id
 * @returns User object or null if ID is invalid
 */
export async function fetchUser(id: string): Promise<User | null> {
  if (!id) {
    return null;
  }

  const response = await fetch(`/api/users/${id}`, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return (await response.json()) as User;
}

function greet(user: User): string {
  // Simple greeting function that uses the user's name
  return `Hello, ${user.name}!`;
}

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project $

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#9F4A3114
activityBar.activeBorder#9F4A31
activityBar.activeFocusBorder#9F4A31
activityBar.background#F0EEE6
activityBar.border#DED8CC
activityBar.foreground#24231F
activityBar.inactiveForeground#73726C
activityBarBadge.background#9F4A31
activityBarBadge.foreground#FFFFFF
activityBarTop.activeBorder#9F4A31
agentStatusIndicator.background#9F4A310D
badge.background#9F4A31
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#9F4A31
breadcrumb.background#FAF9F5
breadcrumb.focusForeground#24231F
breadcrumb.foreground#5E5D59
breadcrumbPicker.background#F7F5EF
button.background#9F4A31
button.border#9F4A31
button.foreground#FFFFFF
button.hoverBackground#873D29
button.secondaryBackground#E8E6DC
button.secondaryBorder#DED8CC
button.secondaryForeground#24231F
button.secondaryHoverBackground#DED8CC
chat.avatarBackground#E8E6DC
chat.avatarForeground#24231F
chat.requestBackground#9F4A310D
chat.requestBorder#DED8CC
chat.slashCommandBackground#9F4A3114
chat.slashCommandForeground#9F4A31
checkbox.background#F7F5EF
checkbox.border#B8B2A8
checkbox.foreground#24231F
commandCenter.activeBackground#9F4A3114
commandCenter.activeBorder#9F4A31
commandCenter.activeForeground#24231F
commandCenter.background#9F4A310D
commandCenter.border#DED8CC
commandCenter.foreground#24231F
contrastActiveBorder#00000000
contrastBorder#00000000
descriptionForeground#5E5D59
diffEditor.diagonalFill#73726C22
diffEditor.insertedLineBackground#356A4314
diffEditor.insertedTextBackground#356A4324
diffEditor.removedLineBackground#9D3F3314
diffEditor.removedTextBackground#9D3F3324
disabledForeground#73726C
dropdown.background#F7F5EF
dropdown.border#DED8CC
dropdown.foreground#24231F
dropdown.listBackground#F7F5EF
editor.background#FAF9F5
editor.findMatchBackground#76571933
editor.findMatchBorder#765719
editor.findMatchHighlightBackground#7657191A
editor.findMatchHighlightBorder#76571966
editor.findRangeHighlightBackground#76571912
editor.foreground#24231F
editor.hoverHighlightBackground#9F4A310D
editor.inactiveSelectionBackground#9F4A3118
editor.lineHighlightBackground#E8E6DC66
editor.lineHighlightBorder#00000000
editor.linkedEditingBackground#2E679614
editor.rangeHighlightBackground#E8E6DC80
editor.selectionBackground#9F4A3126
editor.selectionForeground#24231F
editor.selectionHighlightBackground#9F4A3114
editor.selectionHighlightBorder#9F4A3166
editor.wordHighlightBackground#9F4A3114
editor.wordHighlightStrongBackground#9F4A3126
editorBracketHighlight.foreground1#9F4A31
editorBracketHighlight.foreground2#765719
editorBracketHighlight.foreground3#356A43
editorBracketHighlight.foreground4#2E6796
editorBracketHighlight.foreground5#934562
editorBracketHighlight.foreground6#326F83
editorBracketHighlight.unexpectedBracket.foreground#9D3F33
editorBracketMatch.background#9F4A3114
editorBracketMatch.border#9F4A31
editorCodeLens.foreground#73726C
editorCursor.foreground#9F4A31
editorError.foreground#9D3F33
editorGroup.border#DED8CC
editorGroup.dropBackground#9F4A3126
editorGroupHeader.noTabsBackground#F0EEE6
editorGroupHeader.tabsBackground#F0EEE6
editorGroupHeader.tabsBorder#DED8CC
editorGutter.addedBackground#356A43
editorGutter.background#FAF9F5
editorGutter.deletedBackground#9D3F33
editorGutter.foldingControlForeground#73726C
editorGutter.modifiedBackground#765719
editorHint.foreground#356A43
editorHoverWidget.background#F7F5EF
editorHoverWidget.border#DED8CC
editorHoverWidget.foreground#24231F
editorHoverWidget.statusBarBackground#E8E6DC
editorIndentGuide.activeBackground1#73726C99
editorIndentGuide.background1#B8B2A866
editorInfo.foreground#2E6796
editorInlayHint.background#E8E6DCCC
editorInlayHint.foreground#5E5D59
editorLineNumber.activeForeground#5E5D59
editorLineNumber.foreground#73726C
editorMultiCursor.primary.background#9F4A31
editorMultiCursor.primary.foreground#FFFFFF
editorMultiCursor.secondary.background#2E6796
editorMultiCursor.secondary.foreground#FFFFFF
editorOverviewRuler.addedForeground#356A4399
editorOverviewRuler.border#00000000
editorOverviewRuler.deletedForeground#9D3F3399
editorOverviewRuler.errorForeground#9D3F33
editorOverviewRuler.modifiedForeground#76571999
editorOverviewRuler.warningForeground#765719
editorRuler.foreground#B8B2A880
editorStickyScroll.background#FAF9F5
editorStickyScroll.border#DED8CC
editorStickyScroll.shadow#00000012
editorStickyScrollGutter.background#FAF9F5
editorStickyScrollHover.background#F7F5EF
editorSuggestWidget.background#F7F5EF
editorSuggestWidget.border#DED8CC
editorSuggestWidget.focusHighlightForeground#9F4A31
editorSuggestWidget.foreground#24231F
editorSuggestWidget.highlightForeground#9F4A31
editorSuggestWidget.selectedBackground#9F4A3114
editorSuggestWidget.selectedForeground#24231F
editorSuggestWidget.selectedIconForeground#9F4A31
editorUnicodeHighlight.background#7657191F
editorUnicodeHighlight.border#765719
editorWarning.foreground#765719
editorWhitespace.foreground#B8B2A899
editorWidget.background#F7F5EF
editorWidget.border#DED8CC
editorWidget.foreground#24231F
editorWidget.resizeBorder#9F4A31
errorForeground#9D3F33
extensionButton.prominentBackground#9F4A31
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#873D29
focusBorder#9F4A31
foreground#24231F
gitDecoration.addedResourceForeground#356A43
gitDecoration.conflictingResourceForeground#934562
gitDecoration.deletedResourceForeground#9D3F33
gitDecoration.ignoredResourceForeground#73726C
gitDecoration.modifiedResourceForeground#765719
gitDecoration.renamedResourceForeground#2E6796
gitDecoration.untrackedResourceForeground#356A43
icon.foreground#5E5D59
inlineChat.background#F7F5EF
inlineChat.border#DED8CC
inlineChat.shadow#00000012
input.background#F7F5EF
input.border#DED8CC
input.foreground#24231F
input.placeholderForeground#73726C
inputOption.activeBackground#9F4A3114
inputOption.activeBorder#9F4A31
inputOption.activeForeground#24231F
inputOption.hoverBackground#9F4A310D
inputValidation.errorBackground#9D3F3314
inputValidation.errorBorder#9D3F33
inputValidation.errorForeground#9D3F33
inputValidation.infoBackground#2E679614
inputValidation.infoBorder#2E6796
inputValidation.infoForeground#2E6796
inputValidation.warningBackground#7657191F
inputValidation.warningBorder#765719
inputValidation.warningForeground#765719
keybindingLabel.background#E8E6DC
keybindingLabel.border#DED8CC
keybindingLabel.bottomBorder#B8B2A8
keybindingLabel.foreground#24231F
list.activeSelectionBackground#9F4A3114
list.activeSelectionForeground#24231F
list.activeSelectionIconForeground#9F4A31
list.dropBackground#9F4A3114
list.errorForeground#9D3F33
list.filterMatchBackground#7657191F
list.filterMatchBorder#76571966
list.focusAndSelectionOutline#9F4A31
list.focusBackground#9F4A3114
list.focusForeground#24231F
list.focusOutline#9F4A31
list.highlightForeground#9F4A31
list.hoverBackground#9F4A310D
list.hoverForeground#24231F
list.inactiveFocusOutline#9F4A3180
list.inactiveSelectionBackground#9F4A310D
list.inactiveSelectionForeground#24231F
list.inactiveSelectionIconForeground#9F4A31
list.invalidItemForeground#9D3F33
list.warningForeground#765719
menu.background#F7F5EF
menu.border#DED8CC
menu.foreground#24231F
menu.selectionBackground#9F4A3114
menu.selectionBorder#9F4A3166
menu.selectionForeground#24231F
menu.separatorBackground#DED8CC
menubar.selectionBackground#9F4A3114
menubar.selectionForeground#24231F
minimap.background#FAF9F5
minimap.errorHighlight#9D3F33
minimap.findMatchHighlight#765719AA
minimap.selectionHighlight#9F4A3180
minimap.warningHighlight#765719
minimapSlider.activeBackground#73726C52
minimapSlider.background#73726C24
minimapSlider.hoverBackground#73726C38
notebook.cellBorderColor#DED8CC
notebook.focusedCellBorder#9F4A31
notebook.inactiveFocusedCellBorder#B8B2A8
notebook.outputContainerBackgroundColor#F7F5EF
notebook.selectedCellBackground#9F4A310D
notificationCenter.border#DED8CC
notificationCenterHeader.background#E8E6DC
notificationCenterHeader.foreground#24231F
notificationLink.foreground#2E6796
notifications.background#F7F5EF
notifications.border#DED8CC
notifications.foreground#24231F
notificationsErrorIcon.foreground#9D3F33
notificationsInfoIcon.foreground#2E6796
notificationsWarningIcon.foreground#765719
notificationToast.border#DED8CC
panel.background#F0EEE6
panel.border#DED8CC
panel.dropBorder#9F4A31
panelInput.border#DED8CC
panelSection.border#DED8CC
panelSection.dropBackground#9F4A3114
panelSectionHeader.background#F0EEE6
panelStickyScroll.background#F0EEE6
panelStickyScroll.border#DED8CC
panelStickyScroll.shadow#00000012
panelTitle.activeBorder#9F4A31
panelTitle.activeForeground#24231F
panelTitle.inactiveForeground#73726C
peekView.border#B8B2A8
peekViewEditor.background#FAF9F5
peekViewEditor.matchHighlightBackground#7657191F
peekViewEditor.matchHighlightBorder#76571966
peekViewEditorGutter.background#F0EEE6
peekViewResult.background#F0EEE6
peekViewResult.matchHighlightBackground#7657191F
peekViewResult.selectionBackground#9F4A3114
peekViewResult.selectionForeground#24231F
peekViewTitle.background#E8E6DC
peekViewTitleDescription.foreground#5E5D59
peekViewTitleLabel.foreground#24231F
pickerGroup.border#DED8CC
pickerGroup.foreground#9F4A31
progressBar.background#9F4A31
quickInput.background#F7F5EF
quickInput.foreground#24231F
quickInputList.focusBackground#9F4A3114
quickInputList.focusForeground#24231F
quickInputList.focusHighlightForeground#9F4A31
quickInputList.focusIconForeground#9F4A31
quickInputList.hoverBackground#9F4A310D
quickInputTitle.background#E8E6DC
radio.activeForeground#9F4A31
sash.hoverBorder#9F4A31
scrollbar.background#FAF9F5
scrollbar.shadow#00000012
scrollbarSlider.activeBackground#5E5D595C
scrollbarSlider.background#73726C24
scrollbarSlider.hoverBackground#5E5D593D
selection.background#9F4A3126
settings.dropdownBackground#F7F5EF
settings.dropdownBorder#DED8CC
settings.headerForeground#24231F
settings.modifiedItemIndicator#9F4A31
settings.numberInputBorder#DED8CC
settings.textInputBorder#DED8CC
sideBar.background#F0EEE6
sideBar.border#DED8CC
sideBar.dropBackground#9F4A3114
sideBar.foreground#5E5D59
sideBarSectionHeader.background#E8E6DC
sideBarSectionHeader.border#DED8CC
sideBarSectionHeader.foreground#24231F
sideBarStickyScroll.background#F0EEE6
sideBarStickyScroll.border#DED8CC
sideBarStickyScroll.shadow#00000012
sideBarTitle.foreground#5E5D59
statusBar.background#E8E6DC
statusBar.border#DED8CC
statusBar.debuggingBackground#765719
statusBar.debuggingForeground#FFFFFF
statusBar.focusBorder#9F4A31
statusBar.foreground#5E5D59
statusBar.noFolderBackground#E8E6DC
statusBar.noFolderForeground#5E5D59
statusBarItem.errorBackground#9D3F33
statusBarItem.errorForeground#FFFFFF
statusBarItem.focusBorder#9F4A31
statusBarItem.hoverBackground#9F4A3114
statusBarItem.prominentBackground#9F4A3114
statusBarItem.prominentForeground#24231F
statusBarItem.prominentHoverBackground#9F4A3122
statusBarItem.remoteBackground#9F4A31
statusBarItem.remoteForeground#FFFFFF
statusBarItem.warningBackground#765719
statusBarItem.warningForeground#FFFFFF
tab.activeBackground#FAF9F5
tab.activeBorder#9F4A31
tab.activeBorderTop#9F4A31
tab.activeForeground#24231F
tab.activeModifiedBorder#765719
tab.border#DED8CC
tab.hoverBackground#F7F5EF
tab.hoverForeground#24231F
tab.inactiveBackground#F0EEE6
tab.inactiveForeground#73726C
tab.inactiveModifiedBorder#765719
tab.lastPinnedBorder#DED8CC
tab.selectedBorderTop#9F4A31
tab.selectedForeground#24231F
tab.unfocusedActiveBorder#9F4A3180
tab.unfocusedActiveBorderTop#9F4A3180
terminal.ansiBlack#24231F
terminal.ansiBlue#2E6796
terminal.ansiBrightBlack#6F6E68
terminal.ansiBrightBlue#356F9F
terminal.ansiBrightCyan#367583
terminal.ansiBrightGreen#467349
terminal.ansiBrightMagenta#9C496C
terminal.ansiBrightRed#A54432
terminal.ansiBrightWhite#24231F
terminal.ansiBrightYellow#805D17
terminal.ansiCyan#326F83
terminal.ansiGreen#356A43
terminal.ansiMagenta#934562
terminal.ansiRed#9D3F33
terminal.ansiWhite#5E5D59
terminal.ansiYellow#765719
terminal.background#F7F5EF
terminal.foreground#24231F
terminal.inactiveSelectionBackground#9F4A3114
terminal.selectionBackground#9F4A3126
terminalCursor.background#F7F5EF
terminalCursor.foreground#9F4A31
textBlockQuote.background#F0EEE6
textBlockQuote.border#B8B2A8
textCodeBlock.background#E8E6DC
textLink.activeForeground#9F4A31
textLink.foreground#2E6796
textPreformat.background#E8E6DC
textPreformat.foreground#5E5D59
textSeparator.foreground#DED8CC
titleBar.activeBackground#F0EEE6
titleBar.activeForeground#5E5D59
titleBar.border#DED8CC
titleBar.inactiveBackground#F0EEE6
titleBar.inactiveForeground#73726C
toolbar.activeBackground#9F4A3122
toolbar.hoverBackground#9F4A3114
widget.border#DED8CC
widget.shadow#00000018

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, text.html.vue meta.lang.ts comment, string.quoted.docstring.multi.python, meta.tag.sgml.doctype.html, markup.quote.markdown, markup.strikethrough.markdown, meta.separator.markdown, comment.line.percentage.latex	#73726C	italic
keyword, storage, storage.modifier, keyword.control.import.js, storage.type.interface.ts, keyword.other.rust, storage.type.rust, keyword.type.go, entity.other.attribute-name.html.vue, meta.attribute.directive.html, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, keyword.control.at-rule.css, keyword.control.at-rule.scss, keyword.other.important.css, constant.language.merge.yaml, support.function.latex	#6259C5	—
keyword.control, keyword.control.flow, keyword.other.unit, storage.type, keyword.operator.logical.python, keyword.control.shell	#6259C5	—
keyword.operator, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.overload.cpp, keyword.operator.combinator.css, keyword.operator.redirect.shell, keyword.other.unit.css, constant.other.option.shell, punctuation.separator.key-value, punctuation.definition.block.sequence.item.yaml, punctuation.definition.document.yaml, markup.list.bullet.markdown	#73726C	—
variable, variable.other, variable.other.readwrite, variable.css, variable.scss, variable.other.less, variable.other.normal.shell, variable.other.bracket.shell, variable.other.special.shell	#B44320	—
variable.other.property, variable.other.member, meta.property-name, support.variable.property, support.type.property-name, support.type.property-name.json, string.quoted.double.json meta.object-literal.key, support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, meta.property-name.css, meta.mapping.key.yaml string, entity.name.tag.yaml, support.type.property-name.toml	#185FA5	—
constant, constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, variable.other.constant, variable.other.enummember, variable.other.enummember.ts, constant.language.python, string.quoted.single.rust, constant.other.rune.go, constant.other.variable.mac-classic.c, entity.other.attribute-name.id.css, support.constant.property-value.css, constant.language.json, constant.language.boolean.yaml, constant.language.null.yaml, punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml, entity.name.type.anchor.yaml, constant.language.boolean.toml, constant.other.reference.latex	#8A570D	—
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, punctuation.definition.string.begin, punctuation.definition.string.end, entity.name.import.go, string.quoted.double.html, string.quoted.single.html, string.quoted.double.json, string.quoted.double.shell, string.quoted.single.shell, string.unquoted.heredoc.shell, string.unquoted.plain.out.yaml, string.quoted.double.yaml, string.quoted.single.yaml, string.quoted.double.toml, string.quoted.single.toml, string.quoted.triple.toml	#14775A	—
string.template, string.interpolated, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, meta.template.expression, meta.fstring.python, string.interpolated.python, punctuation.definition.template-expression.begin.python, punctuation.definition.template-expression.end.python, punctuation.definition.interpolation, meta.string.interpolation.shell, punctuation.definition.string.interpolated.shell	#14775A	—
constant.character.escape, constant.other.placeholder, constant.character.entity.html	#993556	—
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary, constant.other.color.rgb-value.css, constant.numeric.json, constant.numeric.integer.yaml, constant.numeric.float.yaml, constant.numeric.integer.toml, constant.numeric.float.toml, string.other.math.latex, meta.math.block.latex	#B44320	—
string.regexp, punctuation.definition.group.regexp, constant.character.character-class.regexp, keyword.operator.quantifier.regexp	#993556	—
entity.name.type, entity.name.class, entity.name.interface, entity.name.struct, entity.name.enum, support.type, support.class, support.type.primitive, support.type.builtin, variable.other.jsdoc, meta.type.annotation entity.name.type, support.class.component.tsx, support.class.component.ts, entity.name.tag.html.vue, support.type.exception.python, meta.function.parameters.annotation.python, entity.name.type.primitive.rust, entity.name.type.rust, storage.type.numeric.rust, support.type.builtin.go, entity.name.package.go, storage.type.c, entity.name.type.c, storage.type.cpp, entity.name.scope-resolution.cpp, meta.template.call.cpp entity.name.type, entity.other.attribute-name.class.css, entity.name.section.toml, support.class.latex	#993C1D	—
entity.name.function, entity.name.method, entity.name.method.js, support.function, variable.function, entity.name.function.macro.rust, support.function.builtin.go, entity.name.function.scss, entity.name.command.shell	#185FA5	—
variable.parameter, variable.parameter.function.language.special, meta.type.parameters entity.name.type, keyword.other.lifetime.rust, storage.modifier.lifetime.rust, entity.name.lifetime.rust, variable.language.self.rust, entity.name.type.template.cpp, variable.parameter.latex	#B44320	—
variable.parameter.function.language.special.python	#B44320	italic
entity.name.tag, punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end, entity.name.tag.tsx, entity.name.tag.ts, entity.name.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.html, entity.name.tag.css, punctuation.definition.table.toml, punctuation.definition.array.toml	#6259C5	—
entity.other.attribute-name, entity.other.attribute-name.html	#3B6D11	—
entity.name.function.decorator, meta.decorator, meta.decorator punctuation.decorator, punctuation.decorator, meta.decorator.ts, meta.decorator.ts entity.name.function.ts, entity.name.function.decorator.python, meta.function.decorator.python entity.name.function, meta.attribute.rust, meta.attribute.rust entity.name.function.rust, keyword.other.preprocessor.c, meta.preprocessor.c, entity.name.function.preprocessor.c, comment.line.shebang.shell, keyword.control.preamble.latex	#8A570D	—
punctuation.definition, meta.brace.round, meta.brace.square, meta.brace.curly, punctuation.definition.begin.latex, punctuation.definition.end.latex	#73726C	—
markup.heading, markup.heading.markdown, entity.name.section.markdown, markup.heading.1.markdown	#6259C5	bold
markup.heading.2.markdown, markup.heading.3.markdown, markup.heading.4.markdown, markup.heading.5.markdown, markup.heading.6.markdown	#185FA5	bold
markup.bold, markup.bold.markdown	#993C1D	bold
markup.italic	#B44320	italic
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown	#8A570D	—
markup.underline.link.markdown	#14775A	underline
string.other.link.title.markdown	#993C1D	—
fenced_code.block.language.markdown	#6259C5	—