hackage-dark-theme

Name: hackage-dark-theme
Author: dmarticus

Publisher: dmarticusThemes in package: 1

Dark mode color theme that was inspired by the source code displayed in hackage

GitHub

VS Code preview

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

hackage-dark-theme — hackage-dark-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.background#003847
badge.background#047aa6
button.background#2AA19899
debugExceptionWidget.background#00212B
debugExceptionWidget.border#AB395B
debugToolBar.background#00212B
dropdown.background#00212B
dropdown.border#2AA19899
editor.background#002B36
editor.lineHighlightBackground#073642
editor.selectionBackground#2D3741
editor.selectionHighlightBackground#2D3741
editor.wordHighlightBackground#2D3741
editor.wordHighlightStrongBackground#2D3741
editorCursor.foreground#D30102
editorGroup.border#00212B
editorGroup.dropBackground#2AA19844
editorGroupHeader.tabsBackground#004052
editorHoverWidget.background#004052
editorIndentGuide.activeBackground#C3E1E180
editorIndentGuide.background#93A1A180
editorLineNumber.activeForeground#949494
editorMarkerNavigationError.background#AB395B
editorMarkerNavigationWarning.background#5B7E7A
editorWhitespace.foreground#93A1A180
editorWidget.background#00212B
errorForeground#ffeaea
focusBorder#2AA19899
input.background#2D3741
input.foreground#93A1A1
input.placeholderForeground#93A1A1AA
inputOption.activeBorder#2AA19899
inputValidation.errorBackground#571b26
inputValidation.errorBorder#a92049
inputValidation.infoBackground#052730
inputValidation.infoBorder#363b5f
inputValidation.warningBackground#5d5938
inputValidation.warningBorder#9d8a5e
list.activeSelectionBackground#005A6F
list.dropBackground#00445488
list.highlightForeground#1ebcc5
list.hoverBackground#004454AA
list.inactiveSelectionBackground#00445488
minimap.selectionHighlight#2D3741
panel.border#2b2b4a
peekView.border#2b2b4a
peekViewEditor.background#10192c
peekViewEditor.matchHighlightBackground#7744AA40
peekViewResult.background#00212B
peekViewTitle.background#00212B
pickerGroup.border#2AA19899
pickerGroup.foreground#2AA19899
progressBar.background#047aa6
quickInputList.focusBackground#005A6F
selection.background#2D3741
sideBar.background#00212B
sideBarTitle.foreground#93A1A1
statusBar.background#00212B
statusBar.debuggingBackground#00212B
statusBar.foreground#93A1A1
statusBar.noFolderBackground#00212B
statusBarItem.prominentBackground#003847
statusBarItem.prominentHoverBackground#003847
statusBarItem.remoteBackground#2AA19899
tab.activeBackground#002B37
tab.activeForeground#d6dbdb
tab.border#003847
tab.inactiveBackground#004052
tab.inactiveForeground#93A1A1
tab.lastPinnedBorder#2AA19844
terminal.ansiBlack#073642
terminal.ansiBlue#268bd2
terminal.ansiBrightBlack#586e75
terminal.ansiBrightBlue#839496
terminal.ansiBrightCyan#93a1a1
terminal.ansiBrightGreen#586e75
terminal.ansiBrightMagenta#6c71c4
terminal.ansiBrightRed#cb4b16
terminal.ansiBrightWhite#fdf6e3
terminal.ansiBrightYellow#657b83
terminal.ansiCyan#2aa198
terminal.ansiGreen#859900
terminal.ansiMagenta#d33682
terminal.ansiRed#dc322f
terminal.ansiWhite#eee8d5
terminal.ansiYellow#b58900
titleBar.activeBackground#002C39
walkThrough.embeddedEditorBackground#00000014

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source	#B7C5D3	—
comment, punctuation.whitespace.comment, punctuation.definition.comment	#60666b
punctuation, meta.delimiter	#B7C5D3	—
keyword.operator, constant.language	#B62D65	—
constant, meta.bracket, meta.brace, keyword.operator.infix.tight.at, variable.other.member, meta.record punctuation.brace, keyword.operator.lambda, keyword.operator.colon	#B7C5D3
constant.numeric, string.quoted, punctuation.definition.string, keyword.operator.prefix.minus	#5EC4FF	—
constant.character.escape, punctuation.quasi.element, punctuation.definition.template-expression, punctuation.section.embedded, storage.type.format, constant.other.placeholder, variable.interpolation, meta.quasi-quotation	#B7C5D3	—
keyword, modifier	#B62D65	—
keyword.operator.bind, punctuation.separator.key-value.html, meta.tag, keyword.control, keyword.operator, constant.other.color, punctuation.definition.constant, meta.function.block.start.handlebars, meta.function.inline.other, meta.property-value, support.constant.mathematical-symbols, support.constant.vendored.property-value, punctuation.definition.keyword, punctuation.accessor, keyword.operator.promotion, keyword.operator.function.infix, punctuation.separator.property	#5EC4FF	—
keyword.other.debugger	#EA6279	—
keyword.operator.double-colon, keyword.operator.arrow, keyword.operator.big-arrow, keyword.operator.period, keyword.operator.eq, keyword.operator.pipe, keyword.operator.double-dot, keyword.operator.lambda, keyword.operator.prefix, punctuation.backtick	#5EC4FF	bold
keyword.operator.prefix.at	#B3DDF5
keyword.operator.prefix.hash, entity.name.label, constant.other.label	#8BBBC2
keyword.operator.postfix.hash, keyword.operator.hash	#9099A7
keyword.operator.period	#5EC4FF	bold italic
keyword.other.forall	#B62D65	italic
invalid, token.error-token	#AA2A2A	underline
storage.type, support.type, entity.name.type, keyword.type	#33CED8	—
variable.parameter, text.html, punctuation.section.property-list, meta.property-value.scss punctuation, meta.property-list, keyword.operator.type.annotation	#33CED8	—
variable, support.variable, meta.definition.variable	#33CED8	italic
entity.name, entity.other.attribute-name, meta.function.type-declaration, meta.other.unknown, punctuation.backtick, punctuation.decorator, keyword.operator.promotion, keyword.operator.function.infix	#B7C5D3	—
meta.import, entity.name.namespace, meta.declaration.module, support.module, support.node, support.other.module, support.type.object.module, entity.name.type.module, entity.name.type.class.module, keyword.control.module	#B7C5D3	—
entity.name.function, support.function, meta.function, meta.function-call, entity.name.function, meta.definition.method	#33CED8	—
meta.preprocessor, keyword.other.preprocessor, punctuation.definition.preprocessor, entity.name.function.preprocessor	#2aa198	—
keyword.other.preprocessor	—	bold
entity.name.type.class, support.class, entity.name.class, entity.other.inherited-class, storage.class	#7DAEA3	—
heading.1.markdown, markup.heading.setext.1.markdown	#ea6962	bold
heading.2.markdown, markup.heading.setext.2.markdown	#e78a4e	bold
heading.3.markdown	#d8a657	bold
heading.4.markdown	#a9b665	bold
heading.5.markdown	#7daea3	bold
heading.6.markdown	#d3869b	bold
punctuation.definition.heading.markdown	#928374	regular
string.other.link.title.markdown, constant.other.reference.link.markdown, string.other.link.description.markdown	#d3869b	regular
markup.underline.link.image.markdown, markup.underline.link.markdown	#a9b665	underline
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.italic.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.metadata.markdown, punctuation.separator.key-value.markdown, punctuation.definition.constant.markdown	#928374	—
punctuation.definition.bold.markdown	#928374	regular
meta.separator.markdown, punctuation.definition.constant.begin.markdown, punctuation.definition.constant.end.markdown	#928374	bold
markup.italic	—	italic
markup.bold	—	bold
markup.bold markup.italic, markup.italic markup.bold	—	italic bold
punctuation.definition.markdown, punctuation.definition.raw.markdown	#d8a657	—
fenced_code.block.language	#d8a657	—
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown	#a9b665	—
punctuation.definition.list.begin.markdown	#ea6962	—
punctuation.definition.function.latex, punctuation.definition.function.tex, punctuation.definition.keyword.latex, constant.character.newline.tex, punctuation.definition.keyword.tex	#928374	—
support.function.be.latex	#ea6962	—
support.function.section.latex, keyword.control.table.cell.latex, keyword.control.table.newline.latex	#e78a4e	—
support.class.latex, variable.parameter.latex, variable.parameter.function.latex, variable.parameter.definition.label.latex, constant.other.reference.label.latex	#d8a657	—
keyword.control.preamble.latex	#d3869b	—
punctuation.separator.namespace.xml	#928374	—
entity.name.tag.html, entity.name.tag.xml, entity.name.tag.localname.xml	#e78a4e	—
entity.other.attribute-name.html, entity.other.attribute-name.xml, entity.other.attribute-name.localname.xml	#d8a657	—
string.quoted.double.html, string.quoted.single.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html, punctuation.separator.key-value.html, punctuation.definition.string.begin.xml, punctuation.definition.string.end.xml, string.quoted.double.xml, string.quoted.single.xml, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.xml, meta.tag.xml, meta.tag.preprocessor.xml, meta.tag.other.html, meta.tag.block.any.html, meta.tag.inline.any.html	#a9b665	—
variable.language.documentroot.xml, meta.tag.sgml.doctype.xml	#d3869b	—
storage.type.proto	#d8a657	—
string.quoted.double.proto.syntax, string.quoted.single.proto.syntax, string.quoted.double.proto, string.quoted.single.proto	#a9b665	—
entity.name.class.proto, entity.name.class.message.proto	#89b482	—
punctuation.definition.entity.css, punctuation.separator.key-value.css, punctuation.terminator.rule.css, punctuation.separator.list.comma.css	#928374	—
entity.other.attribute-name.class.css	#ea6962	—
keyword.other.unit	#e78a4e	—
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#d8a657	—
string.quoted.single.css, string.quoted.double.css, support.constant.property-value.css, meta.property-value.css, punctuation.definition.string.begin.css, punctuation.definition.string.end.css, constant.numeric.css, support.constant.font-name.css, variable.parameter.keyframe-list.css	#a9b665	—
support.type.property-name.css	#89b482	—
support.type.vendored.property-name.css	#7daea3	—
entity.name.tag.css, entity.other.keyframe-offset.css, punctuation.definition.keyword.css, keyword.control.at-rule.keyframes.css, meta.selector.css	#d3869b	—

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