Skip to main content
Home Theme VS Code Claude - Anthropic Theme A dark VS Code theme inspired by Anthropic's Claude interface palette
Claude - Anthropic Theme | Coding Theme
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
activityBar.background #1A1A18 activityBar.border #333331 activityBar.foreground #E8E4DC activityBar.inactiveForeground #5A5A58 activityBarBadge.background #F4845F activityBarBadge.foreground #FFFFFF tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #5A5A58 italic string, string.quoted, string.template #7EC699 — string.regexp #7CE8D4 — constant.numeric, constant.language, constant.character #F4A58A — constant.other
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Claude - Anthropic Theme — Claude Dark (Anthropic)
badge.background
#F4845F
badge.foreground #FFFFFF
breadcrumb.activeSelectionForeground #F4845F
breadcrumb.focusForeground #E8E4DC
breadcrumb.foreground #6A6A68
button.background #F4845F
button.foreground #FFFFFF
button.hoverBackground #E0734E
button.secondaryBackground #3E3E3C
button.secondaryForeground #E8E4DC
button.secondaryHoverBackground #4A4A48
diffEditor.insertedTextBackground #7EC69922
diffEditor.removedTextBackground #F28B8222
dropdown.background #2E2E2C
dropdown.border #3E3E3C
dropdown.foreground #E8E4DC
editor.background #262624
editor.findMatchBackground #F4845F44
editor.findMatchHighlightBackground #F4845F22
editor.foreground #E8E4DC
editor.inactiveSelectionBackground #3A3A3844
editor.lineHighlightBackground #2E2E2C
editor.selectionBackground #3A3A3888
editor.selectionHighlightBackground #3A3A3844
editor.wordHighlightBackground #3A3A3855
editorBracketMatch.background #3A3A3844
editorBracketMatch.border #F4845F88
editorCursor.foreground #F4845F
editorError.foreground #F28B82
editorGroupHeader.tabsBackground #1E1E1C
editorGroupHeader.tabsBorder #333331
editorGutter.addedBackground #7EC699
editorGutter.deletedBackground #F28B82
editorGutter.modifiedBackground #E8C47C
editorHoverWidget.background #2E2E2C
editorHoverWidget.border #3E3E3C
editorIndentGuide.activeBackground1 #3A3A38
editorIndentGuide.background1 #333331
editorInfo.foreground #7CACE8
editorLineNumber.activeForeground #8A8A88
editorLineNumber.foreground #4A4A48
editorOverviewRuler.errorForeground #F28B82
editorOverviewRuler.infoForeground #7CACE8
editorOverviewRuler.warningForeground #E8C47C
editorSuggestWidget.background #2E2E2C
editorSuggestWidget.border #3E3E3C
editorSuggestWidget.selectedBackground #3A3A38
editorWarning.foreground #E8C47C
editorWhitespace.foreground #3E3E3C
editorWidget.background #2E2E2C
editorWidget.border #3E3E3C
focusBorder #F4845F88
gitDecoration.addedResourceForeground #7EC699
gitDecoration.conflictingResourceForeground #C49BE8
gitDecoration.deletedResourceForeground #F28B82
gitDecoration.ignoredResourceForeground #4A4A48
gitDecoration.modifiedResourceForeground #E8C47C
gitDecoration.untrackedResourceForeground #7CE8D4
input.background #2E2E2C
input.border #3E3E3C
input.foreground #E8E4DC
input.placeholderForeground #5A5A58
inputOption.activeBackground #F4845F33
inputOption.activeBorder #F4845F
list.activeSelectionBackground #3A3A38
list.activeSelectionForeground #E8E4DC
list.focusBackground #3A3A38
list.highlightForeground #F4845F
list.hoverBackground #333331
list.inactiveSelectionBackground #333331
minimap.background #262624
minimap.findMatchHighlight #F4845F66
minimap.selectionHighlight #F4845F44
notificationCenter.border #3E3E3C
notifications.background #2E2E2C
notifications.border #3E3E3C
notifications.foreground #E8E4DC
panel.background #1E1E1C
panel.border #333331
panelTitle.activeBorder #F4845F
panelTitle.activeForeground #E8E4DC
panelTitle.inactiveForeground #5A5A58
peekView.border #F4845F88
peekViewEditor.background #242422
peekViewResult.background #242422
peekViewResult.selectionBackground #3A3A38
peekViewTitle.background #2E2E2C
quickInput.background #2E2E2C
quickInput.foreground #E8E4DC
quickInputList.focusBackground #3A3A38
scrollbar.shadow #00000033
scrollbarSlider.activeBackground #3E3E3CAA
scrollbarSlider.background #3E3E3C44
scrollbarSlider.hoverBackground #3E3E3C88
sideBar.background #1E1E1C
sideBar.border #333331
sideBar.foreground #C0BCAF
sideBarSectionHeader.background #242422
sideBarSectionHeader.foreground #E8E4DC
sideBarTitle.foreground #E8E4DC
statusBar.background #1A1A18
statusBar.border #333331
statusBar.debuggingBackground #F4845F
statusBar.debuggingForeground #FFFFFF
statusBar.foreground #8A8A88
statusBar.noFolderBackground #262624
statusBarItem.hoverBackground #333331
statusBarItem.remoteBackground #F4845F
statusBarItem.remoteForeground #FFFFFF
tab.activeBackground #262624
tab.activeBorderTop #F4845F
tab.activeForeground #E8E4DC
tab.border #333331
tab.hoverBackground #2E2E2C
tab.inactiveBackground #1E1E1C
tab.inactiveForeground #6A6A68
terminal.ansiBlack #262624
terminal.ansiBlue #7CACE8
terminal.ansiBrightBlack #4A4A48
terminal.ansiBrightBlue #A3C8F0
terminal.ansiBrightCyan #A3F0E0
terminal.ansiBrightGreen #A3D9B1
terminal.ansiBrightMagenta #D4B8F0
terminal.ansiBrightRed #F4A58A
terminal.ansiBrightWhite #FFFFFF
terminal.ansiBrightYellow #F0D8A0
terminal.ansiCyan #7CE8D4
terminal.ansiGreen #7EC699
terminal.ansiMagenta #C49BE8
terminal.ansiRed #F28B82
terminal.ansiWhite #E8E4DC
terminal.ansiYellow #E8C47C
terminal.background #1E1E1C
terminal.foreground #E8E4DC
terminalCursor.foreground #F4845F
titleBar.activeBackground #1A1A18
titleBar.activeForeground #E8E4DC
titleBar.border #333331
titleBar.inactiveBackground #1A1A18
titleBar.inactiveForeground #5A5A58 keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, storage.type, storage.modifier #F4845F —
keyword.operator, punctuation.accessor #C0BCAF —
entity.name.function, meta.function-call, support.function #7CACE8 —
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class #E8C47C —
entity.name.type.interface, entity.name.type.type-parameter #7CE8D4 —
variable, variable.other #E8E4DC —
variable.parameter, variable.other.readwrite #D4CFBF —
variable.language #F4845F italic
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key #C49BE8 —
entity.name.tag, support.class.component #F4845F —
entity.other.attribute-name #E8C47C italic
punctuation.definition.tag, punctuation.definition.block, punctuation.definition.parameters, punctuation.section, meta.brace #8A8A88 —
punctuation.separator, punctuation.terminator #6A6A68 —
meta.decorator, punctuation.decorator #E8C47C italic
markup.heading, entity.name.section #F4845F bold
markup.italic #C49BE8 italic
markup.inline.raw, markup.fenced_code #7CE8D4 —
markup.underline.link #7CACE8 —
markup.quote #6A6A68 italic
support.type.property-name.css #7CACE8 —
support.constant.property-value.css, constant.other.color.rgb-value.hex.css #F4A58A —
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css #E8C47C —
keyword.other.unit.css #F4845F —
support.type.property-name.json #C49BE8 —
entity.name.tag.yaml #7CACE8 —
source.shell variable.other #7CE8D4 —
keyword.control.import, keyword.control.export, keyword.control.from #F4845F —
variable.other.readwrite.alias #E8C47C —
string.template meta.embedded, meta.template.expression #E8E4DC —
punctuation.definition.template-expression #F4845F —
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 } !` ;
}
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
src
components
fetchUser.ts
fetchUser 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
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*
Button.tsx
31
$
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 } !` ;
}