Claude Code Theme

Name: Claude Code Theme
Author: Ashwin Gopalsamy

Publisher: Ashwin GopalsamyThemes in package: 6

Claude-aligned code theme system for VS Code, designed for clarity, endurance, and semantic meaning.

Open in VS Code GitHub

Color themes

VS Code preview

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

Claude Code Theme — Claude Code Light Brand

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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...

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#C964421a
activityBar.activeBorder#C96442
activityBar.activeFocusBorder#C96442
activityBar.background#F0EEE6
activityBar.border#D9D5CC
activityBar.foreground#1A1917
activityBar.inactiveForeground#8D877D
activityBarBadge.background#C96442
activityBarBadge.foreground#FAF9F5
activityBarTop.activeBorder#C96442
activityBarTop.dropBorder#C96442
activityBarTop.foreground#1A1917
badge.background#EAE7DF
badge.foreground#1A1917
breadcrumb.activeSelectionForeground#1A1917
breadcrumb.background#FAF9F5
breadcrumb.focusForeground#C96442
breadcrumb.foreground#8D877D
button.background#C96442
button.border#A9A39Abf
button.foreground#FAF9F5
button.hoverBackground#BF5A39
button.secondaryBackground#EAE7DF
button.secondaryBorder#D9D5CC
button.secondaryForeground#1A1917
button.secondaryHoverBackground#ECE9DF
chat.avatarBackground#C96442
chat.linesAddedForeground#2E7C4C
chat.linesRemovedForeground#A84B3A
chat.requestBackground#F0EEE6
chat.requestBorder#D9D5CC
chat.requestBubbleBackground#C9644214
chat.slashCommandBackground#207FDE14
checkbox.background#F3F1E9
checkbox.border#D9D5CC
checkbox.foreground#1A1917
commandCenter.activeBackground#C964421a
commandCenter.activeBorder#C96442
commandCenter.background#C9644214
commandCenter.border#D9D5CC
commandCenter.foreground#1A1917
contrastActiveBorder#00000000
contrastBorder#00000000
debugExceptionWidget.background#A84B3A14
debugTokenExpression.name#1A1917
debugToolBar.background#F0EEE6
descriptionForeground#6B665F
diffEditor.diagonalFill#8D877D26
diffEditor.insertedLineBackground#2E7C4C14
diffEditor.insertedTextBackground#2E7C4C1a
diffEditor.removedLineBackground#A84B3A14
diffEditor.removedTextBackground#A84B3A1a
disabledForeground#8D877D
dropdown.background#F3F1E9
dropdown.border#D9D5CC
dropdown.foreground#1A1917
dropdown.listBackground#F3F1E9
editor.background#FAF9F5
editor.findMatchBackground#946A1E38
editor.findMatchBorder#946A1E
editor.findMatchHighlightBackground#946A1E1a
editor.findMatchHighlightBorder#946A1Eb3
editor.findRangeHighlightBackground#946A1E14
editor.focusedStackFrameHighlightBackground#8A62201a
editor.foreground#1A1917
editor.hoverHighlightBackground#C9644214
editor.inactiveSelectionBackground#C964421a
editor.lineHighlightBackground#C9644214
editor.lineHighlightBorder#00000000
editor.linkedEditingBackground#207FDE14
editor.rangeHighlightBackground#C9644214
editor.selectionBackground#C964422e
editor.selectionForeground#1A1917
editor.selectionHighlightBackground#C964421a
editor.selectionHighlightBorder#C96442b3
editor.stackFrameHighlightBackground#8A622014
editor.wordHighlightBackground#C964421a
editor.wordHighlightStrongBackground#C964422e
editorBracketHighlight.foreground1#B84A2A
editorBracketHighlight.foreground2#AE4E30
editorBracketHighlight.foreground3#946A1E
editorBracketHighlight.foreground4#2D7F4D
editorBracketHighlight.foreground5#207FDE
editorBracketHighlight.foreground6#BD5341
editorBracketHighlight.unexpectedBracket.foreground#A84B3A
editorBracketMatch.background#C964421a
editorBracketMatch.border#C96442
editorCursor.foreground#C96442
editorError.foreground#A84B3A
editorGhostText.background#00000000
editorGhostText.foreground#6B665Fcc
editorGroup.border#D9D5CC
editorGroup.dropBackground#C964421a
editorGroupHeader.noTabsBackground#F0EEE6
editorGroupHeader.tabsBackground#F0EEE6
editorGroupHeader.tabsBorder#D9D5CC
editorGutter.addedBackground#2E7C4C
editorGutter.background#FAF9F5
editorGutter.deletedBackground#A84B3A
editorGutter.foldingControlForeground#8D877D
editorGutter.modifiedBackground#8A6220
editorHint.foreground#2E7C4C
editorHoverWidget.background#F3F1E9
editorHoverWidget.border#D9D5CC
editorHoverWidget.foreground#1A1917
editorHoverWidget.statusBarBackground#EAE7DF
editorIndentGuide.activeBackground1#A9A39Aa6
editorIndentGuide.background1#A9A39A59
editorInfo.foreground#207FDE
editorInlayHint.background#EAE7DFd9
editorInlayHint.foreground#6B665F
editorInlayHint.parameterBackground#AE6D5314
editorInlayHint.parameterForeground#AE6D53
editorInlayHint.typeBackground#38629014
editorInlayHint.typeForeground#386290
editorLineNumber.activeForeground#6B665F
editorLineNumber.dimmedForeground#8D877Da6
editorLineNumber.foreground#8D877D
editorMultiCursor.primary.background#C96442
editorMultiCursor.primary.foreground#FAF9F5
editorMultiCursor.secondary.background#207FDE
editorMultiCursor.secondary.foreground#FAF9F5
editorOverviewRuler.addedForeground#2E7C4Cd9
editorOverviewRuler.bracketMatchForeground#C96442d9
editorOverviewRuler.deletedForeground#A84B3Ad9
editorOverviewRuler.errorForeground#A84B3Ad9
editorOverviewRuler.findMatchForeground#946A1Ee6
editorOverviewRuler.infoForeground#207FDEd9
editorOverviewRuler.modifiedForeground#8A6220d9
editorOverviewRuler.warningForeground#8A6220d9
editorRuler.foreground#A9A39A66
editorStickyScroll.background#FAF9F5
editorStickyScrollHover.background#C9644214
editorSuggestWidget.background#F3F1E9
editorSuggestWidget.border#D9D5CC
editorSuggestWidget.foreground#1A1917
editorSuggestWidget.highlightForeground#C96442
editorSuggestWidget.selectedBackground#C964421a
editorSuggestWidget.selectedForeground#1A1917
editorUnicodeHighlight.background#8A622014
editorUnicodeHighlight.border#8A6220
editorWarning.foreground#8A6220
editorWhitespace.foreground#8D877D8c
editorWidget.background#F3F1E9
editorWidget.border#D9D5CC
editorWidget.foreground#1A1917
editorWidget.resizeBorder#C96442
errorForeground#A84B3A
focusBorder#C96442
foreground#1A1917
gitDecoration.addedResourceForeground#2E7C4C
gitDecoration.conflictingResourceForeground#8A6220
gitDecoration.deletedResourceForeground#A84B3A
gitDecoration.ignoredResourceForeground#8D877D
gitDecoration.modifiedResourceForeground#8A6220
gitDecoration.untrackedResourceForeground#2E7C4C
icon.foreground#6B665F
inlineChat.background#F3F1E9
inlineChat.border#D9D5CC
inlineChatDiff.inserted#2E7C4C14
inlineChatDiff.removed#A84B3A14
inlineChatInput.background#F0EEE6
inlineChatInput.border#D9D5CC
input.background#F3F1E9
input.border#D9D5CC
input.foreground#1A1917
input.placeholderForeground#8D877D
inputOption.activeBackground#C964421a
inputOption.activeBorder#C96442
inputOption.activeForeground#1A1917
inputOption.hoverBackground#C9644214
inputValidation.errorBackground#A84B3A14
inputValidation.errorBorder#A84B3A
inputValidation.errorForeground#A84B3A
inputValidation.infoBackground#207FDE14
inputValidation.infoBorder#207FDE
inputValidation.infoForeground#207FDE
inputValidation.warningBackground#8A622014
inputValidation.warningBorder#8A6220
inputValidation.warningForeground#8A6220
interactive.activeCodeBorder#C96442
interactive.inactiveCodeBorder#D9D5CC
list.activeSelectionBackground#C964421a
list.activeSelectionForeground#1A1917
list.activeSelectionIconForeground#C96442
list.dropBackground#C964421a
list.errorForeground#A84B3A
list.filterMatchBackground#946A1E14
list.filterMatchBorder#946A1E
list.focusAndSelectionOutline#C96442
list.focusBackground#C964421a
list.focusForeground#1A1917
list.focusOutline#C96442
list.highlightForeground#C96442
list.hoverBackground#C9644214
list.hoverForeground#1A1917
list.inactiveFocusOutline#C96442a6
list.inactiveSelectionBackground#C9644214
list.inactiveSelectionForeground#1A1917
list.inactiveSelectionIconForeground#C96442
list.warningForeground#8A6220
menu.background#F3F1E9
menu.foreground#1A1917
menu.selectionBackground#C964421a
menu.selectionBorder#C96442b3
menu.selectionForeground#1A1917
menu.separatorBackground#D9D5CC
mergeEditor.change.word.background#946A1E14
mergeEditor.conflict.input1.background#207FDE14
mergeEditor.conflict.input2.background#8A622014
mergeEditor.conflict.unhandledFocused.border#8A6220
minimap.background#FAF9F5
minimap.errorHighlight#A84B3A
minimap.findMatchHighlight#946A1E
minimap.selectionHighlight#C96442
minimap.warningHighlight#8A6220
minimapSlider.activeBackground#C964422e
minimapSlider.background#C9644214
minimapSlider.hoverBackground#C964421a
notebook.cellBorderColor#D9D5CC
notebook.cellHoverBackground#C9644214
notebookStatusErrorIcon.foreground#A84B3A
notebookStatusSuccessIcon.foreground#2E7C4C
notificationCenterHeader.background#EAE7DF
notificationCenterHeader.foreground#1A1917
notificationLink.foreground#C96442
notifications.background#F3F1E9
notifications.border#D9D5CC
notifications.foreground#1A1917
notificationsErrorIcon.foreground#A84B3A
notificationsInfoIcon.foreground#207FDE
notificationsWarningIcon.foreground#8A6220
notificationToast.background#F3F1E9
panel.background#F0EEE6
panel.border#D9D5CC
panel.dropBorder#C96442
panelInput.border#D9D5CC
panelSection.border#D9D5CC
panelSection.dropBackground#C9644214
panelSectionHeader.background#F0EEE6
panelTitle.activeBorder#C96442
panelTitle.activeForeground#1A1917
panelTitle.inactiveForeground#8D877D
peekView.border#A9A39A
peekViewEditor.background#FAF9F5
peekViewEditor.matchHighlightBackground#946A1E14
peekViewEditor.matchHighlightBorder#946A1Ebf
peekViewEditorGutter.background#F0EEE6
peekViewResult.background#F0EEE6
peekViewResult.matchHighlightBackground#946A1E1a
peekViewResult.selectionBackground#C964421a
peekViewResult.selectionForeground#1A1917
peekViewTitle.background#EAE7DF
peekViewTitleDescription.foreground#6B665F
peekViewTitleLabel.foreground#1A1917
problemsErrorIcon.foreground#A84B3A
problemsInfoIcon.foreground#207FDE
problemsWarningIcon.foreground#8A6220
progressBar.background#C96442
radio.activeForeground#C96442
sash.hoverBorder#C96442
scrollbar.background#FAF9F5
scrollbar.shadow#0000001f
scrollbarSlider.activeBackground#6B665F7a
scrollbarSlider.background#8D877D38
scrollbarSlider.hoverBackground#6B665F57
selection.background#C964421a
settings.checkboxBackground#F3F1E9
settings.checkboxBorder#D9D5CC
settings.dropdownBackground#F3F1E9
settings.dropdownBorder#D9D5CC
settings.dropdownForeground#1A1917
settings.headerForeground#1A1917
settings.modifiedItemIndicator#C96442
settings.numberInputBackground#F3F1E9
settings.numberInputBorder#D9D5CC
settings.numberInputForeground#1A1917
settings.textInputBackground#F3F1E9
settings.textInputBorder#D9D5CC
settings.textInputForeground#1A1917
sideBar.background#F0EEE6
sideBar.border#D9D5CC
sideBar.dropBackground#C9644214
sideBar.foreground#6B665F
sideBarSectionHeader.background#F0EEE6
sideBarSectionHeader.border#D9D5CC
sideBarSectionHeader.foreground#1A1917
sideBarTitle.foreground#6B665F
statusBar.background#C96442
statusBar.border#AE4E30
statusBar.debuggingBackground#946A1E
statusBar.debuggingForeground#FAF9F5
statusBar.focusBorder#C96442
statusBar.foreground#FAF9F5
statusBar.noFolderBackground#C96442
statusBarItem.errorBackground#A84B3A
statusBarItem.hoverBackground#FAF9F524
statusBarItem.prominentBackground#C964421a
statusBarItem.prominentHoverBackground#C964422e
statusBarItem.remoteBackground#C96442
statusBarItem.remoteForeground#FAF9F5
statusBarItem.warningBackground#8A6220
tab.activeBackground#FAF9F5
tab.activeBorder#C96442
tab.activeBorderTop#C96442
tab.activeForeground#1A1917
tab.activeModifiedBorder#8A6220
tab.border#D9D5CC
tab.inactiveBackground#F0EEE6
tab.inactiveForeground#8D877D
tab.inactiveModifiedBorder#8A6220
tab.lastPinnedBorder#D9D5CC
tab.selectedBorderTop#C96442
tab.selectedForeground#1A1917
tab.unfocusedActiveBorder#C9644280
tab.unfocusedActiveBorderTop#C9644280
tab.unfocusedInactiveModifiedBorder#8A622099
terminal.ansiBlack#1A1917
terminal.ansiBlue#207FDE
terminal.ansiBrightBlack#8D877D
terminal.ansiBrightBlue#4F79A8
terminal.ansiBrightCyan#45809E
terminal.ansiBrightGreen#5E8F6D
terminal.ansiBrightMagenta#6D5DBD
terminal.ansiBrightRed#C45F4A
terminal.ansiBrightWhite#4A473F
terminal.ansiBrightYellow#9C7A39
terminal.ansiCyan#2E5F99
terminal.ansiGreen#2E7C4C
terminal.ansiMagenta#6A5BCC
terminal.ansiRed#A84B3A
terminal.ansiWhite#746E64
terminal.ansiYellow#8A6220
terminal.background#FAF9F5
terminal.border#D9D5CC
terminal.dropBackground#C964421a
terminal.foreground#1A1917
terminal.selectionBackground#C964422e
terminal.selectionForeground#1A1917
terminal.tab.activeBorder#C96442
terminalCommandDecoration.defaultBackground#207FDE80
terminalCommandDecoration.errorBackground#A84B3A99
terminalCommandDecoration.successBackground#2E7C4C8c
terminalCursor.background#FAF9F5
terminalCursor.foreground#C96442
terminalOverviewRuler.cursorForeground#C96442d9
terminalStickyScroll.background#F0EEE6
terminalStickyScrollHover.background#C9644214
testing.coveredBackground#2E7C4C14
testing.iconErrored#A84B3A
testing.iconFailed#A84B3A
testing.iconPassed#2E7C4C
testing.peekBorder#A9A39A
testing.runAction#C96442
textBlockQuote.background#F0EEE6
textBlockQuote.border#D9D5CC
textCodeBlock.background#F0EEE6
textLink.activeForeground#BF5A39
textLink.foreground#C96442
textPreformat.foreground#6B665F
titleBar.activeBackground#F0EEE6
titleBar.activeForeground#6B665F
titleBar.border#D9D5CC
titleBar.inactiveBackground#F0EEE6
titleBar.inactiveForeground#8D877D
widget.border#D9D5CC
widget.shadow#00000020
window.activeBorder#00000000
window.inactiveBorder#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6C655D
keyword, storage, storage.modifier, storage.type, keyword.control, keyword.operator.word	#B84A2A	bold
keyword.operator, punctuation.separator, punctuation.accessor, punctuation.terminator	#6A645C	—
variable, variable.other.readwrite	#1A1917	—
constant, variable.other.constant, entity.name.constant, constant.language	#BD5341	—
string, string.quoted, string.template	#2D7F4D	—
constant.character.escape, constant.other.placeholder	#6A5BCC	—
constant.numeric, constant.language.boolean	#946A1E	—
entity.name.function, support.function, variable.function, meta.function-call	#AE4E30	—
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class	#386290
entity.name.namespace, entity.name.module, support.class.component	#207FDE
variable.parameter, meta.function.parameters variable	#AE6D53	—
variable.other.property, meta.property-name, support.type.property-name	#3A6594	—
punctuation, meta.brace, meta.group, punctuation.definition.parameters, punctuation.definition.arguments	#877C70	—
meta.decorator, meta.annotation, storage.type.annotation, punctuation.decorator	#6A5BCC
string.regexp, constant.regexp, keyword.control.anchor.regexp	#B07C26	—
markup.heading, punctuation.definition.heading	#207FDE	bold
markup.italic, markup.bold	#B46344	—
markup.underline.link, string.other.link, meta.link	#207FDE	underline
markup.inline.raw, markup.fenced_code, markup.raw	#2D7F4D	—
markup.quote, markup.list, punctuation.definition.list_item	#6C655D	—
invalid, invalid.illegal	#A84B3A	underline
markup.inserted, meta.diff.header.to-file	#2E7C4C	—
markup.deleted, meta.diff.header.from-file	#A84B3A	—
markup.changed	#8A6220	—
source.ts keyword, source.tsx keyword, source.js keyword, source.jsx keyword, keyword.control.import, keyword.control.export	#B84A2A	bold
meta.object-literal.key, variable.other.property.ts, variable.other.property.js, meta.object.member.ts	#3A6594	—
meta.type.annotation.ts, meta.return.type.ts, entity.name.type.alias.ts	#386290
meta.template.expression.ts, meta.template.expression.js, punctuation.definition.template-expression	#6A645C	—
entity.name.tag.jsx, entity.name.tag.tsx, support.class.component.jsx, support.class.component.tsx	#CC5E54	—
entity.other.attribute-name.jsx, entity.other.attribute-name.tsx	#B46344	—
source.go keyword.package, source.go keyword.import, source.go keyword.function, source.go keyword.type	#B84A2A	bold
source.go entity.name.package.go, source.go meta.import.go entity.name.package.go, source.go meta.import.go string.quoted.go	#207FDE	—
source.go entity.name.function.go, source.go meta.function.go entity.name.function.go, source.go meta.function.declaration.go entity.name.function.go	#AE4E30	bold
entity.name.type.go, entity.name.struct.go, entity.name.interface.go	#386290
variable.parameter.receiver.go, meta.function.parameters.go variable.parameter.go	#AE6D53	—
source.go variable.other.member.go, source.go variable.other.field.go	#3A6594	—
support.function.builtin.go, support.type.builtin.go, constant.language.go	#6A5BCC	—
source.go string.quoted.go, source.go constant.other.rune.go	#2D7F4D	—
source.python keyword.control.import, source.python keyword.control.from, source.python storage.type.function, source.python storage.type.class	#B84A2A	bold
meta.function.decorator.python, meta.class.decorator.python	#6A5BCC
variable.parameter.function.language.special.self.python	#207FDE	—
meta.function.parameters.annotations.python, meta.type.annotation.python	#386290
meta.interpolation.python, punctuation.definition.interpolation.begin.python	#6A645C	—
source.java keyword.control, source.java storage.modifier, source.java storage.type	#B84A2A	bold
storage.type.annotation.java, meta.annotation.java	#6A5BCC	—
entity.name.type.class.java, entity.name.type.interface.java, entity.name.type.module.java	#386290
entity.name.namespace.java, meta.import.java entity.name.type.java	#207FDE	—
source.rust keyword, source.rust storage.modifier, source.rust storage.type	#B84A2A	bold
entity.name.type.lifetime.rust, punctuation.definition.lifetime.rust	#AE6D53	—
support.macro.rust, entity.name.function.macro.rust	#6A5BCC	—
entity.name.type.rust, entity.name.trait.rust, support.type.rust	#386290
text.html entity.name.tag, punctuation.definition.tag	#CC5E54	—
text.html entity.other.attribute-name, meta.tag entity.other.attribute-name	#B46344	—
source.css entity.other.attribute-name.class, source.css entity.other.attribute-name.id	#CC5E54	—
source.css support.type.property-name, source.css meta.property-name	#3A6594	—
source.css support.constant.property-value, source.css constant.numeric, source.css keyword.other.unit	#946A1E	—
source.css entity.other.attribute-name.pseudo-class, source.css entity.other.attribute-name.pseudo-element	#B84A2A	—
source.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.object-literal.key	#B46344	bold
source.json string.quoted.double.json	#2D7F4D	—
source.json constant.numeric.json, source.json constant.language.boolean.json, source.json constant.language.null.json	#946A1E	—
source.yaml entity.name.tag.yaml, source.yaml support.type.property-name.yaml	#B46344	bold
source.yaml variable.other.alias.yaml, source.yaml entity.name.type.anchor.yaml	#207FDE	—
source.json punctuation, source.yaml punctuation, source.json punctuation.separator.dictionary.key-value.json, source.json punctuation.separator.array.json	#6A645C	—
source.gfm markup.heading, text.html.markdown markup.heading	#B84A2A	bold
source.gfm punctuation.definition.heading, text.html.markdown punctuation.definition.heading	#CC5E54	—
source.gfm markup.bold, text.html.markdown markup.bold	#B46344	bold
source.gfm markup.italic, text.html.markdown markup.italic	#AE6D53	italic
source.gfm markup.underline.link, source.gfm string.other.link.title, source.gfm string.other.link.description, text.html.markdown markup.underline.link, text.html.markdown string.other.link.title, text.html.markdown string.other.link.description	#207FDE	underline
source.gfm punctuation.definition.link, source.gfm meta.link punctuation, text.html.markdown punctuation.definition.link, text.html.markdown meta.link punctuation	#6A5BCC	—
source.gfm markup.inline.raw, text.html.markdown markup.inline.raw	#2D7F4D	—
source.gfm markup.fenced_code, source.gfm punctuation.definition.fenced.markdown, text.html.markdown markup.fenced_code	#2D7F4D	—
source.gfm markup.list, source.gfm punctuation.definition.list_item, source.gfm markup.list.numbered.digit.markdown, text.html.markdown markup.list, text.html.markdown punctuation.definition.list.begin.markdown	#6A5BCC	—
source.gfm markup.quote, source.gfm punctuation.definition.quote.begin.markdown, text.html.markdown markup.quote	#6C655D	—
source.gfm meta.separator.markdown, source.gfm constant.character.escape.markdown	#6A645C	—
source.sql keyword, keyword.other.DDL.sql, keyword.other.DML.sql, keyword.other.authorization.sql	#B84A2A	bold
source.sql support.function, source.sql entity.name.function	#AE4E30	—
source.sql entity.name.table, source.sql entity.name.schema	#386290
source.sql entity.name.column, source.sql variable.alias	#3A6594	—
source.sql constant.numeric, source.sql string, source.sql keyword.operator	#946A1E	—
source.sql variable.parameter, source.sql variable.other	#AE6D53	—

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

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}!`;
}