Hackz

Name: Hackz
Author: bbzy

Publisher: bbzyThemes in package: 2

A minimal dark greenish theme for VSCode.

Open in VS Code

Color themes

VS Code preview

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

Hackz — Hackz Darker

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#141414
activityBar.foreground#5eff00
activityBarBadge.background#203a23
activityBarBadge.foreground#5eff00
badge.background#203a23
badge.foreground#5eff00
breadcrumb.activeSelectionForeground#5eff00
breadcrumb.focusForeground#cccccc
breadcrumb.foreground#ccccccb3
breadcrumbPicker.background#252526
button.background#203a23
button.foreground#5eff00
button.hoverBackground#189923
diffEditor.insertedTextBackground#3cff0050
diffEditor.removedTextBackground#fc00006b
editor.background#141414
editor.findMatchBackground#515c6a
editor.findMatchHighlightBackground#6fe64055
editor.findRangeHighlightBackground#3a3d4166
editor.foreground#5eff00
editor.hoverHighlightBackground#264f7840
editor.inactiveSelectionBackground#30453280
editor.lineHighlightBackground#163011
editor.lineHighlightBorder#163011
editor.rangeHighlightBackground#ffffff0b
editor.selectionBackground#1e7729
editor.selectionHighlightBackground#2af33799
editor.wordHighlightBackground#575757b8
editor.wordHighlightStrongBackground#004972b8
editorBracketMatch.background#0064001a
editorBracketMatch.border#888888
editorCodeLens.foreground#999999
editorCursor.foreground#a6d1a3
editorError.foreground#ea4646
editorGroup.border#1fbe2c
editorGroup.dropBackground#53595d80
editorGroupHeader.noTabsBackground#141414
editorGroupHeader.tabsBackground#141414
editorGutter.addedBackground#25ffe2
editorGutter.background#141414
editorGutter.deletedBackground#ff000d
editorGutter.modifiedBackground#ffa600
editorHint.foreground#eeeeeeb3
editorHoverWidget.background#2d2d30
editorHoverWidget.border#5eff00
editorIndentGuide.activeBackground#6b6b6b
editorIndentGuide.background#3c4b3e
editorInfo.foreground#008000
editorLineNumber.activeForeground#5eff00
editorLineNumber.foreground#858585
editorLink.activeForeground#4e94ce
editorMarkerNavigation.background#2d2d30
editorMarkerNavigationError.background#ea4646
editorMarkerNavigationInfo.background#008000
editorMarkerNavigationWarning.background#4d9e4d
editorOverviewRuler.addedForeground#007acc99
editorOverviewRuler.border#7f7f7f4d
editorOverviewRuler.bracketMatchForeground#a0a0a0
editorOverviewRuler.commonContentForeground#60606066
editorOverviewRuler.currentContentForeground#40c8ae80
editorOverviewRuler.deletedForeground#007acc99
editorOverviewRuler.errorForeground#ff1212b3
editorOverviewRuler.findMatchForeground#f6b94db3
editorOverviewRuler.incomingContentForeground#40a6ff80
editorOverviewRuler.infoForeground#121288b3
editorOverviewRuler.modifiedForeground#007acc99
editorOverviewRuler.rangeHighlightForeground#007acc99
editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
editorOverviewRuler.warningForeground#128812b3
editorOverviewRuler.wordHighlightForeground#f1dcdccc
editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
editorPane.background#141414
editorRuler.foreground#5a5a5a
editorSuggestWidget.background#2d2d30
editorSuggestWidget.border#1fbe2c
editorSuggestWidget.foreground#ffffff
editorSuggestWidget.highlightForeground#5eff00
editorSuggestWidget.selectedBackground#062f4a
editorUnnecessaryCode.opacity#000000aa
editorWarning.foreground#5eff00
editorWhitespace.foreground#3c4b3e
editorWidget.background#141414
editorWidget.border#1fbe2c
editorWidget.resizeBorder#1fbe2c
extensionButton.prominentBackground#203a23
extensionButton.prominentForeground#5eff00
extensionButton.prominentHoverBackground#467e4c
focusBorder#1fbe2c99
gitDecoration.addedResourceForeground#81b88b
gitDecoration.conflictingResourceForeground#6c6cc4
gitDecoration.deletedResourceForeground#c74e39
gitDecoration.ignoredResourceForeground#a7a8a9
gitDecoration.modifiedResourceForeground#1fbe2c
gitDecoration.submoduleResourceForeground#8db9e2
gitDecoration.untrackedResourceForeground#73c991
input.background#203a23
input.foreground#5eff00
input.placeholderForeground#cccccc80
inputOption.activeBorder#1fbe2c
inputValidation.errorBackground#5a1d1d
inputValidation.errorBorder#be1100
inputValidation.infoBackground#203a23
inputValidation.infoBorder#1fbe2c
inputValidation.warningBackground#352a05
inputValidation.warningBorder#b89500
list.activeSelectionBackground#163011
list.activeSelectionForeground#5eff00
list.dropBackground#203a23
list.errorForeground#fc5538
list.focusBackground#163011
list.highlightForeground#5eff00
list.hoverBackground#163011
list.inactiveFocusBackground#163011
list.inactiveSelectionBackground#163011
list.invalidItemForeground#ffae00
list.warningForeground#5eff00
notificationLink.foreground#5eff00
panel.background#141414
panel.border#1fbe2c
panel.dropBackground#ffffff1f
panelTitle.activeBorder#5eff00
panelTitle.activeForeground#5eff00
panelTitle.inactiveForeground#e7e7e799
peekView.border#1fbe2c
peekViewEditor.background#042401
peekViewEditor.matchHighlightBackground#5eff0067
peekViewEditorGutter.background#042401
peekViewResult.background#252526
peekViewResult.fileForeground#ffffff
peekViewResult.lineForeground#bbbbbb
peekViewResult.matchHighlightBackground#ea5c004d
peekViewResult.selectionBackground#3399ff33
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#103600
peekViewTitleDescription.foreground#ccccccb3
peekViewTitleLabel.foreground#5eff00
pickerGroup.border#1fbe2c
pickerGroup.foreground#5eff00
progressBar.background#5eff00
scrollbarSlider.activeBackground#5eff0050
settings.checkboxBackground#3c3c3c
settings.checkboxBorder#3c3c3c
settings.checkboxForeground#f0f0f0
settings.dropdownBackground#3c3c3c
settings.dropdownBorder#3c3c3c
settings.dropdownForeground#f0f0f0
settings.headerForeground#e7e7e7
settings.numberInputBackground#3c3c3c
settings.numberInputForeground#cccccc
settings.textInputBackground#3c3c3c
settings.textInputForeground#cccccc
sideBar.background#141414
sideBar.dropBackground#203a23
sideBarSectionHeader.background#242424
statusBar.background#203a23
statusBar.debuggingBackground#d68a18
statusBar.debuggingForeground#5eff00
statusBar.foreground#5eff00
statusBar.noFolderBackground#203a23
statusBar.noFolderForeground#5eff00
tab.activeBackground#141414
tab.activeBorder#1fbe2c
tab.activeForeground#5eff00
tab.border#141414
tab.inactiveBackground#141414
tab.inactiveForeground#c9fcab80
tab.unfocusedActiveBorder#1fbe2c80
tab.unfocusedActiveForeground#5eff0080
tab.unfocusedInactiveForeground#c9fcab80
textLink.activeForeground#125c12
textLink.foreground#5eff00
titleBar.activeBackground#141414
titleBar.activeForeground#cccccc
titleBar.inactiveBackground#3c3c3c99
titleBar.inactiveForeground#cccccc99

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source, meta	#5eff00	—
entity.name.tag.html, punctuation.separator.key-value.html, meta.tag.block.any.html	#f3ff6eff	—
text.html.derivative, string.quoted.double.html, text.html.vue-html	#c8f8b6	—
entity.other.attribute-name.html, constant.character.entity.html, punctuation.definition.entity.html	#5eff00	—
entity.name.tag.template.html, entity.name.tag.inline.any.html, entity.name.tag.script.html, entity.name.tag.style.html, entity.name.tag.block.any.html, entity.name.tag.other.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.other.html	#f3ff6eff	—
comment, punctuation.definition.comment	#666666	italic
string, punctuation.definition.string.begin, punctuation.definition.string.end	#ffffff	—
constant.numeric	#c8f8b6	—
variable	#5eff00	—
keyword, punctuation.terminator.statement, punctuation.curlybrace.open, punctuation.curlybrace.close	#f3ff6e	—
punctuation	#5eff00
string.regexp	#86ffd1	—
storage	#f3ff6e
entity	#5eff00	—
entity.name.function, punctuation.parenthesis.open, punctuation.parenthesis.close, punctuation.separator.comma, meta.function-call, punctuation.section.function.begin, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.separator.parameters, meta.brace.round	#c8f8b6	—
meta.function-call.arguments	#5eff00	—
constant	#c8f8b6	—
support	#c8f8b6	—
variable.language	#c8f8b6	—
support.variable.property, support.variable.dom.	#5eff00	—
variable.language.this	#5eff00	—
token.info-token, token.debug-token	#5eff00	—
token.warn-token	#cd9731	—
token.error-token	#f44747	—

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