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 #457dff activityBar.background #000 activityBar.foreground #a7aec5 activityBarBadge.background #457dff activityBarBadge.foreground #f8fafd badge.background #0b0b0f tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle entity.name.type, entity.other.inherited-class, keyword.other.type, punctuation.definition.annotation, storage.modifier.import, storage.modifier.package, storage.type.annotation, storage.type.built-in, storage.type.generic, storage.type.java, storage.type.groovy, storage.type.primitive, support.class, support.other.namespace, support.type, variable.language.this #DDE49E — constant.other.character-class, entity.name.tag, heading, meta.object-literal.key, punctuation.definition.list.begin.markdown, punctuation.definition.list.end.markdown, punctuation.definition.template-expression, punctuation.section.embedded, support.type.property-name, variable.object.property, variable.other.enummember #CE7A79 — constant.character.escape, keyword.operator, markup.underline.link, string.regexp, string.url #76c8d3 —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Space Invader - Black — Space Invader - Black
button.background
#0b0b0f
debugToolBar.background #0b0b0f
diffEditor.insertedTextBackground #00809b33
dropdown.background #0b0b0f
dropdown.border #0b0b0f
editor.background #000
editor.findMatchBackground #12141b
editor.findMatchBorder #457dff
editor.findMatchHighlightBackground #528bff3d
editor.foreground #abb2bf
editor.lineHighlightBackground #0b0b0f
editor.selectionBackground #4d566960
editor.selectionHighlightBackground #ffffff10
editor.selectionHighlightBorder #dddddd
editor.wordHighlightBackground #0b0b0f
editor.wordHighlightBorder #7f848e
editor.wordHighlightStrongBackground #abb2bf26
editor.wordHighlightStrongBorder #7f848e
editorBracketMatch.background #515a6b
editorBracketMatch.border #515a6b
editorCursor.background #ffffffc9
editorCursor.foreground #457dff
editorError.foreground #ff000055
editorGroup.border #181a1f
editorGroup.emptyBackground #181a1f
editorGroupHeader.tabsBackground #0b0b0f
editorHoverWidget.background #232634
editorHoverWidget.border #181a1f
editorIndentGuide.activeBackground #c8c8c859
editorIndentGuide.background #3b4048
editorInfo.foreground #00ff0055
editorInlayHint.background #FFFFFF33
editorInlayHint.foreground #FFFFFFcc
editorLineNumber.activeForeground #737984
editorLineNumber.foreground #495162
editorMarkerNavigation.background #abb2bf26
editorRuler.foreground #ffffff11
editorSuggestWidget.background #12141b
editorSuggestWidget.border #181a1f
editorSuggestWidget.selectedBackground #2c313a
editorWarning.foreground #ffe60055
editorWhitespace.foreground #3b4048
editorWidget.background #12141b
focusBorder #3d558b
input.background #1d1f23
list.activeSelectionBackground #3d558b
list.activeSelectionForeground #ffffff
list.focusBackground #001233
list.highlightForeground #c5c5c5
list.hoverBackground #ffffff0a
list.inactiveSelectionBackground #232831
list.inactiveSelectionForeground #d7dae0
menu.foreground #c8c8c8
panel.border #181a1f
panelTitle.activeBorder #457dff
peekViewEditor.background #1b1d23
peekViewEditor.matchHighlightBackground #29244b
peekViewResult.background #22262b
scrollbarSlider.activeBackground #747d9180
scrollbarSlider.background #4e566660
scrollbarSlider.hoverBackground #5a637580
sideBar.background #000
sideBar.border #0b0b0f
sideBarSectionHeader.background #0b0b0f
statusBar.background #000
statusBar.debuggingBackground #457dff
statusBar.debuggingBorder #6e97dd
statusBar.debuggingForeground #ffffff
statusBar.foreground #9da5b4
statusBar.noFolderBackground #1b1d23
statusBarItem.hoverBackground #2c313a
statusBarItem.remoteBackground #6797e9
statusBarItem.remoteForeground #f8fafd
tab.activeBackground #000
tab.activeBorder #457dff
tab.activeForeground #dcdcdc
tab.border #181a1f
tab.hoverBackground #12141b
tab.inactiveBackground #12141b
tab.unfocusedHoverBackground #12141b
terminal.ansiBlack #2d3139
terminal.ansiBlue #61afef
terminal.ansiBrightBlack #7f848e
terminal.ansiBrightBlue #528bff
terminal.ansiBrightCyan #56b6c2
terminal.ansiBrightGreen #98c379
terminal.ansiBrightMagenta #7e0097
terminal.ansiBrightRed #f05757
terminal.ansiBrightWhite #d7dae0
terminal.ansiBrightYellow #e5c07b
terminal.ansiCyan #56b6c2
terminal.ansiGreen #98c379
terminal.ansiMagenta #c678dd
terminal.ansiRed #e06c75
terminal.ansiWhite #d7dae0
terminal.ansiYellow #e5c07b
terminal.foreground #c8c8c8
textLink.foreground #61afef
titleBar.activeBackground #000
titleBar.activeForeground #9da5b4
titleBar.border #000
titleBar.inactiveBackground #000
titleBar.inactiveForeground #6b717d entity.name.function, entity.other.attribute-name.id.css, string.other.link, support.function, variable.language.super
punctuation.separator, support.type.property-name.css #99A0B8 —
markup.inline, markup.quote, source.ini, string.other.link.description, string #88D687 —
keyword.operator.new, keyword, markup.italic, storage.modifier, storage.type #CCA5F7 —
constant, entity.other.attribute-name, keyword.operator.quantifier.regexp, markup.bold, support.constant, variable.other.constant, variable.parameter #E8B28D —
markup.quote, markup.italic — italic
heading, markup.bold — bold
comment, keyword, markup.underline.link, storage.modifier, storage.type, string.url, variable.language.super, variable.language.this — italic
keyword.operator, keyword.other.type, storage.modifier.import, storage.modifier.package, storage.type.built-in, storage.type.function.arrow, storage.type.generic, storage.type.java, storage.type.primitive —
token.error-token #f05050 —
token.debug-token #c07ef0 —
meta.template.expression #abb2bf —
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 } !` ;
}
Space Invader - Black | Coding Theme