Matcha Theme

Name: Matcha Theme
Author: Vyacheslav Ananev

Publisher: Vyacheslav AnanevThemes in package: 2

Warm green matcha theme: Koicha (dark) and Usucha (light). Even contrast, no neon.

Open in VS Code GitHub

Color themes

VS Code preview

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

Matcha Theme — Matcha Koicha

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project $

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#151913
activityBar.border#383e36
activityBar.foreground#daded9
activityBar.inactiveForeground#838882
activityBarBadge.background#89cb61
activityBarBadge.foreground#1b1f1a
badge.background#89cb61
badge.foreground#1b1f1a
breadcrumb.focusForeground#daded9
breadcrumb.foreground#838882
breadcrumbPicker.background#242923
button.background#89cb61
button.foreground#1b1f1a
button.hoverBackground#90ce7b
button.secondaryBackground#242923
button.secondaryForeground#daded9
commandCenter.activeBackground#242923
commandCenter.activeBorder#89cb6199
commandCenter.activeForeground#daded9
commandCenter.background#242923
commandCenter.border#383e36
commandCenter.foreground#9ba09a
commandCenter.inactiveBorder#383e36
commandCenter.inactiveForeground#838882
descriptionForeground#838882
diffEditor.insertedTextBackground#8fca7a24
diffEditor.removedTextBackground#e8796c24
dropdown.background#242923
dropdown.border#383e36
dropdown.foreground#daded9
editor.background#1b1f1a
editor.findMatchBackground#89cb6159
editor.findMatchHighlightBackground#89cb612e
editor.foreground#daded9
editor.lineHighlightBackground#242923
editor.selectionBackground#394f318c
editor.selectionHighlightBackground#394f314d
editor.wordHighlightBackground#394f314d
editor.wordHighlightStrongBackground#394f3166
editorBracketHighlight.foreground1#89cb61
editorBracketHighlight.foreground2#d7c08f
editorBracketHighlight.foreground3#b9d9be
editorBracketHighlight.foreground4#8fc788
editorBracketHighlight.foreground5#bcd79c
editorBracketHighlight.foreground6#c9d8c5
editorBracketHighlight.unexpectedBracket.foreground#eb776a
editorBracketMatch.background#89cb6133
editorBracketMatch.border#89cb61
editorBracketPairGuide.activeBackground1#89cb6180
editorBracketPairGuide.activeBackground2#d7c08f80
editorBracketPairGuide.activeBackground3#b9d9be80
editorBracketPairGuide.activeBackground4#8fc78880
editorBracketPairGuide.activeBackground5#bcd79c80
editorBracketPairGuide.activeBackground6#c9d8c580
editorBracketPairGuide.background1#89cb6138
editorBracketPairGuide.background2#d7c08f38
editorBracketPairGuide.background3#b9d9be38
editorBracketPairGuide.background4#8fc78838
editorBracketPairGuide.background5#bcd79c38
editorBracketPairGuide.background6#c9d8c538
editorCodeLens.foreground#838882
editorCursor.foreground#8bcb64
editorError.foreground#eb776a
editorGhostText.border#383e3600
editorGhostText.foreground#838882
editorGroup.border#383e36
editorGroupHeader.tabsBackground#151913
editorGroupHeader.tabsBorder#383e36
editorGutter.addedBackground#8fca7a
editorGutter.deletedBackground#e8796c
editorGutter.modifiedBackground#e4bd81
editorHint.foreground#a5c4aa
editorHoverWidget.background#242923
editorHoverWidget.border#383e36
editorIndentGuide.activeBackground1#838882
editorIndentGuide.background1#383e36
editorInfo.foreground#a5c4aa
editorInlayHint.background#24292399
editorInlayHint.foreground#838882
editorInlayHint.parameterBackground#24292399
editorInlayHint.parameterForeground#838882
editorInlayHint.typeBackground#24292399
editorInlayHint.typeForeground#838882
editorLightBulb.foreground#e8bc7d
editorLightBulbAi.foreground#97c48d
editorLightBulbAutoFix.foreground#89cb61
editorLineNumber.activeForeground#9ba09a
editorLineNumber.foreground#838882
editorLink.activeForeground#97c48d
editorOverviewRuler.addedForeground#8fca7a
editorOverviewRuler.border#383e36
editorOverviewRuler.bracketMatchForeground#9ba09a
editorOverviewRuler.deletedForeground#e8796c
editorOverviewRuler.errorForeground#eb776a
editorOverviewRuler.findMatchForeground#89cb61cc
editorOverviewRuler.infoForeground#a5c4aa
editorOverviewRuler.modifiedForeground#e4bd81
editorOverviewRuler.rangeHighlightForeground#89cb6180
editorOverviewRuler.selectionHighlightForeground#394f31cc
editorOverviewRuler.warningForeground#e8bc7d
editorOverviewRuler.wordHighlightForeground#9ba09ab3
editorOverviewRuler.wordHighlightStrongForeground#89cb61b3
editorRuler.foreground#383e36
editorStickyScroll.background#151913
editorStickyScroll.border#383e36
editorStickyScrollGutter.background#151913
editorStickyScrollHover.background#242923
editorSuggestWidget.background#242923
editorSuggestWidget.border#383e36
editorSuggestWidget.focusHighlightForeground#89cb61
editorSuggestWidget.highlightForeground#89cb61
editorSuggestWidget.selectedBackground#394f3173
editorSuggestWidget.selectedForeground#daded9
editorSuggestWidget.selectedIconForeground#daded9
editorUnnecessaryCode.opacity#000000a0
editorWarning.foreground#e8bc7d
editorWhitespace.foreground#383e36
editorWidget.background#242923
editorWidget.border#383e36
errorForeground#eb776a
focusBorder#89cb6199
foreground#9ba09a
gitDecoration.addedResourceForeground#8fca7a
gitDecoration.conflictingResourceForeground#e8bc7d
gitDecoration.deletedResourceForeground#e8796c
gitDecoration.ignoredResourceForeground#838882
gitDecoration.modifiedResourceForeground#e4bd81
gitDecoration.untrackedResourceForeground#8fca7a
icon.foreground#9ba09a
input.background#242923
input.border#383e36
input.foreground#daded9
input.placeholderForeground#838882
inputOption.activeBorder#89cb61
inputValidation.errorBackground#242923
inputValidation.errorBorder#eb776a
keybindingLabel.background#242923
keybindingLabel.border#383e36
keybindingLabel.bottomBorder#383e36
keybindingLabel.foreground#daded9
list.activeSelectionBackground#394f3180
list.activeSelectionForeground#daded9
list.activeSelectionIconForeground#daded9
list.errorForeground#eb776a
list.highlightForeground#89cb61
list.hoverBackground#242923
list.inactiveSelectionBackground#394f314d
list.warningForeground#e8bc7d
menu.background#242923
menu.border#383e36
menu.foreground#daded9
menu.selectionBackground#394f3180
merge.border#383e36
merge.commonContentBackground#8388821f
merge.commonHeaderBackground#8388823d
merge.currentContentBackground#8fca7a29
merge.currentHeaderBackground#8fca7a52
merge.incomingContentBackground#97c48d29
merge.incomingHeaderBackground#97c48d52
mergeEditor.change.background#8fca7a24
mergeEditor.change.word.background#8fca7a47
mergeEditor.conflict.handledFocused.border#89cb6199
mergeEditor.conflict.handledUnfocused.border#383e36
mergeEditor.conflict.unhandledFocused.border#e8bc7d
mergeEditor.conflict.unhandledUnfocused.border#e8bc7d80
minimap.background#1b1f1a
minimap.selectionHighlight#394f31
minimapSlider.background#83888226
notificationCenterHeader.background#151913
notifications.background#242923
notifications.border#383e36
panel.background#151913
panel.border#383e36
panelTitle.activeBorder#89cb61
panelTitle.activeForeground#daded9
panelTitle.inactiveForeground#838882
peekView.border#89cb61
peekViewEditor.background#151913
peekViewResult.background#151913
peekViewTitle.background#242923
problemsErrorIcon.foreground#eb776a
problemsInfoIcon.foreground#a5c4aa
problemsWarningIcon.foreground#e8bc7d
progressBar.background#89cb61
quickInput.background#242923
quickInputList.focusBackground#394f3173
sash.hoverBorder#89cb61
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#8388828c
scrollbarSlider.background#83888240
scrollbarSlider.hoverBackground#83888266
selection.background#394f3199
sideBar.background#151913
sideBar.border#383e36
sideBar.foreground#9ba09a
sideBarSectionHeader.background#151913
sideBarSectionHeader.border#383e36
sideBarSectionHeader.foreground#9ba09a
sideBarTitle.foreground#838882
statusBar.background#151913
statusBar.border#383e36
statusBar.debuggingBackground#e8bc7d
statusBar.debuggingForeground#1b1f1a
statusBar.foreground#9ba09a
statusBar.noFolderBackground#151913
statusBarItem.errorBackground#eb776a
statusBarItem.errorForeground#1b1f1a
statusBarItem.remoteBackground#89cb61
statusBarItem.remoteForeground#1b1f1a
symbolIcon.arrayForeground#9ba09a
symbolIcon.booleanForeground#d7c08f
symbolIcon.classForeground#8abcab
symbolIcon.colorForeground#89cb61
symbolIcon.constantForeground#d7c08f
symbolIcon.constructorForeground#89cb61
symbolIcon.enumeratorForeground#8abcab
symbolIcon.enumeratorMemberForeground#d7c08f
symbolIcon.eventForeground#89cb61
symbolIcon.fieldForeground#9ba09a
symbolIcon.fileForeground#9ba09a
symbolIcon.folderForeground#89cb61
symbolIcon.functionForeground#89cb61
symbolIcon.interfaceForeground#8abcab
symbolIcon.keyForeground#9ba09a
symbolIcon.keywordForeground#b17e95
symbolIcon.methodForeground#89cb61
symbolIcon.moduleForeground#8abcab
symbolIcon.namespaceForeground#8abcab
symbolIcon.nullForeground#d7c08f
symbolIcon.numberForeground#d7c08f
symbolIcon.objectForeground#8abcab
symbolIcon.operatorForeground#b17e95
symbolIcon.packageForeground#8abcab
symbolIcon.propertyForeground#9ba09a
symbolIcon.referenceForeground#9ba09a
symbolIcon.snippetForeground#d599b5
symbolIcon.stringForeground#bcd79c
symbolIcon.structForeground#8abcab
symbolIcon.textForeground#bcd79c
symbolIcon.typeParameterForeground#8abcab
symbolIcon.unitForeground#d7c08f
symbolIcon.variableForeground#9ba09a
tab.activeBackground#1b1f1a
tab.activeBorderTop#89cb61
tab.activeForeground#daded9
tab.border#383e36
tab.hoverBackground#242923
tab.inactiveBackground#151913
tab.inactiveForeground#838882
tab.unfocusedActiveForeground#9ba09a
terminal.ansiBlack#1b1f1a
terminal.ansiBlue#4f8dad
terminal.ansiBrightBlack#6a6f69
terminal.ansiBrightBlue#65add2
terminal.ansiBrightCyan#a6ddcb
terminal.ansiBrightGreen#84d273
terminal.ansiBrightMagenta#d599b5
terminal.ansiBrightRed#f67b68
terminal.ansiBrightWhite#e6e9e5
terminal.ansiBrightYellow#efbf6c
terminal.ansiCyan#8abcab
terminal.ansiGreen#64ad53
terminal.ansiMagenta#b17e95
terminal.ansiRed#da6151
terminal.ansiWhite#bbbfba
terminal.ansiYellow#ca9c48
terminal.background#1b1f1a
terminal.foreground#daded9
terminal.selectionBackground#394f3180
terminal.tab.activeBorder#89cb61
terminalCommandDecoration.defaultBackground#838882
terminalCommandDecoration.errorBackground#eb776a
terminalCommandDecoration.successBackground#90ce7b
terminalCursor.foreground#8bcb64
titleBar.activeBackground#151913
titleBar.activeForeground#9ba09a
titleBar.border#383e36
titleBar.inactiveBackground#151913
titleBar.inactiveForeground#838882
tree.indentGuidesStroke#383e36
widget.border#383e36

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#929990	italic
string, string.quoted, punctuation.definition.string	#bcd79c	—
constant.character.escape, string.regexp	#d7c08f	—
constant.numeric, constant.language, constant.character	#d7c08f	—
variable.other.constant, variable.other.enummember, support.constant	#d7c08f	—
keyword, keyword.control, storage, storage.type, storage.modifier, keyword.operator.expression, keyword.operator.new	#8fc788	—
keyword.operator, punctuation.separator, punctuation.accessor	#9bb797	—
punctuation, meta.brace, punctuation.definition.block, punctuation.definition.parameters	#9ba09a	—
entity.name.function, support.function, meta.function-call.generic	#d6e0d3	—
entity.name.type, entity.name.class, entity.name.namespace, support.type, support.class, entity.other.inherited-class	#b9d9be	—
variable, variable.other.readwrite, meta.definition.variable	#daded9	—
variable.parameter, meta.parameter	#c9d8c5	—
variable.other.property, meta.object-literal.key, support.variable.property	#c9d8c5	—
entity.name.tag, punctuation.definition.tag	#8fc788	—
entity.other.attribute-name	#c9d8c5	italic
support.type.property-name.css, entity.name.tag.css	#c9d8c5	—
invalid, invalid.illegal	#eb776a	—
markup.heading, entity.name.section	#89cb61	bold
markup.bold	—	bold
markup.italic	—	italic
markup.inline.raw, markup.fenced_code	#bcd79c	—
markup.underline.link, string.other.link	#97c48d	—
markup.inserted	#8fca7a	—
markup.deleted	#e8796c	—
markup.changed	#e4bd81	—
meta.diff.header, meta.diff.range	#838882	—