Skip to main content
Home Theme VS Code Synthwave x Fluoromachine Blue Edition Synthwave '84 x Fluoromachine Theme with a blue twist
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 #01051F activityBar.dropBackground #0f1c5066 activityBar.foreground #ffffffCC activityBarBadge.background #2c52e8 activityBarBadge.foreground #ffffff badge.background #2CC8E8 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment #3648A8 italic string.quoted, string.template, punctuation.definition.string #2CC8E8 — string.template meta.embedded.line #C2AEC2 — variable, entity.name.variable #FFDC87 — variable.language
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Synthwave x Fluoromachine Blue Edition — Synthwave x Fluoromachine Blue Edition
badge.foreground
#0E0D29
breadcrumbPicker.background #161A42
button.background #2CC8E8
button.foreground #0E0D29
charts.blue #2CC8E8
debugToolBar.background #01051F
diffEditor.insertedTextBackground #784DFF16
diffEditor.removedTextBackground #2CC8E816
dropdown.background #0f1c50
dropdown.listBackground #0f1c50
editor.background #010826
editor.findMatchBackground #0f1c5059
editor.findMatchHighlightBackground #0f1c5033
editor.findRangeHighlightBackground #0f1c501a
editor.hoverHighlightBackground #1614404d
editor.lineHighlightBackground #0f1c5066
editor.rangeHighlightBackground #3648A839
editor.selectionBackground #6221CF88
editor.selectionHighlightBackground #672BFF59
editor.wordHighlightBackground #672BFF88
editor.wordHighlightStrongBackground #672BFF88
editorBracketMatch.background #0f1c5066
editorBracketMatch.border #3648A8
editorCodeLens.foreground #ffffffcc
editorCursor.background #672BFF59
editorCursor.foreground #2CC8E8
editorError.foreground #FF3830
editorGroup.border #3648A8
editorGroup.dropBackground #0f1c504a
editorGroupHeader.tabsBackground #01051F
editorGutter.addedBackground #7D7156d6
editorGutter.deletedBackground #FFDC6Ea4
editorGutter.modifiedBackground #3648A8af
editorIndentGuide.activeBackground #2CC8E8
editorIndentGuide.background #0f1c50
editorLineNumber.activeForeground #ffffff73
editorLineNumber.foreground #ffffff10
editorOverviewRuler.addedForeground #FFD57099
editorOverviewRuler.border #0f1c50b3
editorOverviewRuler.deletedForeground #2CC8E899
editorOverviewRuler.errorForeground #FF383099
editorOverviewRuler.findMatchForeground #0f1c50
editorOverviewRuler.modifiedForeground #3648A899
editorOverviewRuler.warningForeground #FF3830cc
editorRuler.foreground #0f1c5033
editorSuggestWidget.highlightForeground #2c52e8
editorWarning.foreground #FF3830cc
editorWidget.background #161A42
editorWidget.border #161A42
errorForeground #FF3830
extensionButton.prominentBackground #2CC8E8
extensionButton.prominentHoverBackground #FFDC87
focusBorder #2CC8E8
foreground #ffffffd9
gitDecoration.addedResourceForeground #5eff84cc
gitDecoration.deletedResourceForeground #FF3830
gitDecoration.ignoredResourceForeground #ffffff40
gitDecoration.modifiedResourceForeground #FFEE94ee
gitDecoration.untrackedResourceForeground #FFD394
input.background #0f1c50
inputOption.activeBorder #FFDC8799
inputValidation.errorBackground #FF3830
inputValidation.errorBorder #FF383000
jp-widgets-color #ffffffd9
layout.splitter.backgroundColor #2CC8E8
list.activeSelectionBackground #0E0D2980
list.activeSelectionForeground #2CC8E8
list.dropBackground #0f1c5066
list.errorForeground #FF3830
list.focusBackground #0E0D2999
list.focusForeground #ffffff
list.highlightForeground #FFDC87
list.hoverBackground #13123799
list.hoverForeground #ffffff
list.inactiveFocusBackground #0E0D2999
list.inactiveSelectionBackground #0f1c5066
list.inactiveSelectionForeground #2c52e8
list.warningForeground #FF3830bb
panelTitle.activeBorder #ffffff
peekView.border #3648A8
peekViewEditor.background #161A42
peekViewEditor.matchHighlightBackground #0f1c5059
peekViewResult.background #161A42
peekViewResult.matchHighlightBackground #0f1c5059
peekViewResult.selectionBackground #0E0D2980
peekViewTitle.background #161A42
pickerGroup.foreground #2CC8E8ea
progressBar.background #2CC8E8
scrollbar.shadow #2c52e8
scrollbarSlider.activeBackground #2CC8E888
scrollbarSlider.background #2CC8E81a
scrollbarSlider.hoverBackground #16144059
selection.background #0f1c5059
settings.sashBorder #2CC8E840
sideBar.background #01051F
sideBar.dropBackground #0f1c504c
sideBar.foreground #ffffffa7
sideBarSectionHeader.background #01051F
sideBarSectionHeader.foreground #ffffffca
statusBar.background #01051F
statusBar.debuggingBackground #2147FC
statusBar.debuggingForeground #121538
statusBar.foreground #ffffff80
statusBar.noFolderBackground #01051F
statusBarItem.hoverBackground #161440
statusBarItem.prominentBackground #0E0D29
statusBarItem.prominentHoverBackground #161440
tab.activeBorder #4F139C
tab.border #2E010800
tab.inactiveBackground #010826
terminal.ansiBlue #FCBA3D
terminal.ansiBrightBlue #FCBA3D
terminal.ansiBrightCyan #FCBA3D
terminal.ansiBrightGreen #2CC8E8
terminal.ansiBrightMagenta #FFDC87
terminal.ansiBrightRed #2CC8E8
terminal.ansiBrightYellow #FCE244
terminal.ansiCyan #FCBA3D
terminal.ansiGreen #2CC8E8
terminal.ansiMagenta #FFDC87
terminal.ansiRed #2CC8E8
terminal.ansiYellow #2CC8E8
terminal.foreground #ffffff
terminal.selectionBackground #0f1c504d
terminalCursor.background #ffffff
terminalCursor.foreground #FCBA3D
textLink.activeForeground #FFDC87
textLink.foreground #2CC8E8
titleBar.activeBackground #01051F
titleBar.inactiveBackground #01051F
tree.inactiveIndentGuidesStroke #2c52e873
tree.indentGuidesStroke #2CC8E8
walkThrough.embeddedEditorBackground #161A42
widget.shadow #2c52e8 variable.parameter — italic
storage.type, storage.modifier #FCE244 —
constant.language #2CC8E8 —
constant.character.escape #FCA612 —
punctuation.definition.tag #FCA612 —
entity.other.attribute-name #FCE244 —
entity.other.attribute-name.html #FCE244 italic
entity.name.type, meta.attribute.class.html #2CC8E8 —
entity.other.inherited-class #FFE119 —
entity.name.function, variable.function #FCA612 —
keyword.control.export.js, keyword.control.import.js #ffffff —
keyword.operator.new, keyword.operator.expression, keyword.operator.logical #FCE244 —
keyword.other.unit #2CC8E8 —
meta.object-literal.key, support.type.property-name #FFDC87 —
punctuation.separator.key-value #C2AEC2 —
punctuation.section.embedded #FCE244 —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end #2CC8E8 —
support.type.property-name.css, support.type.property-name.json #FFE119 —
switch-block.expr.js #2CC8E8 —
constant.other.color #2CC8E8 —
support.constant.font-name #2CC8E8 —
entity.other.attribute-name.id #FCA612 —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #FFE119 —
support.function.misc.css #2CC8E8 —
markup.heading, entity.name.section #FFDC87 —
text.html, keyword.operator.assignment #ffffffee —
markup.quote #C2AEC2cc italic
beginning.punctuation.definition.list #FFDC87 —
markup.underline.link #FFE119 —
string.other.link.description #2CC8E8 —
meta.function-call.generic.python #FCA612 —
entity.name.variable.local.cs #FFDC87 —
entity.name.variable.field.cs, entity.name.variable.property.cs #FFDC87 —
source.cpp keyword.operator #FCE244 —
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir #FCA612 —
source.elixir entity.name.function #2CC8E8 —
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir #FCA612 —
source.elixir punctuation.definition.string #2CC8E8 —
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir #2CC8E8 —
source.elixir .punctuation.binary.elixir #FFDC87 italic
support.type.property-name.json.arm-template #FCE244 —
support.type.parameters.parameter-name.tle.arm-template, variable.language.variables.variable-name.tle.arm-template, entity.name.tag.usernamespace.tle.arm-template, entity.name.tag.userfunction.tle.arm-template #FFDC87ff bold
variable.language.variables.tle.arm-template, support.type.parameters.tle.arm-template #FCA612ff
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 }!` ;
}
Synthwave x Fluoromachine Blue Edition | Coding Theme