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

Retro Hacker Pink

VS Code preview

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

Retro Hacker Theme — Retro Hacker Pink

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#33003330
activityBar.activeBorder#FF1493
activityBar.background#110011
activityBar.border#FF1493
activityBar.foreground#FF00FF
activityBarBadge.background#FF1493
activityBarBadge.foreground#000000
breadcrumb.activeSelectionForeground#FFFFFF
breadcrumb.focusForeground#FF00FF
breadcrumb.foreground#99009990
breadcrumbPicker.background#110011
button.background#FF00FF
button.border#FF1493
button.foreground#000000
button.hoverBackground#FF1493
button.secondaryBackground#FF00FF30
button.secondaryForeground#FF00FF
button.secondaryHoverBackground#FF00FF45
commandCenter.activeBackground#330033
commandCenter.activeBorder#FF1493
commandCenter.activeForeground#FF00FF
commandCenter.background#110011
commandCenter.border#FF1493
commandCenter.foreground#FF00FF
debugIcon.breakpointForeground#FF0000
debugIcon.startForeground#FF00FF
debugToolBar.background#110011
debugToolBar.border#FF1493
descriptionForeground#FF69B4
editor.background#000000
editor.findMatchBackground#FF149360
editor.findMatchHighlightBackground#FF149330
editor.findRangeHighlightBackground#FF69B420
editor.foreground#FF00FF
editor.hoverHighlightBackground#33003315
editor.lineHighlightBackground#33003310
editor.lineHighlightBorder#66006620
editor.selectionBackground#FF00FF40
editor.selectionHighlightBackground#FF00FF25
editor.wordHighlightBackground#FF00FF30
editor.wordHighlightStrongBackground#FF00FF50
editorBracketMatch.background#FF00FF40
editorBracketMatch.border#FF00FF
editorCodeLens.foreground#99009980
editorCursor.background#000000
editorCursor.foreground#FF00FF
editorError.border#FF000080
editorError.foreground#FF0000
editorGroup.border#FF00FF
editorGroupHeader.tabsBackground#100010
editorGroupHeader.tabsBorder#FF00FF
editorGutter.addedBackground#FF00FF
editorGutter.deletedBackground#FF0000
editorGutter.modifiedBackground#FF69B4
editorHint.border#FF69B460
editorHint.foreground#FF69B4
editorHoverWidget.background#110011
editorHoverWidget.border#FF1493
editorHoverWidget.foreground#FF00FF
editorHoverWidget.statusBarBackground#330033
editorInfo.border#FF149380
editorInfo.foreground#FF1493
editorLineNumber.activeForeground#FF00FF
editorLineNumber.foreground#66006680
editorRuler.foreground#33003330
editorWarning.border#FF69B480
editorWarning.foreground#FF69B4
errorForeground#FF0000
extensionButton.prominentBackground#FF00FF
extensionButton.prominentHoverBackground#FF1493
extensionIcon.starForeground#FF69B4
focusBorder#FF1493
foreground#FF00FF
gitDecoration.conflictingResourceForeground#FFCC00
gitDecoration.deletedResourceForeground#FF0000
gitDecoration.ignoredResourceForeground#66006660
gitDecoration.modifiedResourceForeground#FF69B4
gitDecoration.submoduleResourceForeground#FF69B4
gitDecoration.untrackedResourceForeground#FF00FF
icon.foreground#FF00FF
input.background#110011
input.border#FF1493
input.foreground#FF00FF
input.placeholderForeground#66006680
inputOption.activeBackground#FF00FF40
inputOption.activeBorder#FF1493
inputValidation.errorBackground#33000020
inputValidation.errorBorder#FF0000
inputValidation.warningBackground#33003320
inputValidation.warningBorder#FF69B4
list.activeSelectionBackground#66006650
list.activeSelectionForeground#FFFFFF
list.dropBackground#66006640
list.errorForeground#FF0000
list.highlightForeground#FF00FF
list.hoverBackground#33003330
list.hoverForeground#FFFFFF
list.inactiveSelectionBackground#33003330
list.inactiveSelectionForeground#FF1493
list.warningForeground#FF69B4
menu.background#110011
menu.border#FF1493
menu.foreground#FF00FF
menu.selectionBackground#FF00FF40
menu.selectionBorder#FF1493
menu.selectionForeground#FFFFFF
menu.separatorBackground#FF1493
minimap.background#11001180
minimap.errorHighlight#FF0000
minimap.findMatchHighlight#FF149350
minimap.selectionHighlight#FF00FF50
minimap.warningHighlight#FF69B4
minimapSlider.background#66006630
notificationCenter.border#FF1493
notificationCenterHeader.background#110011
notificationCenterHeader.foreground#FF00FF
notificationLink.foreground#FF1493
notifications.background#110011
notifications.border#FF1493
notifications.foreground#FF00FF
notificationToast.border#FF1493
panel.background#000000
panel.border#FF1493
panelInput.border#FF1493
panelSection.border#FF1493
panelSection.dropBackground#FF00FF40
panelSectionHeader.background#330033
panelSectionHeader.border#FF1493
panelSectionHeader.foreground#FF00FF
panelTitle.activeBorder#FF1493
panelTitle.activeForeground#FF00FF
panelTitle.inactiveForeground#66006680
quickInput.background#110011
quickInput.foreground#FF00FF
quickInputList.focusBackground#330033
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#FF1493
quickInputTitle.background#110011
scrollbar.shadow#00000080
scrollbarSlider.activeBackground#FF00FF60
scrollbarSlider.background#66006640
scrollbarSlider.hoverBackground#99009950
selection.background#FF00FF40
settings.checkboxBackground#110011
settings.checkboxBorder#FF1493
settings.checkboxForeground#FF00FF
settings.headerForeground#FF00FF
settings.modifiedItemIndicator#FF69B4
sideBar.background#110011
sideBar.border#FF1493
sideBar.foreground#FF00FF
sideBarSectionHeader.background#330033
sideBarSectionHeader.border#FF1493
sideBarSectionHeader.foreground#FF00FF
sideBarTitle.foreground#FF1493
statusBar.background#110011
statusBar.border#FF1493
statusBar.debuggingBackground#330033
statusBar.debuggingBorder#FF1493
statusBar.debuggingForeground#FF00FF
statusBar.foreground#FF00FF
statusBar.noFolderBackground#000000
statusBar.noFolderBorder#FF1493
statusBar.noFolderForeground#FF00FF
statusBarItem.hoverBackground#FF00FF40
statusBarItem.remoteBackground#FF1493
statusBarItem.remoteForeground#000000
tab.activeBackground#000000
tab.activeBorder#000000
tab.activeBorderTop#FF1493
tab.activeForeground#FF00FF
tab.activeModifiedBorder#FF69B4
tab.border#FF00FF
tab.hoverBackground#000000
tab.hoverBorder#FF1493
tab.hoverForeground#FF1493
tab.inactiveBackground#00000000
tab.inactiveForeground#66006680
tab.inactiveModifiedBorder#FF69B460
tab.unfocusedActiveBorder#66006660
tab.unfocusedActiveBorderTop#66006680
terminal.ansiBlack#000000
terminal.ansiBlue#FF1493
terminal.ansiBrightBlack#333333
terminal.ansiBrightBlue#FF69B4
terminal.ansiBrightCyan#FF69B4
terminal.ansiBrightGreen#FF00FF
terminal.ansiBrightMagenta#FFAADD
terminal.ansiBrightRed#FF3333
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFAADD
terminal.ansiCyan#FF1493
terminal.ansiGreen#FF00FF
terminal.ansiMagenta#FF69B4
terminal.ansiRed#FF0000
terminal.ansiWhite#CCCCCC
terminal.ansiYellow#FF69B4
terminal.background#000000
terminal.foreground#FF00FF
terminal.tab.activeBorder#FF1493
terminalCommandDecoration.defaultBackground#33003320
terminalCommandDecoration.errorBackground#33000040
terminalCommandDecoration.successBackground#66006640
titleBar.activeBackground#100010
titleBar.activeForeground#FF00FF
titleBar.border#FF00FF
titleBar.inactiveBackground#000000
titleBar.inactiveForeground#66006680
walkThrough.embeddedEditorBackground#110011
welcomePage.background#110011
welcomePage.progress.background#FF00FF
welcomePage.progress.foreground#FF00FF
widget.border#FF00FF
widget.shadow#FF00FF30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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