Maron Themes

Name: Maron Themes
Author: Kain Nhantumbo

Publisher: Kain NhantumboThemes in package: 56

Pack of well curated themes with Editor UI and Semantics consistency in mind, backed with love for a seamless coding experience!

Open in VS Code GitHub

Color themes

VS Code preview

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

Maron Themes — Maron Theme: Kanagawa Legends

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.activeBorder#B79FDA
activityBar.background#16161D
activityBar.foreground#B79FDA
activityBarBadge.background#957FB8
activityBarBadge.foreground#000
badge.background#957FB8
badge.foreground#000
breadcrumb.activeSelectionForeground#B79FDA
breadcrumb.focusForeground#B79FDA
breadcrumb.foreground#7d8590
button.background#7E9CD8AA
button.foreground#DCD7BA
button.hoverBackground#2D4F67
button.secondaryBackground#7E9CD8AA
button.secondaryForeground#DCD7BA
button.secondaryHoverBackground#2D4F67
checkbox.border#3c3c3c
debugToolBar.background#16161D
descriptionForeground#DCD7BA
diffEditor.insertedTextBackground#2B3328ee
dropdown.background#16161D
dropdown.border#3c3c3c
editor.background#16161D
editor.findMatchBackground#2D4F67
editor.findMatchHighlightBackground#2D4F67ee
editor.foreground#DCD7BA
editor.lineHighlightBackground#08080880
editor.selectionBackground#22324990
editor.selectionHighlightBackground#16161Dee
editor.selectionHighlightBorder#54546D
editor.wordHighlightBackground#957FB850
editor.wordHighlightStrongBackground#16161D4d
editorBracketHighlight.foreground1#957FB8
editorBracketHighlight.foreground2#FFA066
editorBracketHighlight.foreground3#7E9CD8
editorBracketHighlight.foreground4#D27E99
editorBracketHighlight.foreground5#E6C384
editorBracketHighlight.foreground6#7AA89F
editorBracketHighlight.unexpectedBracket.foreground#FF5D62
editorBracketMatch.background#16161D
editorBracketMatch.border#54546D
editorBracketPairGuide.activeBackground1#957FB8
editorBracketPairGuide.activeBackground2#FFA066
editorBracketPairGuide.activeBackground3#7E9CD8
editorBracketPairGuide.activeBackground4#D27E99
editorBracketPairGuide.activeBackground5#E6C384
editorBracketPairGuide.activeBackground6#7AA89F
editorCursor.background#121212
editorCursor.foreground#FF9E3B
editorError.foreground#E82424
editorGroup.border#38383890
editorGroup.dropBackground#957FB820
editorGroupHeader.tabsBackground#16161D
editorGutter.addedBackground#76946A
editorGutter.deletedBackground#C34043
editorGutter.modifiedBackground#DCA561
editorHoverWidget.background#16161D
editorHoverWidget.border#3c3c3c
editorHoverWidget.highlightForeground#658594
editorIndentGuide.activeBackground1#7f849065
editorIndentGuide.activeBackground2#7f849065
editorIndentGuide.activeBackground3#7f849065
editorIndentGuide.activeBackground4#7f849065
editorIndentGuide.activeBackground5#7f849065
editorIndentGuide.activeBackground6#7f849065
editorIndentGuide.background1#7f849030
editorIndentGuide.background2#7f849030
editorIndentGuide.background3#7f849030
editorIndentGuide.background4#7f849030
editorIndentGuide.background5#7f849030
editorIndentGuide.background6#7f849030
editorInlayHint.background#16161D
editorInlayHint.foreground#727169
editorLightBulb.foreground#B79FDA
editorLightBulbAi.foreground#B79FDA
editorLightBulbAutoFix.foreground#B79FDA
editorLineNumber.activeForeground#FF9E3B
editorLineNumber.foreground#7d8590AA
editorMarkerNavigation.background#16161D
editorOverviewRuler.border#16161D
editorRuler.foreground#16161D
editorSuggestWidget.background#16161D
editorSuggestWidget.border#3c3c3c
editorSuggestWidget.selectedBackground#957FB840
editorWarning.foreground#FF9E3B
editorWhitespace.foreground#16161D
editorWidget.background#16161D
focusBorder#B79FDA60
gitDecoration.ignoredResourceForeground#9397A090
icon.foreground#B79FDA
input.background#16161D
input.border#3c3c3c
list.activeSelectionBackground#ffffff20
list.activeSelectionForeground#B79FDA
list.dropBackground#957FB820
list.focusBackground#16161D
list.focusForeground#DCD7BA
list.highlightForeground#7E9CD8
list.hoverBackground#ffffff10
list.hoverForeground#DCD7BA
list.inactiveSelectionBackground#2D4F6760
list.inactiveSelectionForeground#B79FDA
list.inactiveSelectionIconForeground#B79FDA
list.warningForeground#FF9E3B
menu.border#41455060
menu.foreground#9397A0
menu.selectionBackground#DCD7BA10
menu.selectionForeground#B79FDA
menu.separatorBackground#41455060
minimapGutter.addedBackground#76946A
minimapGutter.deletedBackground#C34043
minimapGutter.modifiedBackground#DCA561
notificationCenter.border#41455090
notificationCenterHeader.background#16161D
notifications.background#16161D
notifications.border#41455090
notificationToast.border#41455090
panel.border#38383890
panelInput.border#38383890
panelSection.dropBackground#957FB820
panelSectionHeader.background#38383890
panelTitle.activeBorder#B79FDA
panelTitle.activeForeground#B79FDA
panelTitle.inactiveForeground#7d8590
peekView.border#54546D
peekViewEditor.background#16161D
peekViewEditor.matchHighlightBackground#2D4F67
peekViewEditorGutter.background#16161D
peekViewResult.background#16161D
peekViewResult.selectionBackground#6f6f9060
peekViewTitle.background#16161D
peekViewTitleLabel.foreground#FF9E3B
scrollbar.shadow#ff000000
scrollbarSlider.activeBackground#B79FDA30
scrollbarSlider.background#B79FDA15
scrollbarSlider.hoverBackground#B79FDA25
settings.focusedRowBackground#16161D
settings.headerForeground#DCD7BA
sideBar.background#16161D
sideBar.border#16161D00
sideBar.dropBackground#957FB820
sideBar.foreground#7d8590
sideBarSectionHeader.background#16161D
sideBarSectionHeader.foreground#DCD7BA
sideBarTitle.foreground#B79FDA
statusBar.background#16161D
statusBar.debuggingBackground#FF9E3B
statusBar.debuggingForeground#000
statusBar.foreground#7d8590
statusBar.noFolderBackground#16161D
statusBarItem.compactHoverBackground#16161D
statusBarItem.hoverBackground#16161DAA
statusBarItem.hoverForeground#B79FDA
statusBarItem.prominentForeground#000
statusBarItem.prominentHoverForeground#000
statusBarItem.remoteBackground#16161D
statusBarItem.remoteForeground#957FB8
statusBarItem.remoteHoverBackground#16161D
statusBarItem.remoteHoverForeground#FF9E3B
tab.activeBackground#16161D
tab.activeBorder#B79FDA
tab.activeForeground#B79FDA
tab.border#16161D
tab.hoverBackground#16161D
tab.inactiveBackground#16161D
tab.inactiveForeground#7d8590
tab.unfocusedHoverBackground#16161D
terminal.ansiBlack#16161D
terminal.ansiBlue#658594
terminal.ansiBrightBlack#16161D
terminal.ansiBrightBlue#7FB4CA
terminal.ansiBrightCyan#A3D4D5
terminal.ansiBrightGreen#98BB6C
terminal.ansiBrightMagenta#D27E99
terminal.ansiBrightRed#FF5D62
terminal.ansiBrightWhite#DCD7BA
terminal.ansiBrightYellow#E6C384
terminal.ansiCyan#9CABCA
terminal.ansiGreen#76946A
terminal.ansiMagenta#957FB8
terminal.ansiRed#E82424
terminal.ansiWhite#DCD7BA
terminal.ansiYellow#FF9E3B
terminal.background#16161D
terminal.border#38383890
terminal.dropBackground#957FB820
terminal.foreground#DCD7BA
terminal.selectionBackground#223249
terminal.tab.activeBorder#957FB8
terminalCommandDecoration.defaultBackground#957FB8
terminalCommandDecoration.errorBackground#E82424
terminalCommandDecoration.successBackground#98BB6C
terminalCursor.background#121212
terminalCursor.foreground#FF9E3B
terminalOverviewRuler.cursorForeground#FF9E3B
textBlockQuote.background#101010
textBlockQuote.border#B79FDA
textCodeBlock.background#111115
textLink.activeForeground#FF9E3B
textLink.foreground#7FB4CA
textPreformat.background#111115
textPreformat.foreground#B79FDA
titleBar.activeBackground#16161D
titleBar.activeForeground#7d8590
titleBar.inactiveBackground#16161D
tree.indentGuidesStroke#957FB860
walkThrough.embeddedEditorBackground#16161D
welcomePage.progress.background#DCD7BA40
welcomePage.progress.foreground#C0A36E
welcomePage.tileBackground#957FB815
widget.border#3c3c3c
widget.shadow#ff000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#727169	—
variable, string constant.other.placeholder	#DCD7BA	—
constant.other.color	#FFA066	—
invalid, invalid.illegal	#E82424	—
storage.type	#957FB8	—
storage.modifier	#957FB8	—
keyword.control.flow, keyword.control.conditional, keyword.control.loop	#957FB8
constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.brace.round, meta.brace.square, meta.brace.curly, constant.other.color, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.delimiter.comma.js, meta.function-call.without-arguments.js, meta.function-call.method.without-arguments.js, punctuation.definition.tag, punctuation.definition.tag source, punctuation.definition.group.begin.ruby, punctuation.definition.group.end.ruby, punctuation.definition.group.begin.css, punctuation.definition.group.end.css, punctuation.definition.string.end.html source.css	#BFD5DE60	—
keyword.other.definition.ini	#FFA066	—
keyword.control.trycatch	#FF5D62	—
keyword.other.unit, keyword.operator	#C0A36E	—
punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, meta.brace, keyword.operator.type.annotation, keyword.operator.namespace	#9CABCA	—
entity.name.tag, meta.tag.sgml	#E6C384	—
entity.name.tag.html	#957FB8	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#7E9CD8	—
entity.name.function.macro	#FFA066	—
meta.block variable.other	#DCD7BA	—
support.other.variable	#DCD7BA	—
string.other.link	#FFA066	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape	#7FB4CA	—
constant.language.boolean	#FFA066	—
constant.numeric	#D27E99	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, markup.inline.raw.string	#98BB6C	—
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, support.type.sys-types	#7AA89F	—
entity.name.type.module, entity.name.namespace	#DCD7BA	—
entity.name.import.go	#98BB6C	—
variable.other.property	#E6C384	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#7AA89F	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#FF5D62	—
variable.language	#FF5D62	—
entity.name.method.js	#7E9CD8	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#7E9CD8	—
entity.other.attribute-name	#957FB8	—
entity.other.attribute-name.html, entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name.html	#E6C384	—
entity.other.attribute-name.class	#E6C384	—
source.sass keyword.control	#7FB4CA	—
markup.inserted	#76946A	—
markup.deleted	#C34043	—
markup.changed	#DCA561	—
string.regexp	#7FB4CA	—
constant.character.escape	#7FB4CA	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#957FB8	—
source.js constant.other.object.key.js string.unquoted.label.js	#FF5D62	—
source.json meta.structure.dictionary.json support.type.property-name.json	#D27E99	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#E6C384	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FFA066	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FF5D62	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FFA066	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#7E9CD8	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#D27E99	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#957FB8	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#98BB6C	—
text.html.markdown, punctuation.definition.list_item.markdown	#DCD7BA	—
text.html.markdown markup.inline.raw.markdown	#957FB8	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#957FB8	—
markdown.heading, entity.name.section.markdown, markup.heading.markdown	#7E9CD8	—
markup.italic	#E46876	italic
markup.bold, markup.bold string	—	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.bold string	#E46876	—
markup.strikethrough	—	strikethrough
markup.underline	#7FB4CA	underline
markup.quote punctuation.definition.blockquote.markdown	#727169	—
markup.quote	—
string.other.link.title.markdown	#FFA066	—
string.other.link.description.title.markdown	#957FB8	—
constant.other.reference.link.markdown	#E6C384	—
markup.raw.block	#957FB8	—
markup.raw.block.fenced.markdown	#727169	—
punctuation.definition.fenced.markdown	#727169	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#DCD7BA	—
variable.language.fenced.markdown	#727169	—
meta.separator	#9CABCA	bold
markup.table	#DCD7BA	—
constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#BFD5DE60	—
keyword.control.export, keyword.control.default, keyword.import, meta.import, entity.name.function.operator	#FFA066	—
keyword.control.export	#FFA066	—

