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 #222244 activityBar.activeBorder #6943ff62 activityBar.background #28284E activityBar.border #222244 activityBar.dropBackground #222145 activityBar.foreground #FFFFFF tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #B362FF — entity #FAD000 — constant #FF628C — keyword, storage.type.class.js #FF9D00 — meta
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBar.inactiveForeground
#A599E9
activityBarBadge.background #FAD000
activityBarBadge.foreground #1E1E3F
badge.background #FAD000
badge.foreground #1E1E3F
breadcrumb.activeSelectionForeground #FFFFFF
breadcrumb.focusForeground #FAD000
breadcrumb.foreground #A599E9
breadcrumbPicker.background #1E1E3F
button.background #FAD000
button.foreground #222244
button.hoverBackground #B362FF
contrastActiveBorder #FFFFFF00
contrastBorder #FFFFFF00
debugExceptionWidget.background #1E1E3F
debugExceptionWidget.border #A599E9
debugIcon.continueForeground #FAD000
debugIcon.disconnectForeground #FAD000
debugIcon.pauseForeground #FAD000
debugIcon.restartForeground #3AD900
debugIcon.startForeground #FAD000
debugIcon.stepBackForeground #FAD000
debugIcon.stepIntoForeground #FAD000
debugIcon.stepOutForeground #FAD000
debugIcon.stepOverForeground #FAD000
debugIcon.stopForeground #EC3A37F5
debugToolBar.background #1E1E3F
descriptionForeground #A599E9
diffEditor.insertedTextBackground #00FF000E
diffEditor.insertedTextBorder #00FF009A
diffEditor.removedTextBackground #FF000D1A
diffEditor.removedTextBorder #FF000D81
dropdown.background #1E1E3F
dropdown.border #1E1E3F
dropdown.foreground #FFFFFF
editor.background #2D2B55
editor.findMatchBackground #ff7300ab
editor.findMatchHighlightBackground #FFFF0336
editor.findRangeHighlightBackground #FFFF0336
editor.foreground #FFFFFF
editor.hoverHighlightBackground #FF730056
editor.inactiveSelectionBackground #7580B8C0
editor.lineHighlightBackground #1F1F41
editor.lineHighlightBorder #1F1F41
editor.rangeHighlightBackground #1F1F41
editor.selectionBackground #B362FF88
editor.selectionHighlightBackground #7E46DF46
editor.snippetFinalTabstopHighlightBackground #6943ff62
editor.snippetFinalTabstopHighlightBorder #6943ff62
editor.snippetTabstopHighlightBackground #6943ff62
editor.snippetTabstopHighlightBorder #6943ff62
editor.wordHighlightBackground #FFFFFF0D
editor.wordHighlightStrongBackground #FFFFFF0D
editorBracketMatch.background #AD70FC46
editorBracketMatch.border #AD70FC46
editorCodeLens.foreground #A599E9
editorCursor.foreground #FAD000
editorError.foreground #EC3A37F5
editorGroup.border #222244
editorGroup.dropBackground #222244D0
editorGroupHeader.noTabsBackground #2D2B55
editorGroupHeader.tabsBackground #2D2B55
editorGroupHeader.tabsBorder #1F1F41
editorGutter.addedBackground #35AD68
editorGutter.background #28284E
editorGutter.deletedBackground #EC3A37F5
editorGutter.modifiedBackground #AD70FC46
editorHoverWidget.background #161633
editorHoverWidget.border #161633
editorIndentGuide.activeBackground #A599E942
editorIndentGuide.background #A599E90F
editorLineNumber.foreground #A599E9
editorLink.activeForeground #A599E9
editorMarkerNavigation.background #3B536433
editorMarkerNavigationError.background #EC3A37F5
editorMarkerNavigationWarning.background #FAD000
editorOverviewRuler.border #A599E91C
editorOverviewRuler.commonContentForeground #FFC60055
editorOverviewRuler.currentContentForeground #EE3A4355
editorOverviewRuler.incomingContentForeground #3AD90055
editorRuler.foreground #A599E91C
editorSuggestWidget.background #1F1F41
editorSuggestWidget.border #1F1F41
editorSuggestWidget.foreground #A599E9
editorSuggestWidget.highlightForeground #FAD000
editorSuggestWidget.selectedBackground #2D2B55
editorWarning.border #FFFFFF00
editorWarning.foreground #FAD000
editorWhitespace.foreground #FFFFFF1A
editorWidget.background #222244
editorWidget.border #1F1F41
errorForeground #EC3A37F5
extensionButton.prominentBackground #5D37F0
extensionButton.prominentForeground #FFFFFF
extensionButton.prominentHoverBackground #FF9D00
focusBorder #1E1E3F
foreground #A599E9
gitDecoration.conflictingResourceForeground #FF7200
gitDecoration.deletedResourceForeground #EC3A37F5
gitDecoration.ignoredResourceForeground #A599E981
gitDecoration.modifiedResourceForeground #FAD000
gitDecoration.untrackedResourceForeground #3AD900
input.background #2D2B55
input.border #1E1E3F
input.foreground #FAD000
input.placeholderForeground #A599E9
inputOption.activeBackground #5D37F0
inputOption.activeBorder #1E1E3F
inputValidation.errorBackground #2D2B55
inputValidation.errorBorder #FAD000
inputValidation.infoBackground #2D2B55
inputValidation.infoBorder #2D2B55
inputValidation.warningBackground #2D2B55
inputValidation.warningBorder #FAD000
list.activeSelectionBackground #2D2B55
list.activeSelectionForeground #FFFFFF
list.dropBackground #2D2B55
list.focusBackground #2D2B55
list.focusForeground #FFFFFF
list.highlightForeground #FAD000
list.hoverBackground #2D2B55
list.hoverForeground #CEC5FF
list.inactiveSelectionBackground #2D2B55
list.inactiveSelectionForeground #AAA
listFilterWidget.background #2D2B55
listFilterWidget.noMatchesOutline #EC3A37F5
listFilterWidget.outline #2D2B55
menu.separatorBackground #A599E9
merge.border #FFFFFF00
merge.commonContentBackground #A599E981
merge.commonHeaderBackground #A599E981
merge.currentContentBackground #3ad90093
merge.currentHeaderBackground #3ad90093
merge.incomingContentBackground #ff730086
merge.incomingHeaderBackground #ff730086
notificationCenter.border #1E1E3F
notificationCenterHeader.background #6943FF
notificationCenterHeader.foreground #FFFFFF
notificationLink.foreground #FFFFFF
notifications.background #1E1E3F
notifications.border #2D2B55
notifications.foreground #CEC5FF
notificationToast.border #1E1E3F
panel.background #1E1E3F
panel.border #FAD000
panelTitle.activeBorder #FAD000
panelTitle.activeForeground #FAD000
panelTitle.inactiveForeground #A599E9
peekView.border #FAD000
peekViewEditor.background #1E1E3F
peekViewEditor.matchHighlightBackground #19354900
peekViewEditorGutter.background #191935
peekViewResult.background #1E1E3F
peekViewResult.fileForeground #AAA
peekViewResult.lineForeground #FFFFFF
peekViewResult.matchHighlightBackground #2D2B55
peekViewResult.selectionBackground #2D2B55
peekViewResult.selectionForeground #FFFFFF
peekViewTitle.background #1F1F41
peekViewTitleDescription.foreground #AAA
peekViewTitleLabel.foreground #FAD000
pickerGroup.border #1E1E3F
pickerGroup.foreground #A599E9
progressBar.background #FAD000
scrollbar.shadow #a599e981
scrollbarSlider.activeBackground #FAD000
scrollbarSlider.background #a599e981
scrollbarSlider.hoverBackground #4D21FC
selection.background #B362FF
settings.checkboxBackground #1E1E3F
settings.checkboxBorder #1E1E3F
settings.checkboxForeground #E5E4FB
settings.dropdownBackground #1E1E3F
settings.dropdownBorder #1E1E3F
settings.dropdownForeground #E5E4FB
settings.dropdownListBorder #2D2B55
settings.headerForeground #FFFFFF
settings.modifiedItemIndicator #FAD000
settings.numberInputBackground #1E1E3F
settings.numberInputBorder #1E1E3F
settings.numberInputForeground #E5E4FB
settings.textInputBackground #1E1E3F
settings.textInputBorder #1E1E3F
settings.textInputForeground #E5E4FB
sideBar.background #222244
sideBar.border #25254B
sideBar.foreground #A599E9
sideBarSectionHeader.background #1E1E3F
sideBarSectionHeader.border #1E1E3F
sideBarSectionHeader.foreground #A599E9
sideBarTitle.foreground #A599E9
statusBar.background #1E1E3F
statusBar.border #1E1E3F
statusBar.debuggingBackground #FAD000
statusBar.debuggingForeground #1E1E3F
statusBar.foreground #A599E9
statusBar.noFolderBackground #1E1E3F
statusBar.noFolderForeground #A599E9
statusBarItem.activeBackground #4D21FC
statusBarItem.hoverBackground #4D21FC
statusBarItem.prominentBackground #1E1E3F
statusBarItem.prominentHoverBackground #2D2B55
tab.activeBackground #222244
tab.activeBorder #FAD000
tab.activeForeground #FFFFFF
tab.border #1E1E3F
tab.inactiveBackground #2D2B55
tab.inactiveForeground #A599E9
tab.unfocusedActiveForeground #A599E9
tab.unfocusedInactiveForeground #A599E9
terminal.ansiBlack #000000
terminal.ansiBlue #6943FF
terminal.ansiBrightBlack #5C5C61
terminal.ansiBrightBlue #6943FF
terminal.ansiBrightCyan #80FCFF
terminal.ansiBrightGreen #3AD900
terminal.ansiBrightMagenta #FB94FF
terminal.ansiBrightRed #EC3A37F5
terminal.ansiBrightWhite #FFFFFF
terminal.ansiBrightYellow #FAD000
terminal.ansiCyan #80FCFF
terminal.ansiGreen #3AD900
terminal.ansiMagenta #FF2C70
terminal.ansiRed #EC3A37F5
terminal.ansiWhite #FFFFFF
terminal.ansiYellow #FAD000
terminal.background #1E1E3F
terminal.foreground #FFFFFF
terminalCursor.background #FAD000
terminalCursor.foreground #FAD000
textBlockQuote.background #1E1E3F
textBlockQuote.border #6943FF
textCodeBlock.background #1E1E3F
textLink.activeForeground #B362FF
textLink.foreground #B362FF
textPreformat.foreground #FAD000
textSeparator.foreground #1E1E3F
titleBar.activeBackground #1E1E3F
titleBar.activeForeground #FFFFFF
titleBar.inactiveBackground #1E1E3F
titleBar.inactiveForeground #A599E9
walkThrough.embeddedEditorBackground #1E1E3F
welcomePage.buttonBackground #1E1E3F
welcomePage.buttonHoverBackground #262650
widget.shadow #00000026 #9EFFFF
meta.brace, punctuation.definition.parameters.begin.js, punctuation.definition.parameters.end.js #E1EFFF —
punctuation.definition.parameters #FFEE80 —
punctuation.definition.template-expression #FFEE80 —
storage.type.function.arrow #FAD000 —
string, punctuation.definition.string #A5FF90 —
string.template, punctuation.definition.string.template #3AD900 —
support.variable.property.dom #9EFFFF —
source.ini entity, meta.embedded.block.ini, source.ini #E1EFFF —
source.ini keyword, keyword.other.definition.ini #FAD000 —
source.ini punctuation.definition #FFEE80 —
source.ini punctuation.separator, punctuation.separator.key-value.ini #FF9D00 —
source.css entity, source.stylus entity #3AD900 —
entity.other.attribute-name.class.css #9EFFFF —
entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css #FFB454 —
source.css support, entity.name.tag.css, source.stylus support #A5FF90 —
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant #FFEE80 —
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string #FFEE80 —
source.css variable, source.stylus variable #9EFFFF —
text.html.basic entity.name, punctuation.definition.tag.html, entity.name.tag.inline.any.html, meta.tag.other.html, meta.tag.inline.any.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.tag, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html #9EFFFF —
meta.toc-list.id.html #A5FF90 —
text.html.basic entity.other #FAD000 —
meta.tag.metadata.script.html entity.name.tag.html #FAD000 —
punctuation.definition.string.begin, punctuation.definition.string.end #92FC79 —
meta.tag.inline.any.html, meta.tag.other #FF9D00 —
source.json support #FAD000 —
source.json string, source.json punctuation.definition.string #92FC79 —
source.js storage.type.function #FB94FF —
variable.language, entity.name.type.class.js #FB94FF —
entity.other.inherited-class #FFEE80 —
storage.type.extends.js, storage.type.class.jsdoc #FF9D00 —
punctuation.definition.block.tag.jsdoc #FF9D00 —
variable.other.jsdoc, entity.name.type.instance.jsdoc #9EFFFF —
variable.other.constant #9EFFFF —
punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js #9EFFFF —
meta.jsx.children.js #FFFFFF —
storage.type, storage.type.class, storage.modifier, keyword.control, keyword.operator #FF9D00 —
punctuation.definition.bracket.curly #494685 —
keyword.operator.assignment.tsx, keyword.operator.assignment.jsx #FF9D00 —
keyword.operator.assignment #FF9D00 —
meta.jsx.children.tsx #FFFFFF —
meta.object-literal.key.js #80FFBB —
entity.name.type.class.tsx, entity.name.type.class.jsx, variable.other.readwrite.alias.tsx, variable.other.readwrite.tsx, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.js, variable.other.object.tsx, variable.other.object.jsx, variable.other.object, support.class.component.tsx, support.class.component.jsx, entity.name.type.tsx, entity.name.type.jsx, variable.other.readwrite, variable.other.object.js #9EFFFF —
variable.other.property, variable.other.object.property #FFEE80 —
variable.parameter #9EFFFF —
variable.parameter.function.language.special.self.python #9EFFFF —
meta.function-call.python, meta.function-call.generic.python, support.function.builtin.python #FAD000 —
source.ts entity.name.type #80FFBB —
source.ts keyword #FAD000 —
source.ts punctuation.definition.parameters #E1EFFF —
meta.arrow.ts punctuation.definition.parameters #FFEE80 —
source.ts storage #9EFFFF —
entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #FAD000 bold
markup.inserted.diff, punctuation.definition.inserted.diff #8efa00 —
markup.deleted.diff, punctuation.definition.deleted.diff #F16E6B —
meta.embedded.block.diff #FFFFFF —
meta.paragraph.markdown #FFFFFF —
punctuation.definition.from-file.diff, meta.diff.header.from-file #B362FF —
markup.inline.raw.string.markdown #A599E9 —
beginning.punctuation.definition.quote.markdown #FAD000 —
markup.quote.markdown meta.paragraph.markdown, punctuation.definition.quote.begin.markdown #A599E9 —
meta.separator.markdown #FAD000 —
markup.bold.markdown — bold
markup.italic.markdown — italic
beginning.punctuation.definition.list.markdown, punctuation.definition.list.begin.markdown, markup.list.unnumbered.markdown #FAD000 —
string.other.link.description.title.markdown punctuation.definition.string.markdown, meta.link.inline.markdown string.other.link.description.title.markdown, string.other.link.description.title.markdown punctuation.definition.string.begin.markdown, string.other.link.description.title.markdown punctuation.definition.string.end.markdown, meta.image.inline.markdown string.other.link.description.title.markdown #A5FF90
meta.link.inline.markdown string.other.link.title.markdown, meta.link.reference.markdown string.other.link.title.markdown, meta.link.reference.def.markdown markup.underline.link.markdown #FAD000 underline
markup.underline.link.markdown, string.other.link.description.title.markdown #A599E9 —
fenced_code.block.language, markup.inline.raw.markdown #9EFFFF —
punctuation.definition.markdown, punctuation.definition.raw.markdown, punctuation.definition.heading.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown #494685 —
meta.link.inline.markdown punctuation.definition.string.begin.markdown, meta.link.inline.markdown punctuation.definition.string.end.markdown, meta.link.reference.markdown punctuation.definition.string.begin.markdown, meta.link.reference.markdown punctuation.definition.string.end.markdown, string.other.link.description.markdown #FAD000 —
meta.image.inline.markdown punctuation.definition.string.begin.markdown, meta.image.inline.markdown punctuation.definition.string.end.markdown, string.other.link.description.markdown #FF9D00 —
markup.underline.link.markdown, punctuation.definition.metadata.markdown, markup.underline.link.image.markdown, constant.other.reference.link.markdown, punctuation.definition.constant.markdown, punctuation.definition.constant.begin.markdown, punctuation.definition.constant.end.markdown #A599E9 —
text.jade entity.name #9EFFFF —
storage.type.function.pug #FF9D00 —
variable.parameter.function.js #9EFFFF —
variable.control.import.include.pug #92FC79 —
text.jade string.interpolated #FFEE80 —
entity.name.variable.property.cs #9EFFFF —
storage.modifier.cs #80FFBB —
source.php entity, variable.other.class.php #9EFFFF —
keyword.other.phpdoc.php #FF9D00 —
entity.name.function.php, support.function.basic_functions.php, meta.function-call.php, variable.other.property #FAD000 —
variable.other.php, punctuation.definition.variable.php, variable.other.global.php, variable.language.this.php #9EFFFF —
storage.modifier.php, keyword.other.namespace.php #FF9D00 —
entity.name.tag.yaml #FAD000 —
punctuation.definition.block.sequence.item.yaml #E1EFFF —
storage.type.function.php, meta.function.parameters.php #FB94FF —
begin.bracket.round.blade.php, end.bracket.round.blade.php #E1EFFF —
support.function.construct.begin.blade, support.function.construct.end.blade #FFEE80 —
keyword.package.go, keyword.import.go #FF9D00 —
keyword.function.go #FB94FF —
variable.other.assignment.go #9EFFFF —
punctuation.definition.string.begin.go, punctuation.definition.string.end.go, support.function.go #FAD000 —
punctuation.section.embedded.end.ruby, punctuation.section.embedded.begin.ruby, punctuation.section.scope.begin.ruby, punctuation.section.scope.end.ruby #FFEE80 —
variable.other.constant.ruby #80FFBB —
entity.name.type.class.ruby #FB94FF —
variable.other.block.ruby, variable.other.ruby #9EFFFF —
punctuation.separator.other.ruby #FF9D00 —
keyword.other.special-method.ruby #FFEE80 —
storage.type.function.shell #FB94FF —
variable.other.special.shell, punctuation.definition.variable.shell #FF9D00 —
keyword.operation.graphql #FB94FF —
source.sql keyword.other, support.function.mysqli.php #FAEFA5 —
support.function.mysqli.php, source.sql support.function #FAD000 —
string.regexp, string.regexp keyword.other #E1EFFF —
keyword.other.DML.sql #FF9D00 —
punctuation.definition.table.array.toml #E1EFFF —
entity.other.attribute-name.table.array.toml, entity.other.attribute-name.table.toml #FF9D00 —
keyword.other.special-method.dockerfile #FAD000 —
keyword.other.rust #FF9D00 —
keyword.other.fn.rust #FB94FF —
keyword.other.env #FF9D00 —
variable.other.env #FAD000 —
keyword.other.template.begin.env, keyword.other.template.end.env, keyword.operator.assignment.env #FF9D00 —
variable.object.property #9EFFFF —
modifier, this, comment, storage.modifier, entity.other.attribute-name, entity.other.attribute-name.html, punctuation.definition.comment, text.html.basic entity.other, entity.other.attribute-name, markup.quote.markdown meta.paragraph.markdown, markup.italic.markdown, text.jade entity.other.attribute-name.tag, keyword.control.from, entity.other.attribute-name.tag.pug — italic
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 } !` ;
}
Mitheme | Coding Theme