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 Classic [Operator] "Lite Edition"

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#2AA198
activityBar.background#12181F
activityBar.border#586e7530
activityBar.dropBorder#586e7530
activityBar.foreground#2AA198
activityBarBadge.background#2AA198
activityBarBadge.foreground#000
activityBarTop.activeBorder#586e7530
activityBarTop.dropBorder#586e7530
badge.background#196E6C
badge.foreground#000
breadcrumb.activeSelectionForeground#2AA198
breadcrumb.focusForeground#2AA198
breadcrumb.foreground#93A1A1
breadcrumbPicker.background#0A1016
button.background#196E6C
button.foreground#ffffffcc
button.hoverBackground#073642
button.secondaryBackground#073642
button.secondaryForeground#93A1A1
charts.blue#2aa198
charts.green#859900
charts.orange#B58900
charts.purple#6c71c4
charts.red#CB4B16
charts.yellow#FFCB6B
checkbox.background#07364200
checkbox.foreground#eee8d5bb
commandCenter.background#0A1016
debugExceptionWidget.background#12181F
debugExceptionWidget.border#CB4B16
debugToolBar.background#1d232c
debugToolBar.border#073642
descriptionForeground#eee8d5bb
diffEditor.insertedTextBackground#85990022
diffEditor.removedTextBackground#CB4B1622
dropdown.background#12181F
dropdown.border#586e7540
dropdown.foreground#93A1A1
editor.background#12181F
editor.findMatchBackground#CB4B1650
editor.findMatchHighlightBackground#B5890030
editor.foreground#93A1A1
editor.lineHighlightBackground#08080890
editor.lineHighlightBorder#08080800
editor.selectionBackground#10373990
editor.selectionHighlightBackground#073642dd
editor.wordHighlightBackground#e3b70740
editor.wordHighlightStrongBackground#00586e75
editor.wordHighlightTextBackground#e3b70740
editorBracketHighlight.foreground1#49aef5
editorBracketHighlight.foreground2#2aa198
editorBracketHighlight.foreground3#268bd2
editorBracketHighlight.foreground4#25aac2
editorBracketHighlight.foreground5#859900
editorBracketHighlight.foreground6#b58900
editorBracketPairGuide.activeBackground1#49aef5
editorBracketPairGuide.activeBackground2#2aa198
editorBracketPairGuide.activeBackground3#268bd2
editorBracketPairGuide.activeBackground4#25aac2
editorBracketPairGuide.activeBackground5#859900
editorBracketPairGuide.activeBackground6#b58900
editorCursor.background#12181F
editorCursor.foreground#B58900
editorGroup.border#85858520
editorGroup.dropBackground#2aa19820
editorGroup.dropIntoPromptBorder#222f42
editorGroup.focusedEmptyBorder#222f42
editorGroupHeader.border#586e7530
editorGroupHeader.noTabsBackground#12181F
editorGroupHeader.tabsBackground#12181F
editorGroupHeader.tabsBorder#586e7530
editorGutter.addedBackground#859900
editorGutter.commentRangeForeground#eee8d5bb
editorGutter.deletedBackground#CB4B16
editorGutter.modifiedBackground#2aa198
editorHint.border#ff000000
editorHint.foreground#CB4B16
editorHoverWidget.background#12181F
editorHoverWidget.border#586e7545
editorIndentGuide.activeBackground1#586e7550
editorIndentGuide.activeBackground2#586e7550
editorIndentGuide.activeBackground3#586e7550
editorIndentGuide.activeBackground4#586e7550
editorIndentGuide.activeBackground5#586e7550
editorIndentGuide.activeBackground6#586e7550
editorIndentGuide.background1#586e7530
editorIndentGuide.background2#586e7530
editorIndentGuide.background3#586e7530
editorIndentGuide.background4#586e7530
editorIndentGuide.background5#586e7530
editorIndentGuide.background6#586e7530
editorInlayHint.background#12181F
editorInlayHint.foreground#586e75
editorLineNumber.activeForeground#B58900
editorLineNumber.foreground#586E7590
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#CB4B16
editorOverviewRuler.errorForeground#CB4B16
editorOverviewRuler.findMatchForeground#586e7599
editorOverviewRuler.incomingContentForeground#268bd2
editorOverviewRuler.infoForeground#268bd2
editorOverviewRuler.modifiedForeground#268bd2
editorOverviewRuler.rangeHighlightForeground#268bd222
editorOverviewRuler.selectionHighlightForeground#586e7522
editorOverviewRuler.warningForeground#B58900
editorOverviewRuler.wordHighlightForeground#586e7599
editorOverviewRuler.wordHighlightStrongForeground#cb4b1699
editorPane.background#0A1016
editorRuler.foreground#073642
editorSuggestWidget.background#12181F
editorSuggestWidget.selectedBackground#005A6F60
editorWarning.foreground#b58900
editorWhitespace.foreground#073642
editorWidget.background#12181F
editorWidget.border#586e7545
editorWidget.foreground#9eacad
editorWidget.resizeBorder#2aa198
errorForeground#CB4B16
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#398E8C
input.background#12181F
input.border#586e7540
input.foreground#eee8d5bb
input.placeholderForeground#93a1a1aa
inputOption.activeBorder#586e7540
inputValidation.errorBackground#12181F
inputValidation.errorBorder#CB4B16
inputValidation.infoBackground#12181F
inputValidation.infoBorder#268bd2
inputValidation.warningBackground#12181F
inputValidation.warningBorder#B58900
list.activeSelectionBackground#005A6F60
list.activeSelectionForeground#B58900
list.activeSelectionIconForeground#B58900
list.dropBackground#2aa19820
list.errorForeground#CB4B16
list.focusBackground#586e7533
list.highlightForeground#268bd2
list.hoverBackground#07364260
list.hoverForeground#A6C7C9
list.inactiveSelectionBackground#07364260
list.inactiveSelectionForeground#2AA198
list.inactiveSelectionIconForeground#2AA198
menu.background#12181F
menu.border#586e7540
menu.foreground#586E75
menu.selectionBackground#07364280
menu.separatorBackground#586e7540
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#12181F
notifications.background#12181F
notificationsErrorIcon.foreground#dc322f
notificationsInfoIcon.foreground#49aef5
notificationsWarningIcon.foreground#ffc100
panel.background#12181F
panel.border#586e7540
panel.dropBorder#586e7530
panelInput.border#586e7540
panelSection.border#586e7530
panelSection.dropBackground#2aa19820
panelSectionHeader.background#0A1016
panelSectionHeader.border#12181F
panelTitle.activeBorder#2AA198
panelTitle.activeForeground#2AA198
panelTitle.inactiveForeground#93A1A1
peekView.border#586e7545
peekViewEditor.background#12181F
peekViewEditor.matchHighlightBackground#073642
peekViewResult.background#12181F
peekViewResult.fileForeground#B3C4C6
peekViewResult.lineForeground#93A1A1
peekViewResult.selectionBackground#07364290
peekViewResult.selectionForeground#B3C4C6
peekViewTitle.background#12181F
peekViewTitleLabel.foreground#398E8C
pickerGroup.border#073642
pickerGroup.foreground#586e75
progressBar.background#047aa6
quickInput.background#12181F
scrollbar.shadow#ff000000
scrollbarSlider.activeBackground#586e7580
scrollbarSlider.background#586e7540
scrollbarSlider.hoverBackground#586e7560
selection.background#073642
settings.checkboxBackground#0A1016
settings.dropdownBackground#0A1016
settings.focusedRowBackground#586e7520
settings.headerForeground#2aa198
settings.modifiedItemIndicator#268bd2
settings.numberInputBackground#12181F
settings.numberInputForeground#93A1A1
settings.rowHoverBackground#586e7510
settings.textInputBackground#12181F
settings.textInputForeground#93A1A1
sideBar.background#12181F
sideBar.border#12181F
sideBar.dropBackground#2aa19820
sideBar.foreground#586E75
sideBarSectionHeader.background#12181F
sideBarSectionHeader.border#586e7530
sideBarTitle.foreground#398E8C
statusBar.background#12181F
statusBar.border#586e7530
statusBar.debuggingBackground#268bd2
statusBar.debuggingForeground#12181F
statusBar.foreground#93A1A1
statusBar.noFolderBackground#12181F
statusBarItem.compactHoverBackground#12181F
statusBarItem.hoverBackground#12181FAA
statusBarItem.hoverForeground#2AA198
statusBarItem.remoteBackground#12181F
statusBarItem.remoteForeground#2AA198
statusBarItem.remoteHoverBackground#12181F
statusBarItem.remoteHoverForeground#B58900
tab.activeBackground#12181F
tab.activeBorder#2AA198
tab.activeBorderTop#586E75
tab.activeForeground#2AA198
tab.border#12181F
tab.inactiveBackground#12181F
tab.inactiveForeground#93A1A1
tab.unfocusedHoverBackground#12131d
terminal.ansiBlack#073642
terminal.ansiBlue#268bd2
terminal.ansiBrightBlack#000000
terminal.ansiBrightBlue#268bd2
terminal.ansiBrightCyan#4cb4ff
terminal.ansiBrightGreen#9ad83e
terminal.ansiBrightMagenta#6c71c4
terminal.ansiBrightRed#cb4b16
terminal.ansiBrightWhite#fdf6e3
terminal.ansiBrightYellow#FFCB6B
terminal.ansiCyan#2aa198
terminal.ansiGreen#859900
terminal.ansiMagenta#D33682
terminal.ansiRed#CB4B16
terminal.ansiWhite#eee8d5bb
terminal.ansiYellow#B58900
terminal.background#12181F
terminal.border#586e7540
terminal.dropBackground#2aa19820
terminal.foreground#93A1A1
terminal.selectionBackground#586e7599
terminal.tab.activeBorder#196E6C
terminalCommandDecoration.defaultBackground#196E6C
terminalCommandDecoration.errorBackground#CB4B16
terminalCommandDecoration.successBackground#9ad83e
terminalCursor.background#12181F
terminalCursor.foreground#B58900
textBlockQuote.background#0A1114
textBlockQuote.border#2AA198
textCodeBlock.background#0A1114
textLink.activeForeground#2AA198
textLink.foreground#268bd2
textPreformat.background#0A1114
textPreformat.foreground#2AA198
titleBar.activeBackground#12181F
titleBar.activeForeground#93A1A1
titleBar.border#586e7530
titleBar.inactiveBackground#12181F
titleBar.inactiveForeground#586E75
tree.inactiveIndentGuidesStroke#586e7530
tree.indentGuidesStroke#586e7560
welcomePage.progress.background#586e7530
welcomePage.tileBackground#586e7520
widget.border#586e7540
widget.shadow#12181F00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
keyword.control.export, keyword.control.default, keyword.import, entity.name.function.operator	#268bd2	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#2AA198	—
storage.type.cs, storage.type.function.arrow, storage.type.function.name	#586E75	—
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	#268bd2	—
punctuation.accessor, punctuation	#586E75	—
meta.brace.round, meta.brace.square, meta.brace.curly, constant.other.color, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.delimiter.comma, meta.function-call.without-arguments.js, meta.function-call.method.without-arguments.js	#586E75	—
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	#586E75	—
entity.name.tag.other.html, entity.name.tag support.class.component, support.class.component.html	#859900	—
keyword.control.type	#268bd2	—
meta.import	#93A1A1	—
comment storage.type	—	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
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#268bd2	—
keyword.control.export, keyword.control.default, keyword.import, entity.name.function.operator	#268bd2	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#2AA198	—
storage.type.cs, storage.type.function.arrow, storage.type.function.name	#586E75	—
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	#268bd2	—
punctuation.accessor, punctuation	#586E75	—
meta.brace.round, meta.brace.square, meta.brace.curly, constant.other.color, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.delimiter.comma, meta.function-call.without-arguments.js, meta.function-call.method.without-arguments.js	#586E75	—
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	#586E75	—
entity.name.tag.other.html, entity.name.tag support.class.component, support.class.component.html	#859900	—
keyword.control.type	#268bd2	—
meta.import	#93A1A1	—
comment storage.type	—	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
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#268bd2	—
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	#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 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	#93A1A1	—
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	#93A1A1	—
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	#93A1A1	—
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	#93A1A1	—
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	—
comment storage.type	#859900	—
comment variable, comment variable.other	#268bd2	—
invalid, invalid.illegal	#CB4B16	—
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	#93A1A1	—
storage.type.cs, storage.type.function.arrow, storage.type.function.name	#859900	—
variable.function, entity.name.function	#268bd2	—
constant.character, constant.escape, constant.numeric, constant.language, keyword.other.unit, punctuation.definition.string, 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	—
punctuation.template-string.element.begin, punctuation.template-string.element.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end, string.quoted.template punctuation.definition.string.begin, string.quoted.template punctuation.definition.string.end	#93A1A1	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#CB4B16	—
markup.inserted	#859900	—
markup.changed	#268bd2	—
markup.deleted	#CB4B16	—
markup.quote.markdown	#268bd2	—
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	#CB4B16	—
keyword.other.documentation.javadoc, markup.bold	#cb4b16	bold
markup.italic	—	italic
token.info-token	#268bd2	—
token.warn-token	#B58900	—
token.error-token	#CB4B16	—
token.debug-token	#6c71c4	—
markup.strikethrough	#268bd2	strikethrough
markup.underline	—	underline
markup.underline.link	#4cb4ff	underline
markup.italic	#6c71c4	italic
markup.bold	#d33682	bold
meta.brace.round, meta.brace.square, meta.brace.curly, constant.other.color, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.delimiter.comma, meta.function-call.without-arguments.js, meta.function-call.method.without-arguments.js	#B58900	—
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	#B58900	—
keyword.control.export, keyword.control.default, keyword.import, entity.name.function.operator	#CB4B16	—
constant.character, constant.escape, constant.numeric, constant.language, keyword.other.unit, text.tex support.class.math	#D33682	—
keyword.control.type	#FA973A	—
markup.inline.raw.string.markdown	#268bd2	—
meta.import	#CB4B16	—
punctuation.accessor, punctuation	#B58900	—
variable.parameter, parameters variable.function	#2aa198
invalid	#CB4B16	—
entity.name.tag.other.html, entity.name.tag support.class.component, support.class.component.html	#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}!`;
}