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.activeBackground #241b30 activityBar.background #0f0b14 activityBar.border #0f0b14 activityBar.foreground #f2f2e3 activityBar.inactiveForeground #ffffff66 activityBarBadge.background #aa54f9 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation, meta.brace, constant.character, keyword.operator, storage.type.function.arrow, storage.type.annotation #7f7094 — constant.numeric, keyword.other.unit.hexadecimal #e60a70 — entity.name.function, meta.function-call, meta.method.declaration, support.function #55a8fb — entity.name.type, entity.other.inherited-class, meta.interface, support.type, storage.type.enum, storage.type.primitive, storage.type.string, storage.type.error, storage.type.boolean
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Synthwave Alpha — Synthwave Alpha
activityBarBadge.foreground
#0f0b14
badge.background #6e29ad
badge.foreground #f2f2e3
breadcrumb.activeSelectionForeground #f2f2e3
breadcrumb.background #1a1322
breadcrumb.focusForeground #f2f2e3
breadcrumb.foreground #7f7094
button.background #49226f
button.foreground #f2f2e3
button.hoverBackground #6e29ad
button.secondaryBackground #371f50
button.secondaryForeground #f2f2e3
button.secondaryHoverBackground #49226f
checkbox.background #0f0b14
checkbox.border #00000000
checkbox.foreground #f2f2e3
debugExceptionWidget.background #371f50
debugExceptionWidget.border #00000000
debugToolBar.background #371f50
debugToolBar.border #00000000
diffEditor.border #0f0b14
diffEditor.insertedTextBackground #0ae4a433
diffEditor.insertedTextBorder #00000000
diffEditor.removedTextBackground #e60a7033
diffEditor.removedTextBorder #00000000
dropdown.background #0f0b14
dropdown.border #00000000
dropdown.foreground #f2f2e3
editor.background #241b30
editor.findMatchBackground #00000000
editor.findMatchBorder #00fbfd
editor.findMatchHighlightBackground #f2f2e322
editor.findMatchHighlightBorder #00000000
editor.foldBackground #c488fb11
editor.foreground #f2f2e3
editor.hoverHighlightBackground #46356466
editor.inactiveSelectionBackground #7f709433
editor.lineHighlightBackground #aa54f922
editor.lineHighlightBorder #00000000
editor.rangeHighlightBackground #49549539
editor.rangeHighlightBorder #ffffff00
editor.selectionBackground #aa54f933
editor.selectionHighlightBackground #add6ff26
editor.selectionHighlightBorder #495F77
editor.wordHighlightBackground #46356466
editor.wordHighlightBorder #7059ab66
editor.wordHighlightStrongBackground #0f5075a7
editorBracketMatch.background #49226f
editorBracketMatch.border #00000000
editorCodeLens.foreground #b9b1bc
editorCursor.foreground #f2f2e3
editorError.background #B73A3400
editorError.border #ffffff00
editorError.foreground #e60a70
editorGroup.border #00000000
editorGroup.emptyBackground #241b30
editorGroupHeader.border #0f0b14
editorGroupHeader.tabsBackground #1a1322
editorGroupHeader.tabsBorder #5e373700
editorGutter.addedBackground #00986c
editorGutter.background #241b30
editorGutter.commentRangeForeground #7f7094
editorGutter.deletedBackground #e60a70
editorGutter.foldingControlForeground #f2f2e3
editorGutter.modifiedBackground #6e29ad
editorHoverWidget.background #0f0b14cc
editorHoverWidget.border #50495a
editorHoverWidget.foreground #b9b1bc
editorIndentGuide.activeBackground1 #50495a
editorIndentGuide.background1 #3a3245
editorInfo.background #4490BF00
editorInfo.border #00000000
editorInfo.foreground #75beff
editorLineNumber.activeForeground #b9b1bc
editorLineNumber.foreground #50495a
editorLink.activeForeground #5eb6ff
editorMarkerNavigation.background #2d2d30
editorMarkerNavigationError.background #e60a70
editorMarkerNavigationInfo.background #aa54f9
editorMarkerNavigationWarning.background #f9f972
editorOverviewRuler.background #25252500
editorOverviewRuler.border #7f7f7f4d
editorRuler.foreground #a148ab80
editorSuggestWidget.background #3a3245cc
editorSuggestWidget.border #00000000
editorSuggestWidget.foreground #b9b1bc
editorSuggestWidget.highlightForeground #0ae4a4
editorSuggestWidget.selectedBackground #50495a
editorWarning.background #A9904000
editorWarning.border #ffffff00
editorWarning.foreground #cca700
editorWhitespace.foreground #7f709466
editorWidget.background #1a1322
editorWidget.foreground #b9b1bc
editorWidget.resizeBorder #ffffff44
focusBorder #6e29ad
foreground #b9b1bc
gitDecoration.addedResourceForeground #0ae4a4
gitDecoration.conflictingResourceForeground #55a8fb
gitDecoration.deletedResourceForeground #e60a70
gitDecoration.ignoredResourceForeground #7f7094
gitDecoration.modifiedResourceForeground #aa54f9
gitDecoration.stageDeletedResourceForeground #e60a70
gitDecoration.stageModifiedResourceForeground #c488fb
gitDecoration.submoduleResourceForeground #aa54f9
gitDecoration.untrackedResourceForeground #00986c
icon.foreground #b9b1bc
input.background #0f0b14
input.border #6e29ad
input.foreground #f2f2e3
input.placeholderForeground #7f7094
inputOption.activeBackground #ffffff00
inputOption.activeBorder #9f71c48b
inputOption.activeForeground #aa54f9
list.activeSelectionBackground #371f50
list.activeSelectionForeground #fcfcb9
list.dropBackground #34294f80
list.errorForeground #ee549b
list.focusBackground #ffffff22
list.focusForeground #f2f2e3
list.highlightForeground #00fbfd
list.hoverBackground #37294d99
list.hoverForeground #f2f2e3
list.inactiveSelectionBackground #371f50
list.inactiveSelectionForeground #fcfcb9
list.warningForeground #fcfcb9
listFilterWidget.background #653723
listFilterWidget.noMatchesOutline #be1100
listFilterWidget.outline #00000000
menu.background #1a1322
menu.border #00000000
menu.foreground #b9b1bc
menu.selectionBackground #49226f
menu.selectionBorder #00000000
menu.selectionForeground #fdfdfa
menu.separatorBackground #3a3245
menubar.selectionBackground #1a1322
menubar.selectionBorder #00000000
menubar.selectionForeground #f2f2e3
merge.commonContentBackground #3a324533
merge.commonHeaderBackground #50495a33
merge.currentContentBackground #00986c33
merge.currentHeaderBackground #0ae4a433
merge.incomingContentBackground #6e29ad33
merge.incomingHeaderBackground #aa54f933
minimap.background #241b30
minimap.errorHighlight #f48771
minimap.findMatchHighlight #515c6a66
minimap.selectionHighlight #3a324566
minimap.warningHighlight #cca700
minimapGutter.addedBackground #00986c
minimapGutter.deletedBackground #e60a70
minimapGutter.modifiedBackground #6e29ad
notificationCenter.border #0f0b14
notificationCenterHeader.background #0f0b14
notificationCenterHeader.foreground #b9b1bc
notifications.background #1a1322
notifications.border #3a3245
notifications.foreground #b9b1bc
notificationsErrorIcon.foreground #e60a70
notificationsInfoIcon.foreground #55a8fb
notificationsWarningIcon.foreground #f9f972
notificationToast.border #00000000
panel.background #1a1322
panel.border #80808059
panelSection.border #3a3245
panelTitle.activeBorder #e7e7e7
panelTitle.activeForeground #e7e7e7
panelTitle.inactiveForeground #e7e7e799
peekView.border #aa54f9
peekViewEditor.background #1a1322
peekViewEditor.matchHighlightBackground #f9f97250
peekViewEditor.matchHighlightBorder #f9f97233
peekViewEditorGutter.background #0f0b14
peekViewResult.background #241b30
peekViewResult.fileForeground #b9b1bc
peekViewResult.lineForeground #f2f2e3
peekViewResult.matchHighlightBackground #3a3245
peekViewResult.selectionBackground #49226f
peekViewResult.selectionForeground #f2f2e3
peekViewTitle.background #0f0b14
peekViewTitleDescription.foreground #7f7094
peekViewTitleLabel.foreground #f2f2e3
pickerGroup.border #00000000
pickerGroup.foreground #7f7094
progressBar.background #00fbfd
scrollbar.shadow #583d84
scrollbarSlider.activeBackground #3a3245
scrollbarSlider.background #3a3245
scrollbarSlider.hoverBackground #50495a
selection.background #50495a
settings.focusedRowBackground #ffffff07
settings.headerForeground #b9b1bc
sideBar.background #1a1322
sideBar.border #3a3245
sideBar.dropBackground #34294f80
sideBar.foreground #b9b1bc
sideBarSectionHeader.background #241b30
sideBarSectionHeader.border #00000000
sideBarSectionHeader.foreground #7f7094
sideBarTitle.foreground #b9b1bc
statusBar.background #1a1322
statusBar.debuggingBackground #371f50
statusBar.debuggingBorder #08080f00
statusBar.debuggingForeground #b9b1bc
statusBar.foreground #f2f2e3
statusBar.noFolderBackground #241b2f
statusBar.noFolderForeground #b9b1bc
statusBarItem.errorBackground #9a0048
statusBarItem.errorForeground #f2f2e3
statusBarItem.errorHoverBackground #e60a70
statusBarItem.errorHoverForeground #f2f2e3
statusBarItem.hoverBackground #49226f
statusBarItem.hoverForeground #f2f2e3
statusBarItem.remoteBackground #1a1322
statusBarItem.remoteForeground #f2f2e3
tab.activeBackground #371f50
tab.activeBorder #ff00f6
tab.activeBorderTop #00000000
tab.activeForeground #f2f2e3
tab.border #0f0b14
tab.hoverBackground #37294d99
tab.hoverForeground #ffffff
tab.inactiveBackground #241b30
tab.inactiveForeground #b9b1bc
terminal.ansiBlack #241b30
terminal.ansiBlue #5b169c
terminal.ansiBrightBlack #7f7094
terminal.ansiBrightBlue #aa54f9
terminal.ansiBrightCyan #00fbfd
terminal.ansiBrightGreen #0ae4a4
terminal.ansiBrightMagenta #ff00f6
terminal.ansiBrightRed #e60a70
terminal.ansiBrightWhite #f2f2e3
terminal.ansiBrightYellow #f9f972
terminal.ansiCyan #00b0b1
terminal.ansiGreen #00986c
terminal.ansiMagenta #b300ad
terminal.ansiRed #9a0048
terminal.ansiWhite #b9b1bc
terminal.ansiYellow #adad3e
terminal.border #3a3245
terminal.foreground #b9b1bc
terminal.selectionBackground #ffffff11
terminalCursor.background #6e29ad
terminalCursor.foreground #ffffff
textLink.foreground #55a8fb
titleBar.activeBackground #0f0b14
titleBar.activeForeground #b9b1bc
titleBar.border #00000000
titleBar.inactiveBackground #1a1322
titleBar.inactiveForeground #cccccccc
tree.indentGuidesStroke #3a3245
walkThrough.embeddedEditorBackground #00000050
widget.shadow #0f0b14 #aa54f9
entity.name.module, entity.name.type.package, storage.type.namespace, variable.language.super #0ae4a4 —
constant.language, meta.var.expr, keyword, keyword.operator.expression, keyword.operator.new, storage.modifier, storage.type.class, storage.type.function, support.constant #ff00f6 —
string, variable.parameter.url #00fbfd —
constant.character.escape, string.regexp, punctuation.definition.interpolation, punctuation.definition.string, punctuation.definition.template-expression #00b0b1 —
variable.parameter #f9f972 —
variable, meta.object-literal, variable.object.property, support.type.property-name, source.ignore #fcfcb9 —
variable.language.this #88c3fd —
entity.name.section #ff00f6 —
entity.other.attribute-name #c488fb —
fenced_code.block.language #7f7094 —
markup.inline.raw.string #00fbfd —
markup.italic #00fbfd italic
markup.strikethrough #00b0b1 —
markup.underline.link #55a8fb —
punctuation.definition.heading #b300ad —
support.type.property-name.array, support.type.property-name.table #ff00f6 —
meta.tag.xml, meta.tag.preprocessor.xml #7f7094 —
entity.name.tag.yaml #fcfcb9 —
meta.var.exp.tsx, keyword.operator.logical.python #ff00f6 —
support.class.component — bold
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 } ! ` ;
}
Synthwave Alpha | Coding Theme