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

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#00ff0030
activityBar.activeBorder#00CC00
activityBar.background#08180a
activityBar.border#15410d
activityBar.foreground#00ff00
activityBarBadge.background#00ff00
activityBarBadge.foreground#000000
breadcrumb.activeSelectionForeground#FFFFFF
breadcrumb.focusForeground#00ff00
breadcrumb.foreground#00ff0090
breadcrumbPicker.background#0A1F0A
button.background#00ff00
button.border#00CC00
button.foreground#000000
button.hoverBackground#00CC00
button.secondaryBackground#00ff0030
button.secondaryForeground#00ff00
button.secondaryHoverBackground#00ff0045
commandCenter.activeBackground#002c00
commandCenter.activeBorder#00AA00
commandCenter.activeForeground#00ff00
commandCenter.background#051305
commandCenter.border#37ff1441
commandCenter.foreground#00ff00
debugIcon.breakpointForeground#FF0000
debugIcon.startForeground#00ff00
debugToolBar.background#0A1F0A
debugToolBar.border#00CC00
descriptionForeground#00FF00
editor.background#000100
editor.findMatchBackground#00ff0040
editor.findMatchHighlightBackground#00ff0020
editor.findRangeHighlightBackground#00ff0020
editor.foreground#FFD700
editor.hoverHighlightBackground#00ff0020
editor.lineHighlightBackground#132e137a
editor.lineHighlightBorder#135e047c
editor.selectionBackground#ffd90056
editor.selectionHighlightBackground#c2ec0730
editor.wordHighlightBackground#00ff0030
editor.wordHighlightStrongBackground#00ff0050
editorBracketHighlight.foreground1#00FF00
editorBracketHighlight.foreground2#FFD700
editorBracketHighlight.foreground3#7FFF00
editorBracketHighlight.foreground4#00FF00
editorBracketHighlight.foreground5#FFD700
editorBracketHighlight.foreground6#7FFF00
editorBracketHighlight.unexpectedBracket.foreground#FF4444
editorBracketMatch.background#00ff003d
editorBracketMatch.border#d0ff0000
editorBracketPairGuide.activeBackground1#00FF0090
editorBracketPairGuide.activeBackground2#FFD70090
editorBracketPairGuide.activeBackground3#7FFF0090
editorBracketPairGuide.activeBackground4#00FF0090
editorBracketPairGuide.activeBackground5#FFD70090
editorBracketPairGuide.activeBackground6#7FFF0090
editorCodeLens.foreground#00ff0080
editorCursor.background#000000
editorCursor.foreground#00ff00
editorError.border#FF000080
editorError.foreground#FF0000
editorGroup.border#00AA00
editorGroupHeader.tabsBackground#00ff001c
editorGroupHeader.tabsBorder#00AA00
editorGutter.addedBackground#00ff00
editorGutter.deletedBackground#FF4444
editorGutter.modifiedBackground#FFD700
editorHint.border#00ff0040
editorHint.foreground#00ff0090
editorHoverWidget.background#0A1F0A
editorHoverWidget.border#00CC00
editorHoverWidget.foreground#00ff00
editorHoverWidget.statusBarBackground#133713
editorInfo.border#00ff0080
editorInfo.foreground#00ff00
editorLineNumber.activeForeground#00FF00
editorLineNumber.foreground#2d7421
editorRuler.foreground#00ff0040
editorWarning.border#FFD70080
editorWarning.foreground#FFD700
errorForeground#dd2e2e
extensionButton.prominentBackground#00ff00
extensionButton.prominentHoverBackground#00ff00
extensionIcon.starForeground#FFD700
focusBorder#00CC00
foreground#26ff00
gitDecoration.conflictingResourceForeground#FFCC00
gitDecoration.deletedResourceForeground#FF0000
gitDecoration.ignoredResourceForeground#00ff0040
gitDecoration.modifiedResourceForeground#FFD700
gitDecoration.submoduleResourceForeground#00ff0090
gitDecoration.untrackedResourceForeground#00ff00
icon.foreground#00ff00
input.background#0A1F0A
input.border#00CC00
input.foreground#00ff00
input.placeholderForeground#00ff0080
inputOption.activeBackground#00ff0050
inputOption.activeBorder#00CC00
inputValidation.errorBackground#FF000020
inputValidation.errorBorder#FF0000
inputValidation.warningBackground#FFD70020
inputValidation.warningBorder#FFD700
list.activeSelectionBackground#00ff0050
list.activeSelectionForeground#FFFFFF
list.dropBackground#00ff0050
list.errorForeground#FF0000
list.highlightForeground#00ff00
list.hoverBackground#00ff0030
list.hoverForeground#FFFFFF
list.inactiveSelectionBackground#00ff0035
list.inactiveSelectionForeground#E0FFE0
list.warningForeground#FFD700
menu.background#0A1F0A
menu.border#00AA00
menu.foreground#00ff00
menu.selectionBackground#00ff0050
menu.selectionBorder#00CC00
menu.selectionForeground#FFFFFF
menu.separatorBackground#00AA00
minimap.background#00000044
minimap.errorHighlight#FF0000
minimap.findMatchHighlight#00ff0020
minimap.selectionHighlight#00ff0030
minimap.warningHighlight#FFD700
minimapSlider.background#9eff7811
notificationCenter.border#00CC00
notificationCenterHeader.background#0A1F0A
notificationCenterHeader.foreground#00ff00
notificationLink.foreground#00ff00
notifications.background#0A1F0A
notifications.border#00CC00
notifications.foreground#00ff00
notificationToast.border#00CC00
panel.background#041104
panel.border#00AA00
panelInput.border#00CC00
panelSection.border#00AA00
panelSection.dropBackground#00ff0050
panelSectionHeader.background#133713
panelSectionHeader.border#00AA00
panelSectionHeader.foreground#00ff00
panelTitle.activeBorder#00CC00
panelTitle.activeForeground#00ff00
panelTitle.inactiveForeground#1c9207
quickInput.background#0A1F0A
quickInput.foreground#00ff00
quickInputList.focusBackground#00ff0040
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#00ff00
quickInputTitle.background#0A1F0A
scrollbar.shadow#00FF0020
scrollbarSlider.activeBackground#00ff0080
scrollbarSlider.background#00ff0040
scrollbarSlider.hoverBackground#00ff0060
selection.background#fffb1440
settings.checkboxBackground#0A1F0A
settings.checkboxBorder#00CC00
settings.checkboxForeground#00ff00
settings.headerForeground#00ff00
settings.modifiedItemIndicator#FFD700
sideBar.background#000a00
sideBar.border#00AA00
sideBar.foreground#4fcc15
sideBarSectionHeader.background#010e01
sideBarSectionHeader.border#00AA00
sideBarSectionHeader.foreground#8fff10
sideBarTitle.foreground#37ff147e
statusBar.background#001400
statusBar.border#00AA00
statusBar.debuggingBackground#133713
statusBar.debuggingBorder#00AA00
statusBar.debuggingForeground#00ff00
statusBar.foreground#00ff00
statusBar.noFolderBackground#0A1F0A
statusBar.noFolderBorder#00AA00
statusBar.noFolderForeground#00ff00
statusBarItem.hoverBackground#00ff0050
statusBarItem.remoteBackground#00ff00
statusBarItem.remoteForeground#000000
tab.activeBackground#000000
tab.activeBorder#000000
tab.activeBorderTop#00ff00
tab.activeForeground#00ff00
tab.activeModifiedBorder#FFD700
tab.border#00AA00
tab.hoverBackground#00330050
tab.hoverBorder#00CC00
tab.inactiveBackground#00000000
tab.inactiveForeground#1ec50080
tab.unfocusedActiveBorder#ff141460
tab.unfocusedActiveBorderTop#00ff0080
terminal.ansiBlack#000000
terminal.ansiBlue#66FF66
terminal.ansiBrightBlack#1a1a1a
terminal.ansiBrightBlue#AAFF00
terminal.ansiBrightCyan#AEEE00
terminal.ansiBrightGreen#00FF00
terminal.ansiBrightMagenta#FFD700
terminal.ansiBrightRed#FF4444
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFFF00
terminal.ansiCyan#5aff31
terminal.ansiGreen#00ff00
terminal.ansiMagenta#AAFF00
terminal.ansiRed#FF0000
terminal.ansiWhite#E0FFE0
terminal.ansiYellow#FFD700
terminal.background#000000
terminal.foreground#05d805
terminal.tab.activeBorder#00CC00
terminalCommandDecoration.defaultBackground#133713
terminalCommandDecoration.errorBackground#FF000040
terminalCommandDecoration.successBackground#00ff0040
titleBar.activeBackground#061102
titleBar.activeForeground#00ff00
titleBar.border#00AA00
titleBar.inactiveBackground#001100
titleBar.inactiveForeground#00ff0080
walkThrough.embeddedEditorBackground#0A1F0A
widget.border#00CC00
widget.shadow#00FF0020

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
emphasis	—	italic
strong	—	bold
comment, punctuation.definition.comment, string.comment	#6B8E23	italic
string, string.quoted, string.template, string.interpolated, string.regexp, string.tag, string.value	#FFCC00	—
storage.modifier.async.js, storage.type.js	#66FF66	bold
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#AAFF00	—
keyword.operator, punctuation.separator, punctuation.definition	#3CB371	—
entity.name.tag, entity.other.attribute-name, meta.tag	#66FF66	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	#AEEE00	bold
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof	#66FF66	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	#5aff31	—
meta.object-literal.key, variable.object.property	#7FFF00	—
variable.language.this, variable.language.super, variable.language.self	#FFCC00	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	#66FF66	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	#AEEE00	—
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	#00ff00	—
entity.name.type.namespace.cs	#AAFF00	bold
entity.other.attribute-name.html	#AEEE00	bold
punctuation.definition.entity.html	#FFD700	bold
support.type.property-name.json	#2bff00	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	#5aff31	—
entity.name.function.macro.rust	#FFCC00	bold
storage.modifier.lifetime.rust	#AAFF00	italic
storage.type.annotation.java	#AAFF00	bold
storage.type.generic.java	#AAFF00	—
storage.type.java	#66FF66	bold
meta.method.java	#AEEE00	—
variable.other.definition.java	#5aff31	—
entity.name.type.class.java	#AEEE00	bold
entity.name.type.interface.java	#00ff00	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	#00FA9A	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}!`;
}