VS Code preview

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

Maron Themes — Maron Theme: Kanagawa Legends [Operator]

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.activeBorder#B79FDA
activityBar.background#16161D
activityBar.border#3c3c3c80
activityBar.dropBorder#3c3c3c80
activityBar.foreground#B79FDA
activityBarBadge.background#957FB8
activityBarBadge.foreground#000
activityBarTop.activeBorder#3c3c3c80
activityBarTop.dropBorder#3c3c3c80
badge.background#957FB8
badge.foreground#000
breadcrumb.activeSelectionForeground#B79FDA
breadcrumb.focusForeground#B79FDA
breadcrumb.foreground#7d8590
breadcrumbPicker.background#0F0F12
button.background#7E9CD8AA
button.foreground#DCD7BA
button.hoverBackground#2D4F67
button.secondaryBackground#7E9CD8AA
button.secondaryForeground#DCD7BA
button.secondaryHoverBackground#2D4F67
checkbox.border#3c3c3c
commandCenter.background#0F0F12
debugToolBar.background#16161D
descriptionForeground#DCD7BA
diffEditor.insertedTextBackground#2B3328ee
dropdown.background#16161D
dropdown.border#3c3c3c
editor.background#16161D
editor.findMatchBackground#2D4F67
editor.findMatchHighlightBackground#2D4F67ee
editor.foreground#DCD7BA
editor.lineHighlightBackground#08080880
editor.selectionBackground#22324990
editor.selectionHighlightBackground#16161Dee
editor.selectionHighlightBorder#54546D
editor.wordHighlightBackground#957FB850
editor.wordHighlightStrongBackground#16161D4d
editorBracketHighlight.foreground1#957FB8
editorBracketHighlight.foreground2#FFA066
editorBracketHighlight.foreground3#7E9CD8
editorBracketHighlight.foreground4#D27E99
editorBracketHighlight.foreground5#E6C384
editorBracketHighlight.foreground6#7AA89F
editorBracketHighlight.unexpectedBracket.foreground#FF5D62
editorBracketMatch.background#16161D
editorBracketMatch.border#54546D
editorBracketPairGuide.activeBackground1#957FB8
editorBracketPairGuide.activeBackground2#FFA066
editorBracketPairGuide.activeBackground3#7E9CD8
editorBracketPairGuide.activeBackground4#D27E99
editorBracketPairGuide.activeBackground5#E6C384
editorBracketPairGuide.activeBackground6#7AA89F
editorCursor.background#121212
editorCursor.foreground#FF9E3B
editorError.foreground#E82424
editorGroup.border#38383890
editorGroup.dropBackground#957FB820
editorGroup.dropIntoPromptBorder#3c3c3c80
editorGroupHeader.border#3c3c3c80
editorGroupHeader.tabsBackground#16161D
editorGroupHeader.tabsBorder#3c3c3c80
editorGutter.addedBackground#76946A
editorGutter.deletedBackground#C34043
editorGutter.modifiedBackground#DCA561
editorHoverWidget.background#16161D
editorHoverWidget.border#3c3c3c
editorHoverWidget.highlightForeground#658594
editorIndentGuide.activeBackground1#7f849065
editorIndentGuide.activeBackground2#7f849065
editorIndentGuide.activeBackground3#7f849065
editorIndentGuide.activeBackground4#7f849065
editorIndentGuide.activeBackground5#7f849065
editorIndentGuide.activeBackground6#7f849065
editorIndentGuide.background1#7f849030
editorIndentGuide.background2#7f849030
editorIndentGuide.background3#7f849030
editorIndentGuide.background4#7f849030
editorIndentGuide.background5#7f849030
editorIndentGuide.background6#7f849030
editorInlayHint.background#16161D
editorInlayHint.foreground#727169
editorLightBulb.foreground#B79FDA
editorLightBulbAi.foreground#B79FDA
editorLightBulbAutoFix.foreground#B79FDA
editorLineNumber.activeForeground#FF9E3B
editorLineNumber.foreground#7d8590AA
editorMarkerNavigation.background#16161D
editorOverviewRuler.border#16161D
editorPane.background#0F0F12
editorRuler.foreground#16161D
editorSuggestWidget.background#16161D
editorSuggestWidget.border#3c3c3c
editorSuggestWidget.selectedBackground#957FB840
editorWarning.foreground#FF9E3B
editorWhitespace.foreground#16161D
editorWidget.background#16161D
focusBorder#B79FDA60
gitDecoration.ignoredResourceForeground#9397A090
icon.foreground#B79FDA
input.background#16161D
input.border#3c3c3c
list.activeSelectionBackground#ffffff20
list.activeSelectionForeground#B79FDA
list.dropBackground#957FB820
list.focusBackground#16161D
list.focusForeground#DCD7BA
list.highlightForeground#7E9CD8
list.hoverBackground#ffffff10
list.hoverForeground#DCD7BA
list.inactiveSelectionBackground#2D4F6760
list.inactiveSelectionForeground#B79FDA
list.inactiveSelectionIconForeground#B79FDA
list.warningForeground#FF9E3B
menu.background#0F0F12
menu.border#41455060
menu.foreground#9397A0
menu.selectionBackground#DCD7BA10
menu.selectionForeground#B79FDA
menu.separatorBackground#41455060
minimapGutter.addedBackground#76946A
minimapGutter.deletedBackground#C34043
minimapGutter.modifiedBackground#DCA561
notificationCenter.border#41455090
notificationCenterHeader.background#16161D
notifications.background#16161D
notifications.border#41455090
notificationToast.border#41455090
panel.background#0F0F12
panel.border#38383890
panel.dropBorder#3c3c3c80
panelInput.border#38383890
panelSection.border#3c3c3c80
panelSection.dropBackground#957FB820
panelSectionHeader.background#38383890
panelTitle.activeBorder#B79FDA
panelTitle.activeForeground#B79FDA
panelTitle.inactiveForeground#7d8590
peekView.border#54546D
peekViewEditor.background#16161D
peekViewEditor.matchHighlightBackground#2D4F67
peekViewEditorGutter.background#16161D
peekViewResult.background#16161D
peekViewResult.selectionBackground#6f6f9060
peekViewTitle.background#16161D
peekViewTitleLabel.foreground#FF9E3B
quickInput.background#0F0F12
scrollbar.shadow#ff000000
scrollbarSlider.activeBackground#B79FDA30
scrollbarSlider.background#B79FDA15
scrollbarSlider.hoverBackground#B79FDA25
settings.checkboxBackground#0F0F12
settings.dropdownBackground#0F0F12
settings.focusedRowBackground#16161D
settings.headerForeground#DCD7BA
settings.numberInputBackground#0F0F12
settings.textInputBackground#0F0F12
sideBar.background#16161D
sideBar.border#16161D00
sideBar.dropBackground#957FB820
sideBar.foreground#7d8590
sideBarSectionHeader.background#16161D
sideBarSectionHeader.border#3c3c3c80
sideBarSectionHeader.foreground#DCD7BA
sideBarTitle.foreground#B79FDA
statusBar.background#16161D
statusBar.border#3c3c3c80
statusBar.debuggingBackground#FF9E3B
statusBar.debuggingForeground#000
statusBar.foreground#7d8590
statusBar.noFolderBackground#16161D
statusBarItem.compactHoverBackground#16161D
statusBarItem.hoverBackground#16161DAA
statusBarItem.hoverForeground#B79FDA
statusBarItem.prominentForeground#000
statusBarItem.prominentHoverForeground#000
statusBarItem.remoteBackground#16161D
statusBarItem.remoteForeground#957FB8
statusBarItem.remoteHoverBackground#16161D
statusBarItem.remoteHoverForeground#FF9E3B
tab.activeBackground#16161D
tab.activeBorder#B79FDA
tab.activeBorderTop#B79FDA
tab.activeForeground#B79FDA
tab.border#16161D
tab.hoverBackground#16161D
tab.inactiveBackground#16161D
tab.inactiveForeground#7d8590
tab.unfocusedHoverBackground#16161D
terminal.ansiBlack#16161D
terminal.ansiBlue#658594
terminal.ansiBrightBlack#16161D
terminal.ansiBrightBlue#7FB4CA
terminal.ansiBrightCyan#A3D4D5
terminal.ansiBrightGreen#98BB6C
terminal.ansiBrightMagenta#D27E99
terminal.ansiBrightRed#FF5D62
terminal.ansiBrightWhite#DCD7BA
terminal.ansiBrightYellow#E6C384
terminal.ansiCyan#9CABCA
terminal.ansiGreen#76946A
terminal.ansiMagenta#957FB8
terminal.ansiRed#E82424
terminal.ansiWhite#DCD7BA
terminal.ansiYellow#FF9E3B
terminal.background#16161D
terminal.border#38383890
terminal.dropBackground#957FB820
terminal.foreground#DCD7BA
terminal.selectionBackground#223249
terminal.tab.activeBorder#957FB8
terminalCommandDecoration.defaultBackground#957FB8
terminalCommandDecoration.errorBackground#E82424
terminalCommandDecoration.successBackground#98BB6C
terminalCursor.background#121212
terminalCursor.foreground#FF9E3B
terminalOverviewRuler.cursorForeground#FF9E3B
textBlockQuote.background#101010
textBlockQuote.border#B79FDA
textCodeBlock.background#111115
textLink.activeForeground#FF9E3B
textLink.foreground#7FB4CA
textPreformat.background#111115
textPreformat.foreground#B79FDA
titleBar.activeBackground#16161D
titleBar.activeForeground#7d8590
titleBar.border#3c3c3c80
titleBar.inactiveBackground#16161D
tree.indentGuidesStroke#957FB860
walkThrough.embeddedEditorBackground#16161D
welcomePage.progress.background#DCD7BA40
welcomePage.progress.foreground#C0A36E
welcomePage.tileBackground#957FB815
widget.border#3c3c3c
widget.shadow#ff000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment storage.type	—	italic
invalid, invalid.illegal	—	italic
variable.parameter, parameters variable.function	—	italic
keyword.control.export, keyword.control.import, keyword.control.type, keyword.control.as, keyword.control.conditional, keyword.control.flow, keyword.control.or, keyword.control.and, keyword.control.loop, keyword.operator.new, keyword.operator.expression.of, keyword.operator.expression.instanceof, keyword.operator.expression.typeof, keyword.operator.expression.keyof, keyword.operator.expression.delete, keyword.control.trycatch, keyword.control.from, variable.language.this, storage.modifier.async, keyword.control.default, keyword.import, entity.name.function.operator	—	italic
entity.other.attribute-name, storage.modifier	—	italic
comment, invalid, invalid.deprecated, invalid.illegal	—	italic
comment storage.type	—	italic
invalid, invalid.illegal	—	italic
variable.parameter, parameters variable.function	—	italic
keyword.control.export, keyword.control.import, keyword.control.type, keyword.control.as, keyword.control.conditional, keyword.control.flow, keyword.control.or, keyword.control.and, keyword.control.loop, keyword.operator.new, keyword.operator.expression.of, keyword.operator.expression.instanceof, keyword.operator.expression.typeof, keyword.operator.expression.keyof, keyword.operator.expression.delete, keyword.control.trycatch, keyword.control.from, variable.language.this, storage.modifier.async, keyword.control.default, keyword.import, entity.name.function.operator	—	italic
entity.other.attribute-name, storage.modifier	—	italic
comment, invalid, invalid.deprecated, invalid.illegal	—	italic
comment, punctuation.definition.comment	#727169	—
variable, string constant.other.placeholder	#DCD7BA	—
constant.other.color	#FFA066	—
invalid, invalid.illegal	#E82424	—
storage.type	#957FB8	—
storage.modifier	#957FB8	—
keyword.control.flow, keyword.control.conditional, keyword.control.loop	#957FB8
constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.brace.round, meta.brace.square, meta.brace.curly, constant.other.color, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.delimiter.comma.js, meta.function-call.without-arguments.js, meta.function-call.method.without-arguments.js, punctuation.definition.tag, punctuation.definition.tag source, punctuation.definition.group.begin.ruby, punctuation.definition.group.end.ruby, punctuation.definition.group.begin.css, punctuation.definition.group.end.css, punctuation.definition.string.end.html source.css	#BFD5DE60	—
keyword.other.definition.ini	#FFA066	—
keyword.control.trycatch	#FF5D62	—
keyword.other.unit, keyword.operator	#C0A36E	—
punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, meta.brace, keyword.operator.type.annotation, keyword.operator.namespace	#9CABCA	—
entity.name.tag, meta.tag.sgml	#E6C384	—
entity.name.tag.html	#957FB8	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#7E9CD8	—
entity.name.function.macro	#FFA066	—
meta.block variable.other	#DCD7BA	—
support.other.variable	#DCD7BA	—
string.other.link	#FFA066	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape	#7FB4CA	—
constant.language.boolean	#FFA066	—
constant.numeric	#D27E99	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, markup.inline.raw.string	#98BB6C	—
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, support.type.sys-types	#7AA89F	—
entity.name.type.module, entity.name.namespace	#DCD7BA	—
entity.name.import.go	#98BB6C	—
variable.other.property	#E6C384	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#7AA89F	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#FF5D62	—
variable.language	#FF5D62	—
entity.name.method.js	#7E9CD8	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#7E9CD8	—
entity.other.attribute-name	#957FB8	—
entity.other.attribute-name.html, entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name.html	#E6C384	—
entity.other.attribute-name.class	#E6C384	—
source.sass keyword.control	#7FB4CA	—
markup.inserted	#76946A	—
markup.deleted	#C34043	—
markup.changed	#DCA561	—
string.regexp	#7FB4CA	—
constant.character.escape	#7FB4CA	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#957FB8	—
source.js constant.other.object.key.js string.unquoted.label.js	#FF5D62	—
source.json meta.structure.dictionary.json support.type.property-name.json	#D27E99	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#E6C384	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FFA066	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FF5D62	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FFA066	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#7E9CD8	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#D27E99	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#957FB8	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#98BB6C	—
text.html.markdown, punctuation.definition.list_item.markdown	#DCD7BA	—
text.html.markdown markup.inline.raw.markdown	#957FB8	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#957FB8	—
markdown.heading, entity.name.section.markdown, markup.heading.markdown	#7E9CD8	—
markup.italic	#E46876	italic
markup.bold, markup.bold string	—	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.bold string	#E46876	—
markup.strikethrough	—	strikethrough
markup.underline	#7FB4CA	underline
markup.quote punctuation.definition.blockquote.markdown	#727169	—
markup.quote	—
string.other.link.title.markdown	#FFA066	—
string.other.link.description.title.markdown	#957FB8	—
constant.other.reference.link.markdown	#E6C384	—
markup.raw.block	#957FB8	—
markup.raw.block.fenced.markdown	#727169	—
punctuation.definition.fenced.markdown	#727169	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#DCD7BA	—
variable.language.fenced.markdown	#727169	—
meta.separator	#9CABCA	bold
markup.table	#DCD7BA	—
constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#BFD5DE60	—
keyword.control.export, keyword.control.default, keyword.import, meta.import, entity.name.function.operator	#FFA066	—
keyword.control.export	#FFA066	—

