Hackerman Theme

Name: Hackerman Theme
Author: Marcos Coimbra

Publisher: Marcos CoimbraThemes in package: 1

My first color theme!

GitHub

VS Code preview

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

Hackerman Theme — Hackerman Theme

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.activeBackground#00493d79
activityBar.activeBorder#00d4b1
activityBar.activeFocusBorder#00493d79
activityBar.background#07070a
activityBar.border#00d4b1
activityBar.dropBorder#006e6ea1
activityBar.foreground#00d4b1
activityBar.inactiveForeground#00d4b1
activityBarBadge.background#cee00a
activityBarBadge.foreground#002721
badge.background#00d482
badge.foreground#00130bbd
breadcrumb.activeSelectionForeground#00ffd591
breadcrumb.background#101116
breadcrumb.focusForeground#00ffd5
breadcrumb.foreground#00d4b1
breadcrumbPicker.background#101116
button.background#00ad6b
button.foreground#011c27
button.hoverBackground#00d482
button.secondaryBackground#00ff55
button.secondaryForeground#ff00b3
button.secondaryHoverBackground#00d482
charts.blue#004cf1
charts.foreground#101116
charts.green#00d482
charts.lines#00d7d7
charts.orange#ff5100
charts.purple#311b92
charts.red#ff0000
charts.yellow#fdf90e
checkbox.background#011c27
checkbox.border#00d482
checkbox.foreground#00d482
debugExceptionWidget.background#140020
debugExceptionWidget.border#00a2ff
debugTokenExpression.boolean#029b60bd
debugTokenExpression.error#029b60bd
debugTokenExpression.name#00ff9c
debugTokenExpression.number#00ff9c
debugTokenExpression.string#00ff9c
debugTokenExpression.value#029b60bd
debugToolBar.background#002b25
debugToolBar.border#00ff9c
debugView.exceptionLabelBackground#029b60bd
debugView.exceptionLabelForeground#00ff9c
debugView.stateLabelBackground#029b60bd
debugView.stateLabelForeground#00ff9c
debugView.valueChangedHighlight#00ff9c
descriptionForeground#00d7d7
diffEditor.border#00d4b1
diffEditor.diagonalFill#4200ad3d
diffEditor.insertedTextBackground#4200ad3d
diffEditor.insertedTextBorder#00d4b1
diffEditor.removedTextBackground#4200ad3d
diffEditor.removedTextBorder#00d4b1
dropdown.background#012113c9
dropdown.border#00d482
dropdown.foreground#00d482
dropdown.listBackground#012113c9
editor.background#101116
editor.findMatchBackground#f39d1256
editor.findMatchBorder#f39d12b6
editor.findMatchHighlightBackground#59b8b377
editor.foldBackground#1f281b7e
editor.foreground#D5CED9
editor.hoverHighlightBackground#373941
editor.lineHighlightBackground#2e323d
editor.lineHighlightBorder#2e323d
editor.selectionBackground#3D4352
editor.selectionHighlightBackground#4F435580
editor.stackFrameHighlightBackground#002b25
editor.wordHighlightBackground#4F4355
editor.wordHighlightStrongBackground#db45a280
editorBracketMatch.background#5763106c
editorBracketMatch.border#eaff006b
editorCursor.background#101116
editorCursor.foreground#D5CED9
editorError.border#ff590000
editorError.foreground#ff000090
editorGroup.border#00d4b1
editorGroup.dropBackground#00663fbd
editorGroup.emptyBackground#0c0c11
editorGroup.focusedEmptyBorder#00d4b1
editorGroupHeader.border#00d4b1
editorGroupHeader.noTabsBackground#0c0c11
editorGroupHeader.tabsBackground#0c0c11
editorGroupHeader.tabsBorder#00d4b1
editorGutter.addedBackground#e0f000
editorGutter.background#101116e8
editorGutter.commentRangeForeground#ff0095
editorGutter.deletedBackground#003cffaf
editorGutter.foldingControlForeground#eaff00
editorGutter.modifiedBackground#c8ff00
editorHint.border#00201b
editorHint.foreground#cc00ff
editorHoverWidget.background#001420
editorHoverWidget.border#00a2ff
editorHoverWidget.foreground#00a2ff
editorHoverWidget.statusBarBackground#00446b69
editorIndentGuide.activeBackground#eaff00
editorIndentGuide.background#566310
editorInfo.border#00a589
editorInfo.foreground#00d4b1
editorLightBulb.foreground#eaff00
editorLightBulbAutoFix.foreground#eaff00
editorLineNumber.activeForeground#eaff00
editorLineNumber.foreground#566310
editorLink.activeForeground#101116
editorMarkerNavigation.background#001420
editorMarkerNavigationError.background#00a2ff
editorMarkerNavigationInfo.background#00a2ff94
editorMarkerNavigationWarning.background#001420
editorOverviewRuler.addedForeground#00ff40
editorOverviewRuler.background#101116
editorOverviewRuler.border#00d4b1
editorOverviewRuler.bracketMatchForeground#ff0000
editorOverviewRuler.commonContentForeground#00d4b1
editorOverviewRuler.currentContentForeground#029b60bd
editorOverviewRuler.deletedForeground#6200ff
editorOverviewRuler.errorForeground#ff0000
editorOverviewRuler.findMatchForeground#00d4b1
editorOverviewRuler.incomingContentForeground#00d482
editorOverviewRuler.infoForeground#00a589
editorOverviewRuler.modifiedForeground#3700ff
editorOverviewRuler.rangeHighlightForeground#00d4b1
editorOverviewRuler.selectionHighlightForeground#00d4b1
editorOverviewRuler.warningForeground#e5ff00af
editorOverviewRuler.wordHighlightForeground#6200ff
editorOverviewRuler.wordHighlightStrongForeground#6200ff
editorPane.background#101116
editorSuggestWidget.background#001420
editorSuggestWidget.border#00a2ff
editorSuggestWidget.foreground#00a2ff94
editorSuggestWidget.highlightForeground#00a2ff
editorSuggestWidget.selectedBackground#00643f94
editorUnnecessaryCode.border#ffffff00
editorUnnecessaryCode.opacity#00d4b19b
editorWarning.border#aabd00af
editorWarning.foreground#e5ff00af
editorWhitespace.foreground#eaff00
editorWidget.background#101116e8
editorWidget.border#00d4b1
editorWidget.foreground#00d4b1
editorWidget.resizeBorder#00d4b1
errorForeground#ff0000
extensionBadge.remoteBackground#002e1c
extensionBadge.remoteForeground#04aa6c
extensionButton.prominentBackground#04aa6c
extensionButton.prominentForeground#002e1c
extensionButton.prominentHoverBackground#00ff9c
gitDecoration.addedResourceForeground#0b8aeb
gitDecoration.ignoredResourceForeground#2b6d62b9
gitDecoration.modifiedResourceForeground#dccb17
gitDecoration.untrackedResourceForeground#00913cdc
icon.foreground#029b60bd
input.background#001420
input.border#00a2ff
input.foreground#00a2ff
input.placeholderForeground#0378bd
inputOption.activeBackground#101116b9
inputOption.activeBorder#00d482
inputOption.activeForeground#00d482
inputValidation.errorBackground#003622
inputValidation.errorBorder#00d482
inputValidation.errorForeground#00d482
inputValidation.infoBackground#003622
inputValidation.infoBorder#00ff22
inputValidation.infoForeground#00d482
inputValidation.warningBackground#003622
inputValidation.warningBorder#00d482
inputValidation.warningForeground#00d482
list.activeSelectionBackground#003622
list.activeSelectionForeground#00d482
list.deemphasizedForeground#003622
list.dropBackground#003622
list.errorForeground#b30000
list.filterMatchBackground#003622
list.filterMatchBorder#00d4b1
list.focusBackground#003622
list.focusForeground#00d482
list.highlightForeground#00d482
list.hoverBackground#005a396c
list.hoverForeground#00d482
list.inactiveFocusBackground#141610
list.inactiveSelectionBackground#01301f6c
list.inactiveSelectionForeground#00d4b1
list.invalidItemForeground#007763
list.warningForeground#d4eb00
listFilterWidget.background#003622
listFilterWidget.noMatchesOutline#003622
listFilterWidget.outline#003622
menu.background#00130bd3
menu.border#00cd7e
menu.foreground#00cd7e
menu.selectionBackground#003622
menu.selectionBorder#009e64
menu.selectionForeground#00cd7e
menu.separatorBackground#003622
menubar.selectionBackground#005e3d
menubar.selectionBorder#0c0c1300
menubar.selectionForeground#00d482
merge.border#00d4b1
merge.commonContentBackground#0175627c
merge.commonHeaderBackground#00d4b1
merge.currentContentBackground#003d337c
merge.currentHeaderBackground#03584942
merge.incomingContentBackground#180c50a1
merge.incomingHeaderBackground#311b92a1
minimap.background#0c0c11
minimap.errorHighlight#ff0000
minimap.findMatchHighlight#00f7ff
minimap.selectionHighlight#00d4b1
minimap.warningHighlight#e5ff0098
minimapGutter.addedBackground#00f7ff
minimapGutter.deletedBackground#00f7ff
minimapGutter.modifiedBackground#00f7ff
minimapSlider.activeBackground#00d482
minimapSlider.background#00d48388
minimapSlider.hoverBackground#00d48388
notebook.cellBorderColor#00d7d7
notebook.cellHoverBackground#5900be80
notebook.cellInsertionIndicator#4c00ff
notebook.cellStatusBarItemHoverBackground#001420
notebook.cellToolbarSeparator#101116d8
notebook.focusedCellBackground#001420
notebook.focusedCellBorder#c8ff00
notebook.focusedEditorBorder#00ffd5
notebook.outputContainerBackgroundColor#101116
notebook.symbolHighlightBackground#00ff73
notebookScrollbarSlider.activeBackground#00d48393
notebookScrollbarSlider.background#029b607e
notebookScrollbarSlider.hoverBackground#00d48393
notebookStatusErrorIcon.foreground#ff0000
notebookStatusRunningIcon.foreground#00ffd5
notebookStatusSuccessIcon.foreground#c8ff00
notificationCenter.border#00ff9c
notificationCenterHeader.background#002211
notificationCenterHeader.foreground#00ff9c
notificationLink.foreground#00ff9c
notifications.background#00060f
notifications.border#00ff9c
notifications.foreground#00ff9c
notificationsErrorIcon.foreground#ff0000
notificationsInfoIcon.foreground#00ff9c
notificationsWarningIcon.foreground#fbff00
notificationToast.border#00ff9c
panel.background#08080c
panel.border#00d482
panel.dropBorder#00d482
panelInput.border#00d482
panelSection.border#00d482
panelSection.dropBackground#101116
panelSectionHeader.background#101116
panelSectionHeader.border#5900ff7a
panelSectionHeader.foreground#00d482
panelTitle.activeBorder#00d482
panelTitle.activeForeground#00d482
panelTitle.inactiveForeground#00d48373
peekView.border#00d482
peekViewEditor.background#0036229c
peekViewEditor.matchHighlightBackground#311b92a1
peekViewEditor.matchHighlightBorder#00d482
peekViewEditorGutter.background#001420
peekViewResult.background#001420
peekViewResult.fileForeground#00d482
peekViewResult.lineForeground#00d482
peekViewResult.matchHighlightBackground#311b92a1
peekViewResult.selectionBackground#003622
peekViewResult.selectionForeground#00d482
peekViewTitle.background#003622
peekViewTitleDescription.foreground#00d482
peekViewTitleLabel.foreground#00d482
pickerGroup.border#00ff9c
pickerGroup.foreground#00ff9c
problemsErrorIcon.foreground#ff0000
problemsInfoIcon.foreground#fbff00
problemsWarningIcon.foreground#fbff00
progressBar.background#00d7d7
quickInput.background#101116d8
quickInput.foreground#01ac6a
quickInputTitle.background#101116d8
scm.providerBorder#00d482
scrollbar.shadow#00a2ff
scrollbarSlider.activeBackground#029c6163
scrollbarSlider.background#029b607e
scrollbarSlider.hoverBackground#00d48393
searchEditor.findMatchBackground#0175627c
searchEditor.findMatchBorder#00d4b1
searchEditor.textInputBorder#00d4b1
selection.background#00643f
settings.checkboxBackground#003622
settings.checkboxBorder#00d482
settings.checkboxForeground#00d482
settings.dropdownBackground#003622
settings.dropdownBorder#00d482
settings.dropdownForeground#00d482
settings.dropdownListBorder#00d482
settings.focusedRowBackground#00362273
settings.headerForeground#00d4b1
settings.modifiedItemIndicator#00d4b1
settings.numberInputBackground#001420
settings.numberInputBorder#00d482
settings.numberInputForeground#00d482
settings.textInputBackground#001420
settings.textInputBorder#00d482
settings.textInputForeground#00d482
sideBar.background#0c0c11
sideBar.border#0c0c11
sideBar.dropBackground#00493d79
sideBar.foreground#009178
sideBarSectionHeader.background#013329
sideBarSectionHeader.border#00d4b1
sideBarSectionHeader.foreground#00d4b1
sideBarTitle.foreground#00d4b1
statusBar.background#002015
statusBar.border#00d482
statusBar.debuggingBackground#035337
statusBar.debuggingBorder#00d482
statusBar.debuggingForeground#00d482
statusBar.foreground#00d482
statusBar.noFolderBackground#002015
statusBar.noFolderBorder#00d482
statusBar.noFolderForeground#00d482
statusBarItem.activeBackground#005e3d
statusBarItem.hoverBackground#005e3d
statusBarItem.prominentBackground#005e3d
statusBarItem.prominentForeground#00d482
statusBarItem.prominentHoverBackground#005e3d
statusBarItem.remoteBackground#005e3d
statusBarItem.remoteForeground#00d482
tab.activeBackground#101116
tab.activeBorder#00d4b1
tab.activeBorderTop#00d4b1
tab.activeForeground#00d4b1
tab.activeModifiedBorder#00d4b1
tab.border#101116
tab.hoverBackground#0175627c
tab.hoverBorder#00d4b1
tab.hoverForeground#00d4b1
tab.inactiveBackground#101817
tab.inactiveForeground#017562
tab.inactiveModifiedBorder#007a66
tab.lastPinnedBorder#00d4b1
tab.unfocusedActiveBackground#15151f
tab.unfocusedActiveBorder#015f4f
tab.unfocusedActiveBorderTop#15151f
tab.unfocusedActiveForeground#00d4b1
tab.unfocusedActiveModifiedBorder#007a66
tab.unfocusedHoverBackground#0175627c
tab.unfocusedHoverBorder#00d4b1
tab.unfocusedHoverForeground#00d4b1
tab.unfocusedInactiveBackground#15151f
tab.unfocusedInactiveForeground#00d4b1
tab.unfocusedInactiveModifiedBorder#00d4b1
terminal.ansiBlack#10d4b0
terminal.ansiBlue#004cf1
terminal.ansiBrightBlack#02adf1
terminal.ansiBrightBlue#00a2ff
terminal.ansiBrightCyan#08e1d7
terminal.ansiBrightGreen#00ff9c
terminal.ansiBrightMagenta#e215d491
terminal.ansiBrightRed#ff0000
terminal.ansiBrightWhite#2eb8f8
terminal.ansiBrightYellow#ffdd00
terminal.ansiCyan#029790
terminal.ansiGreen#0059ff
terminal.ansiMagenta#94058a
terminal.ansiRed#c00e0e
terminal.ansiWhite#311b92
terminal.ansiYellow#1a1b03
terminal.background#00060f
terminal.border#00ff9c
terminal.foreground#00ca7d
terminal.selectionBackground#5900ff3b
terminalCursor.background#002b25
terminalCursor.foreground#00ca7d
textBlockQuote.background#029b60bd
textBlockQuote.border#00d7d7
textCodeBlock.background#101610
textLink.activeForeground#00d7d7
textLink.foreground#059797
textPreformat.foreground#00d7d7
textSeparator.foreground#00d7d7
titleBar.activeBackground#08080c
titleBar.activeForeground#00d482
titleBar.border#08080c
titleBar.inactiveBackground#0c0c13
titleBar.inactiveForeground#00a164
tree.indentGuidesStroke#00d4b1
walkThrough.embeddedEditorBackground#00d482
welcomePage.background#101116
widget.shadow#00d482
window.activeBorder#00d7d7
window.inactiveBorder#00d7d7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#D5CED9	—
comment, markup.quote.markdown, meta.diff, meta.diff.header	#A0A1A7cc	—
meta.template.expression.js, constant.name.attribute.tag.jade, punctuation.definition.metadata.markdown, punctuation.definition.string.end.markdown, punctuation.definition.string.begin.markdown	#D5CED9	—
variable, support.variable, entity.name.tag.yaml, constant.character.entity.html, source.css entity.name.tag.reference, beginning.punctuation.definition.list.markdown, source.css entity.other.attribute-name.parent-selector, meta.structure.dictionary.json support.type.property-name	#00e8c6	—
markup.bold, constant.numeric, meta.group.regexp, constant.other.php, support.constant.ext.php, constant.other.class.php, support.constant.core.php, fenced_code.block.language, constant.other.caps.python, entity.other.attribute-name, support.type.exception.python, source.css keyword.other.unit, variable.other.object.property.js.jsx, variable.other.object.js	#f39c12	—
markup.list, text.xml string, entity.name.type, support.function, entity.other.attribute-name, meta.at-rule.extend, entity.name.function, entity.other.inherited-class, entity.other.keyframe-offset.css, text.html.markdown string.quoted, meta.function-call.generic.python, meta.at-rule.extend support.constant, entity.other.attribute-name.class.jade, source.css entity.other.attribute-name, text.xml punctuation.definition.string	#FFE66D	—
markup.heading, variable.language.this.js, variable.language.special.self.python	#ff00aa	—
punctuation.definition.interpolation, punctuation.section.embedded.end.php, punctuation.section.embedded.end.ruby, punctuation.section.embedded.begin.php, punctuation.section.embedded.begin.ruby, punctuation.definition.template-expression, entity.name.tag	#f92672	—
storage, keyword, meta.link, meta.image, markup.italic, source.js support.type	#c74ded	—
string.regexp, markup.changed	#7cb7ff	—
constant, support.class, keyword.operator, support.constant, text.html.markdown string, source.css support.function, source.php support.function, support.function.magic.python, entity.other.attribute-name.id, markup.deleted	#ee5d43	—
string, text.html.php string, markup.inline.raw, markup.inserted, punctuation.definition.string, punctuation.definition.markdown, text.html meta.embedded source.js string, text.html.php punctuation.definition.string, text.html meta.embedded source.js punctuation.definition.string, text.html punctuation.definition.string, text.html string	#96E072	—
entity.other.inherited-class	—	underline
comment, invalid, keyword, entity.other.attribute-name	—	italic

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