Claude VSCode Theme

Name: Claude VSCode Theme
Author: Alvin Unreal

Publisher: Alvin UnrealThemes in package: 4

Thoughtful dark theme collection with classic and italic variants. Inspired by Claude AI with carefully balanced contrast and warm syntax colors for long coding sessions.

Open in VS Code GitHub

Color themes

VS Code preview

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

Claude VSCode Theme — Claude Dark Italic

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#E07A471a
activityBar.activeBorder#E07A47
activityBar.activeFocusBorder#E07A47
activityBar.background#202020
activityBar.border#00000000
activityBar.dropBorder#E07A4733
activityBar.foreground#E07A47
activityBar.inactiveForeground#5E5E5E
activityBarBadge.background#E07A47
activityBarBadge.foreground#FFFFFF
activityBarTop.activeBorder#E07A47
activityBarTop.dropBorder#E07A4733
activityBarTop.foreground#E07A47
activityBarTop.inactiveForeground#5E5E5E
badge.background#353535
badge.foreground#E4E4E4
breadcrumb.activeSelectionForeground#E07A47
breadcrumb.background#141414
breadcrumb.focusForeground#E07A47
breadcrumb.foreground#D0D0D0
breadcrumbPicker.background#1A1A1A
button.background#E07A47
button.border#00000000
button.foreground#FFFFFF
button.hoverBackground#ca6e40
button.secondaryBackground#353535
button.secondaryForeground#E4E4E4
button.secondaryHoverBackground#424242
button.separator#FFFFFF4d
checkbox.background#353535
checkbox.border#00000000
checkbox.foreground#E07A47
debugExceptionWidget.background#202020
debugExceptionWidget.border#FF7A7A
debugToolBar.background#202020
debugToolBar.border#00000000
descriptionForeground#B8B8B8
diffEditor.insertedLineBackground#86E89A1a
diffEditor.insertedTextBackground#86E89A26
diffEditor.removedLineBackground#FF7A7A1a
diffEditor.removedTextBackground#FF7A7A26
disabledForeground#D0D0D0
dropdown.background#1A1A1A
dropdown.border#E07A47
dropdown.foreground#E4E4E4
dropdown.listBackground#353535
editor.background#141414
editor.findMatchBackground#FFA65D4d
editor.findMatchHighlightBackground#FFA65D26
editor.findRangeHighlightBackground#FFA65D1a
editor.foreground#E4E4E4
editor.hoverHighlightBackground#E07A471a
editor.inactiveSelectionBackground#E07A4726
editor.lineHighlightBackground#E07A470d
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#E07A471a
editor.selectionBackground#E07A474d
editor.selectionHighlightBackground#E07A4733
editor.wordHighlightBackground#E07A4726
editor.wordHighlightStrongBackground#E07A4740
editorBracketHighlight.foreground1#FF7A7A
editorBracketHighlight.foreground2#FFA65D
editorBracketHighlight.foreground3#FFDF61
editorBracketHighlight.foreground4#86E89A
editorBracketHighlight.foreground5#7AB8FF
editorBracketHighlight.foreground6#C79BFF
editorBracketHighlight.unexpectedBracket.foreground#FF7A7A
editorBracketMatch.background#E07A4733
editorBracketMatch.border#E07A47
editorCursor.foreground#E07A47
editorError.foreground#FF7A7A
editorGroupHeader.border#00000000
editorGroupHeader.noTabsBackground#1A1A1A
editorGroupHeader.tabsBackground#1A1A1A
editorGroupHeader.tabsBorder#00000000
editorGutter.addedBackground#86E89A
editorGutter.background#141414
editorGutter.commentRangeForeground#7A7A7A
editorGutter.deletedBackground#FF7A7A
editorGutter.foldingControlForeground#5E5E5E
editorGutter.modifiedBackground#FFDF61
editorHint.foreground#5DE4FA
editorHoverWidget.background#1A1A1A
editorHoverWidget.border#424242
editorHoverWidget.foreground#E4E4E4
editorHoverWidget.statusBarBackground#202020
editorIndentGuide.activeBackground#424242
editorIndentGuide.background#353535
editorInfo.foreground#7AB8FF
editorLineNumber.activeForeground#E4E4E4
editorLineNumber.foreground#5E5E5E
editorLink.activeForeground#7AB8FF
editorRuler.foreground#424242
editorSuggestWidget.background#1A1A1A
editorSuggestWidget.border#424242
editorSuggestWidget.focusHighlightForeground#E07A47
editorSuggestWidget.foreground#E4E4E4
editorSuggestWidget.highlightForeground#E07A47
editorSuggestWidget.selectedBackground#E07A4733
editorSuggestWidget.selectedForeground#E4E4E4
editorSuggestWidget.selectedIconForeground#E07A47
editorWarning.foreground#FFDF61
editorWhitespace.foreground#424242
editorWidget.background#1A1A1A
editorWidget.border#424242
editorWidget.foreground#E4E4E4
editorWidget.resizeBorder#E07A47
errorForeground#FF7A7A
focusBorder#E07A47
foreground#E4E4E4
gitDecoration.addedResourceForeground#7BD88F
gitDecoration.conflictingResourceForeground#FB923C
gitDecoration.deletedResourceForeground#F87171
gitDecoration.ignoredResourceForeground#9CA3AF
gitDecoration.modifiedResourceForeground#FCD34D
gitDecoration.renamedResourceForeground#60A5FA
gitDecoration.stageDeletedResourceForeground#FCA5A5
gitDecoration.stageModifiedResourceForeground#FDE047
gitDecoration.submoduleResourceForeground#C084FC
gitDecoration.untrackedResourceForeground#4DD4E8
icon.foreground#E07A47
input.background#1A1A1A
input.border#424242
input.foreground#E4E4E4
input.placeholderForeground#5E5E5E
inputOption.activeBackground#E07A4733
inputOption.activeBorder#E07A47
inputOption.activeForeground#E4E4E4
inputOption.hoverBackground#E07A471a
inputValidation.errorBackground#1A1A1A
inputValidation.errorBorder#FF7A7A
inputValidation.errorForeground#E4E4E4
inputValidation.infoBackground#1A1A1A
inputValidation.infoBorder#7AB8FF
inputValidation.infoForeground#E4E4E4
inputValidation.warningBackground#1A1A1A
inputValidation.warningBorder#FFDF61
inputValidation.warningForeground#E4E4E4
list.activeSelectionBackground#E07A4733
list.activeSelectionForeground#E4E4E4
list.activeSelectionIconForeground#E07A47
list.dropBackground#E07A4733
list.errorForeground#FF7A7A
list.focusBackground#E07A4726
list.focusForeground#E4E4E4
list.focusHighlightForeground#E07A47
list.highlightForeground#E07A47
list.hoverBackground#E07A471a
list.hoverForeground#E4E4E4
list.inactiveSelectionBackground#E07A4726
list.inactiveSelectionForeground#E4E4E4
list.inactiveSelectionIconForeground#E07A47
list.invalidItemForeground#FF7A7A
list.warningForeground#FFDF61
menu.background#1A1A1A
menu.foreground#E4E4E4
menu.selectionBackground#E07A4733
menu.selectionBorder#00000000
menu.selectionForeground#E4E4E4
menu.separatorBackground#424242
menubar.selectionBackground#E07A4733
menubar.selectionForeground#E4E4E4
minimap.background#141414
minimap.errorHighlight#FF7A7A
minimap.findMatchHighlight#FFA65D
minimap.foregroundOpacity#000000aa
minimap.selectionHighlight#E07A47
minimap.selectionOccurrenceHighlight#E07A47
minimap.warningHighlight#FFDF61
minimapGutter.addedBackground#86E89A
minimapGutter.deletedBackground#FF7A7A
minimapGutter.modifiedBackground#FFDF61
minimapSlider.activeBackground#E07A4766
minimapSlider.background#E07A4733
minimapSlider.hoverBackground#E07A474d
notificationCenter.border#00000000
notificationCenterHeader.background#202020
notificationCenterHeader.foreground#E4E4E4
notificationLink.foreground#7AB8FF
notifications.background#1A1A1A
notifications.border#00000000
notifications.foreground#E4E4E4
notificationsErrorIcon.foreground#FF7A7A
notificationsInfoIcon.foreground#7AB8FF
notificationsWarningIcon.foreground#FFDF61
notificationToast.border#00000000
panel.background#1A1A1A
panel.border#00000000
panel.dropBorder#E07A4733
panelInput.border#424242
panelSection.border#424242
panelSection.dropBackground#E07A4733
panelSectionHeader.background#202020
panelSectionHeader.foreground#E4E4E4
panelTitle.activeBorder#E07A47
panelTitle.activeForeground#E4E4E4
panelTitle.inactiveForeground#5E5E5E
peekView.border#E07A47
peekViewEditor.background#1A1A1A
peekViewEditorGutter.background#1A1A1A
peekViewResult.background#202020
peekViewResult.fileForeground#E4E4E4
peekViewResult.lineForeground#B8B8B8
peekViewResult.matchHighlightBackground#FFA65D4d
peekViewResult.selectionBackground#E07A4733
peekViewResult.selectionForeground#E4E4E4
peekViewTitle.background#202020
peekViewTitleDescription.foreground#B8B8B8
peekViewTitleLabel.foreground#E4E4E4
progressBar.background#E07A47
sash.hoverBorder#E07A47
scrollbar.shadow#20202080
scrollbarSlider.activeBackground#E07A4766
scrollbarSlider.background#E07A4733
scrollbarSlider.hoverBackground#E07A474d
selection.background#E07A474d
settings.checkboxBackground#1A1A1A
settings.checkboxBorder#424242
settings.checkboxForeground#E4E4E4
settings.dropdownBackground#1A1A1A
settings.dropdownBorder#424242
settings.dropdownForeground#E4E4E4
settings.dropdownListBorder#424242
settings.focusedRowBackground#E07A471a
settings.focusedRowBorder#E07A47
settings.headerForeground#E4E4E4
settings.modifiedItemIndicator#E07A47
settings.numberInputBackground#1A1A1A
settings.numberInputBorder#424242
settings.numberInputForeground#E4E4E4
settings.rowHoverBackground#E07A470d
settings.textInputBackground#1A1A1A
settings.textInputBorder#424242
settings.textInputForeground#E4E4E4
sideBar.background#1A1A1A
sideBar.border#00000000
sideBar.dropBackground#E07A4733
sideBar.foreground#E4E4E4
sideBarSectionHeader.background#202020
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#E4E4E4
sideBarTitle.foreground#E4E4E4
statusBar.background#E07A47
statusBar.border#00000000
statusBar.debuggingBackground#FFA65D
statusBar.debuggingBorder#00000000
statusBar.debuggingForeground#E4E4E4
statusBar.foreground#E4E4E4
statusBar.noFolderBackground#C79BFF
statusBar.noFolderBorder#00000000
statusBar.noFolderForeground#E4E4E4
statusBarItem.activeBackground#E4E4E433
statusBarItem.errorBackground#FF7A7A
statusBarItem.errorForeground#E4E4E4
statusBarItem.hoverBackground#E4E4E41a
statusBarItem.prominentBackground#00000000
statusBarItem.prominentForeground#E4E4E4
statusBarItem.prominentHoverBackground#E4E4E41a
statusBarItem.remoteBackground#7AB8FF
statusBarItem.remoteForeground#E4E4E4
statusBarItem.warningBackground#FFDF61
statusBarItem.warningForeground#E4E4E4
tab.activeBackground#141414
tab.activeBorder#00000000
tab.activeBorderTop#E07A47
tab.activeForeground#E4E4E4
tab.activeModifiedBorder#FFDF61
tab.border#00000000
tab.hoverBackground#E07A471a
tab.hoverForeground#E4E4E4
tab.inactiveBackground#1A1A1A
tab.inactiveForeground#5E5E5E
tab.inactiveModifiedBorder#FFDF6180
tab.lastPinnedBorder#424242
tab.unfocusedActiveBorder#00000000
tab.unfocusedActiveBorderTop#E07A4780
tab.unfocusedActiveForeground#E4E4E4
tab.unfocusedActiveModifiedBorder#FFDF61
tab.unfocusedHoverBackground#E07A470d
tab.unfocusedHoverForeground#E4E4E4
tab.unfocusedInactiveForeground#5E5E5E
tab.unfocusedInactiveModifiedBorder#FFDF6180
terminal.ansiBlack#1E1E1E
terminal.ansiBlue#6CABF7
terminal.ansiBrightBlack#6A6A6A
terminal.ansiBrightBlue#92D5FF
terminal.ansiBrightCyan#7DFFFF
terminal.ansiBrightGreen#9FFFAF
terminal.ansiBrightMagenta#D6BBFF
terminal.ansiBrightRed#FFA8A8
terminal.ansiBrightWhite#D4D4D4
terminal.ansiBrightYellow#FFED7D
terminal.ansiCyan#4DD4E8
terminal.ansiGreen#7BD88F
terminal.ansiMagenta#B68BF7
terminal.ansiRed#F87171
terminal.ansiWhite#9C9893
terminal.ansiYellow#FCD34D
terminal.background#141414
terminal.findMatchBackground#FFA65D4d
terminal.findMatchHighlightBackground#FFA65D26
terminal.foreground#E4E4E4
terminal.selectionBackground#E07A474d
terminalCursor.background#141414
terminalCursor.foreground#E07A47
textBlockQuote.background#1A1A1A
textBlockQuote.border#202020
textCodeBlock.background#1A1A1A
textLink.activeForeground#6293cc
textLink.foreground#7AB8FF
textPreformat.foreground#E4E4E4
textSeparator.foreground#E07A47
titleBar.activeBackground#202020
titleBar.activeForeground#E4E4E4
titleBar.border#00000000
titleBar.inactiveBackground#202020
titleBar.inactiveForeground#5E5E5E
tree.indentGuidesStroke#424242
tree.tableColumnsBorder#424242
tree.tableOddRowsBackground#2A2A2A4d
walkThrough.embeddedEditorBackground#1A1A1A
welcomePage.background#141414
welcomePage.progress.background#1A1A1A
welcomePage.progress.foreground#E07A47
welcomePage.tileBackground#1A1A1A
welcomePage.tileBorder#424242
welcomePage.tileHoverBackground#E07A471a
widget.shadow#2020204d
window.activeBorder#00000000
window.inactiveBorder#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
text, source, variable.other.readwrite, punctuation.definition.variable	#E4E4E4	—
comment, punctuation.definition.comment	#969696	italic
string, punctuation.definition.string	#86E89A	—
constant.character.escape, constant.other.placeholder	#FF85C8	—
constant.numeric, constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, variable.other.constant, entity.name.constant	#FFDF61	—
keyword, keyword.control, keyword.operator.word, keyword.operator.new, storage.type, storage.modifier, variable.language.this, variable.language.super, punctuation.definition.keyword	#C79BFF	bold italic
keyword.operator, punctuation.accessor, punctuation.separator, punctuation.terminator, meta.brace	#5DE4FA	—
entity.name.function, meta.function-call, support.function, variable.function	#FFA65D	italic
entity.name.class, entity.name.type, entity.other.inherited-class, support.class, support.type, entity.name.namespace, entity.name.module	#7AB8FF	italic
entity.name.interface, entity.name.trait	#7AB8FF	italic
entity.name.enum	#7AB8FF	italic
variable.other.enummember, constant.other.enum	#5DE4FA	—
variable.parameter, meta.function.parameters	#E07A47	—
variable.other.property, meta.property.object, entity.name.tag.yaml, support.type.property-name	#9C9893	—
meta.decorator, meta.annotation, punctuation.decorator, punctuation.definition.decorator, storage.type.annotation	#FF85C8	—
string.regexp, constant.regexp, constant.character.character-class.regexp, constant.other.character-class.regexp, constant.other.character-class.set.regexp, punctuation.definition.character-class.regexp	#FF85C8	—
entity.name.tag, punctuation.definition.tag	#FF7A7A	—
entity.other.attribute-name, entity.other.attribute	#FFA65D	italic
support.constant, support.variable	#FFDF61	—
invalid, invalid.illegal	#FFFFFF	bold underline
markup.heading, punctuation.definition.heading	#7AB8FF	bold
markup.bold	#FFA65D	bold
markup.italic	#FFA65D	italic
markup.inline.raw, markup.raw, markup.fenced_code	#86E89A	—
markup.underline.link, string.other.link	#7AB8FF	underline
markup.list, punctuation.definition.list	#FF7A7A	—
markup.quote	#9C9893	italic
punctuation, meta.brace.round, meta.brace.square, meta.brace.curly, punctuation.section, punctuation.definition.parameters, punctuation.definition.arguments	#7A7A7A	—
storage.modifier.async, storage.modifier.const, storage.modifier.static, storage.modifier.readonly	#C79BFF	italic
variable.language, variable.other.predefined	#C79BFF	italic
markup.inserted, meta.diff.header.to-file	#86E89A	—
markup.deleted, meta.diff.header.from-file	#FF7A7A	—
markup.changed	#FFDF61	—
meta.export variable.other.readwrite, meta.export variable.other.constant	#E07A47	—
variable.other.property.js, variable.other.property.ts, variable.other.property.tsx, variable.other.property.jsx, meta.object-literal.key	#9C9893	—
variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx, variable.other.constant.jsx	#FFDF61	—
string.template, punctuation.definition.template-expression	#86E89A	—
meta.template.expression, meta.embedded.line	#E4E4E4	—
variable.other.jsdoc, comment.block.documentation variable.other	#E07A47	—
storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc	#C79BFF	—
storage.type.function.arrow, keyword.operator.arrow	#5DE4FA	—
storage.modifier.async, keyword.control.flow.await	#C79BFF	italic
meta.decorator punctuation.decorator, meta.decorator variable.other.readwrite, meta.decorator entity.name.function	#FF85C8	italic
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as	#C79BFF	italic
support.type.object.module, support.type.object.console	#7AB8FF	—
meta.type.parameters, entity.name.type.parameter	#FFDF61	italic
keyword.operator.expression.typeof, keyword.operator.expression.instanceof, keyword.operator.expression.in, keyword.operator.expression.of, keyword.operator.expression.keyof, keyword.operator.expression.is	#C79BFF	—
entity.name.tag.jsx, entity.name.tag.tsx, support.class.component.jsx, support.class.component.tsx	#FF7A7A	—
entity.other.attribute-name.jsx, entity.other.attribute-name.tsx	#FFA65D	italic
punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx	#5DE4FA	—
meta.object-binding-pattern variable.other.readwrite, meta.array-binding-pattern variable.other.readwrite	#E07A47	—
constant.language.null, constant.language.undefined	#C79BFF	—
variable.language.special.self.python, variable.parameter.function.language.special.self.python	#C79BFF	italic
support.function.magic.python, entity.name.function.decorator.python	#FF85C8	italic
string.interpolated.python, string.quoted.single.format.python, string.quoted.double.format.python	#86E89A	—
meta.interpolation.python, punctuation.definition.interpolation.python	#5DE4FA	—
entity.name.function.decorator.python, meta.function.decorator.python	#FF85C8	italic
support.function.builtin.python	#7AB8FF	—
support.type.python	#7AB8FF	italic
entity.name.type.class.python, meta.class.python entity.name.type.class	#7AB8FF	italic
variable.parameter.function.python, meta.function.parameters.python	#E07A47	—
meta.function.return-type.python, meta.function.parameters.annotation.python	#FFDF61	italic
string.quoted.docstring.multi.python, string.quoted.docstring.single.python	#9C9893	italic
keyword.control.flow.lambda.python	#C79BFF	italic
support.type.exception.python	#FF7A7A	—
keyword.control.import.python, keyword.control.import.from.python	#C79BFF	italic
storage.modifier.global.python, storage.modifier.nonlocal.python	#C79BFF	italic
entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss, entity.other.attribute-name.id.css, entity.other.attribute-name.id.scss	#7AB8FF	—
entity.name.tag.css, entity.name.tag.scss, entity.name.tag.less	#FF7A7A	—
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#5DE4FA	italic
support.type.property-name.css, support.type.property-name.scss, meta.property-name.css, meta.property-name.scss	#9C9893	—
support.constant.property-value.css, support.constant.property-value.scss, meta.property-value.css, meta.property-value.scss	#FFA65D	—
keyword.other.unit.css, keyword.other.unit.scss, constant.numeric.css, constant.numeric.scss	#FFDF61	—
constant.other.color.css, constant.other.color.scss, support.constant.color.css, support.constant.color.scss	#FF85C8	—
support.function.css, support.function.scss, meta.function.css, meta.function.scss	#FFA65D	italic
variable.css, variable.scss, variable.argument.css, variable.argument.scss	#E07A47	—
keyword.other.important.css, keyword.other.important.scss	#FF7A7A	bold
keyword.control.at-rule.css, keyword.control.at-rule.scss, meta.at-rule.css, meta.at-rule.scss	#C79BFF	italic
support.type.property-name.media.css, support.type.property-name.media.scss	#9C9893	—
variable.scss, variable.sass, punctuation.definition.variable.scss	#E07A47	—
entity.name.function.scss, entity.other.attribute-name.placeholder-selector.scss	#FFA65D	italic
entity.other.attribute-name.parent-selector.css, entity.name.tag.reference.scss	#FF7A7A	—
entity.name.tag.html, entity.name.tag.xml, entity.name.tag.localname.xml	#FF7A7A	—
punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#7A7A7A	—
entity.other.attribute-name.html, entity.other.attribute-name.xml	#FFA65D	italic
string.quoted.double.html, string.quoted.single.html, string.unquoted.html	#86E89A	—
constant.character.entity.html, constant.character.entity.xml	#FF85C8	—
meta.tag.metadata.doctype.html, entity.name.tag.doctype.html	#C79BFF	italic
string.unquoted.cdata.xml, punctuation.definition.string.begin.xml, punctuation.definition.string.end.xml	#9C9893	—
entity.name.tag.script.html	#7AB8FF	—
entity.name.tag.style.html	#7AB8FF	—
entity.other.attribute-name.id.html, entity.other.attribute-name.class.html	#E07A47	italic
entity.other.attribute-name.event.html	#FFDF61	italic
entity.other.attribute-name.directive	#C79BFF	italic
markup.heading.markdown, punctuation.definition.heading.markdown	#7AB8FF	bold
markup.bold.markdown	#FFA65D	bold
markup.italic.markdown	#FFA65D	italic
markup.inline.raw.markdown, markup.fenced_code.block.markdown	#86E89A	—
markup.underline.link.markdown, string.other.link.title.markdown	#7AB8FF	underline
punctuation.definition.list.begin.markdown, markup.list.unnumbered.markdown, markup.list.numbered.markdown	#FF7A7A	—
markup.quote.markdown	#9C9893	italic
meta.separator.markdown	#7A7A7A	—

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