VS Code preview

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

Maron Themes — Maron Theme: Little Bottle Box

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#1A1F1D
activityBar.border#1A1F1D
activityBar.foreground#cef144
activityBarBadge.background#cef144
activityBarBadge.foreground#1A1F1D
badge.background#cef144
badge.foreground#1A1F1D
breadcrumb.activeSelectionForeground#cef144
breadcrumb.focusForeground#cef144
breadcrumb.foreground#999
button.background#edffa5
button.foreground#1A1F1D
button.hoverBackground#dcff50
button.secondaryBackground#2a2a2a
button.secondaryForeground#c5c5c5
button.secondaryHoverBackground#373737
checkbox.background#1A1F1D
debugToolBar.background#333
debugToolBar.border#474747
dropdown.background#1A1F1D
dropdown.border#eeeeee30
dropdown.listBackground#1A1F1D
editor.background#1A1F1D
editor.lineHighlightBackground#08080890
editor.lineHighlightBorder#AAAAAA00
editor.selectionBackground#eeeeee15
editorBracketHighlight.foreground1#cef144
editorBracketHighlight.foreground2#7AD9FB
editorBracketHighlight.foreground3#82aaff
editorBracketHighlight.foreground4#b3e8b4
editorBracketHighlight.foreground5#7fdbca
editorBracketHighlight.foreground6#f48771
editorCursor.background#1A1F1D
editorCursor.foreground#cef144
editorError.foreground#f48771
editorGroup.border#85858520
editorGroup.dropBackground#cef14415
editorGroupHeader.tabsBackground#1A1F1D
editorIndentGuide.activeBackground1#7f849055
editorIndentGuide.activeBackground2#7f849055
editorIndentGuide.activeBackground3#7f849055
editorIndentGuide.activeBackground4#7f849055
editorIndentGuide.activeBackground5#7f849055
editorIndentGuide.activeBackground6#7f849055
editorIndentGuide.background1#7f849025
editorIndentGuide.background2#7f849025
editorIndentGuide.background3#7f849025
editorIndentGuide.background4#7f849025
editorIndentGuide.background5#7f849025
editorIndentGuide.background6#7f849025
editorLightBulb.foreground#cef144
editorLightBulbAi.foreground#cef144
editorLightBulbAutoFix.foreground#cef144
editorLineNumber.activeForeground#cef144
editorLineNumber.foreground#85858590
editorOverviewRuler.border#1A1F1D00
editorStickyScroll.shadow#ff000000
editorWarning.foreground#F7CC66
editorWidget.background#1A1F1D
editorWidget.border#CDF86150
editorWidget.foreground#ccc
editorWidget.resizeBorder#5f5f5f
errorForeground#f48771
focusBorder#cef14440
foreground#e5e5e5
gitDecoration.conflictingResourceForeground#ED6C6C
gitDecoration.deletedResourceForeground#C54444
gitDecoration.ignoredResourceForeground#585858
gitDecoration.modifiedResourceForeground#F7CC66
gitDecoration.untrackedResourceForeground#9FE7A0
icon.foreground#cef144
input.background#1A1F1D
input.border#eeeeee30
input.foreground#999
list.activeSelectionBackground#3c3c3c
list.activeSelectionForeground#cef144
list.dropBackground#cef14415
list.errorForeground#f48771
list.focusBackground#e5e5e51a
list.focusForeground#AAAAAA
list.highlightForeground#e5e5e5
list.hoverBackground#2b2b2b
list.inactiveSelectionForeground#cef144
list.inactiveSelectionIconForeground#cef144
list.warningForeground#F7CC66
menu.background#1A1F1D
menu.border#414550e0
menu.foreground#e5e5e5
menu.selectionBackground#414550e0
menu.selectionForeground#cef144
menu.separatorBackground#414550e0
menubar.selectionBackground#e5e5e51a
menubar.selectionForeground#c5c5c5
notificationCenterHeader.background#1A1F1D
notifications.background#1A1F1D
panelSection.dropBackground#cef14415
panelTitle.activeBorder#cef144
panelTitle.activeForeground#cef144
panelTitle.inactiveForeground#999999
peekView.border#cef14480
peekViewEditor.background#1A1F1D
peekViewResult.background#1A1F1D
peekViewResult.selectionBackground#cef14420
peekViewTitle.background#1A1F1D
peekViewTitleLabel.foreground#cef144
pickerGroup.border#3f3f46
pickerGroup.foreground#3794ff
scrollbar.shadow#ff000000
scrollbarSlider.activeBackground#cef14430
scrollbarSlider.background#cef14415
scrollbarSlider.hoverBackground#cef14425
selection.background#6f6f6f
settings.headerForeground#cef144ee
sideBar.background#1A1F1D
sideBar.border#00000000
sideBar.dropBackground#cef14415
sideBar.foreground#AAAAAA
sideBarSectionHeader.background#1A1F1D
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#e5e5e5
sideBarTitle.foreground#cef144
statusBar.background#1A1F1D
statusBar.debuggingBackground#a390ff
statusBar.debuggingForeground#1A1F1D
statusBar.foreground#999999
statusBar.noFolderBackground#1A1F1D
statusBar.noFolderForeground#999999
statusBarItem.compactHoverBackground#1A1F1D
statusBarItem.hoverBackground#1A1F1D90
statusBarItem.hoverForeground#cef144
statusBarItem.remoteBackground#1A1F1D
statusBarItem.remoteForeground#cef144
statusBarItem.remoteHoverBackground#1A1F1D
statusBarItem.remoteHoverForeground#a390ff
tab.activeBackground#1A1F1D
tab.activeBorder#cef144aa
tab.activeForeground#cef144aa
tab.border#1A1F1D
tab.inactiveBackground#1A1F1D
tab.inactiveForeground#999999
terminal.dropBackground#cef14415
terminal.tab.activeBorder#cef144
terminalCommandDecoration.defaultBackground#a390ff
terminalCommandDecoration.errorBackground#C54444
terminalCommandDecoration.successBackground#cef144
terminalCursor.background#1A1F1D
terminalCursor.foreground#cef144
terminalOverviewRuler.cursorForeground#cef144
textBlockQuote.background#141715
textBlockQuote.border#cef144
textCodeBlock.background#141715
textLink.activeForeground#cef144
textLink.foreground#a390ff
textPreformat.background#141715
textPreformat.foreground#cef144
titleBar.activeBackground#1A1F1D
titleBar.activeForeground#AAAAAA
titleBar.inactiveBackground#1A1F1D
tree.indentGuidesStroke#cef14460
welcomePage.progress.background#AAAAAA40
welcomePage.progress.foreground#a390ff
welcomePage.tileBackground#cef14415
widget.border#CDF86150
widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source.json meta.structure.dictionary.json support.type.property-name.json	#cef144	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#eeeeee	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#268bd2	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#b58900	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#eeeeee	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FCB549	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#eeeeee	—
string	#BFD084	—
constant.character.escape	#BFD084	—
text.html constant.character.entity.named	#BFD084	—
text.html.derivative	#E5E5E5	—
punctuation.definition.entity.html	#BFD084	—
template.expression.begin	#7AD9FB	—
template.expression.end	#7AD9FB	—
punctuation.definition.template-expression.begin	#7AD9FB	—
punctuation.definition.template-expression.end	#7AD9FB	—
constant	#7AD9FB	—
keyword	#A390FF	—
modifier	#A390FF	—
storage	#A390FF	—
punctuation.definition.block	#BFD5DE60	—
punctuation.definition.parameters	#BFD5DE60	—
meta.brace.round, meta.brace.curly, meta.brace.square	#BFD5DE60	—
meta.jsx.children	#e5e5e5	—
punctuation.accessor	#BFD5DE60	—
variable.other	#eeeeee	—
variable.parameter	#eeeeee	—
meta.embedded	#E5E5E5	—
source.groovy.embedded	#E5E5E5	—
meta.template.expression	#E5E5E5	—
comment	#6f6f6f	—
docblock	#6f6f6f	—
meta.function-call	#CDF861	—
meta.class entity.name.type.class	#eeeeee
meta.class entity.name.type.module	#CABEFF	—
meta.class meta.type.annotation, meta.class support.type.primitive, meta.interface support.type.primitive, meta.type.annotation support.type.primitive	#A390FF	—
meta.type.annotation entity.name.type	#CABEFF	—
variable.object.property	#eeeeee	—
entity.name.function	#CDF861	—
meta.definition.variable	#eeeeee	—
modifier	#A390FF	—
variable.language.this	#FCB549	—
support.type.object	#A390FF	—
support.module	#7AD9FB	italic
support.node	#7AD9FB	italic
support.type.ts	#7AD9FB	—
entity.other.inherited-class	#7AD9FB	—
meta.interface entity.name.type.interface	#FCB549	—
keyword.operator	#b3e8b4	—
storage.type.function.arrow	#b3e8b4	—
variable.css	#7AD9FB	—
source.css	#CDF861	—
entity.other.attribute-name	#CDF861	—
entity.name.tag.css	#CDF861	—
entity.other.attribute-name.id	#CDF861	—
entity.other.attribute-name.class	#CDF861	—
source.css meta.selector.css	#CDF861	—
support.type.property-name.css	#eeeeee	—
support.function.css	#A390FF	—
support.constant.css	#A390FF	—
keyword.css	#A390FF	—
constant.numeric.css	#A390FF	—
constant.other.color.css	#A390FF	—
punctuation.section	#BFD5DE60	—
punctuation.separator	#BFD5DE60	—
punctuation.definition.entity.css	#BFD5DE60	—
punctuation.terminator.rule.css	#E5E5E5	—
source.css keyword.other.unit	#CABEFF	—
string.css	#CABEFF	—
punctuation.definition.string.css	#CABEFF	—
support.type.property-name	#eeeeee	—
string.html	#CDF861	—
punctuation.definition.tag	#BFD5DE60	—
entity.other.attribute-name	#CABEFF	—
entity.name.tag	#A390FF	—
entity.name.tag.wildcard	#CDF861	—
markup.markdown	#eeeeee	—
invalid, invalid.deprecated, invalid.illegal	#ED6C6C	—
markup.deleted	#ED6C6C	—
markup.inserted	#CDF861	—
markup.changed	#F7CC66	—
markup.strikethrough	—	strikethrough
markup.italic	—	italic
markup.bold	—	bold
markup.heading.markdown	#b3e8b4	—
punctuation.definition.bold.markdown	#b3e8b4	—
meta.paragraph.markdown punctuation.definition.link.description	#b3e8b4	—
punctuation.definition.raw.markdown	#b3e8b4	—
meta.paragraph.markdown	#e5e5e5	—
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown	#A390FF	—
text.html.markdown meta.attribute	#CABEFF	—
entity.name.section	#eeeeee	—
string.other	#eeeeee	—
string.other.link	#eeeeee	—
punctuation.definition.markdown	#b3e8b4	—
punctuation.definition.string.begin.shell	#b3e8b4	—
url, link, uri	#BFD084	underline
markup.underline	#BFD084	underline
markup.inline.raw	#BFD5DE60	—
text.html.vue variable.other.readwrite	#A390FF	—
text.html.vue meta.object-literal.key	#eeeeee	—
text.html.vue entity.name.tag.css	#A390FF	—
text.html.vue entity.other.attribute-name	#eeeeee	—
text.html.vue constant.numeric.css	#7AD9FB	—
text.html.vue keyword.other.unit, text.html.vue support.constant.property-value, text.html.vue support.constant.color	#A390FF	—
keyword.control.export, keyword.control.default, keyword.import, meta.import, entity.name.function.operator	#7AD9FB	—
constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.brace.round, meta.brace.square, meta.brace.curly, constant.other.color, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.delimiter.comma.js, meta.function-call.without-arguments.js, meta.function-call.method.without-arguments.js, punctuation.definition.tag, punctuation.definition.tag source, punctuation.definition.group.begin.ruby, punctuation.definition.group.end.ruby, punctuation.definition.group.begin.css, punctuation.definition.group.end.css, punctuation.definition.string.end.html source.css	#BFD5DE60	—
entity.name.type.alias, meta.type.declaration,	#FCB549	—
entity.name.tag.other.html, entity.name.tag support.class.component, support.class.component.html	#7AD9FB	—

