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.background #282c34 activityBar.foreground #abb2bf activityBarBadge.background #6e88a6 activityBarBadge.foreground #282c34 badge.background #6e88a6 badge.foreground #282c34 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #546E7A italic variable, string constant.other.placeholder #abb2bf — constant.other.color #ffffff — invalid, invalid.illegal #FF5370 — keyword, storage.type, storage.modifier
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
button.background
#434c5e
button.foreground #abb2bf
button.hoverBackground #4c566a
debugExceptionWidget.background #4c566a
debugExceptionWidget.border #282c34
debugToolBar.background #3b4252
descriptionForeground #abb2bfe6
diffEditor.insertedTextBackground #81a1c133
diffEditor.removedTextBackground #e06c754d
dropdown.background #3b4252
dropdown.border #3b4252
dropdown.foreground #abb2bf
editor.background #282c34
editor.findMatchBackground #6e88a666
editor.findMatchHighlightBackground #6e88a633
editor.findRangeHighlightBackground #6e88a633
editor.foreground #abb2bf
editor.hoverHighlightBackground #3b4252
editor.inactiveSelectionBackground #434c5ecc
editor.lineHighlightBackground #3b4252
editor.lineHighlightBorder #3b4252
editor.rangeHighlightBackground #434c5e52
editor.selectionBackground #434c5ecc
editor.selectionHighlightBackground #434c5ecc
editor.wordHighlightBackground #81a1c166
editor.wordHighlightStrongBackground #81a1c199
editorActiveLineNumber.foreground #abb2bfcc
editorBracketMatch.background #282c3400
editorBracketMatch.border #6e88a6
editorCodeLens.foreground #4c566a
editorCursor.foreground #abb2bf
editorError.border #e06c7500
editorError.foreground #e06c75
editorGroup.background #282c34
editorGroup.border #3b425201
editorGroup.dropBackground #3b425299
editorGroupHeader.noTabsBackground #282c34
editorGroupHeader.tabsBackground #282c34
editorGroupHeader.tabsBorder #3b425200
editorGutter.addedBackground #a3be8c
editorGutter.background #282c34
editorGutter.deletedBackground #e06c75
editorGutter.modifiedBackground #e5c07b
editorHint.border #e5c07b00
editorHint.foreground #e5c07b
editorHoverWidget.background #3b4252
editorHoverWidget.border #3b4252
editorIndentGuide.activeBackground #4c566a
editorIndentGuide.background #434c5eb3
editorLineNumber.activeForeground #abb2bf
editorLineNumber.foreground #4c566a
editorLink.activeForeground #6e88a6
editorMarkerNavigation.background #5e81acc0
editorMarkerNavigationError.background #e06c75c0
editorMarkerNavigationWarning.background #e5c07bc0
editorOverviewRuler.addedForeground #a3be8c
editorOverviewRuler.border #3b4252
editorOverviewRuler.currentContentForeground #3b4252
editorOverviewRuler.deletedForeground #e06c75
editorOverviewRuler.errorForeground #e06c75
editorOverviewRuler.findMatchForeground #6e88a666
editorOverviewRuler.incomingContentForeground #3b4252
editorOverviewRuler.infoForeground #81a1c1
editorOverviewRuler.modifiedForeground #e5c07b
editorOverviewRuler.rangeHighlightForeground #6e88a666
editorOverviewRuler.selectionHighlightForeground #6e88a666
editorOverviewRuler.warningForeground #e5c07b
editorOverviewRuler.wordHighlightForeground #6e88a666
editorOverviewRuler.wordHighlightStrongForeground #6e88a666
editorRuler.foreground #434c5e
editorSuggestWidget.background #282c34
editorSuggestWidget.border #3b4252
editorSuggestWidget.foreground #abb2bf
editorSuggestWidget.highlightForeground #6e88a6
editorSuggestWidget.selectedBackground #434c5e
editorWarning.border #e5c07b00
editorWarning.foreground #e5c07b
editorWhitespace.foreground #4c566ab3
editorWidget.background #282c34
editorWidget.border #3b4252
errorForeground #e06c75
extensionButton.prominentBackground #434c5e
extensionButton.prominentForeground #abb2bf
extensionButton.prominentHoverBackground #4c566a
focusBorder #3b4252
foreground #abb2bf
gitDecoration.conflictingResourceForeground #5e81ac
gitDecoration.deletedResourceForeground #e06c75
gitDecoration.ignoredResourceForeground #abb2bf66
gitDecoration.modifiedResourceForeground #e5c07b
gitDecoration.submoduleResourceForeground #8fbcbb
gitDecoration.untrackedResourceForeground #a3be8c
input.background #3b4252
input.border #3b4252
input.foreground #abb2bf
input.placeholderForeground #abb2bf99
inputOption.activeBackground #5e81ac
inputOption.activeBorder #5e81ac
inputValidation.errorBackground #e06c75
inputValidation.errorBorder #e06c75
inputValidation.infoBackground #81a1c1
inputValidation.infoBorder #81a1c1
inputValidation.warningBackground #d08770
inputValidation.warningBorder #d08770
list.activeSelectionBackground #6e88a6
list.activeSelectionForeground #282c34
list.dropBackground #6e88a699
list.errorForeground #e06c75
list.focusBackground #6e88a699
list.focusForeground #abb2bf
list.highlightForeground #6e88a6
list.hoverBackground #3b4252
list.hoverForeground #eceff4
list.inactiveFocusBackground #434c5ecc
list.inactiveSelectionBackground #434c5e
list.inactiveSelectionForeground #abb2bf
list.warningForeground #e5c07b
merge.border #3b425200
merge.currentContentBackground #81a1c14d
merge.currentHeaderBackground #81a1c166
merge.incomingContentBackground #8fbcbb4d
merge.incomingHeaderBackground #8fbcbb66
minimap.findMatchHighlight #6e88a6
notificationCenter.border #3b425200
notificationCenterHeader.background #282c34
notificationCenterHeader.foreground #6e88a6
notificationLink.foreground #6e88a6
notifications.background #3b4252
notifications.border #282c34
notifications.foreground #abb2bf
notificationToast.border #3b425200
panel.background #282c34
panel.border #3b4252
panelTitle.activeBorder #6e88a600
panelTitle.activeForeground #6e88a6
panelTitle.inactiveForeground #abb2bf
peekView.border #4c566a
peekViewEditor.background #282c34
peekViewEditor.matchHighlightBackground #6e88a64d
peekViewEditorGutter.background #282c34
peekViewResult.background #282c34
peekViewResult.fileForeground #6e88a6
peekViewResult.lineForeground #abb2bf66
peekViewResult.matchHighlightBackground #6e88a6cc
peekViewResult.selectionBackground #434c5e
peekViewResult.selectionForeground #abb2bf
peekViewTitle.background #3b4252
peekViewTitleDescription.foreground #abb2bf
peekViewTitleLabel.foreground #6e88a6
pickerGroup.border #3b4252
pickerGroup.foreground #6e88a6
progressBar.background #6e88a6
scrollbar.shadow #00000066
scrollbarSlider.activeBackground #434c5eaa
scrollbarSlider.background #434c5e99
scrollbarSlider.hoverBackground #434c5eaa
selection.background #6e88a699
sideBar.background #282c34
sideBar.border #3b4252
sideBar.foreground #abb2bf
sideBarSectionHeader.background #3b4252
sideBarSectionHeader.foreground #abb2bf
sideBarTitle.foreground #abb2bf
statusBar.background #3b4252
statusBar.border #3b425200
statusBar.debuggingBackground #5e81ac
statusBar.debuggingForeground #abb2bf
statusBar.foreground #abb2bf
statusBar.noFolderBackground #3b4252
statusBar.noFolderForeground #abb2bf
statusBarItem.activeBackground #4c566a
statusBarItem.hoverBackground #434c5e
statusBarItem.prominentBackground #3b4252
statusBarItem.prominentHoverBackground #434c5e
tab.activeBackground #3b4252
tab.activeBorder #6e88a600
tab.activeBorderTop #6e88a600
tab.activeForeground #abb2bf
tab.border #3b425200
tab.hoverBackground #3b4252cc
tab.hoverBorder #6e88a600
tab.inactiveBackground #282c34
tab.inactiveForeground #abb2bf66
tab.unfocusedActiveBorder #6e88a600
tab.unfocusedActiveBorderTop #6e88a600
tab.unfocusedActiveForeground #abb2bf99
tab.unfocusedHoverBackground #3b4252b3
tab.unfocusedHoverBorder #6e88a600
tab.unfocusedInactiveForeground #abb2bf66
terminal.ansiBlack #3b4252
terminal.ansiBlue #81a1c1
terminal.ansiBrightBlack #4c566a
terminal.ansiBrightBlue #81a1c1
terminal.ansiBrightCyan #8fbcbb
terminal.ansiBrightGreen #a3be8c
terminal.ansiBrightMagenta #b48ead
terminal.ansiBrightRed #e06c75
terminal.ansiBrightWhite #eceff4
terminal.ansiBrightYellow #e5c07b
terminal.ansiCyan #6e88a6
terminal.ansiGreen #a3be8c
terminal.ansiMagenta #b48ead
terminal.ansiRed #e06c75
terminal.ansiWhite #e5e9f0
terminal.ansiYellow #e5c07b
terminal.background #282c34
terminal.foreground #abb2bf
textBlockQuote.background #3b4252
textBlockQuote.border #81a1c1
textCodeBlock.background #4c566a
textLink.activeForeground #6e88a6
textLink.foreground #6e88a6
textPreformat.foreground #8fbcbb
textSeparator.foreground #eceff4
titleBar.activeBackground #282c34
titleBar.activeForeground #abb2bf
titleBar.border #282c3400
titleBar.inactiveBackground #282c34
titleBar.inactiveForeground #abb2bf66
tree.indentGuidesStroke #616e88
walkThrough.embeddedEditorBackground #282c34
welcomePage.buttonBackground #434c5e
welcomePage.buttonHoverBackground #4c566a
widget.shadow #00000066 keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution #6e88a6 —
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter #e06c75 —
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method #c8ae9d —
meta.block variable.other #e06c75 —
support.other.variable, string.other.link #e06c75 —
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other #e06c75 —
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js #c8ae9d —
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types #c8ae9d —
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name #d6e9ff —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #e06c75 —
variable.language #e06c75 italic
entity.name.method.js #d6e9ff italic
meta.class-method.js entity.name.function.js, variable.function.constructor #d6e9ff —
entity.other.attribute-name #dd672c —
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name #e0c285 italic
entity.other.attribute-name.class #e0c285 —
source.sass keyword.control #6e88a6 —
constant.character.escape #d6e9ff —
*url*, *link*, *uri* — underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #82AAFF italic
source.js constant.other.object.key.js string.unquoted.label.js #e06c75 italic
source.json meta.structure.dictionary.json support.type.property-name.json #dd672c —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #e0c285 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #F78C6C —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #e06c75 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #C17E70 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #6e88a6 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #e06c75 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #dd672c —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #C3E88D —
text.html.markdown, punctuation.definition.list_item.markdown #EEFFFF —
text.html.markdown markup.inline.raw.markdown #dd672c —
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown #65737E —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown #C3E88D —
markup.italic #e06c75 italic
markup.bold, markup.bold string #e06c75 bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string #e06c75 bold
markup.underline #F78C6C underline
markup.quote punctuation.definition.blockquote.markdown #65737E —
string.other.link.title.markdown #82AAFF —
string.other.link.description.title.markdown #dd672c —
constant.other.reference.link.markdown #FFCB6B —
markup.raw.block.fenced.markdown #00000050 —
punctuation.definition.fenced.markdown #00000050 —
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end #EEFFFF —
variable.language.fenced.markdown #65737E —
meta.separator #65737E 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 } ! ` ;
}
firewatch | Coding Theme