Skip to main content
Home Theme VS Code Quantum Synthwave A Synthwave-inspired colour theme to satisfy your neon dreams
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 #040014 activityBar.foreground #7984d1 activityBarBadge.background #ff2e97 activityBarBadge.foreground #ffffff button.background #1ea8fc button.foreground #f2f3f7 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle source.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #6267FF — source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #89DDFF — source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Quantum Synthwave — Quantum Synthwave
button.hoverBackground
#1ea8fc
descriptionForeground #f2f3f7
dropdown.background #100d2b
dropdown.listBackground #100d2b
editor.background #040014
editor.findMatchBackground #484f7d
editor.findMatchHighlightBackground #484f7d80
editor.foreground #f2f3f7
editor.hoverHighlightBackground #42c6ff2a
editor.lineHighlightBackground #040014
editor.selectionBackground #484f7d
editor.selectionHighlightBackground #484f7d8e
editor.wordHighlightBackground #ffffff22
editor.wordHighlightStrongBackground #42c6ff63
editorCursor.foreground #ff2e97
editorError.foreground #ff2e97
editorGroup.dropBackground #7984d1
editorGroupHeader.noTabsBackground #040014
editorGroupHeader.tabsBackground #040014
editorHoverWidget.background #100d2b
editorHoverWidget.border #3b4167
editorInfo.foreground #7984d1
editorLineNumber.activeForeground #36f9f6
editorLineNumber.foreground #484f7d
editorRuler.foreground #484f7d
editorSuggestWidget.background #100d2b
editorWarning.foreground #ff9b50
editorWidget.background #100d2b
editorWidget.border #3b4167
foreground #f2f3f7
gitDecoration.conflictingResourceForeground #df85ff
gitDecoration.deletedResourceForeground #ff2e97
gitDecoration.ignoredResourceForeground #7984d1
gitDecoration.modifiedResourceForeground #ffd400
gitDecoration.untrackedResourceForeground #42c6ff
input.background #040014
input.border #763b8c
input.placeholderForeground #7984d1
inputOption.activeBorder #ff9b50
list.activeSelectionBackground #30007e
list.activeSelectionForeground #F2F3F7
list.dropBackground #100d2b
list.errorForeground #ff2e97
list.focusBackground #8a45a3
list.hoverBackground #0e0658
list.hoverForeground #F2F3F7
list.inactiveSelectionBackground #131033
list.warningForeground #ff2e97
menu.background #100d2b
panel.background #040014
panel.border #040014
panelTitle.activeBorder #1ea8fc
panelTitle.activeForeground #f2f3f7
panelTitle.inactiveForeground #7984d1
peekView.border #ff9b50
peekViewEditor.background #110d26
peekViewEditor.matchHighlightBackground #161130
peekViewEditor.matchHighlightBorder #161130
peekViewResult.background #040014
peekViewResult.selectionBackground #ff9b50
peekViewTitle.background #040014
peekViewTitleDescription.foreground #7984d1
progressBar.background #ff2e97
scrollbar.shadow #040014
scrollbarSlider.activeBackground #919ad9
scrollbarSlider.background #9199d94f
scrollbarSlider.hoverBackground #9199d9b4
sideBar.background #040014
sideBarSectionHeader.background #040014
sideBarSectionHeader.foreground #7984d1
statusBar.background #040014
statusBar.foreground #7984d1
statusBar.noFolderBackground #1ea8fc
statusBar.noFolderForeground #ffffff
tab.activeBackground #040014
tab.activeForeground #f2f3f7
tab.border #040014
tab.inactiveBackground #040014
tab.inactiveForeground #7984d1
terminal.ansiBlack #283034
terminal.ansiBlue #42c6ff
terminal.ansiBrightBlack #435056
terminal.ansiBrightBlue #42c6ff
terminal.ansiBrightCyan #42c6ff
terminal.ansiBrightGreen #add0e5
terminal.ansiBrightMagenta #ff2afc
terminal.ansiBrightRed #ff2e97
terminal.ansiBrightWhite #f4f6f9
terminal.ansiBrightYellow #ffd400
terminal.ansiCyan #42c6ff
terminal.ansiGreen #62a9cf
terminal.ansiMagenta #ff2afc
terminal.ansiRed #ff2e97
terminal.ansiWhite #d9e0e9
terminal.ansiYellow #ffd400
terminal.background #040014
terminal.foreground #e4eeff
titleBar.activeBackground #040014 source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #c562ff —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #c0caf5 —
punctuation.support.type.property-name.begin.json.comments, punctuation.support.type.property-name.end.json.comments, punctuation.separator.dictionary.key-value.json.comments #89DDFF —
markup.underline.link #DD5500 —
string.other.link.description #f97e72 —
keyword.other.unit #f97e72 —
entity.other.inherited-class #DD5500 —
punctuation.separator.delimiter #FFFFFF —
variable.other.php, variable.other.rust #ff7edb bold
support.function.basic_functions.php, support.function.var.php #0DB9D7 —
variable.language #fe4450 —
variable.language.this #fede5d —
variable.language.this #ffe2fd —
constant.language #FF6887 —
constant.character.escape #36f9f6 —
punctuation.section.embedded #fede5d —
markup.heading, entity.name.section #ff7edb bold
markup.quote #b6b1b1cc italic
beginning.punctuation.definition.list #ff7edb bold
markup.underline.link.markdown, markup.inline.raw.string.markdown #42FF9E italic
string.other.link.title.markdown #fede5d —
markup.heading.markdown, entity.name.section.markdown #ff7edb bold
markup.italic.markdown #2EE2FA —
markup.bold.markdown #2EE2FA —
punctuation.definition.quote.begin.markdown, markup.quote.markdown #42FF9E —
keyword.operator.new, keyword.other.new, keyword.operator.expression, keyword.operator.logical #fede5d —
entity.other.attribute-name.id #36f9f6 —
entity.other.attribute-name.class, meta.at-rule.mixin.scss entity.name.function.scss #42FF9E —
entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity.css #6267FF —
entity.name.tag.css #FF6887 —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #36f9f6 —
keyword.control.at-rule.apply.tailwind, entity.name.tag.reference.scss #C562FF —
variable.parameter.keyframe-list.css, meta.at-rule.keyframes.scss #00f150 —
keyword.control.at-rule.keyframes.scss, keyword.control.at-rule.keyframes.css #FEDE5D —
entity.other.keyframe-offset.css, entity.other.attribute-name.scss #b267e6 —
meta.at-rule.mixin keyword.control.at-rule.mixin, meta.at-rule.include entity.name.function.scss, meta.at-rule.include keyword.control.at-rule.include #FEDE5D —
keyword.control.at-rule.include punctuation.definition.keyword, keyword.control.at-rule.mixin punctuation.definition.keyword, meta.at-rule.include keyword.control.at-rule.include, keyword.control.at-rule.extend punctuation.definition.keyword, meta.at-rule.extend keyword.control.at-rule.extend, entity.other.attribute-name.placeholder.css punctuation.definition.entity.css, meta.at-rule.media keyword.control.at-rule.media, meta.at-rule.mixin keyword.control.at-rule.mixin, meta.at-rule.function keyword.control.at-rule.function, keyword.control punctuation.definition.keyword #FEDE5D —
support.type.property-name.css #ff7edb bold
support.constant.font-name, meta.definition.variable #4786FF —
punctuation.definition.constant.css, support.constant.color.w3c-standard-color-name.css #36F9F6 bold
constant.other.color.rgb-value.hex.css #36F9F6 —
constant.numeric.css #6267FF bold
keyword.other.unit.px.css, keyword.other.unit.deg.css, keyword.other.unit.s.css, keyword.other.unit.percentage.css, keyword.other.unit.rem.css, keyword.other.unit.em.css, keyword.other.unit.vh.css, keyword.other.unit.dvh.css, keyword.other.unit.vw.css, keyword.other.unit.dvw.css, keyword.other.unit.ch.css, keyword.other.unit.cw.css #4786FF bold
support.function.misc.scss, support.function.misc.css #36F9F6 —
entity.other.attribute-name.css #fede5d —
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name, support.type.vendored.property-name, support.type.map.key #7aa2f7 —
punctuation.definition.entity, punctuation.definition.entity, entity.other.attribute-name.class punctuation.definition.entity, entity.name.tag.reference #e0af68 —
meta.property-list #9abdf5 —
meta.property-list meta.at-rule.if, meta.at-rule.return variable.parameter.url, meta.property-list meta.at-rule.else #ff9e64 —
meta.property-list meta.property-list #9abdf5 —
meta.property-list meta.at-rule.include #c0caf5 —
support.constant.property-value #B267E6 —
string.quoted, punctuation.definition.string, meta.import.js, string.template, support.other.namespace.php #42FF9E —
punctuation.definition.string.end.ts, punctuation.definition.string.begin.ts, punctuation.definition.string.template #89DDFF —
string.template meta.embedded.line #b6b1b1 —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end #4786FF —
switch-block.expr.js #42FF9E —
entity.name.type, entity.other.inherited-class, support.class, punctuation.decorator.ts, punctuation.decorator.tsx #fe4450 —
entity.name.function, variable.function #36f9f6 —
variable.other.constant.property.js, variable.other.property.js #ff7edb bold
meta.object-literal.key, support.type.property-name #ff7edb bold
variable.parameter, meta.parameter #c562ff —
keyword.other.import, keyword.control.export, keyword.control.import, keyword.other.use.php, keyword.other.rust, keyword.other.use-as.php #6267ff —
support.type.primitive, keyword.other.type.php #6267ff —
storage.type, keyword.other.namespace.php, keyword.other.class.php #6267ff —
storage.type.function, keyword.other.fn.rust #b267e6 —
storage.type.function.arrow #fede5d —
entity.name.tag, meta.tag.sgml, entity.name.tag.js.jsx #ff6887 —
support.class.component.js.jsx, support.class.component.tsx, support.tag.custom.html, support.class.component.astro #fe4450 —
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag, punctuation.definition.tag.end.js.jsx, punctuation.definition.tag.begin.js.jsx, punctuation.definition.tag.js.jsx #BA3C97 —
entity.other.attribute-name.html, entity.other.attribute-name.tsx, entity.other.attribute-name.js.jsx, entity.other.attribute-name.astro #c562ff —
entity.other.ng-binding-name.property.html #b267e6 —
entity.other.ng-binding-name.event.html #36F9F6 —
string.quoted.double.html, string.quoted.double.tsx, string.quoted.double.js.jsx #42FF9E —
punctuation.definition.string.begin.html, punctuation.definition.string.end.html, punctuation.definition.string.end.tsx, punctuation.definition.string.begin.tsx, punctuation.definition.string.begin.js.jsx, punctuation.definition.string.end.js.jsx, punctuation.definition.string.begin.astro, punctuation.definition.string.end.astro #89DDFF —
punctuation.separator.key-value.html, punctuation.separator.key-value.js.jsx, punctuation.separator.key-value.astro, punctuation.separator.key-value, keyword.operator.assignment.tsx #FEDE5D —
text.html, text.astro, source.tsx, source.js.jsx #ccd4f3 —
entity.other.ng-binding-name.ngFor.html #fede5d —
meta.definition.variable.ng #4786ff —
meta.definition.variable.initializer.ng #0db9d7 —
variable.other.readwrite.ts #ff7edb bold
meta.ng-binding.property.html #ff7edb —
storage.modifier.async.ts #00f150 —
keyword.other.definition.ini #ff7edb 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...
~/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 } ! ` ;
}
Quantum Synthwave | Coding Theme