Retro Hacker Theme

Name: Retro Hacker Theme
Author: devxi

Publisher: devxiThemes in package: 5

A high-contrast retro hacker theme with neon green accents

Open in VS Code GitHub

Color themes

VS Code preview

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

Retro Hacker Theme — Retro Hacker Blue

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#2759AA20
activityBar.activeBorder#5EAFFF
activityBar.background#001E47
activityBar.border#153A75
activityBar.foreground#5EAFFF
activityBarBadge.background#5EAFFF
activityBarBadge.foreground#000040
breadcrumb.activeSelectionForeground#FFFFFF
breadcrumb.focusForeground#5EAFFF
breadcrumb.foreground#5EAFFF90
breadcrumbPicker.background#001E4A
button.background#5EAFFF
button.border#5EAFFF
button.foreground#000000
button.hoverBackground#5EAFFF
button.secondaryBackground#5EAFFF30
button.secondaryForeground#5EAFFF
button.secondaryHoverBackground#5EAFFF45
commandCenter.activeBackground#002C52
commandCenter.activeBorder#0077CC
commandCenter.activeForeground#5EAFFF
commandCenter.background#001E4A
commandCenter.border#5EAFFF41
commandCenter.foreground#5EAFFF
debugIcon.breakpointForeground#FF5A5A
debugIcon.startForeground#5EAFFF
debugToolBar.background#001E4A
debugToolBar.border#5EAFFF
descriptionForeground#5EAFFF
editor.background#010111
editor.findMatchBackground#2759AA40
editor.findMatchHighlightBackground#2759AA20
editor.findRangeHighlightBackground#2759AA20
editor.foreground#5EAFFF
editor.hoverHighlightBackground#2759AA20
editor.lineHighlightBackground#0C2B5E7a
editor.lineHighlightBorder#12397E7c
editor.selectionBackground#3670BD56
editor.selectionHighlightBackground#3670BD30
editor.wordHighlightBackground#2759AA30
editor.wordHighlightStrongBackground#2759AA50
editorBracketMatch.background#2759AA3d
editorBracketMatch.border#5EAFFF00
editorCodeLens.foreground#5EAFFF80
editorCursor.background#000040
editorCursor.foreground#5EAFFF
editorError.border#FF5A5A80
editorError.foreground#FF5A5A
editorGroup.border#5EAFFF
editorGroupHeader.tabsBackground#2759AA1c
editorGroupHeader.tabsBorder#5EAFFF
editorGutter.addedBackground#5EAFFF
editorGutter.deletedBackground#FF5A5A
editorGutter.modifiedBackground#FFD700
editorHint.border#5EAFFF40
editorHint.foreground#5EAFFF90
editorHoverWidget.background#001E4A
editorHoverWidget.border#5EAFFF
editorHoverWidget.foreground#5EAFFF
editorHoverWidget.statusBarBackground#0A2D63
editorInfo.border#5EAFFF80
editorInfo.foreground#5EAFFF
editorLineNumber.activeForeground#5EAFFF
editorLineNumber.foreground#316CBD
editorRuler.foreground#2759AA40
editorWarning.border#FFD70080
editorWarning.foreground#FFD700
errorForeground#FF5A5A
extensionButton.prominentBackground#5EAFFF
extensionButton.prominentHoverBackground#5EAFFF
extensionIcon.starForeground#FFD700
focusBorder#5EAFFF
foreground#4C9EEB
gitDecoration.conflictingResourceForeground#FFA500
gitDecoration.deletedResourceForeground#FF5A5A
gitDecoration.ignoredResourceForeground#5EAFFF40
gitDecoration.modifiedResourceForeground#FFD700
gitDecoration.submoduleResourceForeground#5EAFFF90
gitDecoration.untrackedResourceForeground#5EAFFF
icon.foreground#5EAFFF
input.background#001E4A
input.border#5EAFFF
input.foreground#5EAFFF
input.placeholderForeground#5EAFFF80
inputOption.activeBackground#2759AA40
inputOption.activeBorder#5EAFFF
inputValidation.errorBackground#FF5A5A20
inputValidation.errorBorder#FF5A5A
inputValidation.warningBackground#FFD70020
inputValidation.warningBorder#FFD700
list.activeSelectionBackground#2759AA40
list.activeSelectionForeground#FFFFFF
list.dropBackground#2759AA40
list.errorForeground#FF5A5A
list.highlightForeground#5EAFFF
list.hoverBackground#2759AA20
list.hoverForeground#FFFFFF
list.inactiveSelectionBackground#2759AA30
list.inactiveSelectionForeground#DDF0FF
list.warningForeground#FFD700
menu.background#001E4A
menu.border#5EAFFFbb
menu.foreground#5EAFFF
menu.selectionBackground#2759AA40
menu.selectionBorder#5EAFFFbb
menu.selectionForeground#FFFFFF
menu.separatorBackground#5EAFFFbb
minimap.background#00004044
minimap.errorHighlight#FF5A5A
minimap.findMatchHighlight#2759AA20
minimap.selectionHighlight#2759AA30
minimap.warningHighlight#FFD700
minimapSlider.background#5EAFFF11
notificationCenter.border#5EAFFF
notificationCenterHeader.background#001E4A
notificationCenterHeader.foreground#5EAFFF
notificationLink.foreground#5EAFFF
notifications.background#001E4A
notifications.border#5EAFFF
notifications.foreground#5EAFFF
notificationToast.border#5EAFFF
panel.background#001E4A
panel.border#5EAFFF
panelInput.border#5EAFFF
panelSection.border#5EAFFF
panelSection.dropBackground#2759AA40
panelSectionHeader.background#0A2D63
panelSectionHeader.border#5EAFFF
panelSectionHeader.foreground#5EAFFF
panelTitle.activeBorder#5EAFFF
panelTitle.activeForeground#5EAFFF
panelTitle.inactiveForeground#1C6DD7
quickInput.background#001E4A
quickInput.foreground#5EAFFF
quickInputList.focusBackground#052A59
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#5EAFFF
quickInputTitle.background#001E4A
scrollbar.shadow#5EAFFF20
scrollbarSlider.activeBackground#5EAFFF80
scrollbarSlider.background#5EAFFF40
scrollbarSlider.hoverBackground#5EAFFF60
selection.background#173366b2
settings.checkboxBackground#001E4A
settings.checkboxBorder#5EAFFF
settings.checkboxForeground#5EAFFF
settings.headerForeground#5EAFFF
settings.modifiedItemIndicator#FFD700
sideBar.background#010114
sideBar.border#5EAFFF
sideBar.foreground#5EAFFF
sideBarSectionHeader.background#001947
sideBarSectionHeader.border#5EAFFF
sideBarSectionHeader.foreground#7CBEFF
sideBarTitle.foreground#5EAFFF7e
statusBar.background#00184A
statusBar.border#5EAFFF
statusBar.debuggingBackground#0A2D63
statusBar.debuggingBorder#5EAFFF
statusBar.debuggingForeground#5EAFFF
statusBar.foreground#5EAFFF
statusBar.noFolderBackground#001E4A
statusBar.noFolderBorder#5EAFFF
statusBar.noFolderForeground#5EAFFF
statusBarItem.hoverBackground#2759AA40
statusBarItem.remoteBackground#5EAFFF
statusBarItem.remoteForeground#000040
tab.activeBackground#010111
tab.activeBorder#000040
tab.activeBorderTop#5EAFFF
tab.activeForeground#5EAFFF
tab.activeModifiedBorder#FFD700
tab.border#5EAFFF
tab.hoverBackground#000040
tab.hoverBorder#5EAFFF
tab.inactiveBackground#00004000
tab.inactiveForeground#4C9EEB80
tab.unfocusedActiveBorder#5EAFFF60
tab.unfocusedActiveBorderTop#5EAFFF80
terminal.ansiBlack#000000
terminal.ansiBlue#3B85D8
terminal.ansiBrightBlack#1a1a1a
terminal.ansiBrightBlue#5EAFFF
terminal.ansiBrightCyan#00FFFF
terminal.ansiBrightGreen#6CB8F0
terminal.ansiBrightMagenta#B07CFF
terminal.ansiBrightRed#FF8080
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFFF00
terminal.ansiCyan#00CED1
terminal.ansiGreen#4682B4
terminal.ansiMagenta#8A5EC0
terminal.ansiRed#FF5A5A
terminal.ansiWhite#E0EEFF
terminal.ansiYellow#FFD700
terminal.background#010111
terminal.foreground#5EAFFF
terminal.tab.activeBorder#5EAFFF
terminalCommandDecoration.defaultBackground#0A2D63
terminalCommandDecoration.errorBackground#FF5A5A40
terminalCommandDecoration.successBackground#2759AA40
titleBar.activeBackground#010114
titleBar.activeForeground#5EAFFF
titleBar.border#5EAFFF
titleBar.inactiveBackground#000E2F
titleBar.inactiveForeground#5EAFFF80
walkThrough.embeddedEditorBackground#001E4A
welcomePage.background#001E4A
welcomePage.progress.background#5EAFFF
welcomePage.progress.foreground#5EAFFF
widget.border#5EAFFF
widget.shadow#0040AA20

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
emphasis	—	italic
strong	—	bold
comment, punctuation.definition.comment, string.comment	#7C8DD990	italic
string, string.quoted, string.template, string.interpolated, string.regexp, string.tag, string.value	#BFD7FF	—
storage.modifier.async.js, storage.type.js	#5EAFFF	bold
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#5EAFFF	—
keyword.operator, punctuation.separator, punctuation.definition	#83B9FF	—
entity.name.tag, entity.other.attribute-name, meta.tag	#5EAFFF	—
entity.other.attribute-name.class, entity.other.attribute-name.id, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element	#5EAFFF	—
keyword.other.unit	#FFD700	—
constant.numeric, constant.language, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color, constant.other, constant.character	#FFD700	—
entity.name.function, support.function, support.constant.handlebars, meta.function-call, meta.method-call, meta.function.parameters	#87CEEB	bold
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof	#A6CAFF	bold
entity.name.type, support.type, support.class, storage.type.built-in, meta.return-type, meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class, entity.name.class, source.cs storage.type	#8A5EC0	bold
variable, support.variable, variable.other, variable.language, variable.parameter, meta.definition.variable.name, meta.object-literal.key	#A6CAFF	—
variable.language.this, variable.language.super, variable.language.self	#5EAFFF	italic bold
punctuation, meta.brace, meta.brackets, meta.parentheses, punctuation.definition.tag	#6694CA	—
entity.name.tag, entity.name.tag.css, entity.other.attribute-name, source.css entity.other.attribute-name, source.css.less entity.other.attribute-name.id, source.scss entity.other.attribute-name	#5EAFFF	bold
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass, support.type.vendored.property-name, support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media	#A6CAFF	—
markup.heading, markup.bold, markup.italic, markup.inserted, markup.deleted, markup.changed, markup.underline	#5EAFFF	—
invalid, invalid.illegal, invalid.deprecated	#FF5A5A	bold underline
support.function.git-rebase, constant.sha.git-rebase, meta.diff.header	#5EAFFF	—
entity.name.type.namespace.cs	#B07CFF	bold
entity.other.attribute-name.html	#A0C8FF	bold
punctuation.definition.entity.html	#4A86DB	bold
support.type.property-name.json	#5EAFFF	bold
punctuation.support.type.property-name	#4A86DB	bold

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