Matcha Plus

Name: Matcha Plus
Author: MagHSK

Publisher: MagHSKThemes in package: 2

Matcha is a dark, earthy theme for VS Code. (Optimized for inlay hint)

Open in VS Code GitHub

Color themes

VS Code preview

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

Matcha Plus — Matcha-Plus Fallback

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
invalid	#D9D4B8	—
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	#7EB0A388	—
string, punctuation.definition.string	#C0AE69	—
constant.character.escape	#D9D4B8	—
keyword, constant.language.import-export-all	#D9D4B8	—
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	#7EB0A3
keyword.control, keyword.operator, storage, support.type, keyword.operator.expression, keyword.operator.new	#D9D4B8	bold
entity.name.function, support.function	#A4B07E	—
keyword.operator.type, keyword.operator.optional, punctuation.definition.template-expression, source.tsx punctuation.section.embedded, source.jsx punctuation.section.embedded	#a4b07e
constant	#D9D4B8	—
constant.numeric, constant.language	#7EB0A3	—
variable.parameter, parameter.variable, meta.function.parameter variable, source.rust meta.type_params.rust	#C6A685	—
punctuation, meta.brace	#707C4F	—
comment.block.documentation entity.name.type	#D1DED3	—
variable.language.this, variable.language.special.self	#D9D4B8	—
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	#D9D4B8	—
entity.name.tag, support.class.component	#A4B07E	bold
meta.tag string	#C0AE69	—
meta.attribute punctuation.definition.string	#C6A685	—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html	#D9D4B8	—
constant.character.entity, punctuation.definition.entity	#7EB0A3	—
entity.name.section.markdown, markup.heading.setext	#D9D4B8	—
punctuation.definition.list	#D9D4B8	—
meta.separator.markdown	#D9D4B8	—
markup.inline.raw	#D9D4B8	—
markup.bold	—	bold
markup.italic	—	italic
meta.link punctuation.definition.string, meta.image punctuation.definition.string	#C6A685	—
link, markup.underline.link, constant.other.reference.link.markdown	#D9D4B8	—
markup.quote	#7EB0A3	—
entity.name.tag.css, entity.name.tag.wildcard	#A4B07E	—
entity.other.attribute-name.class, entity.other.attribute-name punctuation.definition.entity	#D9D4B8	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, constant.other.color	#D9D4B8	—
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity	#D9D4B8	—
source.css constant.numeric	#A4B07E	—
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	#D9D4B8	—
variable.parameter.url	#7EB0A3	—
punctuation.definition.variable	#D1DED3	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#D9D4B8	—
entity.name.section	#D9D4B8	—
support.type.property-name.json	#D9D4B8	—
markup.inserted	#A4B07E	—
markup.changed	#D9D4B8	—
markup.deleted	#D9D4B8	—
meta.diff.header	#D9D4B8	italic
meta.diff.range	#D9D4B8	—

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