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 Green - Subtle

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...

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#00330030
activityBar.activeBorder#7FFF00
activityBar.background#001100
activityBar.border#00660030
activityBar.foreground#00FF00
activityBar.inactiveForeground#00660080
activityBarBadge.background#00FF00
activityBarBadge.foreground#000000
badge.background#00FF00
badge.foreground#000000
breadcrumb.activeSelectionForeground#FFFFFF
breadcrumb.focusForeground#00FF00
breadcrumb.foreground#00990090
breadcrumbPicker.background#001100
button.background#00FF00
button.border#00FF0080
button.foreground#000000
button.hoverBackground#7FFF00
button.secondaryBackground#00660040
button.secondaryForeground#00FF00
button.secondaryHoverBackground#00990060
charts.blue#7FFF00
charts.foreground#00FF00
charts.green#00FF00
charts.lines#7FFF00
charts.orange#FFCC00
charts.purple#AAFF00
charts.red#FF0000
charts.yellow#FFD700
checkbox.background#001100
checkbox.border#00FF00
checkbox.foreground#00FF00
commandCenter.activeBackground#00330030
commandCenter.activeBorder#00FF00
commandCenter.activeForeground#7FFF00
commandCenter.background#001100
commandCenter.border#00660040
commandCenter.foreground#00FF00
commandCenter.inactiveBorder#00660040
commandCenter.inactiveForeground#00660080
debugConsole.errorForeground#FF0000
debugConsole.infoForeground#7FFF00
debugConsole.sourceForeground#AAFF00
debugConsole.warningForeground#FFD700
debugConsoleInputIcon.foreground#00FF00
debugIcon.breakpointDisabledForeground#66000080
debugIcon.breakpointForeground#FF0000
debugIcon.pauseForeground#FFD700
debugIcon.restartForeground#7FFF00
debugIcon.startForeground#00FF00
debugIcon.stopForeground#FF0000
debugToolBar.background#001100
debugToolBar.border#00FF00
descriptionForeground#7FFF00
diffEditor.diagonalFill#00330015
diffEditor.insertedLineBackground#00330020
diffEditor.insertedTextBackground#00660025
diffEditor.insertedTextBorder#00FF0060
diffEditor.removedLineBackground#33000020
diffEditor.removedTextBackground#33000025
diffEditor.removedTextBorder#FF000060
diffEditorGutter.insertedLineBackground#00660040
diffEditorGutter.removedLineBackground#66000040
diffEditorOverview.insertedForeground#00FF0080
diffEditorOverview.removedForeground#FF000080
dropdown.background#001100
dropdown.border#00FF00
dropdown.foreground#00FF00
dropdown.listBackground#001100
editor.background#000000
editor.findMatchBackground#FFD70060
editor.findMatchHighlightBackground#FFD70030
editor.findRangeHighlightBackground#AAFF0020
editor.foreground#00FF41
editor.hoverHighlightBackground#00660015
editor.lineHighlightBackground#00330010
editor.lineHighlightBorder#00660020
editor.selectionBackground#00FF0040
editor.selectionHighlightBackground#00FF0025
editor.wordHighlightBackground#7FFF0030
editor.wordHighlightStrongBackground#7FFF0050
editorBracketHighlight.foreground1#00FF00
editorBracketHighlight.foreground2#7FFF00
editorBracketHighlight.foreground3#AAFF00
editorBracketHighlight.foreground4#FFD700
editorBracketHighlight.foreground5#00FF00
editorBracketHighlight.foreground6#7FFF00
editorBracketHighlight.unexpectedBracket.foreground#FF0000
editorBracketMatch.background#00FF0040
editorBracketMatch.border#00FF00
editorBracketPairGuide.activeBackground1#00FF0080
editorBracketPairGuide.activeBackground2#7FFF0080
editorBracketPairGuide.activeBackground3#AAFF0080
editorBracketPairGuide.activeBackground4#FFD70080
editorBracketPairGuide.activeBackground5#00FF0080
editorBracketPairGuide.activeBackground6#7FFF0080
editorBracketPairGuide.background1#00FF0020
editorBracketPairGuide.background2#7FFF0020
editorBracketPairGuide.background3#AAFF0020
editorBracketPairGuide.background4#FFD70020
editorBracketPairGuide.background5#00FF0020
editorBracketPairGuide.background6#7FFF0020
editorCodeLens.foreground#00990080
editorCursor.background#000000
editorCursor.foreground#00FF00
editorError.background#33000015
editorError.border#FF000080
editorError.foreground#FF0000
editorGhostText.background#00330010
editorGhostText.border#00660030
editorGhostText.foreground#00660070
editorGroup.border#00660040
editorGroup.dropBackground#00330030
editorGroupHeader.border#00660020
editorGroupHeader.tabsBackground#001000
editorGroupHeader.tabsBorder#00660030
editorGutter.addedBackground#00FF00
editorGutter.deletedBackground#FF0000
editorGutter.modifiedBackground#FFD700
editorHint.border#AAFF0060
editorHint.foreground#AAFF00
editorHoverWidget.background#001100
editorHoverWidget.border#00FF00
editorHoverWidget.foreground#00FF41
editorHoverWidget.statusBarBackground#00330020
editorInfo.background#00330015
editorInfo.border#7FFF0080
editorInfo.foreground#7FFF00
editorInlayHint.background#00330015
editorInlayHint.foreground#00990080
editorInlayHint.parameterBackground#00330015
editorInlayHint.parameterForeground#7FFF0080
editorInlayHint.typeBackground#00330015
editorInlayHint.typeForeground#AAFF0080
editorLineNumber.activeForeground#00FF00
editorLineNumber.foreground#00660080
editorOverviewRuler.addedForeground#00FF00
editorOverviewRuler.border#00660030
editorOverviewRuler.bracketMatchForeground#00FF0080
editorOverviewRuler.commonContentForeground#00330080
editorOverviewRuler.currentContentForeground#00660080
editorOverviewRuler.deletedForeground#FF0000
editorOverviewRuler.errorForeground#FF0000
editorOverviewRuler.findMatchForeground#FFD70080
editorOverviewRuler.incomingContentForeground#00990080
editorOverviewRuler.infoForeground#7FFF00
editorOverviewRuler.modifiedForeground#FFD700
editorOverviewRuler.rangeHighlightForeground#7FFF0050
editorOverviewRuler.selectionHighlightForeground#00FF0060
editorOverviewRuler.warningForeground#FFD700
editorOverviewRuler.wordHighlightForeground#7FFF0060
editorOverviewRuler.wordHighlightStrongForeground#AAFF0080
editorRuler.foreground#00330030
editorStickyScroll.background#001100
editorStickyScrollHover.background#00330020
editorSuggestWidget.background#001100
editorSuggestWidget.border#00FF00
editorSuggestWidget.focusHighlightForeground#FFD700
editorSuggestWidget.foreground#00FF41
editorSuggestWidget.highlightForeground#00FF00
editorSuggestWidget.selectedBackground#00660040
editorSuggestWidget.selectedForeground#FFFFFF
editorWarning.background#33330015
editorWarning.border#FFD70080
editorWarning.foreground#FFD700
editorWidget.background#001100
editorWidget.border#00FF00
editorWidget.foreground#00FF41
errorForeground#FF0000
extensionButton.prominentBackground#00FF00
extensionButton.prominentForeground#000000
extensionButton.prominentHoverBackground#7FFF00
extensionButton.separator#00000040
extensionIcon.preReleaseForeground#AAFF00
extensionIcon.starForeground#FFD700
extensionIcon.verifiedForeground#00FF00
focusBorder#7FFF00
foreground#00FF41
gitDecoration.addedResourceForeground#00FF00
gitDecoration.conflictingResourceForeground#FFCC00
gitDecoration.deletedResourceForeground#FF0000
gitDecoration.ignoredResourceForeground#00660060
gitDecoration.modifiedResourceForeground#FFD700
gitDecoration.renamedResourceForeground#7FFF00
gitDecoration.submoduleResourceForeground#AAFF00
gitDecoration.untrackedResourceForeground#7FFF00
icon.foreground#00FF00
input.background#001100
input.border#00FF00
input.foreground#00FF00
input.placeholderForeground#00660080
inputOption.activeBackground#00660040
inputOption.activeBorder#00FF00
inputOption.activeForeground#FFFFFF
inputValidation.errorBackground#33000020
inputValidation.errorBorder#FF0000
inputValidation.infoBackground#00330020
inputValidation.infoBorder#7FFF00
inputValidation.warningBackground#33330020
inputValidation.warningBorder#FFD700
keybindingLabel.background#00330030
keybindingLabel.border#00660060
keybindingLabel.bottomBorder#00FF00
keybindingLabel.foreground#00FF00
list.activeSelectionBackground#00660050
list.activeSelectionForeground#FFFFFF
list.deemphasizedForeground#00660080
list.dropBackground#00660040
list.errorForeground#FF0000
list.focusAndSelectionOutline#00FF00
list.focusBackground#00660050
list.focusForeground#FFFFFF
list.focusOutline#00FF00
list.highlightForeground#00FF00
list.hoverBackground#00330030
list.hoverForeground#FFFFFF
list.inactiveSelectionBackground#00330030
list.inactiveSelectionForeground#7FFF00
list.invalidItemForeground#FF0000
list.warningForeground#FFD700
menu.background#001100
menu.border#00FF00
menu.foreground#00FF00
menu.selectionBackground#00660040
menu.selectionBorder#00FF00
menu.selectionForeground#FFFFFF
menu.separatorBackground#00660040
merge.border#FFD700
merge.commonContentBackground#00330015
merge.commonHeaderBackground#00660030
merge.currentContentBackground#00330020
merge.currentHeaderBackground#00660040
merge.incomingContentBackground#00330020
merge.incomingHeaderBackground#00990040
minimap.background#00110080
minimap.errorHighlight#FF0000
minimap.findMatchHighlight#FFD70050
minimap.selectionHighlight#00FF0050
minimap.selectionOccurrenceHighlight#7FFF0040
minimap.warningHighlight#FFD700
minimapGutter.addedBackground#00FF00
minimapGutter.deletedBackground#FF0000
minimapGutter.modifiedBackground#FFD700
minimapSlider.activeBackground#00FF0050
minimapSlider.background#00660030
minimapSlider.hoverBackground#00990040
notificationCenter.border#00FF00
notificationCenterHeader.background#001100
notificationCenterHeader.foreground#00FF00
notificationLink.foreground#7FFF00
notifications.background#001100
notifications.border#00FF00
notifications.foreground#00FF00
notificationsErrorIcon.foreground#FF0000
notificationsInfoIcon.foreground#7FFF00
notificationsWarningIcon.foreground#FFD700
notificationToast.border#00FF00
panel.background#000000
panel.border#00660040
panel.dropBorder#00FF00
panelInput.border#00FF00
panelSection.border#00660040
panelSection.dropBackground#00330030
panelSectionHeader.background#00330020
panelSectionHeader.border#00660040
panelSectionHeader.foreground#00FF00
panelTitle.activeBorder#00FF00
panelTitle.activeForeground#00FF00
panelTitle.inactiveForeground#00660080
pickerGroup.border#00660040
pickerGroup.foreground#7FFF00
progressBar.background#00FF00
quickInput.background#001100
quickInput.foreground#00FF00
quickInputList.focusBackground#00660050
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#00FF00
quickInputTitle.background#00330020
scrollbar.shadow#00000080
scrollbarSlider.activeBackground#00FF0060
scrollbarSlider.background#00660040
scrollbarSlider.hoverBackground#00990050
selection.background#FFD70040
settings.checkboxBackground#001100
settings.checkboxBorder#00FF00
settings.checkboxForeground#00FF00
settings.dropdownBackground#001100
settings.dropdownBorder#00FF00
settings.dropdownForeground#00FF00
settings.headerForeground#00FF00
settings.modifiedItemIndicator#FFD700
settings.numberInputBackground#001100
settings.numberInputBorder#00FF00
settings.numberInputForeground#00FF00
settings.textInputBackground#001100
settings.textInputBorder#00FF00
settings.textInputForeground#00FF00
sideBar.background#001100
sideBar.border#00660040
sideBar.foreground#00FF41
sideBarSectionHeader.background#003300
sideBarSectionHeader.border#00660040
sideBarSectionHeader.foreground#00FF00
sideBarTitle.foreground#7FFF00
statusBar.background#001100
statusBar.border#00660030
statusBar.debuggingBackground#003300
statusBar.debuggingBorder#00990060
statusBar.debuggingForeground#00FF00
statusBar.focusBorder#00FF00
statusBar.foreground#00FF00
statusBar.noFolderBackground#000000
statusBar.noFolderBorder#00660030
statusBar.noFolderForeground#00FF00
statusBarItem.activeBackground#00990050
statusBarItem.errorBackground#FF0000
statusBarItem.errorForeground#FFFFFF
statusBarItem.hoverBackground#00660040
statusBarItem.prominentBackground#00660060
statusBarItem.prominentForeground#FFFFFF
statusBarItem.prominentHoverBackground#00990070
statusBarItem.remoteBackground#00FF00
statusBarItem.remoteForeground#000000
statusBarItem.warningBackground#FFD700
statusBarItem.warningForeground#000000
symbolIcon.arrayForeground#FFD700
symbolIcon.booleanForeground#AAFF00
symbolIcon.classForeground#7FFF00
symbolIcon.colorForeground#FFD700
symbolIcon.constantForeground#FFD700
symbolIcon.constructorForeground#00FF00
symbolIcon.enumeratorForeground#AAFF00
symbolIcon.enumeratorMemberForeground#FFD700
symbolIcon.eventForeground#7FFF00
symbolIcon.fieldForeground#7FFF00
symbolIcon.fileForeground#00FF00
symbolIcon.folderForeground#7FFF00
symbolIcon.functionForeground#00FF00
symbolIcon.interfaceForeground#AAFF00
symbolIcon.keyForeground#7FFF00
symbolIcon.keywordForeground#00FF00
symbolIcon.methodForeground#00FF00
symbolIcon.moduleForeground#7FFF00
symbolIcon.namespaceForeground#AAFF00
symbolIcon.nullForeground#FF0000
symbolIcon.numberForeground#FFD700
symbolIcon.objectForeground#7FFF00
symbolIcon.operatorForeground#00FF00
symbolIcon.packageForeground#AAFF00
symbolIcon.propertyForeground#7FFF00
symbolIcon.referenceForeground#AAFF00
symbolIcon.snippetForeground#FFD700
symbolIcon.stringForeground#FFCC00
symbolIcon.structForeground#7FFF00
symbolIcon.textForeground#00FF00
symbolIcon.typeParameterForeground#AAFF00
symbolIcon.unitForeground#FFD700
symbolIcon.variableForeground#7FFF00
tab.activeBackground#000000
tab.activeBorder#000000
tab.activeBorderTop#00FF00
tab.activeForeground#00FF00
tab.activeModifiedBorder#FFD700
tab.border#00660020
tab.hoverBackground#00330020
tab.hoverBorder#00FF00
tab.hoverForeground#7FFF00
tab.inactiveBackground#00000000
tab.inactiveForeground#00660080
tab.inactiveModifiedBorder#FFD70060
tab.lastPinnedBorder#00660040
tab.unfocusedActiveBorder#00990040
tab.unfocusedActiveBorderTop#00990080
tab.unfocusedActiveForeground#00990080
tab.unfocusedActiveModifiedBorder#FFD70040
tab.unfocusedInactiveForeground#00660060
terminal.ansiBlack#000000
terminal.ansiBlue#7FFF00
terminal.ansiBrightBlack#333333
terminal.ansiBrightBlue#AAFF00
terminal.ansiBrightCyan#AAFF00
terminal.ansiBrightGreen#00FF41
terminal.ansiBrightMagenta#FFD700
terminal.ansiBrightRed#FF3333
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFFF00
terminal.ansiCyan#7FFF00
terminal.ansiGreen#00FF00
terminal.ansiMagenta#AAFF00
terminal.ansiRed#FF0000
terminal.ansiWhite#CCCCCC
terminal.ansiYellow#FFD700
terminal.background#000000
terminal.findMatchBackground#FFD70060
terminal.findMatchBorder#FFD700
terminal.findMatchHighlightBackground#FFD70030
terminal.findMatchHighlightBorder#FFD70080
terminal.foreground#00FF00
terminal.selectionBackground#00660050
terminal.selectionForeground#FFFFFF
terminal.tab.activeBorder#00FF00
terminalCommandDecoration.defaultBackground#00330020
terminalCommandDecoration.errorBackground#33000040
terminalCommandDecoration.successBackground#00660040
terminalCursor.background#000000
terminalCursor.foreground#00FF00
testing.iconErrored#FFCC00
testing.iconFailed#FF0000
testing.iconPassed#00FF00
testing.iconQueued#FFD700
testing.iconSkipped#00990080
testing.iconUnset#00660080
testing.message.error.lineBackground#33000020
testing.message.info.lineBackground#00330020
testing.peekBorder#00FF00
testing.peekHeaderBackground#00330020
testing.runAction#7FFF00
titleBar.activeBackground#001000
titleBar.activeForeground#00FF00
titleBar.border#00660030
titleBar.inactiveBackground#000000
titleBar.inactiveForeground#00660080
walkThrough.embeddedEditorBackground#001100
welcomePage.progress.background#00330030
welcomePage.progress.foreground#00FF00
welcomePage.tileBackground#001100
welcomePage.tileBorder#00660040
welcomePage.tileHoverBackground#00330020
widget.border#00FF00
widget.shadow#00FF0030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
emphasis	—	italic
strong	—	bold
comment, punctuation.definition.comment, string.comment	#00660080	italic
string, string.quoted, string.template, string.interpolated, string.regexp, string.tag, string.value	#FFCC00	—
storage.modifier.async.js, storage.type.js	#00FF00	bold
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#FFD700	—
keyword.operator, punctuation.separator, punctuation.definition	#7FFF00	—
entity.name.tag, entity.other.attribute-name, meta.tag	#00FF00	bold
entity.other.attribute-name.class, entity.other.attribute-name.id, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element	#AAFF00	—
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	#7FFF00	bold
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof	#00FF00	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	#AAFF00	bold
variable, support.variable, variable.other, variable.language, variable.parameter, meta.definition.variable.name	#00FF41	—
meta.object-literal.key, variable.object.property	#7FFF00	—
variable.language.this, variable.language.super, variable.language.self	#FFD700	italic bold
punctuation, meta.brace, meta.brackets, meta.parentheses, punctuation.definition.tag	#00FF00	—
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	#00FF00	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	#7FFF00	—
markup.heading, markup.bold, markup.italic, markup.inserted, markup.deleted, markup.changed, markup.underline	#00FF00	—
invalid, invalid.illegal, invalid.deprecated	#FF0000	bold underline
support.function.git-rebase, constant.sha.git-rebase, meta.diff.header	#7FFF00	—
entity.name.type.namespace.cs	#AAFF00	bold
entity.other.attribute-name.html	#7FFF00	bold
punctuation.definition.entity.html	#FFD700	bold
support.type.property-name.json	#7FFF00	bold
string.quoted.double.json, string.quoted.single.json	#FFCC00	bold
punctuation.support.type.property-name	#00FF00	bold
entity.name.function.decorator.python	#AAFF00	bold
variable.parameter.function.python	#00FF41	—
entity.name.function.macro.rust	#FFD700	bold
storage.modifier.lifetime.rust	#AAFF00	italic
storage.type.annotation.java	#AAFF00	bold
storage.type.generic.java	#AAFF00	—
storage.type.java	#00FF00	bold
meta.method.java	#7FFF00	—
variable.other.definition.java	#00FF41	—
entity.name.type.class.java	#AAFF00	bold
entity.name.type.interface.java	#7FFF00	italic bold
storage.modifier.package.java, storage.modifier.import.java	#FFCC00	—
keyword.control.import, keyword.control.from, keyword.control.export, keyword.control.require, meta.import, meta.require	#AAFF00	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}!`;
}