Hackpot

Name: Hackpot
Author: wwmyers

Publisher: wwmyersThemes in package: 10

Batman, Garden, & Purple Themes

GitHub

Color themes

VS Code preview

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

Hackpot — Hackpot Purple Haze

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#4d004d
activityBar.activeBorder#a64dff
activityBar.background#330033
activityBar.foreground#5cd65c
activityBar.inactiveForeground#5cd65c95
activityBarBadge.background#990099
badge.background#4d004d
badge.foreground#f2e6ff
breadcrumb.background#4d004d
breadcrumb.foreground#990099
button.background#990099
button.foreground#f2e6ff
dropdown.background#330033
dropdown.border#990099
editor.background#330033
editor.findMatchHighlightBackground#660066
editor.foldBackground#66006650
editor.foreground#f2e6ff
editor.hoverHighlightBackground#4d004d
editor.lineHighlightBackground#66006650
editor.rangeHighlightBackground#330033
editor.selectionBackground#660066
editorBracketMatch.border#990099
editorCursor.foreground#5cd65c
editorGroup.border#4d004d
editorGroupHeader.tabsBackground#330033
editorHoverWidget.background#4d004d
editorHoverWidget.border#990099
editorHoverWidget.foreground#f2e6ff
editorIndentGuide.background1#4d004d95
editorLineNumber.activeForeground#5cd65c
editorLineNumber.foreground#990099
editorMarkerNavigationError.background#ff661a
editorMarkerNavigationWarning.background#4d004d
editorPane.background#330033
editorSuggestWidget.selectedBackground#660066
editorUnnecessaryCode.opacity#000000c0
editorWidget.background#4d004d
editorWidget.border#990099
errorForeground#f2e6ff
focusBorder#990099
input.background#330033
input.foreground#f2e6ff
input.placeholderForeground#f2e6ff
inputOption.activeBorder#a64dff
inputValidation.errorBackground#4d004d
inputValidation.errorBorder#990099
inputValidation.infoBackground#4d004d
inputValidation.infoBorder#990099
inputValidation.warningBackground#4d004d
inputValidation.warningBorder#990099
list.activeSelectionBackground#66006650
list.activeSelectionForeground#5cd65c
list.dropBackground#4d004d
list.focusBackground#66006650
list.highlightForeground#5cd65c
list.hoverBackground#66006650
list.inactiveSelectionBackground#330033
list.inactiveSelectionForeground#5cd65c
minimap.findMatchHighlight#f2e6ff
minimap.selectionHighlight#5cd65c
notificationCenterHeader.background#660066
notificationCenterHeader.foreground#5cd65c
notifications.background#4d004d
notifications.foreground#f2e6ff
panel.border#990099
panelTitle.activeBorder#a64dff
panelTitle.activeForeground#5cd65c
peekView.border#990099
peekViewEditor.background#330033
peekViewEditor.matchHighlightBackground#990099
peekViewEditorGutter.background#4d004d
peekViewResult.background#4d004d
peekViewTitle.background#4d004d
pickerGroup.border#990099
pickerGroup.foreground#4d004d
progressBar.background#990099
scrollbarSlider.activeBackground#800080
scrollbarSlider.background#660066
scrollbarSlider.hoverBackground#800080
selection.background#4d004d
settings.checkboxBorder#990099
settings.checkboxForeground#f2e6ff
settings.dropdownForeground#f2e6ff
settings.headerForeground#5cd65c
settings.modifiedItemIndicator#a64dff
settings.numberInputBackground#4d004d
settings.textInputBackground#4d004d
settings.textInputForeground#f2e6ff
sideBar.background#330033
sideBar.border#990099
sideBar.foreground#f2e6ff
sideBarSectionHeader.background#4d004d
sideBarSectionHeader.foreground#a64dff
sideBarTitle.foreground#5cd65c
statusBar.background#330033
statusBar.debuggingBackground#ffb84d
statusBar.foreground#5cd65c
statusBar.noFolderBackground#330033
statusBar.noFolderForeground#5cd65c
tab.activeBackground#4d004d
tab.activeBorder#a64dff
tab.activeForeground#5cd65c
tab.border#990099
tab.inactiveBackground#330033
tab.inactiveForeground#5cd65c90
tab.unfocusedActiveBorder#a64dff95
tab.unfocusedActiveForeground#5cd65c95
tab.unfocusedInactiveForeground#5cd65c90
terminal.ansiBlack#4d004d
terminal.ansiBlue#50b4fb
terminal.ansiBrightBlack#660066
terminal.ansiBrightBlue#82c9fc
terminal.ansiBrightCyan#00ffff
terminal.ansiBrightGreen#5cd65c
terminal.ansiBrightMagenta#e600e6
terminal.ansiBrightRed#ff661a
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffff66
terminal.ansiCyan#1b9891
terminal.ansiGreen#1e621e
terminal.ansiMagenta#990099
terminal.ansiRed#ff704d
terminal.ansiWhite#f2e6ff
terminal.ansiYellow#ffff33
terminal.foreground#f2e6ff
titleBar.activeBackground#330033
titleBar.border#990099
titleBar.inactiveBackground#330033
tree.indentGuidesStroke#4d004d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, markup.quote.markdown	#990099	italic
markup.deleted, support.type.exception, token.error-token	#ff661a	—
variable.language	#ff704d	—
entity.name.function, entity.name.tag, meta.function-call, entity.name.type, meta.embedded.block.html, variable.other.global, string.other.link.description.markdown, variable.other.property, keyword.other.unit, markup.list, string.other.link.title	#5cd65c	—
storage.type	#00994d	—
support	#50b4fb	—
meta.function.url, markup.underline.link, meta.link.reference, variable.parameter.url	#7ebbe7	—
constant.language, entity.name.section.markdown, storage.modifier	#cc99ff	—
constant.numeric, constant.character.numeric	#e56697	—
string.quoted, punctuation.definition.string, markup.fenced_code.block.markdown, string.interpolated, string.template, markup.inline.raw.string	#1fada6	—
constant.character.escape, constant.other.placeholder, constant.other.character-class, constant.character.entity, keyword.operator.new, keyword.operator.ternary, keyword.operator.quantifier, keyword.operator.negation, keyword.operator.unpacking, keyword.operator.arithmetic, keyword.operator.increment, keyword.operator.decrement, keyword.operator.channel, keyword.operator.redirect, keyword.operator.expansion, keyword.operator.spread, keyword.operator.rest, keyword.operator.address, keyword.operator.ellipsis, punctuation.vararg-ellipses, meta.separator.markdown, markup.inserted.math.display.markdown	#f1414a	—
keyword, storage.type.js, storage.type.function, entity.other, support.type.property-name, entity.name.tag.localname, entity.other.attribute-name.html, markup.raw.block.markdown	#a64dff	—
punctuation, keyword.operator, meta.brace, constant.character, markup.heading.setext, punctuation.definition.list, storage.type.function.arrow, constant.other.color	#ffff66	—
meta.embedded.block, meta.assertion, meta.group.assertion, meta.function-call.arguments, variable.other, variable.other.property, entity.other.attribute-name, string.unquoted.html, meta.object, constant.other, variable.other.constant	#f2e6ff	—
variable.parameter	#ffcc80	—

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