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 #4f46e5 activityBar.background #111827 activityBar.dropBackground #ffffff10 activityBar.foreground #f8f8f2 activityBarBadge.background #8b5cf6 badge.background #4f46e5 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #f9fafb — meta.embedded, source.groovy.embedded, string meta.image.inline.markdown #f9fafb — comment, punctuation.definition.comment #6b7280 — string #a78bfa — punctuation.definition.template-expression, punctuation.section.embedded
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
badge.foreground
#f9fafb
button.background #4f46e5
button.foreground #f9fafb
button.hoverBackground #6366f1
debugToolBar.background #34244d
diffEditor.insertedTextBackground #0c4a6e70
diffEditor.removedTextBackground #ef444450
diffEditorGutter.insertedLineBackground #0c4a6e70
diffEditorGutter.removedLineBackground #ef444450
dropdown.background #111827
dropdown.listBackground #111827
editor.background #111827
editor.foreground #f9fafb
editor.lineHighlightBackground #ffffff10
editor.selectionBackground #ffffff35
editor.selectionHighlightBackground #575b6180
editorCursor.foreground #f8f8f0
editorGroup.border #111827
editorGroup.dropBackground #ffffff10
editorGroupHeader.tabsBackground #111827
editorGutter.addedBackground #8b5cf6
editorGutter.background #111827
editorGutter.deletedBackground #ec4899
editorGutter.modifiedBackground #4f46e5
editorHoverWidget.background #111827
editorHoverWidget.border #d1d5db
editorIndentGuide.activeBackground #6366f1
editorIndentGuide.background #4b5563
editorLineNumber.activeForeground #6366f1
editorLineNumber.foreground #4b5563
editorSuggestWidget.background #1f2937
editorSuggestWidget.border #d1d5db
editorWhitespace.foreground #4b5563
editorWidget.background #111827
explorer.foreground #ef4444
focusBorder #111827
gitDecoration.addedResourceForeground #818cf8
gitDecoration.conflictingResourceForeground #a5b4fc
gitDecoration.deletedResourceForeground #ef4444
gitDecoration.ignoredResourceForeground #4b5563
gitDecoration.modifiedResourceForeground #8b5cf6
gitDecoration.renamedResourceForeground #a5b4fc
gitDecoration.stageDeletedResourceForeground #a5b4fc
gitDecoration.stageModifiedResourceForeground #a5b4fc
gitDecoration.submoduleResourceForeground #a5b4fc
gitDecoration.untrackedResourceForeground #c7d2fe
input.background #1f2937
inputOption.activeBorder #d1d5db
inputValidation.errorBackground #90274A
inputValidation.errorBorder #d1d5db
inputValidation.infoBackground #546190
inputValidation.infoBorder #d1d5db
inputValidation.warningBackground #848528
inputValidation.warningBorder #d1d5db
list.activeSelectionBackground #1f2937
list.dropBackground #ffffff10
list.errorForeground #ef4444
list.highlightForeground #f8f8f2
list.hoverBackground #1f2937
list.inactiveSelectionBackground #111827
list.warningForeground #eab308
menu.background #111827
menu.foreground #cccccc
minimap.selectionHighlight #ffffff35
notebook.cellBorderColor #111827
notebook.cellEditorBackground #1f2937
notebook.cellHoverBackground #1f2937
notebook.cellInsertionIndicator #ffffff
notebook.focusedCellBackground #1f2937
notebook.focusedCellBorder #4f46e5
notebook.focusedEditorBorder #4f46e5
panel.background #111827
panel.border #4f46e5
panelTitle.activeBorder #4f46e5
panelTitle.activeForeground #f9fafb
panelTitle.inactiveForeground #6b7280
peekView.border #6366f1
peekViewEditor.background #1f2937
peekViewEditor.matchHighlightBackground #75715E
peekViewResult.background #111827
peekViewResult.matchHighlightBackground #75715E
peekViewResult.selectionBackground #111827
peekViewTitle.background #111827
pickerGroup.foreground #75715E
ports.iconRunningProcessForeground #ccccc7
progressBar.background #4f46e5
quickInput.background #1f2937
quickInput.foreground #f3f4f6
quickInputList.focusBackground #111827
selection.background #ffffff35
settings.focusedRowBackground #1f2937
sideBar.background #111827
sideBar.foreground #9ca3af
sideBarSectionHeader.background #111827
statusBar.background #111827
statusBar.border #111827
statusBar.debuggingBackground #f56565
statusBar.debuggingBorder #f56565
statusBar.debuggingForeground #f8f8f2
statusBar.foreground #f8f8f2
statusBar.noFolderBackground #111827
statusBar.noFolderBorder #111827
statusBar.noFolderForeground #f8f8f2
statusBarItem.errorBackground #f56565
statusBarItem.errorForeground #f9fafb
statusBarItem.prominentBackground #4f46e5
statusBarItem.prominentForeground #f9fafb
statusBarItem.prominentHoverBackground #6366f1
statusBarItem.remoteBackground #4f46e5
statusBarItem.remoteForeground #f9fafb
statusBarItem.warningBackground #4f46e5
statusBarItem.warningForeground #f9fafb
tab.activeBorder #4f46e5
tab.activeForeground #f9fafb
tab.border #111827
tab.inactiveBackground #111827
tab.inactiveForeground #ccccc7
tab.lastPinnedBorder #d1d5db
terminal.ansiBlack #616161
terminal.ansiBlue #3b82f6
terminal.ansiBrightBlack #616161
terminal.ansiBrightBlue #2563eb
terminal.ansiBrightCyan #06b6d4
terminal.ansiBrightGreen #a3e635
terminal.ansiBrightMagenta #7c3aed
terminal.ansiBrightRed #dc2626
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #facc15
terminal.ansiCyan #0891b2
terminal.ansiGreen #84cc16
terminal.ansiMagenta #8b5cf6
terminal.ansiRed #ef4444
terminal.ansiWhite #f9fafb
terminal.ansiYellow #eab308
titleBar.activeBackground #111827
titleBar.activeForeground #f9fafb
titleBar.inactiveBackground #111827
titleBar.inactiveForeground #6b7280
widget.shadow #00000098 meta.template.expression #F8F8F2 —
punctuation.definition, punctuation.separator, punctuation.terminator, punctuation.accessor.optional.js.jsx #6b7280 —
constant.language, keyword.operator.ternary.jsx, meta.brace.round.jsx, meta.brace.square.jsx, punctuation.definition.block.jsx, punctuation.definition.binding-pattern.object.jsx, punctuation.definition.template-expression.begin.jsx, punctuation.definition.template-expression.end.jsx, keyword.operator.ternary.js, meta.brace.round.js, meta.brace.square.js, punctuation.definition.block.js, punctuation.definition.binding-pattern.object.js, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js, keyword.operator.ternary.ts, meta.brace.round.ts, meta.brace.square.ts, punctuation.definition.block.ts, punctuation.definition.binding-pattern.object.ts, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, keyword.operator.ternary.tsx, meta.brace.round.tsx, meta.brace.square.tsx, punctuation.definition.block.tsx, punctuation.definition.binding-pattern.object.tsx, punctuation.definition.template-expression.begin.tsx, punctuation.definition.template-expression.end.tsx, punctuation.section.embedded.begin.js, punctuation.section.embedded.end.js, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.section.embedded.begin.ts, punctuation.section.embedded.end.ts, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx #ec4899 —
constant.character, constant.other #f9fafb —
keyword, support.type.property-name.json #818cf8 —
storage.type #818cf8 italic
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution #e9d5ff —
entity.other.inherited-class #e9d5ff italic underline
entity.name.function, meta.function-call.python, new.expr.js #c4b5fd
variable.parameter #f9fafb italic
entity.name.tag, support.class.component.jsx, support.class.component.js, support.class.component.ts, support.class.component.tsx #ec4899
entity.other.attribute-name #818cf8
support.type, support.class #c4b5fd italic
invalid.deprecated #F44747 —
meta.structure.dictionary.json string.quoted.double.json #CFCFC2 —
meta.diff, meta.diff.header #75715E —
constant.numeric.line-number.find-in-files - match #ec4899A0 —
entity.name.filename.find-in-files #FCFD28 —
markup.bold, markup.italic #faf5ff —
markup.heading.setext #ec4899 bold
markup.heading.markdown — bold
markup.quote.markdown #e5e7eb italic
markup.bold.markdown — bold
string.other.link.title.markdown,string.other.link.description.markdown #ec4899 —
markup.underline.link.markdown,markup.underline.link.image.markdown #faf5ff —
markup.italic.markdown — italic
markup.strikethrough — strikethrough
markup.list.unnumbered.markdown, markup.list.numbered.markdown #f8f8f2 —
punctuation.definition.list.begin.markdown #6366f1 —
token.error-token #f44747 —
token.debug-token #b267e6 —
variable.language #EC0095 —
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*
Nightwind | Coding Theme 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 } ! ` ;
}