Matcha Coding Focus

Name: Matcha Coding Focus
Author: Matcha Coding

Publisher: Matcha CodingThemes in package: 2

A calm, matcha-inspired VS Code theme with quiet breathing reminders.

Open in VS Code

Color themes

VS Code preview

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

Matcha Coding Focus — Matcha Coding

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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#000000
activityBar.border#2b7a1b
activityBar.foreground#97c56c
activityBar.inactiveForeground#5cae2699
activityBarBadge.background#79b22a
activityBarBadge.foreground#000000
badge.background#2b7a1b
badge.foreground#d9e9c2
breadcrumb.activeSelectionForeground#d9e9c2
breadcrumb.background#000000
breadcrumb.foreground#97c56c99
button.background#2b7a1b
button.foreground#d9e9c2
button.hoverBackground#3b8b1e
checkbox.background#050805
checkbox.border#2b7a1b
dropdown.background#050805
dropdown.border#1b6518
dropdown.foreground#d9e9c2
editor.background#000000
editor.findMatchBackground#79b22a66
editor.findMatchHighlightBackground#3b8b1e55
editor.foreground#d9e9c2
editor.lineHighlightBackground#071006
editor.selectionBackground#2b7a1b88
editor.selectionHighlightBackground#1b651866
editor.wordHighlightBackground#1b651855
editor.wordHighlightStrongBackground#2b7a1b66
editorBracketMatch.background#1b651866
editorBracketMatch.border#97c56c
editorCursor.foreground#b8d99c
editorError.foreground#b8d99c
editorGroup.border#2b7a1b
editorGroup.emptyBackground#000000
editorGroupHeader.border#2b7a1b
editorGroupHeader.tabsBackground#000000
editorGutter.addedBackground#79b22a
editorGutter.background#000000
editorGutter.deletedBackground#3b8b1e
editorGutter.modifiedBackground#97c56c
editorIndentGuide.activeBackground1#3b8b1e99
editorIndentGuide.background1#1b651866
editorLineNumber.activeForeground#b8d99c
editorLineNumber.foreground#97c56c77
editorRuler.foreground#1b651866
editorWarning.foreground#97c56c
focusBorder#79b22a88
foreground#d9e9c2
input.background#050805
input.border#1b6518
input.foreground#d9e9c2
input.placeholderForeground#97c56c88
list.activeSelectionBackground#000000
list.activeSelectionForeground#d9e9c2
list.activeSelectionIconForeground#d9e9c2
list.focusAndSelectionOutline#79b22a
list.focusBackground#000000
list.focusForeground#d9e9c2
list.focusOutline#79b22a
list.highlightForeground#b8d99c
list.hoverBackground#071006
list.inactiveFocusBackground#000000
list.inactiveFocusOutline#79b22a
list.inactiveSelectionBackground#000000
list.inactiveSelectionForeground#d9e9c2
list.inactiveSelectionIconForeground#d9e9c2
menu.background#050805
menu.foreground#d9e9c2
menu.selectionBackground#10220f
panel.background#030603
panel.border#1b6518
panelTitle.activeForeground#d9e9c2
peekView.border#2b7a1b
peekViewEditor.background#000000
peekViewResult.background#030603
peekViewTitle.background#000000
quickInput.background#050805
quickInput.foreground#d9e9c2
scrollbar.shadow#00000088
scrollbarSlider.activeBackground#79b22a99
scrollbarSlider.background#1b651888
scrollbarSlider.hoverBackground#3b8b1e99
sideBar.background#000000
sideBar.border#2b7a1b
sideBar.foreground#97c56c
sideBarSectionHeader.background#050805
sideBarSectionHeader.border#1b6518
sideBarTitle.foreground#d9e9c2
statusBar.background#000000
statusBar.border#1b6518
statusBar.debuggingBackground#2b7a1b
statusBar.debuggingForeground#d9e9c2
statusBar.foreground#97c56c
statusBar.noFolderBackground#000000
statusBarItem.hoverBackground#10220f
tab.activeBackground#000000
tab.activeBorder#79b22a
tab.activeForeground#d9e9c2
tab.border#1b6518
tab.inactiveBackground#000000
tab.inactiveForeground#97c56c99
terminal.ansiBlack#000000
terminal.ansiBlue#97c56c
terminal.ansiBrightBlack#3b8b1e
terminal.ansiBrightBlue#b8d99c
terminal.ansiBrightCyan#b8d99c
terminal.ansiBrightGreen#d9e9c2
terminal.ansiBrightMagenta#b8d99c
terminal.ansiBrightRed#97c56c
terminal.ansiBrightWhite#d9e9c2
terminal.ansiBrightYellow#b8d99c
terminal.ansiCyan#79b22a
terminal.ansiGreen#5cae26
terminal.ansiMagenta#97c56c
terminal.ansiRed#4a9e21
terminal.ansiWhite#d9e9c2
terminal.ansiYellow#b8d99c
terminal.background#000000
terminal.foreground#d9e9c2
textLink.activeForeground#d9e9c2
textLink.foreground#b8d99c
titleBar.activeBackground#030603
titleBar.activeForeground#d9e9c2
titleBar.border#1b6518
titleBar.inactiveBackground#030603
titleBar.inactiveForeground#97c56c88

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#97c56c88	italic
variable, string constant.other.placeholder	#d9e9c2	—
keyword, storage.type, storage.modifier	#97c56c	—
string, markup.inline.raw.string	#b8d99c	—
constant, support.constant, variable.other.constant	#79b22a	—
entity.name.function, support.function, meta.function-call	#d9e9c2	—
entity.name.type, support.type, support.class	#b8d99c	—
variable.other.property, support.variable.property	#97c56c	—
entity.name.tag, support.class.component	#97c56c	—
entity.other.attribute-name	#b8d99c	—
invalid, invalid.illegal	#d9e9c2	—