Matcha Coded

Name: Matcha Coded
Author: Ruqaiyya YSF

Publisher: Ruqaiyya YSFThemes in package: 1

A premium, calm VS Code color theme built around dark and light matcha greens with soft pink accents.

Open in VS Code GitHub

VS Code preview

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

Matcha Coded — Matcha Coded

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.activeBackground#00000000
activityBar.activeBorder#E8B8C8
activityBar.background#0E1A12
activityBar.border#0E1A12
activityBar.foreground#A8C3A5
activityBar.inactiveForeground#4C5F51
activityBarBadge.background#D89AAA
activityBarBadge.foreground#17231C
badge.background#405B47
badge.foreground#E8E1D4
breadcrumb.activeSelectionForeground#D89AAA
breadcrumb.background#17231C
breadcrumb.focusForeground#E8E1D4
breadcrumb.foreground#718F78
breadcrumbPicker.background#22352A
button.background#405B47
button.foreground#E8E1D4
button.hoverBackground#4C6B53
button.secondaryBackground#2E4335
button.secondaryForeground#D8DDD7
button.secondaryHoverBackground#374F3D
checkbox.background#0E1A12
checkbox.border#405B47
checkbox.foreground#D8DDD7
debugConsole.errorForeground#C98F9E
debugConsole.infoForeground#A8C3A5
debugConsole.sourceForeground#718F78
debugConsole.warningForeground#D89AAA
debugConsoleInputIcon.foreground#D89AAA
debugIcon.breakpointDisabledForeground#4C5F51
debugIcon.breakpointForeground#D89AAA
debugIcon.breakpointUnverifiedForeground#718F78
debugIcon.continueForeground#A8C3A5
debugIcon.pauseForeground#D89AAA
debugIcon.restartForeground#A8C3A5
debugIcon.startForeground#A8C3A5
debugIcon.stepIntoForeground#A8C3A5
debugIcon.stepOutForeground#A8C3A5
debugIcon.stepOverForeground#A8C3A5
debugIcon.stopForeground#B97D7B
debugToolBar.background#22352A
debugToolBar.border#0E1A12
descriptionForeground#A8C3A5
diffEditor.border#405B47
diffEditor.diagonalFill#26362C
diffEditor.insertedLineBackground#A8C3A520
diffEditor.insertedTextBackground#A8C3A530
diffEditor.removedLineBackground#D89AAA20
diffEditor.removedTextBackground#D89AAA30
diffEditorGutter.insertedLineBackground#A8C3A525
diffEditorGutter.removedLineBackground#D89AAA25
disabledForeground#718F7880
dropdown.background#0E1A12
dropdown.border#405B47
dropdown.foreground#D8DDD7
dropdown.listBackground#22352A
editor.background#17231C
editor.findMatchBackground#D89AAA70
editor.findMatchBorder#D89AAA
editor.findMatchHighlightBackground#D89AAA35
editor.focusedStackFrameHighlightBackground#A8C3A530
editor.foreground#E8E1D4
editor.hoverHighlightBackground#405B4740
editor.inactiveSelectionBackground#405B4750
editor.lineHighlightBackground#1E2C23
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#405B4730
editor.selectionBackground#405B47AA
editor.selectionHighlightBackground#405B4760
editor.stackFrameHighlightBackground#E8E1D430
editor.wordHighlightBackground#405B4750
editor.wordHighlightStrongBackground#405B4780
editorBracketHighlight.foreground1#D89AAA
editorBracketHighlight.foreground2#A8C3A5
editorBracketHighlight.foreground3#E8B8C8
editorBracketHighlight.foreground4#E8E1D4
editorBracketHighlight.foreground5#718F78
editorBracketHighlight.foreground6#B97D7B
editorBracketHighlight.unexpectedBracket.foreground#B97D7B
editorBracketMatch.background#405B4750
editorBracketMatch.border#A8C3A5
editorBracketPairGuide.background1#D89AAA22
editorBracketPairGuide.background2#A8C3A522
editorBracketPairGuide.background3#E8B8C822
editorCodeLens.foreground#718F78
editorCursor.background#17231C
editorCursor.foreground#E8E1D4
editorError.border#00000000
editorError.foreground#C98F9E
editorGroup.background#17231C
editorGroup.border#0E1A12
editorGroupHeader.noTabsBackground#17231C
editorGroupHeader.tabsBackground#0E1A12
editorGroupHeader.tabsBorder#0E1A12
editorGutter.addedBackground#A8C3A5
editorGutter.background#17231C
editorGutter.deletedBackground#D89AAA
editorGutter.modifiedBackground#A8C3A5
editorHint.foreground#718F78
editorHoverWidget.background#22352A
editorHoverWidget.border#405B47
editorHoverWidget.foreground#D8DDD7
editorIndentGuide.activeBackground1#4C5F51
editorIndentGuide.background1#26362C
editorInfo.border#00000000
editorInfo.foreground#A8C3A5
editorLineNumber.activeForeground#A8C3A5
editorLineNumber.foreground#4C5F51
editorLink.activeForeground#E8B8C8
editorMarkerNavigation.background#22352A
editorMarkerNavigationError.background#C98F9E
editorMarkerNavigationInfo.background#A8C3A5
editorMarkerNavigationWarning.background#D89AAA
editorOverviewRuler.addedForeground#A8C3A5
editorOverviewRuler.border#17231C
editorOverviewRuler.bracketMatchForeground#718F78
editorOverviewRuler.deletedForeground#D89AAA
editorOverviewRuler.errorForeground#C98F9E
editorOverviewRuler.findMatchForeground#D89AAA
editorOverviewRuler.modifiedForeground#A8C3A5
editorOverviewRuler.warningForeground#D89AAA
editorRuler.foreground#26362C
editorSuggestWidget.background#22352A
editorSuggestWidget.border#405B47
editorSuggestWidget.foreground#D8DDD7
editorSuggestWidget.highlightForeground#E8B8C8
editorSuggestWidget.selectedBackground#405B4760
editorSuggestWidget.selectedForeground#E8E1D4
editorWarning.border#00000000
editorWarning.foreground#D89AAA
editorWhitespace.foreground#26362C
editorWidget.background#22352A
editorWidget.border#405B47
editorWidget.foreground#D8DDD7
editorWidget.resizeBorder#718F78
errorForeground#D89AAA
extensionButton.prominentBackground#405B47
extensionButton.prominentForeground#E8E1D4
extensionButton.prominentHoverBackground#4C6B53
extensionIcon.starForeground#D89AAA
extensionIcon.verifiedForeground#A8C3A5
focusBorder#A8C3A566
foreground#D8DDD7
gitDecoration.addedResourceForeground#A8C3A5
gitDecoration.conflictingResourceForeground#B97D7B
gitDecoration.deletedResourceForeground#B97D7B
gitDecoration.ignoredResourceForeground#4C5F51
gitDecoration.modifiedResourceForeground#E8B8C8
gitDecoration.stageDeletedResourceForeground#E8B8C8
gitDecoration.stageModifiedResourceForeground#C5DAC1
gitDecoration.untrackedResourceForeground#D89AAA
icon.foreground#A8C3A5
input.background#0E1A12
input.border#405B47
input.foreground#E8E1D4
input.placeholderForeground#5C6E62
inputOption.activeBackground#D89AAA30
inputOption.activeBorder#D89AAA
inputOption.activeForeground#E8E1D4
inputValidation.errorBackground#3A2126
inputValidation.errorBorder#B97D7B
inputValidation.infoBackground#22352A
inputValidation.infoBorder#A8C3A5
inputValidation.warningBackground#3A3324
inputValidation.warningBorder#D89AAA
list.activeSelectionBackground#405B4770
list.activeSelectionForeground#E8E1D4
list.dropBackground#405B4780
list.errorForeground#C98F9E
list.focusBackground#405B4760
list.focusForeground#E8E1D4
list.focusOutline#A8C3A566
list.highlightForeground#E8B8C8
list.hoverBackground#17231C
list.hoverForeground#E8E1D4
list.inactiveSelectionBackground#405B4735
list.inactiveSelectionForeground#D8DDD7
list.warningForeground#D89AAA
listFilterWidget.background#22352A
listFilterWidget.noMatchesOutline#B97D7B
listFilterWidget.outline#A8C3A5
menu.background#22352A
menu.border#0E1A1260
menu.foreground#D8DDD7
menu.selectionBackground#405B47
menu.selectionForeground#E8E1D4
menu.separatorBackground#405B47
menubar.selectionBackground#405B47
menubar.selectionForeground#E8E1D4
minimap.background#17231C
minimap.errorHighlight#C98F9E
minimap.findMatchHighlight#D89AAA
minimap.selectionHighlight#405B47AA
minimap.warningHighlight#D89AAA
minimapGutter.addedBackground#A8C3A5
minimapGutter.deletedBackground#D89AAA
minimapGutter.modifiedBackground#E8B8C8
minimapSlider.activeBackground#405B4790
minimapSlider.background#405B4740
minimapSlider.hoverBackground#405B4760
notificationCenter.border#405B47
notificationCenterHeader.background#2E4335
notificationCenterHeader.foreground#E8E1D4
notifications.background#22352A
notifications.border#0E1A12
notifications.foreground#D8DDD7
notificationsErrorIcon.foreground#C98F9E
notificationsInfoIcon.foreground#A8C3A5
notificationsWarningIcon.foreground#D89AAA
notificationToast.border#405B47
panel.background#22352A
panel.border#0E1A12
panelInput.border#405B47
panelSection.border#0E1A12
panelTitle.activeBorder#D89AAA
panelTitle.activeForeground#E8E1D4
panelTitle.inactiveForeground#718F78
peekView.border#405B47
peekViewEditor.background#1A281F
peekViewEditor.matchHighlightBackground#D89AAA55
peekViewEditorGutter.background#1A281F
peekViewResult.background#22352A
peekViewResult.fileForeground#E8E1D4
peekViewResult.lineForeground#A8B3AB
peekViewResult.matchHighlightBackground#D89AAA55
peekViewResult.selectionBackground#405B4760
peekViewResult.selectionForeground#E8E1D4
peekViewTitle.background#2E4335
peekViewTitleDescription.foreground#A8C3A5
peekViewTitleLabel.foreground#E8E1D4
pickerGroup.border#405B47
pickerGroup.foreground#D89AAA
problemsErrorIcon.foreground#C98F9E
progressBar.background#D89AAA
quickInput.background#22352A
quickInput.foreground#D8DDD7
quickInputList.focusBackground#405B4760
quickInputList.focusForeground#E8E1D4
quickInputTitle.background#2E4335
scrollbar.shadow#0A130D66
scrollbarSlider.activeBackground#718F78A0
scrollbarSlider.background#405B4760
scrollbarSlider.hoverBackground#405B4790
selection.background#405B4780
sideBar.background#0E1A12
sideBar.border#0E1A12
sideBar.foreground#A8B3AB
sideBarSectionHeader.background#0E1A12
sideBarSectionHeader.border#17231C
sideBarSectionHeader.foreground#A8C3A5
sideBarTitle.foreground#E8E1D4
statusBar.background#D89AAA
statusBar.border#B97D7B
statusBar.debuggingBackground#B97D7B
statusBar.debuggingForeground#17231C
statusBar.foreground#17231C
statusBar.noFolderBackground#B97D7B
statusBarItem.activeBackground#B97D7B
statusBarItem.errorBackground#8B4A4A
statusBarItem.errorForeground#F2E1E5
statusBarItem.hoverBackground#C98A96
statusBarItem.prominentBackground#22352A
statusBarItem.prominentForeground#E8E1D4
statusBarItem.prominentHoverBackground#2E4335
statusBarItem.remoteBackground#405B47
statusBarItem.remoteForeground#E8E1D4
statusBarItem.warningBackground#B97D7B
statusBarItem.warningForeground#17231C
tab.activeBackground#A8C3A5
tab.activeBorder#00000000
tab.activeBorderTop#00000000
tab.activeForeground#17231C
tab.activeModifiedBorder#B97D7B
tab.border#0E1A12
tab.hoverBackground#22352A
tab.hoverForeground#E8E1D4
tab.inactiveBackground#17231C
tab.inactiveForeground#718F78
tab.inactiveModifiedBorder#718F7870
tab.lastPinnedBorder#405B47
tab.unfocusedActiveBackground#8FA692
tab.unfocusedActiveForeground#17231C
tab.unfocusedInactiveForeground#4C5F51
terminal.ansiBlack#0E1A12
terminal.ansiBlue#8FB0A6
terminal.ansiBrightBlack#4C5F51
terminal.ansiBrightBlue#AFCFC5
terminal.ansiBrightCyan#C0E1D8
terminal.ansiBrightGreen#C5DAC1
terminal.ansiBrightMagenta#F0D2DD
terminal.ansiBrightRed#E8B8C8
terminal.ansiBrightWhite#F2EEE3
terminal.ansiBrightYellow#F2EEE3
terminal.ansiCyan#9FCABF
terminal.ansiGreen#A8C3A5
terminal.ansiMagenta#E8B8C8
terminal.ansiRed#C98F9E
terminal.ansiWhite#D8DDD7
terminal.ansiYellow#E8E1D4
terminal.background#22352A
terminal.border#0E1A12
terminal.foreground#E8E1D4
terminal.selectionBackground#405B4788
terminalCursor.background#22352A
terminalCursor.foreground#E8E1D4
textBlockQuote.background#1A281F
textBlockQuote.border#718F78
textCodeBlock.background#0E1A12
textLink.activeForeground#E8B8C8
textLink.foreground#D89AAA
textPreformat.foreground#A8C3A5
textSeparator.foreground#405B47
titleBar.activeBackground#0E1A12
titleBar.activeForeground#D8DDD7
titleBar.border#0E1A12
titleBar.inactiveBackground#0E1A12
titleBar.inactiveForeground#5C6E62
tree.inactiveIndentGuidesStroke#1E2C23
tree.indentGuidesStroke#26362C
walkThrough.embeddedEditorBackground#1A281F
welcomePage.background#17231C
welcomePage.tileBackground#22352A
welcomePage.tileBorder#405B47
widget.shadow#0A130D66
window.activeBorder#0E1A12
window.inactiveBorder#0E1A12

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#D8DDD7	—
comment, punctuation.definition.comment	#718F78	italic
comment.documentation, comment.block.documentation, comment.line.documentation	#9CB89F	italic
comment.block.documentation keyword, comment.block.documentation storage.type.class, punctuation.definition.block.tag	#B97D7B	italic
string, string.quoted, punctuation.definition.string	#A8C3A5	—
string template, template.expression, punctuation.definition.template-expression, punctuation.section.embedded	#E8E1D4	—
string.regexp, constant.other.character-class.regexp	#C4DABF	—
constant.character.escape	#E8B8C8	—
constant.numeric	#E8B8C8	—
constant.language.boolean, constant.language, constant.language.null, constant.language.undefined, keyword.other.unit	#D89AAA	—
constant.other, variable.other.constant, variable.other.enummember	#E8B8C8	—
keyword, keyword.other	#D89AAA	—
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.import, keyword.control.trycatch	#D89AAA	bold
storage, storage.type, storage.modifier, keyword.other.using, keyword.other.new	#D89AAA	—
keyword.operator	#718F78	—
punctuation, meta.brace, punctuation.separator, punctuation.terminator	#A8B3AB	—
entity.name.function, support.function, meta.function-call entity.name.function	#E8E1D4	—
variable.parameter, meta.parameter	#D8DDD7	—
entity.name.type, entity.name.class, support.class, entity.other.inherited-class	#A8C3A5	—
support.type, storage.type.primitive, support.type.builtin, entity.name.type.primitive	#8FB0A0	—
entity.name.type.interface, entity.name.namespace, entity.name.module	#B3CCAE	—
variable, variable.other.readwrite, meta.definition.variable	#D8DDD7	—
variable.other.property, variable.other.object.property, support.type.property-name	#E8E1D4	—
variable.language	#B97D7B	italic
meta.decorator, punctuation.decorator, storage.type.annotation, meta.annotation	#B97D7B	—
entity.name.tag, meta.tag	#D89AAA	—
entity.other.attribute-name	#A8C3A5	—
support.type.property-name.css, support.type.property-name.scss	#A8C3A5	—
entity.other.attribute-name.class.css, entity.name.tag.css, entity.other.attribute-name.id.css	#E8B8C8	—
support.constant.property-value.css, constant.numeric.css	#D89AAA	—
support.type.property-name.json	#A8C3A5	—
markup.heading, entity.name.section.markdown	#D89AAA	bold
markup.bold	#E8E1D4	bold
markup.italic	#E8E1D4	italic
markup.underline.link, string.other.link	#A8C3A5	—
markup.quote	#718F78	italic
markup.inline.raw, markup.fenced_code.block	#A8C3A5	—
keyword.other.sql, keyword.other.DML.sql, keyword.other.DDL.sql	#D89AAA	bold
invalid, invalid.illegal	#B97D7B	underline
invalid.deprecated	#A98488	strikethrough