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: Little Bottle Box [Operator]

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#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	—

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

/**
 * Fetch user data by ID
 * @param id  
 * @returns User object or null if ID is invalid
 */
export async function fetchUser(id: string): Promise<User | null> {
  if (!id) {
    return null;
  }

  const response = await fetch(`/api/users/${id}`, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return (await response.json()) as User;
}

function greet(user: User): string {
  // Simple greeting function that uses the user's name
  return `Hello, ${user.name}!`;
}