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.activeBorder #e6e6e6 activityBar.background #161616 activityBar.border #27292b activityBar.foreground #d7dae0 activityBarBadge.background #343434 badge.background #161616 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle meta.embedded, source.groovy.embedded #C1ECE4 — emphasis — italic strong — bold header #000080 — comment #606060 —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Space Notion — Space Notion Space Notion | Coding Theme
button.background
#27292b
button.foreground #e6e6e6
checkbox.border #404754
dropdown.background #111111
dropdown.border #111111
dropdown.foreground #e6e6e6
editor.background #1A1D23
editor.findMatchBackground #42557b
editor.findMatchBorder #42557b
editor.findMatchHighlightBackground #6bb7ff2f
editor.foreground #c0c5ce
editor.hoverHighlightBackground #202020
editor.inactiveSelectionBackground #2C333B
editor.lineHighlightBackground #2C333B
editor.lineHighlightBorder #2C333B
editor.rangeHighlightBackground #27292b
editor.selectionBackground #2C333B
editor.selectionHighlightBackground #27292b
editor.wordHighlightBackground #d2e0ff2f
editor.wordHighlightBorder #d7dae0
editor.wordHighlightStrongBackground #abb2bf26
editor.wordHighlightStrongBorder #d7dae0
editorBracketMatch.background #2f2f2f
editorBracketMatch.border #303030
editorCodeLens.foreground #27292b
editorCursor.background #161616
editorCursor.foreground #C1ECE4
editorError.border #27292b
editorError.foreground #FF7A84
editorGroup.border #27292b
editorGroup.dropBackground #3793e01a
editorGroup.emptyBackground #161616
editorGroupHeader.tabsBackground #111111
editorGroupHeader.tabsBorder #27292b
editorGutter.background #1A1D23
editorHoverWidget.background #111111
editorHoverWidget.border #27292b
editorIndentGuide.background1 #2f2f2f
editorLineNumber.activeForeground #e6e6e6
editorLineNumber.foreground #606b76
editorLink.activeForeground #999999
editorMarkerNavigation.background #111111
editorMarkerNavigationError.background #161616
editorMarkerNavigationWarning.background #27292b
editorOverviewRuler.border #27292b
editorOverviewRuler.commonContentForeground #27292b
editorOverviewRuler.currentContentForeground #FF7A84
editorOverviewRuler.incomingContentForeground #73c936
editorRuler.foreground #343434
editorSuggestWidget.background #111111
editorSuggestWidget.border #27292b
editorSuggestWidget.foreground #999999
editorSuggestWidget.selectedBackground #27292b
editorWarning.border #27292b
editorWarning.foreground #FF7A84
editorWhitespace.foreground #65737e
editorWidget.background #111111
editorWidget.border #27292b
errorForeground #FF7A84
focusBorder #666666
foreground #e6e6e6
input.background #27292bd3
input.foreground #e6e6e6
input.placeholderForeground #999999
inputOption.activeBorder #343434
inputValidation.errorBorder #FF7A84
inputValidation.infoBorder #b392f0
inputValidation.warningBorder #FF9800
list.activeSelectionBackground #27292b
list.activeSelectionForeground #e6e6e6
list.dropBackground #111111
list.errorForeground #FF7A84
list.focusBackground #27292b
list.highlightForeground #96a6c8
list.hoverBackground #27292b
list.inactiveSelectionBackground #27292b
list.inactiveSelectionForeground #e6e6e6
list.warningForeground #FF9800
menu.background #111111
menu.border #343434
menu.selectionBackground #27292b
menu.separatorBackground #303030
notificationCenter.border #343434
notifications.background #111111
notifications.border #343434
notifications.foreground #ffffff
notificationToast.border #343434
panelSectionHeader.background #111111
panelTitle.activeBorder #e6e6e6
peekView.border #343434
peekViewEditor.background #111111
peekViewEditor.matchHighlightBackground #3793e033
peekViewResult.background #111111
peekViewResult.fileForeground #e6e6e6
peekViewResult.lineForeground #e6e6e6
peekViewResult.matchHighlightBackground #3793e033
peekViewResult.selectionBackground #23252c
peekViewResult.selectionForeground #e6e6e6
peekViewTitle.background #23252c
peekViewTitleDescription.foreground #79b8ff
peekViewTitleLabel.foreground #e6e6e6
scrollbar.shadow #161616
scrollbarSlider.activeBackground #3c3f42cc
scrollbarSlider.background #d2e0ff2f
scrollbarSlider.hoverBackground #5b646c
selection.background #61afef40
sideBar.background #111111
sideBar.border #27292b
sideBar.foreground #e6e6e6
sideBarSectionHeader.background #161616
sideBarSectionHeader.border #27292b
sideBarSectionHeader.foreground #e6e6e6
sideBarTitle.foreground #e6e6e6
statusBar.background #111111
statusBar.border #27292b
statusBar.foreground #e6e6e6
statusBar.noFolderBackground #111111
statusBar.noFolderForeground #e6e6e6
statusBarItem.prominentBackground #FF7A84
statusBarItem.prominentHoverBackground #FF9800
statusBarItem.remoteBackground #BB80B0
statusBarItem.remoteForeground #ffffff
tab.activeBackground #363636e6
tab.activeForeground #e6e6e6
tab.border #27292b
tab.inactiveBackground #111111
tab.inactiveForeground #8a8a8a
tab.unfocusedActiveForeground #e6e6e6
tab.unfocusedInactiveForeground #757575
tab.unfocusedInactiveModifiedBorder #FF7A84
terminal.background #1A1D23
terminal.border #2f2f2f
terminal.foreground #bdbdbd
terminal.selectionBackground #303030
textLink.foreground #79b8ff
titleBar.activeBackground #111111
titleBar.activeForeground #e6e6e6
titleBar.border #27292b
titleBar.inactiveBackground #161616
titleBar.inactiveForeground #999999
walkThrough.embeddedEditorBackground #2e3440 constant.language #FF9999 —
entity.name.tag.css #FF9999 —
entity.other.attribute-name #FFCC99 —
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss #FF9999 —
markup.underline — underline
markup.heading #FF9999 bold
beginning.punctuation.definition.quote.markdown #606060 —
beginning.punctuation.definition.list.markdown #66CC99 —
markup.inline.raw #99CCFF —
punctuation.definition.tag #E0E0E0 —
meta.preprocessor #FF9999 —
meta.preprocessor.string #99CCFF —
meta.preprocessor.numeric #99CCFF —
meta.structure.dictionary.key.python #FFCC99 —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #FF9999 —
meta.template.expression #E0E0E0 —
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded #FFCC99 —
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python #FF9999 —
keyword.other.unit #99CCFF —
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php #FF9999 —
support.function.git-rebase #FFCC99 —
constant.sha.git-rebase #99CCFF —
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java #E0E0E0 —
variable.language #FF9999 —
entity.name.function, support.function, support.constant.handlebars #CC99CC —
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy #66CCCC —
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class #66CCCC —
variable, meta.definition.variable.name, support.variable, entity.name.variable #FFCC99 —
meta.object-literal.key #FFCC99 —
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color #99CCFF —
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp #99CCFF —
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp #99CCFF —
keyword.operator.or.regexp, keyword.control.anchor.regexp #99CCFF —
keyword.operator.quantifier.regexp #99CCFF —
constant.character #FF9999 —
constant.character.escape #99CCFF —
token.error-token #FF6666 —
token.debug-token #CC66CC —
entity.name.variable #E0E0E0 —
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 } !` ;
}