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 #21252b activityBar.border #1c1d21 activityBar.dropBackground #42a5f5 activityBar.foreground #959caa activityBarBadge.background #959caa activityBarBadge.foreground #1c1d21 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle Global settings #cbcdd2 — comment #686b78 — string #4fb4d8 — string.quoted #4fb4d8 — support.constant.math
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
badge.background
#959caa
badge.foreground #1c1d21
button.background #93ef1f
button.foreground #1c1d21
button.hoverBackground #93ef1f
contrastBorder #1c1d21
debugExceptionWidget.background #1c1d21
debugExceptionWidget.border #42a5f5
debugToolBar.background #1c1d21
diffEditor.insertedTextBackground #87dd1c
diffEditor.insertedTextBorder #87dd1c
diffEditor.removedTextBackground #d93154
diffEditor.removedTextBorder #d93154
dropdown.background #1c1d21
dropdown.border #3f4044
dropdown.foreground #cbcdd2
editor.background #282c34
editor.findMatchHighlightBackground #2f3137
editor.findRangeHighlightBackground #2f3137
editor.foreground #cbcdd2
editor.hoverHighlightBackground #2f3137
editor.inactiveSelectionBackground #25272d
editor.lineHighlightBackground #2c313a
editor.lineHighlightBorder #2f3137
editor.rangeHighlightBackground #2f3137
editor.selectionBackground #3e4451
editor.selectionHighlightBackground #2f3137
editor.wordHighlightBackground #2f3137
editor.wordHighlightStrongBackground #2f3137
editorCursor.foreground #42a5f5
editorError.foreground #eb365d
editorGroup.background #21252b
editorGroup.border #181a1f
editorGroupHeader.tabsBackground #21252b
editorGroupHeader.tabsBorder #1c1d21
editorGutter.addedBackground #93ef1f
editorGutter.deletedBackground #eb365d
editorGutter.modifiedBackground #ffca2a
editorHoverWidget.background #1c1d21
editorHoverWidget.border #42a5f5
editorIndentGuide.background #686b78
editorLineNumber.foreground #686b78
editorMarkerNavigation.background #1c1d21
editorMarkerNavigationError.background #eb365d
editorMarkerNavigationWarning.background #ef7c2a
editorOverviewRuler.commonContentForeground #42a5f5
editorOverviewRuler.currentContentForeground #42a5f5
editorOverviewRuler.incomingContentForeground #42a5f5
editorRuler.foreground #686b78
editorWarning.foreground #93ef1f
editorWidget.background #1c1d21
errorForeground #eb365d
extensionButton.prominentBackground #42a5f5
extensionButton.prominentForeground #1c1d21
extensionButton.prominentHoverBackground #42a5f5
focusBorder #1c1d21
foreground #cbcdd2
input.border #42a5f5
input.foreground #cbcdd2
input.placeholderForeground #cbcdd2
inputOption.activeBorder #cbcdd2
inputValidation.errorBackground #eb365d
inputValidation.errorBorder #eb365d
inputValidation.infoBackground #42a5f5
inputValidation.infoBorder #42a5f5
inputValidation.warningBackground #ef7c2a
inputValidation.warningBorder #ef7c2a
list.activeSelectionBackground #3f4044
list.activeSelectionForeground #cbcdd2
list.focusBackground #494a4e
list.focusForeground #cbcdd2
list.highlightForeground #cbcdd2
list.hoverBackground #494a4e
list.hoverForeground #cbcdd2
list.inactiveSelectionBackground #3f4044
list.inactiveSelectionForeground #cbcdd2
merge.currentHeaderBackground #42a5f5
merge.incomingHeaderBackground #42a5f5
notification.background #1c1d21
notification.buttonForeground #1c1d21
notification.errorBackground #eb365d
notification.errorForeground #1c1d21
notification.foreground #cbcdd2
notification.infoBackground #42a5f5
notification.infoForeground #1c1d21
notification.warningBackground #ef7c2a
notification.warningForeground #1c1d21
panel.background #21252b
panel.border #181a1f
panelTitle.activeBorder #42a5f5
panelTitle.activeForeground #cbcdd2
peekView.border #42a5f5
peekViewEditor.matchHighlightBackground #2f3137
peekViewResult.fileForeground #cbcdd2
peekViewResult.lineForeground #cbcdd2
peekViewResult.matchHighlightBackground #2f3137
peekViewResult.selectionForeground #cbcdd2
peekViewTitle.background #1c1d21
peekViewTitleLabel.foreground #cbcdd2
pickerGroup.foreground #42a5f5
progressBar.background #42a5f5
scrollbarSlider.activeBackground #747d9180
scrollbarSlider.background #4e566680
scrollbarSlider.hoverBackground #5a637580
sideBar.background #21252b
sideBar.border #1c1d21
sideBar.foreground #cbcdd2
sideBarSectionHeader.background #333842
sideBarSectionHeader.foreground #cbcdd2
sideBarTitle.foreground #cbcdd2
statusBar.background #21252b
statusBar.border #1c1d21
statusBar.foreground #9da5b4
statusBar.noFolderBackground #1c1d21
tab.activeBackground #282c34
tab.activeBorder #282c34
tab.activeForeground #cbcdd2
tab.border #1c1d21
tab.inactiveBackground #21252b
tab.inactiveForeground #686b78
tab.unfocusedActiveBorder #1c1d21
terminal.ansiBlack #333842
terminal.ansiBlue #42a5f5
terminal.ansiBrightBlack #333842
terminal.ansiBrightBlue #42a5f5
terminal.ansiBrightCyan #42a5f5
terminal.ansiBrightGreen #93ef1f
terminal.ansiBrightMagenta #93ef1f
terminal.ansiBrightRed #eb365d
terminal.ansiBrightWhite #cbcdd2
terminal.ansiBrightYellow #ffca2a
terminal.ansiCyan #42a5f5
terminal.ansiGreen #93ef1f
terminal.ansiMagenta #eb365d
terminal.ansiRed #eb365d
terminal.ansiWhite #cbcdd2
terminal.ansiYellow #ffca2a
titleBar.activeBackground #21252b
titleBar.activeForeground #9da5b4
titleBar.inactiveBackground #21252b
titleBar.inactiveForeground #9da5b4
#e5cd52
constant.numeric, constant.character.numeric #ef7c2a —
constant.language, punctuation.definition.constant, variable.other.constant #e5cd52 —
constant.character, constant.other #e5cd52 —
constant.character.escape #ef7c2a —
string.regexp, string.regexp keyword.other #4fb4d8 —
meta.function punctuation.separator.comma #cbcdd2 —
punctuation.accessor, keyword #78bd65 —
storage.type, meta.var.expr storage.type, meta.class meta.method.declaration meta.var.expr storage.type.js #eb3d54 —
entity.name.class, meta.class entity.name.type.class #e5cd52 —
entity.other.inherited-class #4fb4d8 —
entity.name.function #e5cd52 —
variable.parameter #4fb4d8 —
punctuation.definition.tag, meta.tag #cbcdd2 —
support.class.component, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, meta.tag.js, meta.tag.tsx, meta.tag.html #eb3d54 —
entity.name.tag.tsx, entity.name.tag.js, entity.name.tag #eb3d54 —
entity.other.attribute-name #e5cd52 —
entity.name.tag.custom #e5cd52 —
support.function, support.constant #e5cd52 —
support.constant.meta.property-value #ef7c2a —
support.type, support.class #e5cd52 —
support.variable.dom #e5cd52 —
invalid.deprecated #cbcdd2 —
keyword.operator.relational #78bd65 —
keyword.operator.assignment #78bd65 —
comment.line.double-slash #686b78 —
constant.language.null #ef7c2a —
meta.delimiter.period #78bd65 —
constant.language.boolean #ef7c2a —
variable.parameter.function #ef7c2a —
support.type.vendored.property-name, support.constant.vendored.property-value, support.type.property-name, meta.property-list entity.name.tag #4fb4d8 —
meta.property-list entity.name.tag.reference #eb3d54 —
constant.other.color.rgb-value punctuation.definition.constant #ef7c2a —
constant.other.color #78bd65 —
keyword.other.unit #78bd65 —
entity.other.attribute-name.id #e5cd52 —
meta.property-name #4fb4d8 —
entity.name.tag.doctype, meta.tag.sgml.doctype #78bd65 —
punctuation.definition.parameters #cbcdd2 —
keyword.control.operator #ef7c2a —
keyword.operator.logical #78bd65 —
variable.instance, variable.other.instance, variable.reaedwrite.instance, variable.other.readwrite.instance #eb3d54 —
variable.other.property, variable.other.object.property #ef7c2a —
entity.name.function #e5cd52 —
keyword.operator.comparison #78bd65 —
support.constant, keyword.other.special-method, keyword.other.new #ef7c2a —
invalid.unimplemented #cbcdd2 —
variable.language #eb3d54 —
support.variable.property #ef7c2a —
variable.function #e5cd52 —
variable.interpolation #eb3d54 —
meta.function-call #e5cd52 —
punctuation.section.embedded #eb3d54 —
string.template meta.template.expression #eb3d54 —
variable.assignment.coffee #ef7c2a —
variable.parameter.function.coffee #cbcdd2 —
variable.assignment.coffee #ef7c2a —
variable.other.readwrite.cs #cbcdd2 —
entity.name.type.class.cs, storage.type.cs #e5cd52 —
entity.name.type.namespace.cs #78bd65 —
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css #eb3d54 —
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass #eb3d54 —
keyword.other.unit.css #78bd65 —
meta.attribute-selector.css entity.other.attribute-name.attribute #ef7c2a —
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir #e5cd52 —
source.elixir entity.name.function #e5cd52 —
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir #e5cd52 —
source.elixir punctuation.definition.string #4fb4d8 —
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir #e5cd52 —
source.elixir .punctuation.binary.elixir #78bd65 —
source.go meta.function-call.go #e5cd52 —
entity.other.attribute-name.id.html #e5cd52 —
punctuation.definition.tag.html #ef7c2a —
meta.tag.sgml.doctype.html #78bd65 —
meta.class entity.name.type.class.js #e5cd52 —
meta.method.declaration storage.type.js #e5cd52 normal
meta.js punctuation.definition.js #cbcdd2 —
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc #cbcdd2 —
variable.other.jsdoc, variable.other.phpdoc #4fb4d8 —
variable.other.meta.import.js, meta.import.js variable.other #cbcdd2 —
variable.parameter.function.js #4fb4d8 —
variable.other.readwrite.js #cbcdd2 —
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx #cbcdd2 —
variable.js, variable.other.js #cbcdd2 —
entity.name.type.js, entity.name.type.module.js #e5cd52 —
support.type.property-name.json #eb3d54 —
support.constant.json #e5cd52 —
meta.structure.dictionary.value.json string.quoted.double #4fb4d8 —
string.quoted.double.json punctuation.definition.string.json #4fb4d8 —
meta.structure.dictionary.json meta.structure.dictionary.value constant.language #ef7c2a —
variable.other.ruby #cbcdd2 —
constant.language.symbol.hashkey.ruby #ef7c2a —
entity.name.tag.less #eb3d54 —
keyword.other.unit.css #78bd65 —
meta.attribute-selector.less entity.other.attribute-name.attribute #ef7c2a —
markup.heading.markdown #e5cd52 —
markup.italic.markdown #78bd65 italic
markup.bold.markdown #e5cd52 bold
markup.quote.markdown #4fb4d8 italic
markup.inline.raw.markdown #4fb4d8 —
markup.underline.link.markdown, markup.underline.link.image.markdown #4fb4d8 —
string.other.link.title.markdown, string.other.link.description.markdown #cbcdd2 —
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string #e5cd52 —
punctuation.definition.metadata.markdown #eb3d54 —
beginning.punctuation.definition.list.markdown #e5cd52 —
support.class.php #e5cd52 —
meta.function-call.php punctuation #cbcdd2 —
variable.other.global.php #e5cd52 —
variable.other.global.php punctuation.definition.variable #e5cd52 —
constant.language.python #ef7c2a —
variable.parameter.function.python, meta.function-call.arguments.python #4fb4d8 —
punctuation.python #cbcdd2 —
entity.name.function.decorator.python #e5cd52 —
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable #e5cd52 —
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute #ef7c2a —
entity.name.tag.scss, entity.name.tag.sass #eb3d54 —
keyword.other.unit.scss, keyword.other.unit.sass #78bd65 —
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts #cbcdd2 —
entity.name.type.ts, entity.name.type.tsx #e5cd52 —
support.class.node.ts, support.class.node.tsx #e5cd52 —
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type #cbcdd2 —
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block #cbcdd2 —
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx #e5cd52 —
meta.jsx.children.tsx, meta.tag.js meta.jsx.children.tsx #e5cd52 —
entity.name.tag.yaml #ef7c2a —
meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.increment, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.operator, keyword.operator.or.regexp, punctuation.definintion.string, punctuation — normal
meta.import.ts meta.block.ts variable.other.readwrite.alias.ts, meta.import.tsx meta.block.tsx variable.other.readwrite.alias.tsx, meta.import.js variable.other, entity.name.function.ts, entity.name.function.tsx, support.type.primitive, entity.name.tag.yaml, meta.tag.sgml.doctype.html, entity.name.tag.doctype, meta.tag.sgml.doctype, entity.other.attribute-name, entity.name.tag.custom, source.js.jsx keyword.control.flow.js, support.type.property.css, support.function.basic_functions, variable.assignment.coffee, support.function.basic_functions, keyword.operator.expression.typeof, keyword.operator.type.annotation, assignment.coffee, entity.name.type.ts, support.constant.math, meta.object-literal.key, meta.var.expr storage.type, text.html.markdown, parameter, string, italic, quote, keyword, storage, language, type .function, type.function, storage.type.class, type.var, meta.parameter, variable.parameter, meta.parameters, keyword.control, modifier, this, comment — 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 } ! ` ;
}
Milky Way | Coding Theme