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.activeBackground #ff000000 activityBar.background #1d1d1d activityBar.foreground #d1ae48 activityBar.inactiveForeground #ffffff26 activityBarBadge.background #007acc activityBarBadge.foreground #ffffff tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #737384 italic variable, string constant.other.placeholder #eeffff — 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.
Darkish_gray — Darkish_gray
badge.background #474747
badge.foreground #ffffff
breadcrumb.activeSelectionForeground #f3f939
breadcrumb.background #1f1f1f
breadcrumb.focusForeground #f3f939
breadcrumb.foreground #ffffffcc
button.background #2a2a2a
button.foreground #dbdbdb
button.hoverBackground #303030
button.secondaryBackground #2c2c2c
button.secondaryForeground #bababa
button.secondaryHoverBackground #303030
checkbox.background #2c2c2c
checkbox.border #303030
checkbox.foreground #ffffff
debugExceptionWidget.background #191919
debugExceptionWidget.border #2e2e2e
debugToolBar.background #191919
debugToolBar.border #2e2e2e
diffEditor.border #444444
diffEditor.insertedTextBackground #9bb95533
diffEditor.removedTextBackground #ff000033
dropdown.background #2c2c2c
dropdown.border #303030
dropdown.foreground #ffffff
editor.background #1b1b1b
editor.findMatchBackground #515c6a
editor.findMatchBorder #74879f
editor.findMatchHighlightBackground #ea5c0055
editor.findMatchHighlightBorder #ffffff00
editor.findRangeHighlightBackground #3a3d4166
editor.findRangeHighlightBorder #ffffff00
editor.foldBackground #264f784d
editor.foreground #d9d9d9
editor.hoverHighlightBackground #264f7840
editor.inactiveSelectionBackground #3a3d41
editor.lineHighlightBackground #ffffff0A
editor.lineHighlightBorder #282828
editor.rangeHighlightBackground #ffffff0b
editor.rangeHighlightBorder #ffffff00
editor.selectionBackground #c4c4c426
editor.selectionHighlightBackground #add6ff26
editor.selectionHighlightBorder #495F77
editor.wordHighlightBackground #575757b8
editor.wordHighlightStrongBackground #004972b8
editorBracketMatch.background #0064001a
editorBracketMatch.border #888888
editorCodeLens.foreground #999999
editorCursor.background #000000
editorCursor.foreground #aeafad
editorError.background #B73A3400
editorError.border #ffffff00
editorError.foreground #f48771
editorGroup.border #444444
editorGroup.emptyBackground #1b1b1b
editorGroupHeader.border #2c2c2c
editorGroupHeader.tabsBackground #212121
editorGroupHeader.tabsBorder #5e5e5e
editorGutter.addedBackground #587c0c
editorGutter.background #1e1e1e
editorGutter.commentRangeForeground #c5c5c5
editorGutter.deletedBackground #94151b
editorGutter.foldingControlForeground #c5c5c5
editorGutter.modifiedBackground #0c7d9d
editorHoverWidget.background #252526
editorHoverWidget.border #454545
editorHoverWidget.foreground #cccccc
editorIndentGuide.activeBackground #707070
editorIndentGuide.background #404040
editorInfo.background #4490BF00
editorInfo.border #4490BF00
editorInfo.foreground #75beff
editorLineNumber.activeForeground #c6c6c6
editorLineNumber.foreground #828282
editorLink.activeForeground #79ecff
editorMarkerNavigation.background #242430
editorMarkerNavigationError.background #f48771
editorMarkerNavigationInfo.background #75beff
editorMarkerNavigationWarning.background #cca700
editorOverviewRuler.background #25252500
editorOverviewRuler.border #7f7f7f4d
editorRuler.foreground #5a5a5a
editorSuggestWidget.background #252526
editorSuggestWidget.border #454545
editorSuggestWidget.foreground #d4d4d4
editorSuggestWidget.highlightForeground #48b8cb
editorSuggestWidget.selectedBackground #171741
editorWarning.background #A9904000
editorWarning.border #ffffff00
editorWarning.foreground #cca700
editorWhitespace.foreground #d7d7d7bd
editorWidget.background #1d1d1d
editorWidget.foreground #d9d9d9
editorWidget.resizeBorder #808080
focusBorder #4b443800
foreground #cccccc
gitDecoration.conflictingResourceForeground #df85ff
gitDecoration.deletedResourceForeground #ff2e97
gitDecoration.ignoredResourceForeground #7984D1
gitDecoration.modifiedResourceForeground #ffd400
gitDecoration.stageDeletedResourceForeground #fb8975
gitDecoration.stageModifiedResourceForeground #f7c16f
gitDecoration.submoduleResourceForeground #8db9e2
gitDecoration.untrackedResourceForeground #7ad59a
icon.foreground #cccccc
input.background #2c2c2c
input.border #303030
input.foreground #ffffff
input.placeholderForeground #ffffff
inputOption.activeBackground #49494966
inputOption.activeBorder #666666d9
inputOption.activeForeground #c4c4c4
list.activeSelectionBackground #303030
list.activeSelectionForeground #ffffff
list.dropBackground #242424
list.focusBackground #282828
list.focusForeground #ffffff
list.highlightForeground #f5c021
list.hoverBackground #303030
list.hoverForeground #ffffff
list.inactiveSelectionBackground #2a2a2a
list.inactiveSelectionForeground #ffffff
listFilterWidget.background #54390f
listFilterWidget.noMatchesOutline #8e8e8e
listFilterWidget.outline #56565600
menu.background #242424
menu.border #24212185
menu.foreground #f7f7f7
menu.selectionBackground #282828
menu.selectionBorder #b8b8b822
menu.selectionForeground #c4b771
menu.separatorBackground #6060608f
menubar.selectionBackground #3030301a
menubar.selectionBorder #17171700
menubar.selectionForeground #ffffff
merge.commonContentBackground #282828
merge.commonHeaderBackground #383838
merge.currentContentBackground #27403B
merge.currentHeaderBackground #367366
merge.incomingContentBackground #28384B
merge.incomingHeaderBackground #395F8F
minimap.background #1b1b1b
minimap.errorHighlight #f48771
minimap.findMatchHighlight #515c6a
minimap.selectionHighlight #c4c4c426
minimap.warningHighlight #cca700
minimapGutter.addedBackground #587c0c
minimapGutter.deletedBackground #94151b
minimapGutter.modifiedBackground #0c7d9d
notificationCenter.border #1f1f1f00
notificationCenterHeader.background #262626
notificationCenterHeader.foreground #c7c7c7
notifications.background #242424
notifications.border #474747
notifications.foreground #dbdbdb
notificationsErrorIcon.foreground #ff5050
notificationsInfoIcon.foreground #78f2ff
notificationsWarningIcon.foreground #ffd100
notificationToast.border #dedede22
panel.background #1d1d1d
panel.border #58585844
panelSection.border #6b6b6b59
panelTitle.activeBorder #999999
panelTitle.activeForeground #ffffff
panelTitle.inactiveForeground #ffffff91
peekView.border #007acc
peekViewEditor.background #001f33
peekViewEditor.matchHighlightBackground #ff8f0099
peekViewEditor.matchHighlightBorder #ee931e
peekViewEditorGutter.background #001f33
peekViewResult.background #252526
peekViewResult.fileForeground #ffffff
peekViewResult.lineForeground #bbbbbb
peekViewResult.matchHighlightBackground #ea5c004d
peekViewResult.selectionBackground #3399ff33
peekViewResult.selectionForeground #ffffff
peekViewTitle.background #1e1e1e
peekViewTitleDescription.foreground #ccccccb3
peekViewTitleLabel.foreground #ffffff
pickerGroup.border #848484
pickerGroup.foreground #ffc14c
progressBar.background #c0930e
scrollbar.shadow #1d1d1d00
scrollbarSlider.activeBackground #45454544
scrollbarSlider.background #3f3f3f66
scrollbarSlider.hoverBackground #4b4b4bb3
selection.background #73411c
settings.focusedRowBackground #ffffff07
settings.headerForeground #cccccc
sideBar.background #1b1b1b
sideBar.border #262626
sideBar.dropBackground #242424
sideBar.foreground #bebebe
sideBarSectionHeader.background #1f1f1fc3
sideBarSectionHeader.border #4f4c47af
sideBarSectionHeader.foreground #cdb261b9
sideBarTitle.foreground #a7a7a7
statusBar.background #262626
statusBar.border #000000
statusBar.debuggingBackground #343434
statusBar.debuggingBorder #5affd1
statusBar.debuggingForeground #ffffff
statusBar.foreground #ffffff
statusBar.noFolderBackground #282828
statusBar.noFolderBorder #000000
statusBar.noFolderForeground #ffffff
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #2e2e2e
statusBarItem.remoteBackground #b79c0f
statusBarItem.remoteForeground #000000
tab.activeBackground #2a2a2a
tab.activeBorder #d9d9d9
tab.activeBorderTop #00000000
tab.activeForeground #f7f7f7
tab.border #51515146
tab.hoverBackground #282828
tab.hoverBorder #6d6d6d
tab.hoverForeground #ffffff
tab.inactiveBackground #1d1d1d
tab.inactiveForeground #ffffff80
terminal.ansiBlack #000000
terminal.ansiBlue #2472c8
terminal.ansiBrightBlack #666666
terminal.ansiBrightBlue #3b8eea
terminal.ansiBrightCyan #29b8db
terminal.ansiBrightGreen #23d18b
terminal.ansiBrightMagenta #d670d6
terminal.ansiBrightRed #f14c4c
terminal.ansiBrightWhite #e5e5e5
terminal.ansiBrightYellow #f5f543
terminal.ansiCyan #11a8cd
terminal.ansiGreen #0dbc79
terminal.ansiMagenta #bc3fbc
terminal.ansiRed #cd3131
terminal.ansiWhite #e4e4e4
terminal.ansiYellow #e5e510
terminal.border #6b6b6b59
terminal.foreground #d3d3d3
terminal.selectionBackground #bcbcbc1c
terminalCursor.background #000000
terminalCursor.foreground #ffffff
textLink.foreground #c9ae5e
titleBar.activeBackground #242424
titleBar.activeForeground #d5d5d5
titleBar.border #fb202000
titleBar.inactiveBackground #1f1f1f
titleBar.inactiveForeground #eeeeee99
tree.indentGuidesStroke #414141
walkThrough.embeddedEditorBackground #00000050
widget.shadow #ffffff38 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 #08f7fe —
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter #fe53bb —
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method #ebf3f7 —
meta.block variable.other #fe53bb —
support.other.variable, string.other.link #fe53bb —
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other #ddd —
constant.language #caff1c —
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 #ccc —
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 #09fbd3 —
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 #d6e5ef —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #FF5370 —
variable.language #FF5370 italic
entity.name.method.js #ebf3f7 italic
meta.class-method.js entity.name.function.js, variable.function.constructor #ebf3f7 —
entity.other.attribute-name #f5d300 —
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name #09fbd3 italic
entity.other.attribute-name.class #09fbd3 —
source.sass keyword.control #ebf3f7 —
constant.character.escape #08f7fe —
*url*, *link*, *uri* — underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #ebf3f7 italic
source.js constant.other.object.key.js string.unquoted.label.js #FF5370 italic
source.json meta.structure.dictionary.json support.type.property-name.json #f5d300 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #09fbd3 —
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 #ddd —
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 #FF5370 —
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 #ebf3f7 —
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 #fe53bb —
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 #f5d300 —
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 #ccc —
text.html.markdown, punctuation.definition.list_item.markdown #eeffff —
text.html.markdown markup.inline.raw.markdown #f5d300 —
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 #ccc —
markup.italic #fe53bb italic
markup.bold, markup.bold string #fe53bb 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 #fe53bb bold
markup.underline #ddd underline
markup.quote punctuation.definition.blockquote.markdown #65737E —
string.other.link.title.markdown #ebf3f7 —
string.other.link.description.title.markdown #f5d300 —
constant.other.reference.link.markdown #09fbd3 —
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...
main*
Button.tsx
31
~/my-project
$
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 } ! ` ;
}
Darkish_gray | Coding Theme