Matchalk

Name: Matchalk
Author: Luca Falasco

Publisher: Luca FalascoThemes in package: 1

Matchalk is a dark, earthy theme for VS Code

Open in VS Code GitHub

VS Code preview

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

Matchalk — Matchalk

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#d2b48c13
activityBar.activeBorder#d2b48c
activityBar.activeFocusBorder#d2b48c
activityBar.background#1c2427
activityBar.dropBorder#d2b48c
activityBar.inactiveForeground#cccccc
activityBarBadge.background#d2b48c
activityBarBadge.foreground#304e37
badge.background#d2b48c
badge.foreground#304e37
button.background#cccccc
button.foreground#1c2427
button.hoverBackground#D1DED3
checkbox.background#7eb08a50
checkbox.foreground#1c2427
debugIcon.breakpointForeground#ff819f
debugToolBar.background#273136
diffEditor.insertedTextBackground#7eb08a30
diffEditor.insertedTextBorder#7eb08a
diffEditor.removedTextBackground#ff819f35
diffEditor.removedTextBorder#ff819f
dropdown.background#323e45
dropdown.border#323e45
editor.background#273136
editor.findMatchBorder#d2b48c
editor.findMatchHighlightBackground#D1DED330
editor.foldBackground#d2b48c30
editor.foreground#D1DED3
editor.lineHighlightBackground#323e45
editor.selectionBackground#7eb08a30
editor.wordHighlightBackground#d2b48c30
editor.wordHighlightBorder#d2b48c
editor.wordHighlightStrongBackground#d2b48c30
editor.wordHighlightStrongBorder#d2b48c
editorBracketHighlight.foreground1#7eb08a
editorBracketHighlight.foreground2#ff819f
editorBracketHighlight.foreground3#d2b48c
editorBracketHighlight.foreground4#ba8eaf
editorBracketHighlight.foreground5#7ea4b0
editorBracketHighlight.foreground6#8A7EB0
editorBracketHighlight.unexpectedBracket.foreground#D1DED3
editorBracketMatch.background#1c2427
editorBracketMatch.border#D1DED3
editorBracketPairGuide.activeBackground1#7eb08a
editorBracketPairGuide.activeBackground2#ff819f
editorBracketPairGuide.activeBackground3#d2b48c
editorBracketPairGuide.activeBackground4#ba8eaf
editorBracketPairGuide.activeBackground5#7ea4b0
editorBracketPairGuide.activeBackground6#8A7EB0
editorCursor.background#273136
editorCursor.foreground#7eb08a
editorError.foreground#ff819f
editorGroup.border#273136
editorGroup.dropBackground#d2b48c30
editorGroupHeader.noTabsBackground#1c2427
editorGroupHeader.tabsBackground#1c2427
editorGutter.addedBackground#7eb08a
editorGutter.background#273136
editorGutter.deletedBackground#ff819f
editorGutter.modifiedBackground#ba8eaf
editorHoverWidget.border#7eb08a80
editorIndentGuide.activeBackground#323e45
editorIndentGuide.background#323e45
editorInfo.foreground#d2b48c
editorInlayHint.background#d2b48c30
editorInlayHint.foreground#d2b48cCC
editorInlayHint.parameterBackground#d2b48c30
editorInlayHint.parameterForeground#d2b48cCC
editorInlayHint.typeBackground#7ea4b030
editorInlayHint.typeForeground#7ea4b0CC
editorLineNumber.activeForeground#D1DED3
editorLineNumber.foreground#D1DED350
editorLink.activeForeground#d2b48c
editorMarkerNavigation.background#1c2427
editorMarkerNavigationError.background#ff819f
editorMarkerNavigationInfo.background#d2b48c
editorMarkerNavigationWarning.background#ba8eaf
editorOverviewRuler.addedForeground#7eb08a
editorOverviewRuler.border#d2b48c
editorOverviewRuler.bracketMatchForeground#d2b48c
editorOverviewRuler.deletedForeground#ff819f
editorOverviewRuler.errorForeground#ff819f
editorOverviewRuler.infoForeground#d2b48c
editorOverviewRuler.modifiedForeground#ba8eaf
editorOverviewRuler.selectionHighlightForeground#d2b48c
editorOverviewRuler.warningForeground#ba8eaf
editorPane.background#273136
editorRuler.foreground#d2b48c
editorSuggestWidget.background#323e45
editorSuggestWidget.border#7eb08a80
editorSuggestWidget.highlightForeground#7eb08a
editorWarning.foreground#ba8eaf
editorWhitespace.foreground#304e37
editorWidget.background#1c2427
editorWidget.resizeBorder#d2b48c
errorForeground#d2b48c
extensionButton.prominentBackground#d2b48c
extensionButton.prominentForeground#304e37
extensionButton.prominentHoverBackground#ff819f
focusBorder#d2b48c80
foreground#D1DED3
gitDecoration.addedResourceForeground#7eb08a
gitDecoration.conflictingResourceForeground#ff819f
gitDecoration.deletedResourceForeground#ff819f
gitDecoration.ignoredResourceForeground#d2b48c
gitDecoration.modifiedResourceForeground#ba8eaf
gitDecoration.renamedResourceForeground#ba8eaf
gitDecoration.stageDeletedResourceForeground#ff819f
gitDecoration.stageModifiedResourceForeground#ba8eaf
gitDecoration.untrackedResourceForeground#7eb08a
input.background#273136
input.border#323e45
inputValidation.errorBackground#ff819f
inputValidation.errorBorder#ff819f
inputValidation.errorForeground#273136
inputValidation.infoBackground#d2b48c
inputValidation.infoBorder#d2b48c
inputValidation.infoForeground#273136
inputValidation.warningBackground#ba8eaf
inputValidation.warningBorder#ba8eaf
inputValidation.warningForeground#273136
list.activeSelectionBackground#d2b48c20
list.dropBackground#d2b48c20
list.errorForeground#d2b48c
list.focusBackground#d2b48c30
list.highlightForeground#7eb08a
list.hoverBackground#d2b48c20
list.inactiveSelectionBackground#d2b48c25
list.warningForeground#d2b48c
menu.background#1c2427
menu.foreground#D1DED3
menu.selectionBackground#d2b48cDD
menu.selectionForeground#304e37
menu.separatorBackground#D1DED3
minimap.background#273136
minimap.errorHighlight#d2b48c
minimap.selectionHighlight#d2b48c80
minimap.warningHighlight#ba8eaf
minimapGutter.addedBackground#7eb08a
minimapGutter.deletedBackground#ff819f
minimapGutter.modifiedBackground#ba8eaf
notifications.background#1c2427
notificationsErrorIcon.foreground#d2b48c
notificationsInfoIcon.foreground#d2b48c
notificationsWarningIcon.foreground#d2b48c
panel.background#1c2427
panel.border#304e37
panel.dropBorder#d2b48c
panelTitle.activeBorder#d2b48c
peekViewEditor.background#1C2427
peekViewEditor.matchHighlightBackground#1c2427
peekViewEditor.matchHighlightBorder#ff819f
peekViewResult.background#323e45
peekViewResult.matchHighlightBackground#273136
peekViewResult.selectionBackground#1c2427
peekViewTitle.background#273136
pickerGroup.border#1c2427
pickerGroup.foreground#d2b48c
problemsErrorIcon.foreground#ff819f
problemsInfoIcon.foreground#d2b48c
problemsWarningIcon.foreground#ba8eaf
progressBar.background#d2b48c
scrollbar.shadow#1c2427
scrollbarSlider.activeBackground#D1DED3
scrollbarSlider.background#7eb08a30
scrollbarSlider.hoverBackground#d2b48c
selection.background#d2b48c80
settings.modifiedItemIndicator#ba8eaf
sideBar.background#323E45
sideBarSectionHeader.background#273136
statusBar.background#273136
statusBar.debuggingBackground#7eb08ada
statusBar.debuggingForeground#273136
statusBar.foreground#D1DED3
statusBar.noFolderBackground#7eb08ada
statusBar.noFolderForeground#273136
statusBarItem.hoverBackground#304e3730
statusBarItem.prominentBackground#304e3730
statusBarItem.prominentForeground#273136
statusBarItem.prominentHoverBackground#7eb08a
statusBarItem.remoteBackground#273136
statusBarItem.remoteForeground#D1DED3
tab.activeBackground#273136
tab.activeBorder#7eb08a
tab.activeModifiedBorder#ba8eaf
tab.border#1c2427
tab.hoverBackground#323e45
tab.inactiveBackground#1c2427
tab.lastPinnedBorder#d2b48c50
terminal.ansiBlack#323E45
terminal.ansiBlue#7EA4B0
terminal.ansiBrightBlack#323E45
terminal.ansiBrightBlue#7EA4B0
terminal.ansiBrightCyan#7ea4b0
terminal.ansiBrightGreen#7eb08a
terminal.ansiBrightMagenta#ba8eaf
terminal.ansiBrightRed#ff819f
terminal.ansiBrightWhite#D1DED3
terminal.ansiBrightYellow#d2b48c
terminal.ansiCyan#7ea4b0
terminal.ansiGreen#7eb08a
terminal.ansiMagenta#ba8eaf
terminal.ansiRed#ff819f
terminal.ansiWhite#D1DED3
terminal.ansiYellow#d2b48c
terminal.selectionBackground#d2b48c30
terminalCursor.background#273136
terminalCursor.foreground#7eb08a
textLink.activeForeground#d2b48c
textLink.foreground#d2b48c
textPreformat.foreground#7eb08a
textSeparator.foreground#1c2427
titleBar.activeBackground#273136
titleBar.border#304e37
titleBar.inactiveBackground#1c2427
widget.shadow#1c2427

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
invalid	#d2b48c	—
meta.embedded, source.groovy.embedded, meta.template.expression	#D1DED3	—
variable, support.variable.property.dom, support.variable.dom, support.variable.property, punctuation.separator.parameter, string.interpolated.pug variable	#D1DED3	—
comment, punctuation.definition.comment	#7ea4b088	—
string, punctuation.definition.string	#ba8eaf	—
constant.character.escape	#d2b48c	—
keyword, constant.language.import-export-all	#d2b48c	—
entity.name.type, punctuation.definition.typeparameters, support.class, entity.other.inherited-class, new.expr entity.name.type, meta.interface, support.type.primitive, support.type.builtin, meta.type.annotation entity.name.type, meta.type.parameters entity.name.type	#7ea4b0
keyword.control, keyword.operator, storage, support.type, keyword.operator.expression, keyword.operator.new	#d2b48c	bold
entity.name.function, support.function	#7eb08a	—
keyword.operator.type, keyword.operator.optional, punctuation.definition.template-expression, source.tsx punctuation.section.embedded, source.jsx punctuation.section.embedded	#7eb08a
constant	#d2b48c	—
constant.numeric, constant.language	#7ea4b0	—
variable.parameter, parameter.variable, meta.function.parameter variable, source.rust meta.type_params.rust	#ff819f	—
punctuation, meta.brace	#7ea4b0	—
comment.block.documentation entity.name.type	#D1DED3	—
variable.language.this, variable.language.special.self	#d2b48c	—
meta.tag.metadata.doctype entity.name.tag, meta.tag.metadata.doctype punctuation.definition.tag, meta.tag.metadata.doctype string, meta.tag.metadata.doctype entity.other.attribute-name.html, meta.tag.sgml.doctype	#d2b48c	—
entity.name.tag, support.class.component	#7eb08a	bold
meta.tag string	#ba8eaf	—
meta.attribute punctuation.definition.string	#ff819f	—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html	#d2b48c	—
constant.character.entity, punctuation.definition.entity	#7ea4b0	—
entity.name.section.markdown, markup.heading.setext	#d2b48c	—
punctuation.definition.list	#d2b48c	—
meta.separator.markdown	#d2b48c	—
markup.inline.raw	#d2b48c	—
markup.bold	—	bold
markup.italic	—	italic
meta.link punctuation.definition.string, meta.image punctuation.definition.string	#ff819f	—
link, markup.underline.link, constant.other.reference.link.markdown	#d2b48c	—
markup.quote	#7ea4b0	—
entity.name.tag.css, entity.name.tag.wildcard	#7eb08a	—
entity.other.attribute-name.class, entity.other.attribute-name punctuation.definition.entity	#d2b48c	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, constant.other.color	#d2b48c	—
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity	#d2b48c	—
source.css constant.numeric	#7eb08a	—
meta.property-name, support.type.property-name	#D1DED3
meta.property-value, meta.object-literal.key, meta.object.member, variable.other.property, variable.other.object.property, meta.property-value constant.other, support.constant.property-value	#d2b48c	—
variable.parameter.url	#7ea4b0	—
punctuation.definition.variable	#D1DED3	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#d2b48c	—
entity.name.section	#d2b48c	—
support.type.property-name.json	#d2b48c	—
markup.inserted	#7eb08a	—
markup.changed	#d2b48c	—
markup.deleted	#d2b48c	—
meta.diff.header	#d2b48c	italic
meta.diff.range	#d2b48c	—

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