Skip to main content
Home Theme VS Code Void Dark A VS Code theme inspired by popular game League of Legends
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 #11152D activityBar.border #11152D activityBar.dropBorder #2f3b54 activityBar.foreground #8695b7 activityBar.inactiveForeground #8695b799 activityBarBadge.background #9d4edd tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #546E7A 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.
activityBarBadge.foreground
#11152D
badge.background #9d4edd
badge.foreground #11142D
breadcrumb.activeSelectionForeground #d7dce2
breadcrumb.background #11142D
breadcrumb.focusForeground #d7dce2
breadcrumb.foreground #8695b7
breadcrumbPicker.background #11152D
button.background #9d4edd
button.foreground #11152D
button.hoverBackground #9d4edd99
debugExceptionWidget.background #2f3b54
debugExceptionWidget.border #2f3b54
debugToolBar.background #2f3b54
debugToolBar.border #2f3b54
descriptionForeground #d7dce2
diffEditor.border #2f3b54
diffEditor.insertedTextBackground #fc7a1e22
diffEditor.insertedTextBorder #fc7a1e44
diffEditor.removedTextBackground #ef6b7322
diffEditor.removedTextBorder #ef6b7344
dropdown.background #2f3b54
dropdown.border #2f3b54
dropdown.foreground #d7dce2
dropdown.listBackground #11152D
editor.background #11142D
editor.findMatchBackground #8695b777
editor.findMatchBorder #9d4edd
editor.findMatchHighlightBackground #8695b777
editor.findRangeHighlightBackground #8695b777
editor.foreground #e4c1f9
editor.hoverHighlightBackground #8695b777
editor.inactiveSelectionBackground #8695b777
editor.lineHighlightBackground #2f3b54
editor.lineHighlightBorder #2f3b54
editor.rangeHighlightBackground #2f3b54
editor.selectionBackground #2f3b54
editor.selectionForeground #e4c1f9
editor.selectionHighlightBackground #2f3b54
editor.wordHighlightBackground #8695b777
editor.wordHighlightStrongBackground #8695b777
editorBracketMatch.background #8695b755
editorBracketMatch.border #9d4edd
editorCodeLens.foreground #d7dce2
editorCursor.background #11142D
editorCursor.foreground #9d4edd
editorError.foreground #ef6b73
editorGroup.border #2f3b54
editorGroup.dropBackground #2f3b54
editorGroup.emptyBackground #11142D
editorGroup.focusedEmptyBorder #11142D
editorGroupHeader.noTabsBackground #11142D
editorGroupHeader.tabsBackground #11152D
editorGroupHeader.tabsBorder #11152D
editorGutter.addedBackground #fc7a1e
editorGutter.background #11142D
editorGutter.deletedBackground #ef6b73
editorGutter.modifiedBackground #5ccfe6
editorHint.foreground #9d4edd
editorHoverWidget.background #2f3b54
editorHoverWidget.border #2f3b54
editorIndentGuide.activeBackground #8695b755
editorIndentGuide.background #8695b733
editorInfo.foreground #5ccfe6
editorInlayHint.background #11152D
editorInlayHint.foreground #8695b799
editorLineNumber.activeForeground #8695b7
editorLineNumber.foreground #8695b755
editorLink.activeForeground #9d4edd
editorMarkerNavigation.background #2f3b54
editorMarkerNavigationError.background #ef6b73
editorMarkerNavigationInfo.background #5ccfe6
editorMarkerNavigationWarning.background #9d4edd
editorOverviewRuler.addedForeground #fc7a1e
editorOverviewRuler.border #2f3b54
editorOverviewRuler.bracketMatchForeground #9d4edd
editorOverviewRuler.commonContentForeground #2f3b54
editorOverviewRuler.currentContentForeground #5ccfe6
editorOverviewRuler.deletedForeground #ef6b73
editorOverviewRuler.errorForeground #ef6b73
editorOverviewRuler.findMatchForeground #9d4edd
editorOverviewRuler.incomingContentForeground #fc7a1e
editorOverviewRuler.infoForeground #5ccfe6
editorOverviewRuler.modifiedForeground #5ccfe6
editorOverviewRuler.rangeHighlightForeground #8695b7
editorOverviewRuler.selectionHighlightForeground #8695b7
editorOverviewRuler.warningForeground #ffd580
editorOverviewRuler.wordHighlightForeground #8695b7
editorOverviewRuler.wordHighlightStrongForeground #8695b7
editorPane.background #11142D
editorRuler.foreground #2f3b54
editorSuggestWidget.background #2f3b54
editorSuggestWidget.border #2f3b54
editorSuggestWidget.foreground #d7dce2
editorSuggestWidget.highlightForeground #9d4edd
editorSuggestWidget.selectedBackground #11142D
editorWarning.foreground #ffd580
editorWhitespace.foreground #8695b777
editorWidget.background #11152D
editorWidget.border #11152D
errorForeground #ef6b73
extensionButton.prominentBackground #9d4edd
extensionButton.prominentForeground #11142D
extensionButton.prominentHoverBackground #9d4edd99
focusBorder #8695b777
foreground #8695b7
gitDecoration.conflictingResourceForeground #ef6b73
gitDecoration.deletedResourceForeground #ef6b73
gitDecoration.ignoredResourceForeground #8695b777
gitDecoration.modifiedResourceForeground #5ccfe6
gitDecoration.untrackedResourceForeground #fc7a1e
input.background #11142D
input.border #2f3b54
input.foreground #d7dce2
input.placeholderForeground #8695b777
inputOption.activeBorder #2f3b54
inputValidation.errorBackground #11142D
inputValidation.errorBorder #ef6b73
inputValidation.errorForeground #ef6b73
inputValidation.infoBackground #11142D
inputValidation.infoBorder #5ccfe6
inputValidation.infoForeground #5ccfe6
inputValidation.warningBackground #11142D
inputValidation.warningBorder #ffd580
inputValidation.warningForeground #ffd580
list.activeSelectionBackground #2f3b54
list.activeSelectionForeground #d7dce2
list.dropBackground #2f3b54
list.errorForeground #ef6b73
list.focusBackground #2f3b54
list.focusForeground #d7dce2
list.highlightForeground #9d4edd
list.hoverBackground #2f3b54
list.hoverForeground #d7dce2
list.inactiveFocusBackground #2f3b54
list.inactiveSelectionBackground #2f3b54
list.inactiveSelectionForeground #d7dce2
list.invalidItemForeground #ef6b73
list.warningForeground #ffd580
listFilterWidget.background #2f3b54
listFilterWidget.noMatchesOutline #ef6b73
listFilterWidget.outline #2f3b54
menu.background #11152D
menu.foreground #8695b7
menu.selectionBackground #2f3b54
menu.selectionForeground #d7dce2
menubar.selectionBackground #2f3b54
menubar.selectionForeground #d7dce2
merge.border #8695b7
merge.commonContentBackground #2f3b5455
merge.commonHeaderBackground #2f3b5477
merge.currentContentBackground #5ccfe622
merge.currentHeaderBackground #5ccfe677
merge.incomingContentBackground #fc7a1e22
merge.incomingHeaderBackground #fc7a1e77
notificationCenter.border #11152D
notificationCenterHeader.background #11152D
notificationCenterHeader.foreground #d7dce2
notificationLink.foreground #d7dce2
notifications.background #11152D
notifications.border #11152D
notifications.foreground #d7dce2
notificationToast.border #11152D
panel.background #11152D
panel.border #11142D
panel.dropBorder #2f3b54
panelInput.border #8695b7
panelSection.border #2f3b54
panelSection.dropBackground #2f3b54
panelSectionHeader.background #11142D
panelSectionHeader.foreground #9d4edd
panelTitle.activeBorder #9d4edd
panelTitle.activeForeground #d7dce2
panelTitle.inactiveForeground #8695b7
peekView.border #9d4edd
peekViewEditor.background #2f3b54
peekViewEditor.matchHighlightBackground #8695b7
peekViewEditor.matchHighlightBorder #9d4edd
peekViewEditorGutter.background #11142D
peekViewResult.background #2f3b54
peekViewResult.fileForeground #8695b7
peekViewResult.lineForeground #d7dce2
peekViewResult.matchHighlightBackground #9d4edd33
peekViewResult.selectionBackground #2f3b54
peekViewResult.selectionForeground #d7dce2
peekViewTitle.background #2f3b54
peekViewTitleDescription.foreground #8695b7
peekViewTitleLabel.foreground #8695b7
pickerGroup.border #2f3b54
pickerGroup.foreground #9d4edd
progressBar.background #9d4edd
scrollbar.shadow #00030F
scrollbarSlider.activeBackground #8695b777
scrollbarSlider.background #8695b755
scrollbarSlider.hoverBackground #8695b799
selection.background #8695b777
settings.checkboxBackground #2f3b54
settings.checkboxBorder #2f3b54
settings.checkboxForeground #d7dce2
settings.dropdownBackground #2f3b54
settings.dropdownBorder #2f3b54
settings.dropdownForeground #d7dce2
settings.dropdownListBorder #2f3b54
settings.headerForeground #d7dce2
settings.modifiedItemIndicator #5ccfe6
settings.numberInputBackground #2f3b54
settings.numberInputBorder #2f3b54
settings.numberInputForeground #d7dce2
settings.textInputBackground #2f3b54
settings.textInputBorder #2f3b54
settings.textInputForeground #d7dce2
sideBar.background #11152D
sideBar.foreground #8695b7
sideBarSectionHeader.background #11142D
sideBarSectionHeader.border #11152D
sideBarSectionHeader.foreground #9d4edd
sideBarTitle.foreground #9d4edd
statusBar.background #11152D
statusBar.border #11152D
statusBar.debuggingBackground #11152D
statusBar.debuggingForeground #8695b7
statusBar.foreground #8695b7
statusBar.noFolderBackground #11152D
statusBar.noFolderForeground #8695b7
statusBarItem.activeBackground #2f3b54
statusBarItem.hoverBackground #11142D
statusBarItem.remoteBackground #11152D
statusBarItem.remoteForeground #8695b7
tab.activeBackground #11142D
tab.activeBorder #9d4edd
tab.activeBorderTop #11152D
tab.activeForeground #d7dce2
tab.border #11152D
tab.hoverBackground #2f3b54
tab.hoverBorder #9d4edd
tab.inactiveBackground #11152D
tab.inactiveForeground #d7dce277
tab.unfocusedActiveBackground #11142D
tab.unfocusedActiveBorder #9d4edd77
tab.unfocusedActiveBorderTop #11142D
tab.unfocusedActiveForeground #d7dce2
tab.unfocusedHoverBackground #11142D
tab.unfocusedHoverBorder #9d4edd77
tab.unfocusedInactiveForeground #d7dce277
terminal.ansiBlack #2f3b54
terminal.ansiBlue #5ccfe6
terminal.ansiBrightBlack #444a5e
terminal.ansiBrightBlue #5ccfe6
terminal.ansiBrightCyan #5ccfe6
terminal.ansiBrightGreen #fc7a1e
terminal.ansiBrightMagenta #c3a6ff
terminal.ansiBrightRed #ef6b73
terminal.ansiBrightWhite #e4c1f9
terminal.ansiBrightYellow #9d4edd
terminal.ansiCyan #5ccfe6
terminal.ansiGreen #fc7a1e
terminal.ansiMagenta #c3a6ff
terminal.ansiRed #ef6b73
terminal.ansiWhite #e4c1f9
terminal.ansiYellow #9d4edd
terminal.background #11152D
terminal.border #11152D
terminal.foreground #e4c1f9
terminal.selectionBackground #8695b733
terminalCursor.background #9d4edd
terminalCursor.foreground #9d4edd
textBlockQuote.background #2f3b54
textBlockQuote.border #2f3b54
textCodeBlock.background #11152D
textLink.activeForeground #9d4edd
textLink.foreground #9d4edd
textPreformat.foreground #d7dce2
textSeparator.foreground #d7dce2
titleBar.activeBackground #11152D
titleBar.activeForeground #d7dce2
titleBar.border #11152D
titleBar.inactiveBackground #11152D
titleBar.inactiveForeground #8695b7
tree.indentGuidesStroke #2f3b54
walkThrough.embeddedEditorBackground #11152D
widget.shadow #00030F 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 #06d6a0 —
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter #DEA2F6 —
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method #00b4d8 —
meta.block variable.other #DEA2F6 —
support.other.variable, string.other.link #DEA2F6 —
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other #ff66b3 —
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 #ccd5ae —
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types #FFCB6B —
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 #B2CCD6 —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #FF5370 —
variable.language #FF5370 italic
entity.name.method.js #00b4d8 italic
meta.class-method.js entity.name.function.js, variable.function.constructor #00b4d8 —
entity.other.attribute-name #ffc800 —
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name #FFCB6B italic
entity.other.attribute-name.class #FFCB6B —
source.sass keyword.control #00b4d8 —
constant.character.escape #06d6a0 —
*url*, *link*, *uri* — underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #00b4d8 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 #ffc800 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #FFCB6B —
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 #ff66b3 —
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 #00b4d8 —
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 #DEA2F6 —
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 #ffc800 —
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 #ccd5ae —
text.html.markdown, punctuation.definition.list_item.markdown #EEFFFF —
text.html.markdown markup.inline.raw.markdown #ffc800 —
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 #ccd5ae —
markup.italic #DEA2F6 italic
markup.bold, markup.bold string #DEA2F6 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 #DEA2F6 bold
markup.underline #ff66b3 underline
markup.quote punctuation.definition.blockquote.markdown #65737E —
string.other.link.title.markdown #00b4d8 —
string.other.link.description.title.markdown #ffc800 —
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 } ! ` ;
}
Void Dark | Coding Theme