Skip to main content
Home Theme VS Code Synthwave x Fluoromachine & fixed epic animations & contrast & customized & customized This theme brings crazy 80's animations into your VS code 🚀🎉
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 #000 activityBar.border #AE81FF75 activityBar.foreground #AE81FF activityBar.inactiveForeground #AE81FF75 activityBarBadge.background #000 activityBarBadge.foreground #AE81FF tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #FFFFFF — comment, string.quoted.docstring.multi.python, string.quoted.docstring.multi.python punctuation.definition.string.begin.python, string.quoted.docstring.multi.python punctuation.definition.string.end.python #FD971F italic string #E6DB74 — constant.numeric #AE81FF — constant.language
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Synthwave x Fluoromachine & fixed epic animations & contrast & customized & customized — Synthwave x Fluoromachine & fixed epic animations & contrast & customized
badge.background
#000000
badge.foreground #AE81FF
breadcrumb.foreground #AE81FF
button.background #000000
button.foreground #FFFFFF
button.hoverBackground #000000
checkbox.border #AE81FF75
contrastActiveBorder #00000000
contrastBorder #AE81FF75
debugExceptionWidget.background #000000
debugExceptionWidget.border #AE81FF
debugToolBar.background #000000
debugToolBar.border #AE81FF
diffEditor.insertedTextBackground #31958A55
diffEditor.insertedTextBorder #31958A55
diffEditor.removedTextBackground #892F4688
diffEditor.removedTextBorder #31958A55
dropdown.background #000000
dropdown.border #AE81FF75
dropdown.foreground #FFFFFF
editor.background #000000
editor.findMatchBackground #6688cc
editor.findMatchBorder #AE81FF75
editor.findMatchHighlightBackground #eeeeee44
editor.foreground #FFFFFF
editor.inactiveSelectionBackground #6688cc
editor.lineHighlightBorder #AE81FF75
editor.selectionBackground #6688cc
editor.selectionForeground #000c18
editorGroup.border #AE81FF75
editorGroupHeader.border #000000
editorGroupHeader.noTabsBackground #000000
editorGroupHeader.tabsBackground #000000
editorGroupHeader.tabsBorder #000000
editorHint.foreground #43B9D8
editorHoverWidget.background #000000
editorHoverWidget.border #AE81FF75
editorIndentGuide.activeBackground1 #505050
editorLineNumber.activeForeground #AE81FF
editorLineNumber.foreground #AE81FF
editorLink.activeForeground #0063a5
editorMarkerNavigation.background #060621
editorMarkerNavigationError.background #AB395B
editorMarkerNavigationWarning.background #5B7E7A
editorSuggestWidget.background #000000
editorSuggestWidget.border #AE81FF
editorSuggestWidget.foreground #FFFFFF
editorSuggestWidget.highlightForeground #43B9D8
editorSuggestWidget.selectedBackground #AE81FF75
editorWidget.background #000000
editorWidget.border #000000
focusBorder #AE81FF75
foreground #FFFFFF
gitlens.trailingLineBackgroundColor #000000
gitlens.trailingLineForegroundColor #AE81FF
icon.foreground #ffffff
input.background #000000
input.border #AE81FF75
input.foreground #FFFFFF
input.placeholderForeground #AE81FF75
list.activeSelectionBackground #AE81FF75
list.hoverBackground #AE81FF75
list.inactiveFocusOutline #AE81FF
list.inactiveSelectionBackground #AE81FF15
menu.background #000000
menu.border #AE81FF75
merge.border #AE81FF75
notificationCenter.border #AE81FF
notificationCenterHeader.background #000000
notificationCenterHeader.foreground #FFFFFF
notifications.background #000000
notifications.border #AE81FF75
notifications.foreground #FFFFFF
panel.background #000000
panel.border #AE81FF75
panel.dropBorder #AE81FF
panelSection.border #AE81FF75
panelTitle.activeForeground #AE81FF
panelTitle.inactiveForeground #AE81FF75
peekView.border #AE81FF75
peekViewTitle.background #000000
peekViewTitleLabel.foreground #ffffff
quickInput.background #000000
sideBar.background #000
sideBar.border #AE81FF75
sideBar.foreground #FFFFFF
sideBarSectionHeader.background #000000
sideBarSectionHeader.border #AE81FF75
sideBarSectionHeader.foreground #AE81FF
sideBarTitle.foreground #AE81FF
statusBar.background #000000
statusBar.border #AE81FF75
statusBar.debuggingBackground #43B9D815
statusBar.debuggingForeground #AE81FF
statusBar.foreground #AE81FF
statusBar.noFolderBackground #000000
statusBar.noFolderForeground #AE81FF
statusBarItem.hoverBackground #101010
tab.activeBackground #000000
tab.activeBorder #FFFFFF
tab.activeForeground #FFFFFF
tab.activeModifiedBorder #AE81FF75
tab.border #AE81FF75
tab.hoverBackground #AE81FF25
tab.hoverBorder #AE81FF75
tab.inactiveBackground #000000
tab.inactiveForeground #FFFFFF
tab.inactiveModifiedBorder #AE81FF75
tab.unfocusedActiveBackground #000000
tab.unfocusedActiveBorder #AE81FF
tab.unfocusedActiveForeground #FFFFFF
tab.unfocusedHoverBackground #AE81FF25
tab.unfocusedInactiveBackground #000000
tab.unfocusedInactiveForeground #FFFFFF
terminal.ansiBlack #8f8f8f
terminal.ansiBlue #5ccaef
terminal.ansiBrightBlack #8f8f8f
terminal.ansiBrightBlue #5ccaef
terminal.ansiBrightCyan #a57fff
terminal.ansiBrightGreen #98d800
terminal.ansiBrightMagenta #f57f00
terminal.ansiBrightRed #f82a5d
terminal.ansiBrightWhite #f1f1f1
terminal.ansiBrightYellow #e7dc60
terminal.ansiCyan #a57fff
terminal.ansiGreen #98d800
terminal.ansiMagenta #f57f00
terminal.ansiRed #f82a5d
terminal.ansiWhite #f1f1f1
terminal.ansiYellow #e7dc60
terminal.border #AE81FF75
titleBar.activeBackground #000000
titleBar.activeForeground #AE81FF
titleBar.border #AE81FF75
titleBar.inactiveBackground #000000
titleBar.inactiveForeground #AE81FF constant.character, constant.other #AE81FF —
storage.type #66D9EF italic
entity.name.class #A6E22E underline
entity.other.inherited-class #A6E22E italic underline
entity.name.function #A6E22E
variable.parameter #FD971F italic
entity.name.tag #F92672 bold
entity.other.attribute-name #A6E22E
support.type, support.class #66D9EF italic
invalid.deprecated #F8F8F0 —
meta.structure.dictionary.json, string.quoted.double.json #CFCFC2 —
meta.diff, meta.diff.header #75715E —
constant.numeric.line-number.find-in-files - match #AE81FFA0 —
entity.name.filename.find-in-files #E6DB74 —
variable.language #A6E22E —
heading.1.markdown #A6E22E bold
punctuation.definition.heading.markdown #A6E22E —
entity.name.section.markdown #A6E22E —
punctuation.definition.list.begin.markdown #AE81FF —
meta.image.inline.markdown #E6DB74 —
markup.bold.markdown #FFFFFF bold
markup.italic.markdown #FFFFFF italic
markup.inline.raw.string.markdown #66D9EF —
meta.separator.markdown #8f8f8f —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end #AE81FF —
variable.other.object, punctuation.accessor, meta.brace.round, variable.other.readwrite, punctuation.separator.comma #FFFFFF —
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*
Synthwave x Fluoromachine & fixed epic animations & contrast & customized & customized | Coding Theme 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 } !` ;
}