Skip to main content
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.activeBorder #e0def4 activityBar.background #141416 activityBar.dropBorder #242427 activityBar.foreground #e0def4 activityBar.inactiveForeground #908caa activityBarBadge.background #ebbcba tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment #6e6a86 italic constant #5d7e80 — constant.numeric, constant.language #ebbcba — entity.name #ebbcba — entity.name.section, entity.name.tag, entity.name.namespace, entity.name.type
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBarBadge.foreground
#1a1b26
badge.background #ebbcba
badge.foreground #1a1b26
banner.background #2c2e34
banner.foreground #e0def4
banner.iconForeground #908caa
breadcrumb.activeSelectionForeground #ebbcba
breadcrumb.background #1a1b26
breadcrumb.focusForeground #908caa
breadcrumb.foreground #6e6a86
breadcrumbPicker.background #2c2e34
button.background #ebbcba
button.foreground #1a1b26
button.hoverBackground #ebbcbae6
button.secondaryBackground #2c2e34
button.secondaryForeground #e0def4
button.secondaryHoverBackground #26233a
charts.blue #9ccfd8
charts.foreground #e0def4
charts.green #5d7e80
charts.lines #908caa
charts.orange #ebbcba
charts.purple #c4a7e7
charts.red #d16d92
charts.yellow #ca9f7c
checkbox.background #2c2e34
checkbox.border #6e6a8633
checkbox.foreground #e0def4
debugExceptionWidget.background #2c2e34
debugExceptionWidget.border #6e6a8633
debugIcon.breakpointCurrentStackframeForeground #908caa
debugIcon.breakpointDisabledForeground #908caa
debugIcon.breakpointForeground #908caa
debugIcon.breakpointStackframeForeground #908caa
debugIcon.breakpointUnverifiedForeground #908caa
debugIcon.continueForeground #908caa
debugIcon.disconnectForeground #908caa
debugIcon.pauseForeground #908caa
debugIcon.restartForeground #908caa
debugIcon.startForeground #908caa
debugIcon.stepBackForeground #908caa
debugIcon.stepIntoForeground #908caa
debugIcon.stepOutForeground #908caa
debugIcon.stepOverForeground #908caa
debugIcon.stopForeground #d16d92
debugToolBar.background #2c2e34
debugToolBar.border #26233a
descriptionForeground #908caa
diffEditor.border #26233a
diffEditor.diagonalFill #6e6a8666
diffEditor.insertedLineBackground #9ccfd826
diffEditor.insertedTextBackground #9ccfd826
diffEditor.removedLineBackground #d16d9226
diffEditor.removedTextBackground #d16d9226
diffEditorOverview.insertedForeground #9ccfd880
diffEditorOverview.removedForeground #d16d9280
dropdown.background #2c2e34
dropdown.border #6e6a8633
dropdown.foreground #e0def4
dropdown.listBackground #2c2e34
editor.background #16181d
editor.findMatchBackground #ca9f7c33
editor.findMatchBorder #ca9f7c80
editor.findMatchForeground #e0def4
editor.findMatchHighlightBackground #6e6a8666
editor.findMatchHighlightForeground #e0def4cc
editor.findRangeHighlightBackground #6e6a8666
editor.findRangeHighlightBorder #0000
editor.focusedStackFrameHighlightBackground #6e6a8633
editor.foldBackground #6e6a8633
editor.foreground #e0def4
editor.hoverHighlightBackground #0000
editor.inactiveSelectionBackground #6e6a861a
editor.inlineValuesBackground #0000
editor.inlineValuesForeground #908caa
editor.lineHighlightBackground #c3c3c41a
editor.lineHighlightBorder #0000
editor.linkedEditingBackground #6e6a8633
editor.rangeHighlightBackground #6e6a861a
editor.selectionBackground #6e6a8633
editor.selectionForeground #e0def4
editor.selectionHighlightBackground #6e6a8633
editor.selectionHighlightBorder #1a1b26
editor.snippetFinalTabstopHighlightBackground #6e6a8633
editor.snippetFinalTabstopHighlightBorder #2c2e34
editor.snippetTabstopHighlightBackground #6e6a8633
editor.snippetTabstopHighlightBorder #2c2e34
editor.stackFrameHighlightBackground #6e6a8633
editor.symbolHighlightBackground #6e6a8633
editor.symbolHighlightBorder #0000
editor.wordHighlightBackground #6e6a8633
editor.wordHighlightBorder #0000
editor.wordHighlightStrongBackground #6e6a8633
editor.wordHighlightStrongBorder #6e6a8633
editorBracketHighlight.foreground1 #d16d9280
editorBracketHighlight.foreground2 #5d7e8080
editorBracketHighlight.foreground3 #ca9f7c80
editorBracketHighlight.foreground4 #9ccfd880
editorBracketHighlight.foreground5 #ebbcba80
editorBracketHighlight.foreground6 #c4a7e780
editorBracketMatch.background #0000
editorBracketMatch.border #908caa
editorBracketPairGuide.activeBackground1 #5d7e80
editorBracketPairGuide.activeBackground2 #ebbcba
editorBracketPairGuide.activeBackground3 #c4a7e7
editorBracketPairGuide.activeBackground4 #9ccfd8
editorBracketPairGuide.activeBackground5 #ca9f7c
editorBracketPairGuide.activeBackground6 #d16d92
editorBracketPairGuide.background1 #5d7e8080
editorBracketPairGuide.background2 #ebbcba80
editorBracketPairGuide.background3 #c4a7e780
editorBracketPairGuide.background4 #9ccfd880
editorBracketPairGuide.background5 #ca9f7c80
editorBracketPairGuide.background6 #d16d9280
editorCodeLens.foreground #ebbcba
editorCursor.background #e0def4
editorCursor.foreground #6e6a86
editorError.border #0000
editorError.foreground #d16d92
editorGhostText.foreground #908caa
editorGroup.border #0000
editorGroup.dropBackground #2c2e34
editorGroup.emptyBackground #0000
editorGroup.focusedEmptyBorder #0000
editorGroupHeader.noTabsBackground #0000
editorGroupHeader.tabsBackground #0000
editorGroupHeader.tabsBorder #0000
editorGutter.addedBackground #9ccfd8
editorGutter.background #18181d
editorGutter.commentRangeForeground #26233a
editorGutter.deletedBackground #d16d92
editorGutter.foldingControlForeground #c4a7e7
editorGutter.modifiedBackground #ebbcba
editorHint.border #0000
editorHint.foreground #908caa
editorHoverWidget.background #2c2e34
editorHoverWidget.border #6e6a8680
editorHoverWidget.foreground #908caa
editorHoverWidget.highlightForeground #e0def4
editorHoverWidget.statusBarBackground #16181d
editorIndentGuide.activeBackground1 #6e6a86
editorIndentGuide.background1 #6e6a8666
editorInfo.border #26233a
editorInfo.foreground #9ccfd8
editorInlayHint.background #26233a80
editorInlayHint.foreground #908caa80
editorInlayHint.parameterBackground #26233a80
editorInlayHint.parameterForeground #c4a7e780
editorInlayHint.typeBackground #26233a80
editorInlayHint.typeForeground #9ccfd880
editorLightBulb.foreground #5d7e80
editorLightBulbAutoFix.foreground #ebbcba
editorLineNumber.activeForeground #e0def4
editorLineNumber.foreground #6a6970
editorLink.activeForeground #ebbcba
editorMarkerNavigation.background #2c2e34
editorMarkerNavigationError.background #2c2e34
editorMarkerNavigationInfo.background #2c2e34
editorMarkerNavigationWarning.background #2c2e34
editorOverviewRuler.addedForeground #9ccfd880
editorOverviewRuler.background #1f1f22
editorOverviewRuler.border #6e6a8666
editorOverviewRuler.bracketMatchForeground #908caa
editorOverviewRuler.commentForeground #908caa80
editorOverviewRuler.commentUnresolvedForeground #ca9f7c80
editorOverviewRuler.commonContentForeground #6e6a861a
editorOverviewRuler.currentContentForeground #6e6a8633
editorOverviewRuler.deletedForeground #d16d9280
editorOverviewRuler.errorForeground #d16d9280
editorOverviewRuler.findMatchForeground #6e6a8666
editorOverviewRuler.incomingContentForeground #c4a7e780
editorOverviewRuler.infoForeground #9ccfd880
editorOverviewRuler.modifiedForeground #ebbcba80
editorOverviewRuler.rangeHighlightForeground #6e6a8666
editorOverviewRuler.selectionHighlightForeground #6e6a8666
editorOverviewRuler.warningForeground #ca9f7c80
editorOverviewRuler.wordHighlightForeground #6e6a8633
editorOverviewRuler.wordHighlightStrongForeground #6e6a8666
editorPane.background #33313100
editorRuler.foreground #6e6a8666
editorSuggestWidget.background #2c2e34
editorSuggestWidget.border #0000
editorSuggestWidget.focusHighlightForeground #ebbcba
editorSuggestWidget.foreground #908caa
editorSuggestWidget.highlightForeground #ebbcba
editorSuggestWidget.selectedBackground #6e6a8633
editorSuggestWidget.selectedForeground #e0def4
editorSuggestWidget.selectedIconForeground #e0def4
editorUnnecessaryCode.border #0000
editorUnnecessaryCode.opacity #e0def480
editorWarning.border #0000
editorWarning.foreground #ca9f7c
editorWhitespace.foreground #6e6a8680
editorWidget.background #2c2e34
editorWidget.border #26233a
editorWidget.foreground #908caa
editorWidget.resizeBorder #6e6a86
errorForeground #d16d92
extensionBadge.remoteBackground #c4a7e7
extensionBadge.remoteForeground #1a1b26
extensionButton.prominentBackground #ebbcba
extensionButton.prominentForeground #1a1b26
extensionButton.prominentHoverBackground #ebbcbae6
extensionIcon.preReleaseForeground #5d7e80
extensionIcon.starForeground #ebbcba
extensionIcon.verifiedForeground #c4a7e7
focusBorder #615e7533
foreground #e0def4
git.blame.editorDecorationForeground #6e6a86
gitDecoration.addedResourceForeground #9ccfd8
gitDecoration.conflictingResourceForeground #d16d92
gitDecoration.deletedResourceForeground #908caa
gitDecoration.ignoredResourceForeground #6e6a86
gitDecoration.modifiedResourceForeground #ebbcba
gitDecoration.renamedResourceForeground #5d7e80
gitDecoration.stageDeletedResourceForeground #d16d92
gitDecoration.stageModifiedResourceForeground #c4a7e7
gitDecoration.submoduleResourceForeground #ca9f7c
gitDecoration.untrackedResourceForeground #ca9f7c
icon.foreground #908caa
input.background #26233a80
input.border #6e6a8633
input.foreground #e0def4
input.placeholderForeground #908caa
inputOption.activeBackground #ebbcba26
inputOption.activeBorder #0000
inputOption.activeForeground #ebbcba
inputValidation.errorBackground #2c2e34
inputValidation.errorBorder #6e6a8666
inputValidation.errorForeground #d16d92
inputValidation.infoBackground #2c2e34
inputValidation.infoBorder #6e6a8666
inputValidation.infoForeground #9ccfd8
inputValidation.warningBackground #2c2e34
inputValidation.warningBorder #6e6a8666
inputValidation.warningForeground #9ccfd880
keybindingLabel.background #26233a
keybindingLabel.border #6e6a8666
keybindingLabel.bottomBorder #6e6a8666
keybindingLabel.foreground #c4a7e7
keybindingTable.headerBackground #26233a
keybindingTable.rowsBackground #2c2e34
list.activeSelectionBackground #6e6a8633
list.activeSelectionForeground #e0def4
list.deemphasizedForeground #908caa
list.dropBackground #2c2e34
list.errorForeground #d16d92
list.filterMatchBackground #2c2e34
list.filterMatchBorder #ebbcba
list.focusBackground #6e6a8666
list.focusForeground #e0def4
list.focusOutline #6e6a8633
list.highlightForeground #ebbcba
list.hoverBackground #6e6a861a
list.hoverForeground #e0def4
list.inactiveFocusBackground #6e6a861a
list.inactiveSelectionBackground #2c2e34
list.inactiveSelectionForeground #e0def4
list.invalidItemForeground #d16d92
list.warningForeground #ca9f7c
listFilterWidget.background #2c2e34
listFilterWidget.noMatchesOutline #d16d92
listFilterWidget.outline #26233a
menu.background #2c2e34
menu.border #6e6a861a
menu.foreground #e0def4
menu.selectionBackground #1a191b33
menu.selectionBorder #26233a
menu.selectionForeground #e0def4
menu.separatorBackground #00000066
menubar.selectionBackground #6e6a8633
menubar.selectionBorder #6e6a861a
menubar.selectionForeground #e0def4
merge.border #26233a
merge.commonContentBackground #6e6a8633
merge.commonHeaderBackground #6e6a8633
merge.currentContentBackground #ca9f7c80
merge.currentHeaderBackground #ca9f7c80
merge.incomingContentBackground #9ccfd880
merge.incomingHeaderBackground #9ccfd880
minimap.background #16181d
minimap.errorHighlight #d16d9280
minimap.findMatchHighlight #6e6a8633
minimap.selectionHighlight #6e6a8633
minimap.warningHighlight #ca9f7c80
minimapGutter.addedBackground #9ccfd8
minimapGutter.deletedBackground #d16d92
minimapGutter.modifiedBackground #ebbcba
minimapSlider.activeBackground #6e6a8666
minimapSlider.background #6e6a8633
minimapSlider.hoverBackground #6e6a8633
notebook.cellBorderColor #9ccfd880
notebook.cellEditorBackground #2c2e34
notebook.cellHoverBackground #26233a80
notebook.focusedCellBackground #6e6a861a
notebook.focusedCellBorder #9ccfd8
notebook.outputContainerBackgroundColor #6e6a861a
notificationCenter.border #6e6a8633
notificationCenterHeader.background #2c2e34
notificationCenterHeader.foreground #908caa
notificationLink.foreground #c4a7e7
notifications.background #2c2e34
notifications.border #6e6a8633
notifications.foreground #e0def4
notificationsErrorIcon.foreground #d16d92
notificationsInfoIcon.foreground #9ccfd8
notificationsWarningIcon.foreground #ca9f7c
notificationToast.border #6e6a8633
panel.background #171718
panel.border #0000
panel.dropBorder #26233a
panelInput.border #2c2e34
panelSection.dropBackground #6e6a8633
panelSectionHeader.background #2c2e34
panelSectionHeader.foreground #e0def4
panelTitle.activeBorder #6e6a8666
panelTitle.activeForeground #e0def4
panelTitle.inactiveForeground #908caa
peekView.border #26233a
peekViewEditor.background #2c2e34
peekViewEditor.matchHighlightBackground #6e6a8666
peekViewResult.background #2c2e34
peekViewResult.fileForeground #908caa
peekViewResult.lineForeground #908caa
peekViewResult.matchHighlightBackground #6e6a8666
peekViewResult.selectionBackground #6e6a8633
peekViewResult.selectionForeground #e0def4
peekViewTitle.background #26233a
peekViewTitleDescription.foreground #908caa
pickerGroup.border #6e6a8666
pickerGroup.foreground #c4a7e7
ports.iconRunningProcessForeground #ebbcba
problemsErrorIcon.foreground #d16d92
problemsInfoIcon.foreground #9ccfd8
problemsWarningIcon.foreground #ca9f7c
progressBar.background #ebbcba
quickInput.background #2c2e34
quickInput.foreground #908caa
quickInputList.focusBackground #6e6a8633
quickInputList.focusForeground #e0def4
quickInputList.focusIconForeground #e0def4
scrollbar.shadow #2223254d
scrollbarSlider.activeBackground #5d7e8080
scrollbarSlider.background #6e6a8633
scrollbarSlider.hoverBackground #6e6a8666
searchEditor.findMatchBackground #6e6a8633
selection.background #6e6a8666
settings.focusedRowBackground #2c2e34
settings.focusedRowBorder #6e6a8633
settings.headerForeground #e0def4
settings.modifiedItemIndicator #ebbcba
settings.rowHoverBackground #2c2e34
sideBar.background #16181d
sideBar.dropBackground #2c2e34
sideBar.foreground #908caa
sideBarSectionHeader.background #0000
sideBarSectionHeader.border #6e6a8633
statusBar.background #16181d
statusBar.debuggingBackground #c4a7e7
statusBar.debuggingForeground #1a1b26
statusBar.foreground #908caa
statusBar.noFolderBackground #1f1f22
statusBar.noFolderForeground #908caa
statusBarItem.activeBackground #6e6a8666
statusBarItem.errorBackground #222225
statusBarItem.errorForeground #d16d92
statusBarItem.hoverBackground #6e6a8633
statusBarItem.prominentBackground #26233a
statusBarItem.prominentForeground #e0def4
statusBarItem.prominentHoverBackground #6e6a8633
statusBarItem.remoteBackground #171718
statusBarItem.remoteForeground #ca9f7c
symbolIcon.arrayForeground #908caa
symbolIcon.classForeground #908caa
symbolIcon.colorForeground #908caa
symbolIcon.constantForeground #908caa
symbolIcon.constructorForeground #908caa
symbolIcon.enumeratorForeground #908caa
symbolIcon.enumeratorMemberForeground #908caa
symbolIcon.eventForeground #908caa
symbolIcon.fieldForeground #908caa
symbolIcon.fileForeground #908caa
symbolIcon.folderForeground #908caa
symbolIcon.functionForeground #908caa
symbolIcon.interfaceForeground #908caa
symbolIcon.keyForeground #908caa
symbolIcon.keywordForeground #908caa
symbolIcon.methodForeground #908caa
symbolIcon.moduleForeground #908caa
symbolIcon.namespaceForeground #908caa
symbolIcon.nullForeground #908caa
symbolIcon.numberForeground #908caa
symbolIcon.objectForeground #908caa
symbolIcon.operatorForeground #908caa
symbolIcon.packageForeground #908caa
symbolIcon.propertyForeground #908caa
symbolIcon.referenceForeground #908caa
symbolIcon.snippetForeground #908caa
symbolIcon.stringForeground #908caa
symbolIcon.structForeground #908caa
symbolIcon.textForeground #908caa
symbolIcon.typeParameterForeground #908caa
symbolIcon.unitForeground #908caa
symbolIcon.variableForeground #908caa
tab.activeBackground #dad8e61a
tab.activeForeground #e0def4
tab.activeModifiedBorder #9ccfd8
tab.border #0000
tab.hoverBackground #6e6a8633
tab.inactiveBackground #0000
tab.inactiveForeground #908caa
tab.inactiveModifiedBorder #9ccfd880
tab.lastPinnedBorder #6e6a86
tab.unfocusedActiveBackground #0000
tab.unfocusedHoverBackground #0000
tab.unfocusedInactiveBackground #0000
tab.unfocusedInactiveModifiedBorder #9ccfd880
terminal.ansiBlack #28263a
terminal.ansiBlue #9ccfd8
terminal.ansiBrightBlack #908caa
terminal.ansiBrightBlue #9ccfd8
terminal.ansiBrightCyan #ebbcba
terminal.ansiBrightGreen #5d7e80
terminal.ansiBrightMagenta #c4a7e7
terminal.ansiBrightRed #d16d92
terminal.ansiBrightWhite #e0def4
terminal.ansiBrightYellow #ca9f7c
terminal.ansiCyan #ebbcba
terminal.ansiGreen #5d7e80
terminal.ansiMagenta #c4a7e7
terminal.ansiRed #d16d92
terminal.ansiWhite #e0def4
terminal.ansiYellow #ca9f7c
terminal.background #19191a
terminal.dropBackground #1d1d1f33
terminal.foreground #e0def4
terminal.selectionBackground #2f2e3533
terminal.tab.activeBorder #e0def4
terminalCursor.background #e0def4
terminalCursor.foreground #6e6a86
textBlockQuote.background #202122
textBlockQuote.border #6e6a8633
textCodeBlock.background #2c2e34
textLink.activeForeground #c4a7e7e6
textLink.foreground #c4a7e7
textPreformat.foreground #ca9f7c
textSeparator.foreground #908caa
titleBar.activeBackground #16181d
titleBar.activeForeground #908caa
titleBar.inactiveBackground #16181d
titleBar.inactiveForeground #908caa
toolbar.activeBackground #6e6a8666
toolbar.hoverBackground #6e6a8633
tree.indentGuidesStroke #908caa
walkThrough.embeddedEditorBackground #222224
welcomePage.background #202022
widget.shadow #2c2e344d
window.activeBorder #2c2e34
window.inactiveBorder #2c2e34 entity.other.attribute-name, entity.other.inherited-class #c4a7e7 bold
invalid.deprecated #908caa —
keyword, variable.language.this #5d7e80 —
markup.inserted.diff #9ccfd8 —
markup.deleted.diff #d16d92 —
markup.bold.markdown — bold
markup.italic.markdown — italic
meta.tag, meta.brace #e0def4 —
meta.import, meta.export #5d7e80 —
meta.directive.vue #c4a7e7 italic
meta.property-name.css #9ccfd8 —
meta.property-value.css #ca9f7c —
meta.tag.other.html #908caa —
punctuation.accessor #5d7e80 —
punctuation.definition.string #ca9f7c —
punctuation.definition.tag #6e6a86 —
storage.type, storage.modifier #5d7e80 —
support.function #d16d92 italic
variable.other, variable.language, variable.function, variable.argument #e0def4 —
variable.parameter #c4a7e7 —
entity.other.attribute-name, keyword.control.at-rule, variable.annotation, meta.annotation, storage.type.annotation #c4a7e7 bold
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 } !` ;
}
hell pine | Coding Theme