VS Code preview

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

Maron Themes — Maron Theme: Little Bottle Box [Operator]

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#1A1F1D
activityBar.border#1A1F1D
activityBar.dropBorder#33333380
activityBar.foreground#cef144
activityBarBadge.background#cef144
activityBarBadge.foreground#1A1F1D
activityBarTop.activeBorder#33333380
activityBarTop.dropBorder#33333380
badge.background#cef144
badge.foreground#1A1F1D
breadcrumb.activeSelectionForeground#cef144
breadcrumb.focusForeground#cef144
breadcrumb.foreground#999
breadcrumbPicker.background#0C0C0C
button.background#edffa5
button.foreground#1A1F1D
button.hoverBackground#dcff50
button.secondaryBackground#2a2a2a
button.secondaryForeground#c5c5c5
button.secondaryHoverBackground#373737
checkbox.background#1A1F1D
commandCenter.background#0C0C0C
debugToolBar.background#333
debugToolBar.border#474747
dropdown.background#1A1F1D
dropdown.border#eeeeee30
dropdown.listBackground#1A1F1D
editor.background#1A1F1D
editor.lineHighlightBackground#08080890
editor.lineHighlightBorder#AAAAAA00
editor.selectionBackground#eeeeee15
editorBracketHighlight.foreground1#cef144
editorBracketHighlight.foreground2#7AD9FB
editorBracketHighlight.foreground3#82aaff
editorBracketHighlight.foreground4#b3e8b4
editorBracketHighlight.foreground5#7fdbca
editorBracketHighlight.foreground6#f48771
editorCursor.background#1A1F1D
editorCursor.foreground#cef144
editorError.foreground#f48771
editorGroup.border#85858520
editorGroup.dropBackground#cef14415
editorGroup.dropIntoPromptBorder#33333380
editorGroupHeader.border#33333380
editorGroupHeader.tabsBackground#1A1F1D
editorGroupHeader.tabsBorder#33333380
editorHoverWidget.background#0C0C0C
editorIndentGuide.activeBackground1#7f849055
editorIndentGuide.activeBackground2#7f849055
editorIndentGuide.activeBackground3#7f849055
editorIndentGuide.activeBackground4#7f849055
editorIndentGuide.activeBackground5#7f849055
editorIndentGuide.activeBackground6#7f849055
editorIndentGuide.background1#7f849025
editorIndentGuide.background2#7f849025
editorIndentGuide.background3#7f849025
editorIndentGuide.background4#7f849025
editorIndentGuide.background5#7f849025
editorIndentGuide.background6#7f849025
editorLightBulb.foreground#cef144
editorLightBulbAi.foreground#cef144
editorLightBulbAutoFix.foreground#cef144
editorLineNumber.activeForeground#cef144
editorLineNumber.foreground#85858590
editorOverviewRuler.border#1A1F1D00
editorPane.background#0C0C0C
editorStickyScroll.shadow#ff000000
editorWarning.foreground#F7CC66
editorWidget.background#1A1F1D
editorWidget.border#CDF86150
editorWidget.foreground#ccc
editorWidget.resizeBorder#5f5f5f
errorForeground#f48771
focusBorder#cef14440
foreground#e5e5e5
gitDecoration.conflictingResourceForeground#ED6C6C
gitDecoration.deletedResourceForeground#C54444
gitDecoration.ignoredResourceForeground#585858
gitDecoration.modifiedResourceForeground#F7CC66
gitDecoration.untrackedResourceForeground#9FE7A0
icon.foreground#cef144
input.background#1A1F1D
input.border#eeeeee30
input.foreground#999
list.activeSelectionBackground#3c3c3c
list.activeSelectionForeground#cef144
list.dropBackground#cef14415
list.errorForeground#f48771
list.focusBackground#e5e5e51a
list.focusForeground#AAAAAA
list.highlightForeground#e5e5e5
list.hoverBackground#2b2b2b
list.inactiveSelectionForeground#cef144
list.inactiveSelectionIconForeground#cef144
list.warningForeground#F7CC66
menu.background#1A1F1D
menu.border#414550e0
menu.foreground#e5e5e5
menu.selectionBackground#414550e0
menu.selectionForeground#cef144
menu.separatorBackground#414550e0
menubar.selectionBackground#e5e5e51a
menubar.selectionForeground#c5c5c5
notificationCenterHeader.background#1A1F1D
notifications.background#1A1F1D
panel.background#0C0C0C
panel.border#33333380
panel.dropBorder#33333380
panelInput.border#33333380
panelSection.border#33333380
panelSection.dropBackground#cef14415
panelSectionHeader.background#0C0C0C
panelTitle.activeBorder#cef144
panelTitle.activeForeground#cef144
panelTitle.inactiveForeground#999999
peekView.border#cef14480
peekViewEditor.background#1A1F1D
peekViewResult.background#1A1F1D
peekViewResult.selectionBackground#cef14420
peekViewTitle.background#1A1F1D
peekViewTitleLabel.foreground#cef144
pickerGroup.border#3f3f46
pickerGroup.foreground#3794ff
quickInput.background#0C0C0C
scrollbar.shadow#ff000000
scrollbarSlider.activeBackground#cef14430
scrollbarSlider.background#cef14415
scrollbarSlider.hoverBackground#cef14425
selection.background#6f6f6f
settings.checkboxBackground#0C0C0C
settings.dropdownBackground#0C0C0C
settings.headerForeground#cef144ee
settings.numberInputBackground#0C0C0C
settings.textInputBackground#0C0C0C
sideBar.background#1A1F1D
sideBar.border#00000000
sideBar.dropBackground#cef14415
sideBar.foreground#AAAAAA
sideBarSectionHeader.background#1A1F1D
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#e5e5e5
sideBarTitle.foreground#cef144
statusBar.background#1A1F1D
statusBar.border#33333380
statusBar.debuggingBackground#a390ff
statusBar.debuggingForeground#1A1F1D
statusBar.foreground#999999
statusBar.noFolderBackground#1A1F1D
statusBar.noFolderForeground#999999
statusBarItem.compactHoverBackground#1A1F1D
statusBarItem.hoverBackground#1A1F1D90
statusBarItem.hoverForeground#cef144
statusBarItem.remoteBackground#1A1F1D
statusBarItem.remoteForeground#cef144
statusBarItem.remoteHoverBackground#1A1F1D
statusBarItem.remoteHoverForeground#a390ff
tab.activeBackground#1A1F1D
tab.activeBorder#cef144aa
tab.activeBorderTop#cef144
tab.activeForeground#cef144aa
tab.border#1A1F1D
tab.inactiveBackground#1A1F1D
tab.inactiveForeground#999999
terminal.background#0C0C0C
terminal.border#33333380
terminal.dropBackground#cef14415
terminal.tab.activeBorder#cef144
terminalCommandDecoration.defaultBackground#a390ff
terminalCommandDecoration.errorBackground#C54444
terminalCommandDecoration.successBackground#cef144
terminalCursor.background#1A1F1D
terminalCursor.foreground#cef144
terminalOverviewRuler.cursorForeground#cef144
textBlockQuote.background#141715
textBlockQuote.border#cef144
textCodeBlock.background#141715
textLink.activeForeground#cef144
textLink.foreground#a390ff
textPreformat.background#141715
textPreformat.foreground#cef144
titleBar.activeBackground#1A1F1D
titleBar.activeForeground#AAAAAA
titleBar.border#33333380
titleBar.inactiveBackground#1A1F1D
tree.indentGuidesStroke#cef14460
welcomePage.progress.background#AAAAAA40
welcomePage.progress.foreground#a390ff
welcomePage.tileBackground#cef14415
widget.border#CDF86150
widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment storage.type	—	italic
invalid, invalid.illegal	—	italic
variable.parameter, parameters variable.function	—	italic
keyword.control.export, keyword.control.import, keyword.control.type, keyword.control.as, keyword.control.conditional, keyword.control.flow, keyword.control.or, keyword.control.and, keyword.control.loop, keyword.operator.new, keyword.operator.expression.of, keyword.operator.expression.instanceof, keyword.operator.expression.typeof, keyword.operator.expression.keyof, keyword.operator.expression.delete, keyword.control.trycatch, keyword.control.from, variable.language.this, storage.modifier.async, keyword.control.default, keyword.import, entity.name.function.operator	—	italic
entity.other.attribute-name, storage.modifier	—	italic
comment, invalid, invalid.deprecated, invalid.illegal	—	italic
comment storage.type	—	italic
invalid, invalid.illegal	—	italic
variable.parameter, parameters variable.function	—	italic
keyword.control.export, keyword.control.import, keyword.control.type, keyword.control.as, keyword.control.conditional, keyword.control.flow, keyword.control.or, keyword.control.and, keyword.control.loop, keyword.operator.new, keyword.operator.expression.of, keyword.operator.expression.instanceof, keyword.operator.expression.typeof, keyword.operator.expression.keyof, keyword.operator.expression.delete, keyword.control.trycatch, keyword.control.from, variable.language.this, storage.modifier.async, keyword.control.default, keyword.import, entity.name.function.operator	—	italic
entity.other.attribute-name, storage.modifier	—	italic
comment, invalid, invalid.deprecated, invalid.illegal	—	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#cef144	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#eeeeee	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#268bd2	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#b58900	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#eeeeee	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FCB549	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#eeeeee	—
string	#BFD084	—
constant.character.escape	#BFD084	—
text.html constant.character.entity.named	#BFD084	—
text.html.derivative	#E5E5E5	—
punctuation.definition.entity.html	#BFD084	—
template.expression.begin	#7AD9FB	—
template.expression.end	#7AD9FB	—
punctuation.definition.template-expression.begin	#7AD9FB	—
punctuation.definition.template-expression.end	#7AD9FB	—
constant	#7AD9FB	—
keyword	#A390FF	—
modifier	#A390FF	—
storage	#A390FF	—
punctuation.definition.block	#BFD5DE60	—
punctuation.definition.parameters	#BFD5DE60	—
meta.brace.round, meta.brace.curly, meta.brace.square	#BFD5DE60	—
meta.jsx.children	#e5e5e5	—
punctuation.accessor	#BFD5DE60	—
variable.other	#eeeeee	—
variable.parameter	#eeeeee	—
meta.embedded	#E5E5E5	—
source.groovy.embedded	#E5E5E5	—
meta.template.expression	#E5E5E5	—
comment	#6f6f6f	—
docblock	#6f6f6f	—
meta.function-call	#CDF861	—
meta.class entity.name.type.class	#eeeeee
meta.class entity.name.type.module	#CABEFF	—
meta.class meta.type.annotation, meta.class support.type.primitive, meta.interface support.type.primitive, meta.type.annotation support.type.primitive	#A390FF	—
meta.type.annotation entity.name.type	#CABEFF	—
variable.object.property	#eeeeee	—
entity.name.function	#CDF861	—
meta.definition.variable	#eeeeee	—
modifier	#A390FF	—
variable.language.this	#FCB549	—
support.type.object	#A390FF	—
support.module	#7AD9FB	italic
support.node	#7AD9FB	italic
support.type.ts	#7AD9FB	—
entity.other.inherited-class	#7AD9FB	—
meta.interface entity.name.type.interface	#FCB549	—
keyword.operator	#b3e8b4	—
storage.type.function.arrow	#b3e8b4	—
variable.css	#7AD9FB	—
source.css	#CDF861	—
entity.other.attribute-name	#CDF861	—
entity.name.tag.css	#CDF861	—
entity.other.attribute-name.id	#CDF861	—
entity.other.attribute-name.class	#CDF861	—
source.css meta.selector.css	#CDF861	—
support.type.property-name.css	#eeeeee	—
support.function.css	#A390FF	—
support.constant.css	#A390FF	—
keyword.css	#A390FF	—
constant.numeric.css	#A390FF	—
constant.other.color.css	#A390FF	—
punctuation.section	#BFD5DE60	—
punctuation.separator	#BFD5DE60	—
punctuation.definition.entity.css	#BFD5DE60	—
punctuation.terminator.rule.css	#E5E5E5	—
source.css keyword.other.unit	#CABEFF	—
string.css	#CABEFF	—
punctuation.definition.string.css	#CABEFF	—
support.type.property-name	#eeeeee	—
string.html	#CDF861	—
punctuation.definition.tag	#BFD5DE60	—
entity.other.attribute-name	#CABEFF	—
entity.name.tag	#A390FF	—
entity.name.tag.wildcard	#CDF861	—
markup.markdown	#eeeeee	—
invalid, invalid.deprecated, invalid.illegal	#ED6C6C	—
markup.deleted	#ED6C6C	—
markup.inserted	#CDF861	—
markup.changed	#F7CC66	—
markup.strikethrough	—	strikethrough
markup.italic	—	italic
markup.bold	—	bold
markup.heading.markdown	#b3e8b4	—
punctuation.definition.bold.markdown	#b3e8b4	—
meta.paragraph.markdown punctuation.definition.link.description	#b3e8b4	—
punctuation.definition.raw.markdown	#b3e8b4	—
meta.paragraph.markdown	#e5e5e5	—
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown	#A390FF	—
text.html.markdown meta.attribute	#CABEFF	—
entity.name.section	#eeeeee	—
string.other	#eeeeee	—
string.other.link	#eeeeee	—
punctuation.definition.markdown	#b3e8b4	—
punctuation.definition.string.begin.shell	#b3e8b4	—
url, link, uri	#BFD084	underline
markup.underline	#BFD084	underline
markup.inline.raw	#BFD5DE60	—
text.html.vue variable.other.readwrite	#A390FF	—
text.html.vue meta.object-literal.key	#eeeeee	—
text.html.vue entity.name.tag.css	#A390FF	—
text.html.vue entity.other.attribute-name	#eeeeee	—
text.html.vue constant.numeric.css	#7AD9FB	—
text.html.vue keyword.other.unit, text.html.vue support.constant.property-value, text.html.vue support.constant.color	#A390FF	—
keyword.control.export, keyword.control.default, keyword.import, meta.import, entity.name.function.operator	#7AD9FB	—
constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.brace.round, meta.brace.square, meta.brace.curly, constant.other.color, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.delimiter.comma.js, meta.function-call.without-arguments.js, meta.function-call.method.without-arguments.js, punctuation.definition.tag, punctuation.definition.tag source, punctuation.definition.group.begin.ruby, punctuation.definition.group.end.ruby, punctuation.definition.group.begin.css, punctuation.definition.group.end.css, punctuation.definition.string.end.html source.css	#BFD5DE60	—
entity.name.type.alias, meta.type.declaration,	#FCB549	—
entity.name.tag.other.html, entity.name.tag support.class.component, support.class.component.html	#7AD9FB	—