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: Solarized Planets

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.activeBorder#38BBB0
activityBar.background#00141A
activityBar.foreground#38BBB0
activityBarBadge.background#38BBB0
activityBarBadge.foreground#00141A
badge.background#38BBB0
badge.foreground#00141A
breadcrumb.activeSelectionForeground#38BBB0
breadcrumb.focusForeground#38BBB0
breadcrumb.foreground#516E7A
button.background#38BBB0
button.foreground#00141A
button.hoverBackground#1A6265
button.secondaryBackground#073642
button.secondaryForeground#839496
charts.blue#2aa198
charts.green#859900
charts.orange#B58900
charts.purple#6c71c4
charts.red#dc322f
charts.yellow#FFCB6B
checkbox.background#07364200
checkbox.foreground#eee8d5bb
debugExceptionWidget.background#00141A
debugExceptionWidget.border#275662AA
debugToolBar.background#1d232c
debugToolBar.border#073642
descriptionForeground#eee8d5bb
diffEditor.insertedTextBackground#85990022
diffEditor.removedTextBackground#dc322f22
dropdown.background#00141A
dropdown.border#586e7540
dropdown.foreground#839496
editor.background#00141A
editor.findMatchBackground#586e7599
editor.findMatchHighlightBackground#85990022
editor.foreground#839496
editor.lineHighlightBackground#080808AA
editor.lineHighlightBorder#08080800
editor.selectionBackground#10373990
editor.selectionHighlightBackground#073642dd
editor.wordHighlightBackground#e3b70740
editor.wordHighlightStrongBackground#00586e75
editor.wordHighlightTextBackground#e3b70740
editorBracketHighlight.foreground1#B58900
editorBracketHighlight.foreground2#00586e
editorBracketHighlight.foreground3#859900
editorBracketHighlight.foreground4#38BBB0
editorBracketHighlight.foreground5#6c71c4
editorBracketHighlight.foreground6#047aa6
editorCursor.background#00141A
editorCursor.foreground#B58900
editorGroup.border#85858520
editorGroup.dropBackground#2aa19820
editorGroup.dropIntoPromptBorder#222f42
editorGroup.focusedEmptyBorder#222f42
editorGroupHeader.noTabsBackground#00141A
editorGroupHeader.tabsBackground#00141A
editorGutter.addedBackground#859900
editorGutter.commentRangeForeground#eee8d5bb
editorGutter.deletedBackground#dc322f
editorGutter.modifiedBackground#2aa198
editorHint.border#ff000000
editorHint.foreground#dc322f
editorHoverWidget.background#00141A
editorHoverWidget.border#275662AA
editorIndentGuide.activeBackground1#38BBB030
editorIndentGuide.activeBackground2#38BBB030
editorIndentGuide.activeBackground3#38BBB030
editorIndentGuide.activeBackground4#38BBB030
editorIndentGuide.activeBackground5#38BBB030
editorIndentGuide.activeBackground6#38BBB030
editorIndentGuide.background1#38BBB018
editorIndentGuide.background2#38BBB018
editorIndentGuide.background3#38BBB018
editorIndentGuide.background4#38BBB018
editorIndentGuide.background5#38BBB018
editorIndentGuide.background6#38BBB018
editorInlayHint.background#00141A
editorInlayHint.foreground#586e75
editorLineNumber.activeForeground#B58900
editorLineNumber.foreground#275662
editorMarkerNavigation.background#002b36
editorMarkerNavigationError.background#f8520e
editorMarkerNavigationInfo.background#49aef5
editorMarkerNavigationWarning.background#ffc100
editorOverviewRuler.addedForeground#859900
editorOverviewRuler.border#586e7500
editorOverviewRuler.bracketMatchForeground#586e75
editorOverviewRuler.commonContentForeground#586e75
editorOverviewRuler.currentContentForeground#2aa198
editorOverviewRuler.deletedForeground#dc322f
editorOverviewRuler.errorForeground#dc322f
editorOverviewRuler.findMatchForeground#586e7599
editorOverviewRuler.incomingContentForeground#268bd2
editorOverviewRuler.infoForeground#38BBB0
editorOverviewRuler.modifiedForeground#38BBB0
editorOverviewRuler.rangeHighlightForeground#268bd222
editorOverviewRuler.selectionHighlightForeground#586e7522
editorOverviewRuler.warningForeground#B58900
editorOverviewRuler.wordHighlightForeground#586e7599
editorOverviewRuler.wordHighlightStrongForeground#cb4b1699
editorRuler.foreground#073642
editorStickyScroll.shadow#ff000000
editorSuggestWidget.border#275662AA
editorSuggestWidget.foreground#516E7A
editorSuggestWidget.selectedBackground#07364280
editorWarning.foreground#b58900
editorWhitespace.foreground#073642
editorWidget.background#00141A
editorWidget.border#275662AA
editorWidget.foreground#9eacad
editorWidget.resizeBorder#2aa198
errorForeground#dc322f
focusBorder#275662
foreground#849496
gitDecoration.addedResourceForeground#2aa198
gitDecoration.conflictingResourceForeground#6c71c4
gitDecoration.deletedResourceForeground#dc322f
gitDecoration.ignoredResourceForeground#657b83
gitDecoration.modifiedResourceForeground#b58900
gitDecoration.stageDeletedResourceForeground#dc322f
gitDecoration.stageModifiedResourceForeground#b58900
gitDecoration.submoduleResourceForeground#268bd2
gitDecoration.untrackedResourceForeground#2aa198
icon.foreground#38BBB0
input.background#00141A
input.border#586e7540
input.foreground#eee8d5bb
input.placeholderForeground#93a1a1aa
inputOption.activeBorder#586e7540
inputValidation.errorBackground#00141A
inputValidation.errorBorder#dc322f
inputValidation.infoBackground#00141A
inputValidation.infoBorder#38BBB0
inputValidation.warningBackground#00141A
inputValidation.warningBorder#B58900
list.activeSelectionBackground#268bd220
list.activeSelectionForeground#B58900
list.activeSelectionIconForeground#B58900
list.dropBackground#2aa19820
list.errorForeground#dc322f
list.focusBackground#586e7533
list.highlightForeground#38BBB0
list.hoverBackground#07364260
list.inactiveSelectionBackground#07364260
list.inactiveSelectionForeground#38BBB0
list.inactiveSelectionIconForeground#38BBB0
listFilterWidget.background#00141A
listFilterWidget.shadow#ff000000
menu.background#00141A
menu.border#516E7A60
menu.foreground#516E7A
menu.selectionBackground#07364280
menu.separatorBackground#516E7A60
merge.commonContentBackground#344145EE
merge.commonHeaderBackground#495e66EE
merge.currentContentBackground#1a6265EE
merge.currentHeaderBackground#2aa198EE
merge.incomingContentBackground#103956EE
merge.incomingHeaderBackground#1b6497EE
minimap.errorHighlight#dc322f
minimap.selectionHighlight#586e75aa
minimap.warningHighlight#b58900
minimapGutter.addedBackground#859900
minimapGutter.deletedBackground#dc322f
minimapGutter.modifiedBackground#268bd2
notificationCenter.border#586e7590
notificationCenterHeader.background#00141A
notifications.background#00141A
notificationsErrorIcon.foreground#dc322f
notificationsInfoIcon.foreground#49aef5
notificationsWarningIcon.foreground#ffc100
panel.background#00141A
panel.border#586e7540
panelInput.border#586e7540
panelSection.dropBackground#2aa19820
panelSectionHeader.border#00141A
panelTitle.activeBorder#38BBB0
panelTitle.activeForeground#38BBB0
panelTitle.inactiveForeground#516E7A
peekView.border#586e7590
peekViewEditor.background#00141A
peekViewEditor.matchHighlightBackground#83949640
peekViewResult.background#00141A
peekViewResult.lineForeground#839496
peekViewResult.selectionBackground#38BBB020
peekViewResult.selectionForeground#38BBB0
peekViewTitle.background#00141A
peekViewTitleLabel.foreground#38BBB0
pickerGroup.border#073642
pickerGroup.foreground#586e75
progressBar.background#047aa6
quickInput.background#00141A
scrollbar.shadow#ff000000
scrollbarSlider.activeBackground#586e7580
scrollbarSlider.background#586e7540
scrollbarSlider.hoverBackground#586e7560
selection.background#073642
settings.focusedRowBackground#586e7520
settings.headerForeground#2aa198
settings.modifiedItemIndicator#268bd2
settings.numberInputBackground#00141A
settings.numberInputForeground#839496
settings.rowHoverBackground#586e7510
settings.textInputBackground#00141A
settings.textInputForeground#839496
sideBar.background#00141A
sideBar.border#00141A
sideBar.dropBackground#2aa19820
sideBar.foreground#516E7A
sideBarSectionHeader.background#00141A
sideBarTitle.foreground#38BBB0
statusBar.background#00141A
statusBar.debuggingBackground#859900
statusBar.debuggingForeground#00141A
statusBar.foreground#516E7A
statusBar.noFolderBackground#00141A
statusBarItem.compactHoverBackground#00141A
statusBarItem.hoverBackground#00141A90
statusBarItem.hoverForeground#38BBB0
statusBarItem.remoteBackground#00141A
statusBarItem.remoteForeground#38BBB0
statusBarItem.remoteHoverBackground#00141A
statusBarItem.remoteHoverForeground#FFCB6B
tab.activeBackground#00141A
tab.activeBorder#38BBB0
tab.activeForeground#38BBB0
tab.border#00141A
tab.inactiveBackground#00141A
tab.inactiveForeground#516E7A
tab.unfocusedHoverBackground#00141A
terminal.ansiBlack#00141A
terminal.ansiBlue#38BBB0
terminal.ansiBrightBlack#000000
terminal.ansiBrightBlue#268bd2
terminal.ansiBrightCyan#29EEDF
terminal.ansiBrightGreen#BAFB00
terminal.ansiBrightMagenta#6c71c4
terminal.ansiBrightRed#cb4b16
terminal.ansiBrightWhite#fdf6e3
terminal.ansiBrightYellow#FFCB6B
terminal.ansiCyan#2aa198
terminal.ansiGreen#0DBC79
terminal.ansiMagenta#d33682
terminal.ansiRed#dc322f
terminal.ansiWhite#eee8d5bb
terminal.ansiYellow#B58900
terminal.background#00141A
terminal.border#586e7540
terminal.dropBackground#2aa19820
terminal.foreground#839496
terminal.selectionBackground#586e7599
terminal.tab.activeBorder#38BBB0
terminalCommandDecoration.defaultBackground#38BBB0
terminalCommandDecoration.errorBackground#dc322f
terminalCommandDecoration.successBackground#9ad83e
terminalCursor.background#00141A
terminalCursor.foreground#B58900
textBlockQuote.background#0A1114
textBlockQuote.border#38BBB0
textCodeBlock.background#0A1114
textLink.activeForeground#38BBB0
textLink.foreground#268bd2
textPreformat.background#0A1114
textPreformat.foreground#38BBB0
titleBar.activeBackground#00141A
titleBar.activeForeground#516E7A
titleBar.inactiveBackground#00141A
tree.indentGuidesStroke#38BBB060
welcomePage.progress.background#83949660
welcomePage.progress.foreground#B58900
welcomePage.tileBackground#85990015
widget.border#275662AA
widget.shadow#00141A00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source.json meta.structure.dictionary.json support.type.property-name.json	#859900	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#839496	—
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	#839496	—
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	#839496	—
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	#839496	—
comment entity.name.tag, comment keyword.other, comment punctuation.definition.string, comment string, comment, fenced_code.block.language, keyword.other.documentation.javadoc, keyword.other.phpdoc, markup.inline.raw, markup.raw, punctuation.definition.comment, punctuation.definition.markdown, punctuation.definition.raw	#586e75	—
punctuation.definition.block.tag.jsdoc	#B58900	—
comment storage.type	#859900	—
comment variable, comment variable.other	#268bd2	—
markup.inline.raw.string.markdown	#268bd2	—
invalid, invalid.illegal	#dc322f	—
entity.name.tag, keyword.language, keyword.operator.borrow.and.rust, keyword.operator.sigil, keyword.type.cs, markup.heading, punctuation.definition.heading, source.go storage.type, storage.modifier, storage.type.built-in, storage.type.core, storage.type.primitive, support.function.be.latex, support.type.built-in, support.type.primitive, support.type.builtin, text.tex support.function.section, keyword.operator.cast, keyword.operator.delete, keyword.operator.expansion, keyword.operator.expression, keyword.operator.logical.python, keyword.operator.new, keyword.operator, keyword.control, keyword.operator.member, keyword.operator.question.rust, keyword.operator.sizeof, keyword.operator.wordlike, keyword.other, source.cmake keyword, source.go keyword, source.lua storage.modifier, source.php storage.modifier, source.shell support.function.builtin, storage.modifier.visibility, storage.type, support.function.verb.latex, text.tex support.function, variable.language	#859900	—
constant.language.import-export-all, meta.embedded.line, storage.modifier.package, storage.type.name, storage.modifier.pointer, storage.modifier.reference, storage.type.extends, storage.type.cs, support.type.property-name, variable.language.this, variable.language.self, entity.name.type, entity.name.type.class.reference, entity.name.type.class.value, variable.language.wildcard	#B58900	—
entity.other.attribute-name	#268bd2
punctuation.definition.variable.php, source, source.ini keyword.other.definition, source.java storage.modifier.import, source.java storage.type.generic, source.java storage.type.object.array, source.python variable.language.special, source.yaml string, storage.modifier.pointer, storage.modifier.reference, storage.type.cs, storage.type.java, support.constant.core.rust, support.type.property-name, text, variable.language.rust	#9DBFCD	—
storage.type.cs, storage.type.function.arrow, storage.type.function.name	#859900	—
variable.function, entity.name.function	#268bd2	—
constant.character, constant.escape, constant.language, constant.numeric, keyword.other.unit, punctuation.quoted.docstring, storage.type.string, string, string.quoted, support.constant, text.tex support.class.math	#2aa198	—
entity.name.function.decorator, meta.function.decorator.python, punctuation.definition.annotation, punctuation.definition.decorator, punctuation.definition.list.begin.markdown, punctuation.definition.quote.begin, punctuation.definition.quote.end, punctuation.definition.template-expression, storage.type.annotation, support.type.sys-types, support.variable.property, text.tex keyword.control.table, variable.language.special	#268bd2	—
markup.strikethrough	#268bd2	strikethrough
markup.inserted	#2AA198	—
markup.changed	#268bd2	—
markup.deleted	#F6524F	—
markup.underline	—	underline
markup.underline.link	#4cb4ff	underline
markup.italic	#6c71c4	italic
markup.bold	#d33682	bold
markup.quote.markdown	#38BBB0	—
markup.quote markup.bold	#cb4b16	bold
heading.1.markdown entity.name, heading.1.markdown punctuation.definition.heading.markdown	#D33682	—
heading.2.markdown entity.name, heading.2.markdown punctuation.definition.heading.markdown	#6C71C4	—
heading.3.markdown entity.name, heading.3.markdown punctuation.definition.heading.markdown	#38BBB0	—
heading.4.markdown entity.name, heading.4.markdown punctuation.definition.heading.markdown	#859900	—
heading.5.markdown entity.name, heading.5.markdown punctuation.definition.heading.markdown	#B58900	—
heading.6.markdown entity.name, heading.6.markdown punctuation.definition.heading.markdown	#747CA1	—
markup.inline.raw.string.markdown	#B58900	—
constant.character.entity, constant.character.escape, constant.character.format.placeholder.other, entity.name.function.preprocessor, entity.name.section.group-title, keyword.control.directive, meta.attribute, meta.preprocessor.conditional, meta.preprocessor.cs, meta.preprocessor.pragma, punctuation.definition.directive, punctuation.definition.entity, punctuation.definition.variable, punctuation.definition.block, punctuation.separator.continuation, source.c constant.other.placeholder, source.rust support.function.std, storage.modifier.lifetime, string.regexp.quoted.single, support.function.core.rust, variable.other.bracket, variable.other.normal, variable.other.positional, variable.other.special	#BFD5DE60	—
keyword.other.documentation.javadoc, markup.bold	#cb4b16	bold
markup.italic	—	italic
token.info-token	#268bd2	—
token.warn-token	#B58900	—
token.error-token	#dc322f	—
token.debug-token	#6c71c4	—
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	#BFD5DE60	—
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.control.export, keyword.control.default	#CB4B16	—
keyword.control.import, keyword.control.from, keyword.import, entity.name.function.operator	#859900	—
variable.language, entity.name.type.class.js, support.variable.magic, meta.method.body, entity.name.variable, punctuation.definition.variable, meta.class variable.object.property, variable.other.constant entity.name.function, entity.name.variable.tuple-element.cs punctuation.separator.colon.cs, meta.definition.variable.name.groovy, meta.body.struct.cpp, parameter.variable.function.elixir, meta.directive.edge source.js, meta.function.echo.edge source.js, text.html.edge meta.function.echo.edge meta.function-call.js, source.css variable.parameter.keyframe-list.css, source.css meta.property-value.css, source.css.scss meta.at-rule.keyframes.scss entity.name.function.scss, source.css.scss meta.property-value.scss, entity.name.variable.tuple-element, meta.group.simple.subexpression.powershell support.variable.automatic.powershell, support.variable.automatic.powershell, storage.source.cmake, entity.source.cmake	#99BC7D	—
meta.import	#9DBFCD	—
punctuation.accessor, punctuation	#BFD5DE60	—
variable.parameter, parameters variable.function	#2aa198
invalid	#dc322f	—
entity.name.tag.other.html, entity.name.tag support.class.component, support.class.component.html	#B58900	—
keyword.control	#CB4B16	—

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}!`;
}