Tokyo Hack

Name: Tokyo Hack
Author: Alex Shortt

Publisher: Alex ShorttThemes in package: 1

Nostalgic synthwave inspired code editor theme

GitHub

VS Code preview

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

Tokyo Hack — Tokyo Hack

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.activeBackground#a762a740
activityBar.activeBorder#f08df080
activityBar.background#18173E
activityBar.border#a762a740
activityBar.dropBackground#f08df080
activityBar.foreground#f08df080
activityBar.inactiveForeground#a762a780
activityBarBadge.background#f08df080
activityBarBadge.foreground#ffffff
badge.background#E84B3C
badge.foreground#ffffff
breadcrumbPicker.background#232530
button.background#E84B3C
button.foreground#ffffff
checkbox.background#E84B3C
debugToolBar.background#18173E
diffEditor.insertedTextBackground#0beb9916
diffEditor.removedTextBackground#fa677116
editor.background#18173E
editor.findMatchBackground#f08df040
editor.findMatchHighlightBackground#E84B3C20
editor.foreground#ffffff
editor.hoverHighlightBackground#E84B3C20
editor.inactiveSelectionBackground#E84B3C50
editor.lineHighlightBackground#34294f66
editor.rangeHighlightBackground#f08df080
editor.selectionBackground#ffffff36
editor.selectionHighlightBackground#f08df020
editor.selectionHighlightBorder#f08df020
editor.wordHighlightBackground#E84B3C50
editor.wordHighlightStrongBackground#E84B3C50
editorBracketMatch.background#f08df080
editorBracketMatch.border#f08df080
editorCursor.foreground#E84B3C
editorError.foreground#fa6771
editorGroup.border#a762a740
editorGroup.dropBackground#f08df080
editorGroup.focusedEmptyBorder#f08df0
editorGroupHeader.tabsBackground#230a35
editorGroupHeader.tabsBorder#a762a740
editorGutter.addedBackground#26FF8F80
editorGutter.deletedBackground#fa6771
editorGutter.modifiedBackground#fa9818
editorIndentGuide.activeBackground#2a2139
editorIndentGuide.background#49549539
editorLineNumber.foreground#a762a780
editorLink.activeForeground#E84B3C
editorOverviewRuler.addedForeground#26FF8F
editorOverviewRuler.border#a762a740
editorOverviewRuler.bracketMatchForeground#f08df0
editorOverviewRuler.deletedForeground#fa677180
editorOverviewRuler.errorForeground#fa6771
editorOverviewRuler.findMatchForeground#34294f
editorOverviewRuler.infoForeground#00BBFF
editorOverviewRuler.modifiedForeground#fa981880
editorOverviewRuler.warningForeground#fa9818
editorPane.background#E84B3C
editorRuler.foreground#f08df040
editorSuggestWidget.highlightForeground#E84B3C
editorSuggestWidget.selectedBackground#ffffff36
editorWarning.foreground#26FF8Fcc
editorWidget.background#372d4b
editorWidget.border#ffffff22
editorWidget.resizeBorder#ffffff44
errorForeground#fa6771
extensionButton.prominentBackground#E84B3C
extensionButton.prominentHoverBackground#f08df0
focusBorder#1f212b
foreground#ffffff
gitDecoration.addedResourceForeground#26FF8Fcc
gitDecoration.deletedResourceForeground#fa6771
gitDecoration.ignoredResourceForeground#ffffff59
gitDecoration.modifiedResourceForeground#b893ceee
gitDecoration.untrackedResourceForeground#26FF8F
input.background#230a35
input.border#a762a780
list.activeSelectionBackground#f08df080
list.activeSelectionForeground#ffffff
list.dropBackground#f08df080
list.errorForeground#fa6771
list.focusBackground#a762a780
list.focusForeground#ffffff
list.highlightForeground#7c5f7c
list.hoverBackground#f08df080
list.hoverForeground#ffffff
list.inactiveFocusBackground#a762a780
list.inactiveSelectionBackground#a762a780
list.inactiveSelectionForeground#ffffff
list.warningForeground#FED243
menu.background#463465
minimap.findMatchHighlight#f08df080
minimap.selectionHighlight#f08df0
panelTitle.activeBorder#E84B3C
peekView.border#495495
peekViewEditor.background#232530
peekViewEditor.matchHighlightBackground#34294f59
peekViewResult.background#232530
peekViewResult.matchHighlightBackground#34294f59
peekViewResult.selectionBackground#2a213980
peekViewTitle.background#232530
pickerGroup.foreground#E84B3Cea
progressBar.background#E84B3C
scrollbar.shadow#f08df080
scrollbarSlider.activeBackground#E84B3C
scrollbarSlider.background#230a35
scrollbarSlider.hoverBackground#a762a780
selection.background#ffffff36
sideBar.background#18173E
sideBar.border#a762a740
sideBar.dropBackground#f08df080
sideBar.foreground#ffffff
sideBarSectionHeader.background#230a35
sideBarSectionHeader.border#a762a740
sideBarSectionHeader.foreground#ffffff80
sideBarTitle.foreground#FED24380
statusBar.background#f08df040
statusBar.debuggingBackground#E84B3C
statusBar.debuggingForeground#08080f
statusBar.foreground#ffffff80
statusBar.noFolderBackground#18173E
statusBarItem.hoverBackground#2a2139
statusBarItem.prominentBackground#2a2139
statusBarItem.prominentHoverBackground#34294f
tab.activeBackground#292752
tab.activeBorder#f08df0
tab.activeBorderTop#f08df040
tab.activeForeground#ffffff
tab.border#a762a720
tab.hoverBackground#f08df040
tab.inactiveBackground#18173E
tab.unfocusedActiveBackground#f08df040
terminal.ansiBlue#03edf9
terminal.ansiBrightBlue#03edf9
terminal.ansiBrightCyan#03edf9
terminal.ansiBrightGreen#26FF8F
terminal.ansiBrightMagenta#f08df0
terminal.ansiBrightRed#fa6771
terminal.ansiBrightYellow#FED243
terminal.ansiCyan#03edf9
terminal.ansiGreen#26FF8F
terminal.ansiMagenta#f08df0
terminal.ansiRed#fa6771
terminal.ansiYellow#E84B3C
terminal.foreground#ffffff
terminal.selectionBackground#34294f4d
terminalCursor.background#ffffff
terminalCursor.foreground#03edf9
textLink.activeForeground#f08df0
textLink.foreground#E84B3C
titleBar.activeBackground#18173E
titleBar.inactiveBackground#18173E
tree.indentGuidesStroke#FED24380
walkThrough.embeddedEditorBackground#232530
widget.shadow#f08df080
window.activeBorder#000000
window.inactiveBorder#2c213f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#495495	italic
string.quoted, string.template, punctuation.definition.string	#fa9818	—
string.template meta.embedded.line	#b6b1b1	—
variable, entity.name.variable	#f08df0	—
variable.language	#fa6771	bold
variable.parameter	—	italic
storage.type, storage.modifier	#FED243	—
constant	#E84B3C	—
string.regexp	#E84B3C	—
constant.numeric	#E84B3C	—
constant.language	#E84B3C	—
constant.character.escape	#00BBFF	—
entity.name	#fa6771	—
entity.name.tag	#26FF8F	—
punctuation.definition.tag	#00BBFF	—
entity.other.attribute-name	#FED243	—
entity.other.attribute-name.html	#FED243	italic
entity.name.type, meta.attribute.class.html	#fa6771	—
entity.other.inherited-class	#D50	—
entity.name.function, variable.function	#00BBFF	—
keyword.control.export.js, keyword.control.import.js	#26FF8F	—
keyword	#FED243	—
keyword.control	#FED243	—
keyword.operator	#FED243	—
keyword.operator.new, keyword.operator.expression, keyword.operator.logical	#FED243	—
keyword.other.unit	#E84B3C	—
support	#fa6771	—
support.function	#36f9f6	—
support.variable	#f08df0	—
meta.object-literal.key, support.type.property-name	#f08df0	—
punctuation.separator.key-value	#b6b1b1	—
punctuation.section.embedded	#FED243	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#26FF8F	—
support.type.property-name.css, support.type.property-name.json	#26FF8F	—
switch-block.expr.js	#26FF8F	—
variable.other.constant.property.js, variable.other.property.js	#1DA0CF	—
constant.other.color	#E84B3C	—
support.constant.font-name	#E84B3C	—
entity.other.attribute-name.id	#00BBFF	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class	#D50	—
support.function.misc.css	#fa6771	—
markup.heading, entity.name.section	#f08df0	—
text.html, keyword.operator.assignment	#ffffffee	—
markup.quote	#b6b1b1cc	italic
beginning.punctuation.definition.list	#f08df0	—
markup.underline.link	#D50	—
string.other.link.description	#E84B3C	—
meta.function-call.generic.python	#00BBFF	—
storage.type.cs	#fa6771	—
entity.name.variable.local.cs	#f08df0	—
entity.name.variable.field.cs, entity.name.variable.property.cs	#f08df0	—
source.cpp keyword.operator	#FED243	—
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir	#00BBFF	—
source.elixir entity.name.function	#26FF8F	—
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir	#00BBFF	—
source.elixir punctuation.definition.string	#26FF8F	—
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir	#26FF8F	—
source.elixir .punctuation.binary.elixir	#f08df0	italic

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