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 #0C0F14 activityBar.border #10141B activityBar.foreground #7da3c2 activityBarBadge.background #44596b activityBarBadge.foreground #ffffff badge.background #7da3c2 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file #a2bffc — markup.deleted.diff #EF535090 — markup.inserted.diff #c5e478ff — #d6deeb — comment
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Planet Zero — Planet Zero
badge.foreground
#ffffff
breadcrumb.activeSelectionForeground #FFFFFF
breadcrumb.focusForeground #ffffff
breadcrumb.foreground #A599E9
breadcrumbPicker.background #001122
button.background #7e57c2cc
button.foreground #ffffffcc
button.hoverBackground #7e57c2
contrastBorder #122d42
debugExceptionWidget.background #10141B
debugExceptionWidget.border #7da3c2
debugToolBar.background #10141B
diffEditor.insertedTextBackground #99b76d23
diffEditor.insertedTextBorder #c5e47833
diffEditor.removedTextBackground #ef535033
diffEditor.removedTextBorder #ef53504d
dropdown.background #161b22
dropdown.border #7da3c2
dropdown.foreground #ffffffcc
dropdown.listBackground #161b22
editor.background #10141B
editor.findMatchBackground #7da3c279
editor.findMatchHighlightBackground #1085bb5d
editor.foreground #d6deeb
editor.hoverHighlightBackground #7e57c25a
editor.inactiveSelectionBackground #7e57c25a
editor.lineHighlightBackground #0003
editor.rangeHighlightBackground #7e57c25a
editor.selectionBackground #1d3b53
editor.selectionHighlightBackground #7da3c279
editor.wordHighlightBackground #f6bbe533
editor.wordHighlightStrongBackground #e2a2f433
editorBracketMatch.background #7da3c24d
editorCodeLens.foreground #5e82ceb4
editorCursor.foreground #80a4c2
editorError.foreground #EF5350
editorGroup.border #10141B
editorGroup.dropBackground #7e57c273
editorGroup.emptyBackground #181e29
editorGroupHeader.noTabsBackground #10141B
editorGroupHeader.tabsBackground #10141B
editorGroupHeader.tabsBorder #262A39
editorGutter.addedBackground #9CCC65
editorGutter.background #10141B
editorGutter.deletedBackground #EF5350
editorGutter.modifiedBackground #e2b93d
editorHoverWidget.background #10141B
editorHoverWidget.border #7da3c2
editorIndentGuide.activeBackground #7E97AC
editorIndentGuide.background #5e81ce52
editorLineNumber.activeForeground #C5E4FD
editorLineNumber.foreground #4b6479
editorMarkerNavigation.background #1E242E
editorMarkerNavigationError.background #EF5350
editorMarkerNavigationWarning.background #FFCA28
editorOverviewRuler.commonContentForeground #7e57c2
editorOverviewRuler.currentContentForeground #7e57c2
editorOverviewRuler.incomingContentForeground #7e57c2
editorRuler.foreground #5e81ce52
editorSuggestWidget.background #2C3043
editorSuggestWidget.border #2B2F40
editorSuggestWidget.foreground #d6deeb
editorSuggestWidget.highlightForeground #ffffff
editorSuggestWidget.selectedBackground #7da3c2
editorWarning.foreground #b39554
editorWidget.background #021320
editorWidget.border #7da3c2
errorForeground #EF5350
extensionButton.prominentBackground #7e57c2cc
extensionButton.prominentForeground #ffffffcc
extensionButton.prominentHoverBackground #7e57c2
focusBorder #122d42
foreground #d6deeb
gitDecoration.conflictingResourceForeground #ffeb95cc
gitDecoration.deletedResourceForeground #EF535090
gitDecoration.ignoredResourceForeground #395a75
gitDecoration.modifiedResourceForeground #a2bffc
gitDecoration.untrackedResourceForeground #c5e478ff
input.background #0b253a
input.border #7da3c2
input.foreground #ffffffcc
input.placeholderForeground #7da3c2
inputOption.activeBorder #ffffffcc
inputValidation.errorBackground #AB0300F2
inputValidation.errorBorder #EF5350
inputValidation.infoBackground #00589EF2
inputValidation.infoBorder #64B5F6
inputValidation.warningBackground #675700F2
inputValidation.warningBorder #FFCA28
list.activeSelectionBackground #234d708c
list.activeSelectionForeground #ffffff
list.dropBackground #10141B
list.focusBackground #010d18
list.focusForeground #ffffff
list.highlightForeground #ffffff
list.hoverBackground #10141B
list.hoverForeground #ffffff
list.inactiveSelectionBackground #2d3139
list.inactiveSelectionForeground #7da3c2
list.invalidItemForeground #975f94
merge.currentHeaderBackground #7da3c2
merge.incomingHeaderBackground #7e57c25a
notificationCenter.border #262a39
notificationLink.foreground #80CBC4
notifications.background #01111d
notifications.border #262a39
notifications.foreground #ffffffcc
notificationToast.border #262a39
panel.background #10141B
panel.border #7da3c2
panelTitle.activeBorder #7da3c2
panelTitle.activeForeground #ffffffcc
panelTitle.inactiveForeground #d6deeb80
peekView.border #7da3c2
peekViewEditor.background #10141B
peekViewEditor.matchHighlightBackground #7e57c25a
peekViewResult.background #10141B
peekViewResult.fileForeground #7da3c2
peekViewResult.lineForeground #7da3c2
peekViewResult.matchHighlightBackground #ffffffcc
peekViewResult.selectionBackground #2E3250
peekViewResult.selectionForeground #7da3c2
peekViewTitle.background #10141B
peekViewTitleDescription.foreground #697098
peekViewTitleLabel.foreground #7da3c2
pickerGroup.border #10141B
pickerGroup.foreground #d1aaff
scrollbar.shadow #010b14
scrollbarSlider.activeBackground #2d313980
scrollbarSlider.background #2d313980
scrollbarSlider.hoverBackground #305B7B80
selection.background #4373c2
sideBar.background #10141B
sideBar.border #0C0F14
sideBar.foreground #90ACC4
sideBarSectionHeader.background #10141B
sideBarSectionHeader.foreground #7da3c2
sideBarTitle.foreground #7da3c2
statusBar.background #0C0F14
statusBar.border #262A39
statusBar.debuggingBackground #202431
statusBar.debuggingBorder #1F2330
statusBar.foreground #7da3c2
statusBar.noFolderBackground #10141B
statusBar.noFolderBorder #25293A
statusBarItem.activeBackground #202431
statusBarItem.hoverBackground #202431
statusBarItem.prominentBackground #202431
statusBarItem.prominentHoverBackground #202431
tab.activeBackground #1E242E
tab.activeBorder #262A39
tab.activeForeground #d2dee7
tab.border #272B3B
tab.inactiveBackground #0D161E
tab.inactiveForeground #7da3c2
tab.unfocusedActiveBorder #262A39
tab.unfocusedActiveForeground #7da3c2
tab.unfocusedInactiveForeground #7da3c2
terminal.ansiBlack #10141B
terminal.ansiBlue #82AAFF
terminal.ansiBrightBlack #575656
terminal.ansiBrightBlue #82AAFF
terminal.ansiBrightCyan #7fdbca
terminal.ansiBrightGreen #22da6e
terminal.ansiBrightMagenta #C792EA
terminal.ansiBrightRed #EF5350
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #ffeb95
terminal.ansiCyan #21c7a8
terminal.ansiGreen #22da6e
terminal.ansiMagenta #C792EA
terminal.ansiRed #EF5350
terminal.ansiWhite #ffffff
terminal.ansiYellow #c5e478
terminal.selectionBackground #1b90dd4d
terminalCursor.background #234d70
textCodeBlock.background #4f4f4f
titleBar.activeBackground #10141B
titleBar.activeForeground #eeefff
titleBar.inactiveBackground #010e1a
walkThrough.embeddedEditorBackground #10141B
widget.shadow #10141B string.quoted, variable.other.readwrite.js #ecc48d —
support.constant.math #c5e478 —
constant.numeric, constant.character.numeric #F78C6C
constant.language, punctuation.definition.constant, variable.other.constant #82AAFF —
constant.character, constant.other #82AAFF —
constant.character.escape #F78C6C —
string.regexp, string.regexp keyword.other #5ca7e4 —
meta.function punctuation.separator.comma #7da3c2 —
punctuation.accessor, keyword #c792ea
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx #c792ea
storage.type.function.arrow.js —
entity.name.class, meta.class entity.name.type.class #ffcb8b —
entity.other.inherited-class #c5e478 —
entity.name.function #c792ea
punctuation.definition.tag, meta.tag #7fdbca —
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 #65c077
entity.other.attribute-name #c5e478
entity.name.tag.custom #c5e478 —
support.function, support.constant #82AAFF —
support.constant.meta.property-value #7fdbca —
support.type, support.class #c5e478 —
support.variable.dom #c5e478 —
invalid.deprecated #ffffff —
keyword.operator.relational #c792ea
keyword.operator.assignment #c792ea —
keyword.operator.arithmetic #c792ea —
keyword.operator.bitwise #c792ea —
keyword.operator.increment #c792ea —
keyword.operator.ternary #c792ea —
comment.line.double-slash #849d9d —
constant.language.null #ff5874 —
meta.delimiter.period #c792ea
punctuation.definition.string #d9f5dd —
punctuation.definition.string.begin.markdown #ff5874 —
constant.language.boolean #ff5874 —
variable.parameter.function #7fdbca
support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag #80CBC4
meta.property-list entity.name.tag.reference #57eaf1 —
constant.other.color.rgb-value punctuation.definition.constant #F78C6C —
constant.other.color #FFEB95 —
keyword.other.unit #FFEB95 —
entity.other.attribute-name.id #FAD430 —
meta.property-name #80CBC4 —
entity.name.tag.doctype, meta.tag.sgml.doctype #c792ea
punctuation.definition.parameters #d9f5dd —
keyword.control.operator #7fdbca —
keyword.operator.logical #c792ea
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property #7fdbca —
variable.other.object.property #faf39f
variable.other.object.js —
entity.name.function #82AAFF
keyword.control.conditional.js, keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.ruby, keyword.control.def.ruby, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx, keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts, keyword.operator.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx #c792ea
support.constant, keyword.other.special-method, keyword.other.new, keyword.other.debugger, keyword.control #7fdbca —
invalid.unimplemented #ffffff —
variable.language #7fdbca —
support.variable.property #7fdbca —
variable.function #82AAFF —
variable.interpolation #ec5f67 —
meta.function-call #82AAFF —
punctuation.section.embedded #d3423e —
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array #d6deeb —
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list #d9f5dd —
string.template meta.template.expression #d3423e —
string.template punctuation.definition.string #d6deeb —
variable.assignment.coffee #31e1eb —
variable.parameter.function.coffee #d6deeb —
variable.assignment.coffee #7fdbca —
variable.other.readwrite.cs #d6deeb —
entity.name.type.class.cs, storage.type.cs #ffcb8b —
entity.name.type.namespace.cs #B2CCD6 —
string.unquoted.preprocessor.message.cs #d6deeb —
punctuation.separator.hash.cs, keyword.preprocessor.region.cs, keyword.preprocessor.endregion.cs #ffcb8b bold
variable.other.object.cs #B2CCD6 —
entity.name.type.enum.cs #c5e478 —
string.interpolated.single.dart, string.interpolated.double.dart #FFCB8B —
support.class.dart #FFCB8B —
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, support.constant.property-value.css #ff6363
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass #7fdbca —
keyword.other.unit.css #FFEB95 —
meta.attribute-selector.css entity.other.attribute-name.attribute, variable.other.readwrite.js #F78C6C —
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir #82AAFF —
source.elixir entity.name.function #c5e478 —
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir #82AAFF —
source.elixir punctuation.definition.string #c5e478 —
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir #c5e478 —
source.elixir .punctuation.binary.elixir #c792ea
constant.keyword.clojure #7fdbca —
source.go meta.function-call.go #DDDDDD —
source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.struct.go, source.go keyword.interface.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go #c792ea —
source.go constant.language.go, source.go constant.other.placeholder.go #ff5874 —
entity.name.function.preprocessor.cpp, entity.scope.name.cpp #7fdbcaff —
meta.namespace-block.cpp #e0dec6 —
storage.type.language.primitive.cpp #ff5874 —
meta.preprocessor.macro.cpp #d6deeb —
variable.parameter #ffcb8b —
variable.other.readwrite.powershell #82AAFF —
support.function.powershell #7fdbcaff —
entity.other.attribute-name.id.html #c5e478 —
punctuation.definition.tag.html #6ae9f0 —
meta.tag.sgml.doctype.html #c792ea
meta.class entity.name.type.class.js #ffcb8b —
meta.method.declaration storage.type.js #82AAFF —
meta.js punctuation.definition.js #d6deeb —
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc #7da3c2 —
variable.other.jsdoc, variable.other.phpdoc #78ccf0 —
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other #d6deeb —
variable.parameter.function.js #7986E7 —
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx #d6deeb —
variable.js, variable.other.js #d6deeb —
entity.name.type.js, entity.name.type.module.js #ffcb8b
support.type.property-name.json #7fdbca —
support.constant.json #c5e478 —
meta.structure.dictionary.value.json string.quoted.double #c789d6 —
string.quoted.double.json punctuation.definition.string.json #80CBC4 —
meta.structure.dictionary.json meta.structure.dictionary.value constant.language #ff5874 —
variable.other.object.js #7fdbca —
variable.other.ruby #d6deeb —
entity.name.type.class.ruby #ecc48d —
constant.language.symbol.hashkey.ruby #7fdbca —
entity.name.tag.less #7fdbca —
keyword.other.unit.css #FFEB95 —
meta.attribute-selector.less entity.other.attribute-name.attribute #F78C6C —
markup.heading.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #82b1ff —
markup.italic.markdown #c792ea italic
markup.bold.markdown #c5e478 bold
markup.quote.markdown #697098
markup.inline.raw.markdown #80CBC4 —
markup.underline.link.markdown, markup.underline.link.image.markdown #ff869a —
string.other.link.title.markdown, string.other.link.description.markdown #d6deeb —
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string #82b1ff —
punctuation.definition.metadata.markdown #7fdbca —
beginning.punctuation.definition.list.markdown #82b1ff —
markup.inline.raw.string.markdown #c5e478 —
variable.other.php #bec5d4 —
support.class.php #ffcb8b —
meta.function-call.php punctuation #d6deeb —
variable.other.global.php #c5e478 —
variable.other.global.php punctuation.definition.variable #c5e478 —
constant.language.python #ff5874 —
variable.parameter.function.python, meta.function-call.arguments.python #82AAFF —
meta.function-call.python, meta.function-call.generic.python #B2CCD6 —
punctuation.python #d6deeb —
entity.name.function.decorator.python #c5e478 —
source.python variable.language.special #8EACE3 —
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass #c5e478 —
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable #82AAFF —
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable #bec5d4 —
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute #F78C6C —
entity.name.tag.scss, entity.name.tag.sass #7fdbca —
keyword.other.unit.scss, keyword.other.unit.sass #FFEB95 —
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 #d6deeb —
entity.name.type.ts, entity.name.type.tsx #ffcb8b —
support.class.node.ts, support.class.node.tsx #82AAFF —
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type #7da3c2 —
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block #d6deeb —
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx #82AAFF —
meta.tag.js meta.jsx.children.tsx #82AAFF —
entity.name.tag.yaml #7fdbca —
variable.other.readwrite.js, variable.parameter #d7dbe0 —
support.class.component.js, support.class.component.tsx #f78c6c
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx #d6deeb —
meta.class entity.name.type.class.tsx #ffcb8b —
entity.name.type.tsx, entity.name.type.module.tsx #ffcb8b —
meta.class.ts meta.var.expr.ts storage.type.ts, meta.class.tsx meta.var.expr.tsx storage.type.tsx #C792EA —
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx #82AAFF —
meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, meta.brace, keyword.operator.operator, keyword.operator.or.regexp, keyword.operator.expression.in, keyword.operator.relational, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.type, keyword.operator, keyword, punctuation.definintion.string, punctuation, variable.other.readwrite.js, storage.type, source.css, string.quoted —
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 } ! ` ;
}
Planet Zero | Coding Theme