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 Amber

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#ff980020
activityBar.activeBorder#ff9d00
activityBar.background#261707
activityBar.border#613a10
activityBar.foreground#ffb000
activityBarBadge.background#ffb000
activityBarBadge.foreground#000000
breadcrumb.activeSelectionForeground#FFFFFF
breadcrumb.focusForeground#ffb000
breadcrumb.foreground#ffb00090
breadcrumbPicker.background#1F120A
button.background#ffb000
button.border#ff9d00
button.foreground#000000
button.hoverBackground#ff9d00
button.secondaryBackground#ffb00030
button.secondaryForeground#ffb000
button.secondaryHoverBackground#ffb00045
commandCenter.activeBackground#422912
commandCenter.activeBorder#ff7b00
commandCenter.activeForeground#ffb000
commandCenter.background#1F120A
commandCenter.border#ff98004a
commandCenter.foreground#ffb000
debugIcon.breakpointForeground#FF0000
debugIcon.startForeground#ffb000
debugToolBar.background#1F120A
debugToolBar.border#ff9d00
descriptionForeground#ffb000
editor.background#1a1006
editor.findMatchBackground#ff980040
editor.findMatchHighlightBackground#ff980020
editor.findRangeHighlightBackground#ff980020
editor.foreground#ffb000
editor.hoverHighlightBackground#ff980020
editor.lineHighlightBackground#2e1e137a
editor.lineHighlightBorder#5e340a7c
editor.selectionBackground#ffd90056
editor.selectionHighlightBackground#ec7c0730
editor.wordHighlightBackground#ff980030
editor.wordHighlightStrongBackground#ff980050
editorBracketMatch.background#ff98003d
editorBracketMatch.border#ff800000
editorCodeLens.foreground#ff980080
editorCursor.background#1a1006
editorCursor.foreground#ffb000
editorError.border#FF000080
editorError.foreground#FF0000
editorGroup.border#ff9d00
editorGroupHeader.tabsBackground#ff98001c
editorGroupHeader.tabsBorder#ff9d00
editorGutter.addedBackground#ff9d00
editorGutter.deletedBackground#FF4444
editorGutter.modifiedBackground#e99f17
editorHint.border#ff980040
editorHint.foreground#ff980090
editorHoverWidget.background#1F120A
editorHoverWidget.border#ff9d00
editorHoverWidget.foreground#ffb000
editorHoverWidget.statusBarBackground#372413
editorInfo.border#ff980080
editorInfo.foreground#ffb000
editorLineNumber.activeForeground#ffb000
editorLineNumber.foreground#c78021
editorRuler.foreground#ff980040
editorWarning.border#e99f1780
editorWarning.foreground#e99f17
errorForeground#dd2e2e
extensionButton.prominentBackground#ffb000
extensionButton.prominentHoverBackground#ffb000
extensionIcon.starForeground#e99f17
focusBorder#ff9d00
foreground#ffb000
gitDecoration.conflictingResourceForeground#FFA500
gitDecoration.deletedResourceForeground#FF0000
gitDecoration.ignoredResourceForeground#ffb00040
gitDecoration.modifiedResourceForeground#e99f17
gitDecoration.submoduleResourceForeground#ffb00090
gitDecoration.untrackedResourceForeground#ffb000
icon.foreground#ffb000
input.background#1F120A
input.border#ff9d00
input.foreground#ffb000
input.placeholderForeground#ffb00080
inputOption.activeBackground#ff980040
inputOption.activeBorder#ff9d00
inputValidation.errorBackground#FF000020
inputValidation.errorBorder#FF0000
inputValidation.warningBackground#e99f1720
inputValidation.warningBorder#e99f17
list.activeSelectionBackground#ff980040
list.activeSelectionForeground#FFFFFF
list.dropBackground#ff980040
list.errorForeground#FF0000
list.highlightForeground#ffb000
list.hoverBackground#ff980020
list.hoverForeground#FFFFFF
list.inactiveSelectionBackground#ff980030
list.inactiveSelectionForeground#FFE0D0
list.warningForeground#e99f17
menu.background#1F120A
menu.border#ff9d00bb
menu.foreground#ffb000
menu.selectionBackground#ff980040
menu.selectionBorder#ff9d00bb
menu.selectionForeground#FFFFFF
menu.separatorBackground#ff9d00bb
minimap.background#1a100644
minimap.errorHighlight#FF0000
minimap.findMatchHighlight#ff980020
minimap.selectionHighlight#ff980030
minimap.warningHighlight#e99f17
minimapSlider.background#ff9e7811
notificationCenter.border#ff9d00
notificationCenterHeader.background#1F120A
notificationCenterHeader.foreground#ffb000
notificationLink.foreground#ffb000
notifications.background#1F120A
notifications.border#ff9d00
notifications.foreground#ffb000
notificationToast.border#ff9d00
panel.background#1F120A
panel.border#ff9d00
panelInput.border#ff9d00
panelSection.border#ff9d00
panelSection.dropBackground#ff980040
panelSectionHeader.background#372413
panelSectionHeader.border#ff9d00
panelSectionHeader.foreground#ffb000
panelTitle.activeBorder#ff9d00
panelTitle.activeForeground#ffb000
panelTitle.inactiveForeground#c78021
quickInput.background#1F120A
quickInput.foreground#ffb000
quickInputList.focusBackground#3F251A
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#ffb000
quickInputTitle.background#1F120A
scrollbar.shadow#ff980020
scrollbarSlider.activeBackground#ff980080
scrollbarSlider.background#ff980040
scrollbarSlider.hoverBackground#ff980060
selection.background#ff980040
settings.checkboxBackground#1F120A
settings.checkboxBorder#ff9d00
settings.checkboxForeground#ffb000
settings.headerForeground#ffb000
settings.modifiedItemIndicator#e99f17
sideBar.background#130c04
sideBar.border#ff9d00
sideBar.foreground#cc7215
sideBarSectionHeader.background#261403
sideBarSectionHeader.border#ff9d00
sideBarSectionHeader.foreground#ff8f10
sideBarTitle.foreground#ff98007e
statusBar.background#261707
statusBar.border#ff9d00
statusBar.debuggingBackground#372413
statusBar.debuggingBorder#ff9d00
statusBar.debuggingForeground#ffb000
statusBar.foreground#ffb000
statusBar.noFolderBackground#1F120A
statusBar.noFolderBorder#ff9d00
statusBar.noFolderForeground#ffb000
statusBarItem.hoverBackground#ff980040
statusBarItem.remoteBackground#ffb000
statusBarItem.remoteForeground#000000
tab.activeBackground#1a1006
tab.activeBorder#1a1006
tab.activeBorderTop#ffb000
tab.activeForeground#ffb000
tab.activeModifiedBorder#e99f17
tab.border#ff9d00
tab.hoverBackground#1a1006
tab.hoverBorder#ff9d00
tab.inactiveBackground#13080100
tab.inactiveForeground#c5781e80
tab.unfocusedActiveBorder#ff141460
tab.unfocusedActiveBorderTop#ffb00080
terminal.ansiBlack#000000
terminal.ansiBlue#87CEEB
terminal.ansiBrightBlack#3a2b1a
terminal.ansiBrightBlue#ADD8E6
terminal.ansiBrightCyan#00FFFF
terminal.ansiBrightGreen#ffb000
terminal.ansiBrightMagenta#EE82EE
terminal.ansiBrightRed#FF4444
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFFF00
terminal.ansiCyan#00CED1
terminal.ansiGreen#ff9d00
terminal.ansiMagenta#DDA0DD
terminal.ansiRed#FF0000
terminal.ansiWhite#FFE0D0
terminal.ansiYellow#e99f17
terminal.background#1a1006
terminal.foreground#ffb000
terminal.tab.activeBorder#ff9d00
terminalCommandDecoration.defaultBackground#372413
terminalCommandDecoration.errorBackground#FF000040
terminalCommandDecoration.successBackground#ff980040
titleBar.activeBackground#261707
titleBar.activeForeground#ffb000
titleBar.border#ff9d00
titleBar.inactiveBackground#130c04
titleBar.inactiveForeground#ffb00080
walkThrough.embeddedEditorBackground#1F120A
welcomePage.background#1F120A
welcomePage.progress.background#ffb000
welcomePage.progress.foreground#ffb000
widget.border#ff9d00
widget.shadow#ff980020

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
emphasis	—	italic
strong	—	bold
comment, punctuation.definition.comment, string.comment	#8d7c6a90	italic
string, string.quoted, string.template, string.interpolated, string.regexp, string.tag, string.value	#fbebd5	—
storage.modifier.async.js, storage.type.js	#ff9d00	bold
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#ffb000	—
keyword.operator, punctuation.separator, punctuation.definition	#ffba14	—
entity.name.tag, entity.other.attribute-name, meta.tag	#ffb000	—
entity.other.attribute-name.class, entity.other.attribute-name.id, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element	#ffb000	—
keyword.other.unit	#e99f17	—
constant.numeric, constant.language, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color, constant.other, constant.character	#e99f17	—
entity.name.function, support.function, support.constant.handlebars, meta.function-call, meta.method-call, meta.function.parameters	#ff7300	bold
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof	#ffc677	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	#ffc46b	bold
variable, support.variable, variable.other, variable.language, variable.parameter, meta.definition.variable.name, meta.object-literal.key	#fcd498	—
variable.language.this, variable.language.super, variable.language.self	#ffb000	italic bold
punctuation, meta.brace, meta.brackets, meta.parentheses, punctuation.definition.tag	#8d5f02	—
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	#ffb000	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	#fcd498	—
markup.heading, markup.bold, markup.italic, markup.inserted, markup.deleted, markup.changed, markup.underline	#ffb000	—
invalid, invalid.illegal, invalid.deprecated	#FF0000	bold underline
support.function.git-rebase, constant.sha.git-rebase, meta.diff.header	#ffb000	—
entity.name.type.namespace.cs	#ffd36c	bold
entity.other.attribute-name.html	#fff727	bold
punctuation.definition.entity.html	#af7700	bold
support.type.property-name.json	#ffb700	bold
punctuation.support.type.property-name	#ffee00	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}!`;
}