Synthwave x Fluoromachine & epic animations

Name: Synthwave x Fluoromachine & epic animations
Author: TheCodemonkey

Publisher: TheCodemonkeyThemes in package: 1

This theme brings crazy 80's animations into your VS code 🚀🎉

GitHub

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Synthwave x Fluoromachine & epic animations — Synthwave x Fluoromachine & epic animations

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#171520
activityBar.dropBackground#34294f66
activityBar.foreground#ffffffCC
activityBarBadge.background#8a2dc0
activityBarBadge.foreground#2a2139
badge.background#2a2139
badge.foreground#ffffff
breadcrumbPicker.background#232530
button.background#2a2139
debugToolBar.background#241b2f
diffEditor.insertedTextBackground#0beb9916
diffEditor.removedTextBackground#8a2dc016
dropdown.background#232530
dropdown.listBackground#2a2139
editor.background#262335
editor.findMatchBackground#34294f59
editor.findMatchHighlightBackground#34294f33
editor.findRangeHighlightBackground#34294f1a
editor.hoverHighlightBackground#34294f4d
editor.lineHighlightBackground#34294f66
editor.rangeHighlightBackground#49549539
editor.selectionBackground#46346588
editor.selectionHighlightBackground#34294f59
editor.wordHighlightBackground#34294f88
editor.wordHighlightStrongBackground#34294f88
editorBracketMatch.background#34294f66
editorBracketMatch.border#495495
editorCodeLens.foreground#ffffffcc
editorCursor.background#241b2f
editorCursor.foreground#8a2dc0
editorError.foreground#8a2dc0
editorGroup.border#495495
editorGroup.dropBackground#34294f4a
editorGroupHeader.tabsBackground#241b2f
editorGutter.addedBackground#206d4bd6
editorGutter.deletedBackground#fa2e46a4
editorGutter.modifiedBackground#495495af
editorIndentGuide.activeBackground#2a2139
editorIndentGuide.background#49549539
editorLineNumber.activeForeground#ffffff73
editorLineNumber.foreground#ffffff10
editorOverviewRuler.addedForeground#09f7a099
editorOverviewRuler.border#34294fb3
editorOverviewRuler.deletedForeground#8a2dc099
editorOverviewRuler.errorForeground#8a2dc0dd
editorOverviewRuler.findMatchForeground#34294f
editorOverviewRuler.modifiedForeground#49549599
editorOverviewRuler.warningForeground#8a2dc0cc
editorRuler.foreground#34294f33
editorSuggestWidget.highlightForeground#8a2dc0
editorWarning.foreground#8a2dc0cc
editorWidget.background#232530
editorWidget.border#232530
errorForeground#8a2dc0
extensionButton.prominentBackground#8a2dc0
extensionButton.prominentHoverBackground#61e2ff
focusBorder#1f212b
foreground#ffffff
gitDecoration.addedResourceForeground#8a2dc0cc
gitDecoration.deletedResourceForeground#8a2dc0
gitDecoration.ignoredResourceForeground#ffffff59
gitDecoration.modifiedResourceForeground#b893ceee
gitDecoration.untrackedResourceForeground#8a2dc0
input.background#2a2139
inputOption.activeBorder#61e2ff99
inputValidation.errorBackground#8a2dc080
inputValidation.errorBorder#8a2dc000
list.activeSelectionBackground#2a213980
list.activeSelectionForeground#ffffff
list.dropBackground#34294f66
list.errorForeground#8a2dc0E6
list.focusBackground#2a213999
list.focusForeground#ffffff
list.highlightForeground#8a2dc0
list.hoverBackground#2a213999
list.hoverForeground#ffffff
list.inactiveFocusBackground#2a213999
list.inactiveSelectionBackground#34294f66
list.inactiveSelectionForeground#ffffff
list.warningForeground#8a2dc0bb
panelTitle.activeBorder#8a2dc0
peekView.border#495495
peekViewEditor.background#232530
peekViewEditor.matchHighlightBackground#34294f59
peekViewResult.background#232530
peekViewResult.matchHighlightBackground#34294f59
peekViewResult.selectionBackground#2a213980
peekViewTitle.background#232530
pickerGroup.foreground#8a2dc0ea
progressBar.background#8a2dc0
scrollbar.shadow#2a2139
scrollbarSlider.activeBackground#34294f88
scrollbarSlider.background#34294f1a
scrollbarSlider.hoverBackground#34294f59
selection.background#34294f59
sideBar.background#241b2f
sideBar.dropBackground#34294f4c
sideBar.foreground#ffffff99
sideBarSectionHeader.background#241b2f
sideBarSectionHeader.foreground#ffffffca
statusBar.background#241b2f
statusBar.debuggingBackground#8a2dc0
statusBar.debuggingForeground#08080f
statusBar.foreground#ffffff80
statusBar.noFolderBackground#241b2f
statusBarItem.hoverBackground#2a2139
statusBarItem.prominentBackground#2a2139
statusBarItem.prominentHoverBackground#34294f
tab.activeBorder#880088
tab.border#241b2f00
tab.inactiveBackground#262335
terminal.ansiBlue#03edf9
terminal.ansiBrightBlue#03edf9
terminal.ansiBrightCyan#03edf9
terminal.ansiBrightGreen#8a2dc0
terminal.ansiBrightMagenta#61e2ff
terminal.ansiBrightRed#8a2dc0
terminal.ansiBrightYellow#f92aad
terminal.ansiCyan#03edf9
terminal.ansiGreen#8a2dc0
terminal.ansiMagenta#61e2ff
terminal.ansiRed#8a2dc0
terminal.ansiYellow#8a2dc0
terminal.foreground#ffffff
terminal.selectionBackground#34294f4d
terminalCursor.background#ffffff
terminalCursor.foreground#03edf9
textLink.activeForeground#61e2ff
textLink.foreground#8a2dc0
titleBar.activeBackground#241b2f
titleBar.inactiveBackground#241b2f
walkThrough.embeddedEditorBackground#232530
widget.shadow#2a2139

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#495495	italic
string.quoted, string.template, punctuation.definition.string	#8a2dc0	—
string.template meta.embedded.line	#b6b1b1	—
variable, entity.name.variable	#61e2ff	—
variable.language	#8a2dc0	bold
variable.parameter	—	italic
storage.type, storage.modifier	#f92aad	—
constant	#8a2dc0	—
string.regexp	#8a2dc0	—
constant.numeric	#8a2dc0	—
constant.language	#8a2dc0	—
constant.character.escape	#36f9f6	—
entity.name	#8a2dc0	—
entity.name.tag	#ffcc00	—
punctuation.definition.tag	#36f9f6	—
entity.other.attribute-name	#f92aad	—
entity.other.attribute-name.html	#f92aad	italic
entity.name.type, meta.attribute.class.html	#8a2dc0	—
entity.other.inherited-class	#fc199a	—
entity.name.function, variable.function	#36f9f6	—
keyword.control.export.js, keyword.control.import.js	#8a2dc0	—
keyword	#f92aad	—
keyword.control	#f92aad	—
keyword.operator	#f92aad	—
keyword.operator.new, keyword.operator.expression, keyword.operator.logical	#f92aad	—
keyword.other.unit	#8a2dc0	—
support	#8a2dc0	—
support.function	#36f9f6	—
support.variable	#61e2ff	—
meta.object-literal.key, support.type.property-name	#61e2ff	—
punctuation.separator.key-value	#b6b1b1	—
punctuation.section.embedded	#f92aad	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#8a2dc0	—
support.type.property-name.css, support.type.property-name.json	#fc199a	—
switch-block.expr.js	#8a2dc0	—
constant.other.color	#8a2dc0	—
support.constant.font-name	#8a2dc0	—
entity.other.attribute-name.id	#36f9f6	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class	#fc199a	—
support.function.misc.css	#8a2dc0	—
markup.heading, entity.name.section	#61e2ff	—
text.html, keyword.operator.assignment	#ffffffee	—
markup.quote	#b6b1b1cc	italic
beginning.punctuation.definition.list	#61e2ff	—
markup.underline.link	#fc199a	—
string.other.link.description	#8a2dc0	—
meta.function-call.generic.python	#36f9f6	—
storage.type.cs	#8a2dc0	—
entity.name.variable.local.cs	#61e2ff	—
entity.name.variable.field.cs, entity.name.variable.property.cs	#61e2ff	—
source.cpp keyword.operator	#f92aad	—
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir	#36f9f6	—
source.elixir entity.name.function	#8a2dc0	—
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir	#36f9f6	—
source.elixir punctuation.definition.string	#8a2dc0	—
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir	#8a2dc0	—
source.elixir .punctuation.binary.elixir	#61e2ff	italic
support.type.property-name.json.arm-template	#f92aad	—
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	#61e2ffff	bold
variable.language.variables.tle.arm-template, support.type.parameters.tle.arm-template	#36f9f6ff

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

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}!`;
}