Lunar Eclipse

Name: Lunar Eclipse
Author: Ed Heltzel

Publisher: Ed HeltzelThemes in package: 5

A vibrant theme with light & dark variants.

GitHub

Color themes

VS Code preview

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

Lunar Eclipse — Lunar Eclipse Golden Hour

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#85598E
activityBar.background#191C1D
activityBar.dropBorder#85598E
activityBar.foreground#85598E
activityBar.inactiveForeground#AFA18850
activityBarBadge.background#151818
activityBarBadge.foreground#85598E
badge.background#191C1D
badge.foreground#85598E
banner.background#1D2122
banner.foreground#AFA188
banner.iconForeground#AFA188
breadcrumb.activeSelectionForeground#85598E
breadcrumb.background#191C1D
breadcrumb.focusForeground#85598E
breadcrumb.foreground#97856B
breadcrumbPicker.background#191C1D
button.background#85598E
button.foreground#F4EBC2
button.hoverBackground#66369D
button.secondaryBackground#6F6965
button.secondaryForeground#F4EBC2
button.secondaryHoverBackground#3B3A39
charts.blue#7E98A0
charts.foreground#AFA188
charts.green#AEB124
charts.lines#CCBB97
charts.orange#ED7717
charts.purple#B37EC8
charts.red#85598E
charts.yellow#EFB52D
checkbox.background#191C1D
checkbox.border#4E4844
checkbox.foreground#85598E
commandCenter.activeBackground#1F2120
commandCenter.activeForeground#AFA188
commandCenter.background#191C1D
commandCenter.border#4E4844
commandCenter.foreground#AFA188
debugConsole.errorForeground#85598E
debugConsole.infoForeground#7E98A0
debugConsole.sourceForeground#CCBB97
debugConsole.warningForeground#ED7717
debugConsoleInputIcon.foreground#B37EC8
debugExceptionWidget.background#3D412F
debugExceptionWidget.border#4E4844
debugIcon.breakpointDisabledForeground#8F8071
debugIcon.breakpointForeground#85598E
debugIcon.continueForeground#8ABA3C
debugIcon.disconnectForeground#85598E
debugIcon.pauseForeground#ED7717
debugIcon.restartForeground#85598E
debugIcon.startForeground#8ABA3C
debugIcon.stepBackForeground#00B6C2
debugIcon.stepIntoForeground#00B6C2
debugIcon.stepOutForeground#00B6C2
debugIcon.stepOverForeground#00B6C2
debugIcon.stopForeground#85598E
debugTokenExpression.boolean#6DAF81
debugTokenExpression.error#85598E
debugTokenExpression.name#AFA188
debugTokenExpression.number#ED7717
debugTokenExpression.string#EFB52D
debugTokenExpression.value#AFA188
debugToolBar.background#1D2122
debugToolBar.border#1D2122
descriptionForeground#97856B
diffEditor.border#4E4844
diffEditor.diagonalFill#8F807180
diffEditor.insertedTextBackground#8ABA3C2A
diffEditor.removedTextBackground#85598E20
disabledForeground#9E8E76
dropdown.background#191C1D
dropdown.border#4E4844
dropdown.foreground#AFA188
dropdown.listBackground#191C1D
editor.background#191C1D
editor.findMatchBackground#00000000
editor.findMatchBorder#8ABA3C8A
editor.findMatchHighlightBackground#AEB1241A
editor.findRangeHighlightBackground#85598E10
editor.foldBackground#F4EBC207
editor.foreground#AFA188
editor.hoverHighlightBackground#F4EBC207
editor.inactiveSelectionBackground#85598E2A
editor.lineHighlightBackground#00000000
editor.lineHighlightBorder#FFF2D310
editor.rangeHighlightBackground#AEB1241A
editor.selectionBackground#85598E35
editor.selectionHighlightBackground#00000000
editor.selectionHighlightBorder#85598E60
editor.snippetFinalTabstopHighlightBackground#85598E1A
editor.snippetTabstopHighlightBackground#85598E1A
editor.symbolHighlightBackground#AEB1243A
editor.wordHighlightBackground#85598E3A
editor.wordHighlightStrongBackground#85598E1A
editorBracketHighlight.foreground1#AEB124
editorBracketHighlight.foreground2#7E98A0
editorBracketHighlight.foreground3#EFB52D
editorBracketHighlight.foreground4#ED7717
editorBracketHighlight.foreground5#B37EC8
editorBracketHighlight.foreground6#B98090
editorBracketHighlight.unexpectedBracket.foreground#85598E
editorBracketMatch.background#00000000
editorBracketMatch.border#5F554E
editorBracketPairGuide.foreground1#AEB124
editorBracketPairGuide.foreground2#7E98A0
editorBracketPairGuide.foreground3#EFB52D
editorBracketPairGuide.foreground4#ED7717
editorBracketPairGuide.foreground5#B37EC8
editorBracketPairGuide.foreground6#B98090
editorCodeLens.foreground#9F917D
editorCursor.background#191C1D
editorCursor.foreground#FFF2D3
editorError.foreground#85598E
editorGhostText.foreground#AFA18840
editorGroup.border#4E4844
editorGroup.dropBackground#85598E1A
editorGroup.dropIntoPromptBackground#191C1D
editorGroup.dropIntoPromptBorder#00000000
editorGroup.dropIntoPromptForeground#AFA188
editorGroup.emptyBackground#191C1D
editorGroup.focusedEmptyBorder#4E4844
editorGroup.tabsBorder#00000000
editorGroupHeader.border#00000000
editorGroupHeader.noTabsBackground#1D2122
editorGroupHeader.tabsBackground#1D2122
editorGutter.addedBackground#8ABA3C
editorGutter.background#191C1D
editorGutter.commentRangeForeground#5F5D5B
editorGutter.deletedBackground#85598E
editorGutter.modifiedBackground#00B6C2
editorHint.foreground#8ABA3C
editorHoverWidget.background#191C1D
editorHoverWidget.border#4E4844
editorHoverWidget.foreground#AFA188
editorHoverWidget.highlightForeground#6D61B7
editorHoverWidget.statusBarBackground#1D2122
editorIndentGuide.activeBackground#5F554E
editorIndentGuide.background#48423F75
editorInfo.foreground#00B6C2
editorInlayHint.background#00000000
editorInlayHint.foreground#9F917D
editorInlayHint.parameterBackground#00000000
editorInlayHint.parameterForeground#9F917D
editorInlayHint.typeBackground#00000000
editorInlayHint.typeForeground#9F917D
editorLightBulb.foreground#EFB52D
editorLightBulbAutoFix.foreground#EFB52D
editorLineNumber.activeForeground#AFA188
editorLineNumber.foreground#AFA18830
editorLink.activeForeground#85598E
editorMarkerNavigation.background#191C1D
editorMarkerNavigationError.background#85598E
editorMarkerNavigationError.headerBackground#43232A
editorMarkerNavigationInfo.background#00B6C2
editorMarkerNavigationInfo.headerBackground#253A3E
editorMarkerNavigationWarning.background#ED7717
editorMarkerNavigationWarning.headerBackground#2F2418
editorOverviewRuler.addedForeground#8ABA3C
editorOverviewRuler.border#4E4844
editorOverviewRuler.bracketMatchForeground#5F554E5A
editorOverviewRuler.currentContentForeground#8ABA3C
editorOverviewRuler.deletedForeground#85598E
editorOverviewRuler.errorForeground#85598E
editorOverviewRuler.findMatchForeground#BEC723
editorOverviewRuler.incomingContentForeground#00B6C2
editorOverviewRuler.infoForeground#00B6C2
editorOverviewRuler.modifiedForeground#00B6C2
editorOverviewRuler.rangeHighlightForeground#BEC723
editorOverviewRuler.selectionHighlightForeground#732F81
editorOverviewRuler.warningForeground#ED7717
editorOverviewRuler.wordHighlightForeground#732F81
editorOverviewRuler.wordHighlightStrongForeground#732F81
editorPane.background#191C1D
editorRuler.foreground#48423F
editorStickyScroll.background#151818
editorStickyScrollHover.background#F4EBC210
editorSuggestWidget.background#191C1D
editorSuggestWidget.border#4E4844
editorSuggestWidget.focusHighlightForeground#AFA188
editorSuggestWidget.foreground#AFA188
editorSuggestWidget.highlightForeground#85598E
editorSuggestWidget.selectedBackground#1F2120
editorSuggestWidget.selectedForeground#AFA188
editorSuggestWidget.selectedIconForeground#AFA188
editorUnicodeHighlight.background#85598E1A
editorUnicodeHighlight.border#85598E
editorUnnecessaryCode.opacity#000000C0
editorWarning.foreground#ED7717
editorWhitespace.foreground#48423F75
editorWidget.background#1D2122
editorWidget.border#4E4844
editorWidget.foreground#AFA188
editorWidget.resizeBorder#4E4844
errorForeground#85598E
errorLens.errorBackground#85598E1A
errorLens.errorForeground#85598E
errorLens.errorGutterIconColor#85598E
errorLens.hintBackground#8ABA3C20
errorLens.hintForeground#8ABA3C
errorLens.infoBackground#00B6C220
errorLens.infoForeground#00B6C2
errorLens.infoGutterIconColor#00B6C2
errorLens.statusBarErrorForeground#85598E
errorLens.statusBarHintForeground#8ABA3C
errorLens.statusBarIconErrorForeground#85598E
errorLens.statusBarIconWarningForeground#ED7717
errorLens.statusBarInfoForeground#00B6C2
errorLens.statusBarWarningForeground#ED7717
errorLens.warningBackground#ED771720
errorLens.warningForeground#ED7717
errorLens.warningGutterIconColor#ED7717
extensionBadge.remoteBackground#00B6C2
extensionBadge.remoteForeground#F4EBC2
extensionButton.prominentBackground#85598E
extensionButton.prominentForeground#F4EBC2
extensionButton.prominentHoverBackground#66369D
extensionIcon.preReleaseForeground#ED7717
extensionIcon.sponsorForeground#85598E
extensionIcon.starForeground#EFB52D
extensionIcon.verifiedForeground#8ABA3C
focusBorder#85598E
foreground#AFA188
gitDecoration.addedResourceForeground#8ABA3C
gitDecoration.conflictingResourceForeground#85598E
gitDecoration.deletedResourceForeground#85598E
gitDecoration.ignoredResourceForeground#8F8071
gitDecoration.modifiedResourceForeground#00B6C2
gitDecoration.renamedResourceForeground#6DAF81
gitDecoration.stageDeletedResourceForeground#8F8071
gitDecoration.stageModifiedResourceForeground#8ABA3C
gitDecoration.submoduleResourceForeground#8F8071
gitDecoration.untrackedResourceForeground#AD5B80
gitlens.graphLane10Color#8ABA3C
gitlens.graphLane1Color#EB4B68
gitlens.graphLane2Color#7E98A0
gitlens.graphLane3Color#AEB124
gitlens.graphLane4Color#EFB52D
gitlens.graphLane5Color#ED7717
gitlens.graphLane6Color#B37EC8
gitlens.graphLane7Color#B98090
gitlens.graphLane8Color#a5bcc4
gitlens.graphLane9Color#6DAF81
gitlens.gutterForegroundColor#9F917D
gitlens.gutterUncommittedForegroundColor#9F917D
gitlens.trailingLineForegroundColor#9F917D
icon.foreground#AFA188
input.background#191C1D
input.border#4E4844
input.foreground#AFA188
input.placeholderForeground#776B5E
inputOption.activeBackground#43232A
inputValidation.errorBackground#43232A
inputValidation.errorBorder#85598E
inputValidation.errorForeground#85598E
inputValidation.infoBackground#253A3E
inputValidation.infoBorder#00B6C2
inputValidation.infoForeground#00B6C2
inputValidation.warningBackground#2F2418
inputValidation.warningBorder#ED7717
inputValidation.warningForeground#ED7717
keybindingLabel.background#F4EBC210
keybindingLabel.foreground#AFA188
keybindingTable.headerBackground#1D2122
keybindingTable.rowsBackground#1D2122
list.activeSelectionBackground#85598E1A
list.activeSelectionForeground#AFA188
list.activeSelectionIconForeground#AFA188
list.deemphasizedForeground#8F8071
list.dropBackground#85598E1A
list.errorForeground#85598E
list.filterMatchBackground#3F4221
list.filterMatchBorder#8ABA3C
list.focusBackground#F4EBC260
list.focusForeground#AFA188
list.focusHighlightForeground#AFA188
list.highlightForeground#85598E
list.hoverBackground#F4EBC210
list.inactiveFocusBackground#F4EBC260
list.inactiveFocusOutline#4E4844
list.inactiveSelectionBackground#F4EBC210
list.invalidItemForeground#85598E
list.warningForeground#ED7717
listFilterWidget.background#3F4221
listFilterWidget.noMatchesOutline#85598E
listFilterWidget.outline#4E4844
menu.background#191C1D
menu.foreground#AFA188
menu.selectionBackground#1F2120
menu.selectionForeground#AFA188
menu.separatorBackground#4E4844
menubar.selectionBackground#F4EBC21A
menubar.selectionForeground#AFA188
merge.border#4E4844
merge.currentContentBackground#8ABA3C2A
merge.currentHeaderBackground#8ABA3C6A
merge.incomingContentBackground#00B6C22A
merge.incomingHeaderBackground#00B6C26A
mergeEditor.change.background#AEB1241A
mergeEditor.change.word.background#AEB1242A
mergeEditor.conflict.handled.minimapOverViewRuler#F4EBC28A
mergeEditor.conflict.handledFocused.border#F4EBC28A
mergeEditor.conflict.handledUnfocused.border#F4EBC23A
mergeEditor.conflict.unhandled.minimapOverViewRuler#AEB124AA
mergeEditor.conflict.unhandledFocused.border#AEB124AA
mergeEditor.conflict.unhandledUnfocused.border#AEB1244A
minimap.background#191C1D
minimap.errorHighlight#85598E
minimap.findMatchHighlight#BEC723
minimap.selectionHighlight#732F81
minimap.warningHighlight#ED7717
minimapGutter.addedBackground#8ABA3C
minimapGutter.deletedBackground#85598E
minimapGutter.modifiedBackground#00B6C2
minimapSlider.activeBackground#F4EBC22F
minimapSlider.background#F4EBC210
minimapSlider.hoverBackground#F4EBC21F
notificationCenterHeader.background#1D2122
notificationCenterHeader.foreground#AFA188
notificationLink.foreground#85598E
notifications.background#191C1D
notifications.border#4E4844
notificationsErrorIcon.foreground#85598E
notificationsInfoIcon.foreground#00B6C2
notificationsWarningIcon.foreground#ED7717
panel.background#191C1D
panel.border#4E4844
panelSection.border#4E4844
panelSection.dropBackground#85598E1A
panelSectionHeader.background#1D2122
panelSectionHeader.border#4E4844
panelSectionHeader.foreground#AFA188
panelTitle.activeBorder#85598E
panelTitle.activeForeground#85598E
panelTitle.inactiveForeground#AFA188
peekView.border#00B6C2
peekViewEditor.background#191C1D
peekViewEditor.matchHighlightBackground#3F4221
peekViewEditor.matchHighlightBorder#8ABA3C8A
peekViewEditorGutter.background#191C1D
peekViewResult.background#1D2122
peekViewResult.fileForeground#F4EBC2
peekViewResult.lineForeground#AFA188
peekViewResult.matchHighlightBackground#3F4221
peekViewResult.selectionBackground#1F2120
peekViewResult.selectionForeground#AFA188
peekViewTitle.background#253A3E
peekViewTitleDescription.foreground#AFA188
peekViewTitleLabel.foreground#F4EBC2
pickerGroup.border#4E4844
pickerGroup.foreground#85598E
problemsErrorIcon.foreground#85598E
problemsInfoIcon.foreground#00B6C2
problemsWarningIcon.foreground#ED7717
progressBar.background#85598E
quickInput.background#191C1D
quickInput.foreground#AFA188
quickInputList.focusBackground#F4EBC220
quickInputList.focusForeground#F4EBC2
quickInputList.focusIconForeground#AFA188
quickInputTitle.background#191C1D
sash.hoverBorder#85598E
scm.providerBorder#4E4844
scrollbar.shadow#0000005F
scrollbarSlider.activeBackground#F4EBC22F
scrollbarSlider.background#F4EBC210
scrollbarSlider.hoverBackground#F4EBC21F
searchEditor.findMatchBackground#AEB1243A
searchEditor.findMatchBorder#8ABA3C8A
selection.background#43232A
settings.focusedRowBackground#00000000
settings.focusedRowBorder#4E4844
settings.headerForeground#CCBB97
settings.modifiedItemIndicator#85598E
settings.rowHoverBackground#00000000
sideBar.background#1D2122
sideBar.border#4E4844
sideBar.dropBackground#85598E1A
sideBar.foreground#AFA188
sideBarSectionHeader.background#181A1B
sideBarSectionHeader.foreground#AFA188
sideBarTitle.foreground#AFA188
sideBySideEditor.horizontalBorder#4E4844
sideBySideEditor.verticalBorder#4E4844
statusBar.background#1D2122
statusBar.debuggingBackground#6E9230
statusBar.debuggingForeground#F4EBC2
statusBar.foreground#AFA188
statusBar.noFolderBackground#151419
statusBar.noFolderForeground#AFA188
statusBarItem.activeBackground#F4EBC22A
statusBarItem.compactHoverBackground#F4EBC21A
statusBarItem.errorBackground#1D2122
statusBarItem.errorForeground#85598E
statusBarItem.hoverBackground#F4EBC21A
statusBarItem.prominentBackground#1D2122
statusBarItem.prominentForeground#00B6C2
statusBarItem.prominentHoverBackground#F4EBC21A
statusBarItem.remoteBackground#1D2122
statusBarItem.remoteForeground#85598E
statusBarItem.warningBackground#1D2122
statusBarItem.warningForeground#ED7717
symbolIcon.arrayForeground#CCBB97
symbolIcon.booleanForeground#6DAF81
symbolIcon.classForeground#AEB124
symbolIcon.colorForeground#AFA188
symbolIcon.constantForeground#6DAF81
symbolIcon.enumeratorForeground#AEB124
symbolIcon.enumeratorMemberForeground#6DAF81
symbolIcon.eventForeground#AFA188
symbolIcon.fieldForeground#B98090
symbolIcon.fileForeground#AFA188
symbolIcon.folderForeground#AFA188
symbolIcon.functionForeground#7E98A0
symbolIcon.interfaceForeground#B37EC8
symbolIcon.keyForeground#EB4B68
symbolIcon.keywordForeground#EB4B68
symbolIcon.methodForeground#7E98A0
symbolIcon.moduleForeground#CCBB97
symbolIcon.namespaceForeground#CCBB97
symbolIcon.nullForeground#EB4B68
symbolIcon.numberForeground#ED7717
symbolIcon.objectForeground#AEB124
symbolIcon.operatorForeground#9F917D
symbolIcon.packageForeground#CCBB97
symbolIcon.propertyForeground#B98090
symbolIcon.referenceForeground#EB4B68
symbolIcon.snippetForeground#EB4B68
symbolIcon.stringForeground#EFB52D
symbolIcon.structForeground#AEB124
symbolIcon.textForeground#AFA188
symbolIcon.typeParameterForeground#AEB124
symbolIcon.unitForeground#ED7717
symbolIcon.variableForeground#CCBB97
tab.activeBackground#191C1D
tab.activeBorderTop#85598E
tab.activeForeground#AFA188
tab.activeModifiedBorder#00000000
tab.border#00000000
tab.hoverBackground#191C1D
tab.hoverBorder#00000000
tab.hoverForeground#AFA188
tab.inactiveBackground#1D2122
tab.inactiveForeground#70665C
tab.inactiveModifiedBorder#00000000
tab.lastPinnedBorder#4E4844
tab.unfocusedActiveBackground#191C1D
tab.unfocusedActiveBorder#00000000
tab.unfocusedActiveBorderTop#6F2737
tab.unfocusedActiveForeground#8F8071
tab.unfocusedActiveModifiedBorder#00000000
tab.unfocusedHoverBackground#191C1D
tab.unfocusedHoverBorder#00000000
tab.unfocusedHoverForeground#AFA188
tab.unfocusedInactiveBackground#1D2122
tab.unfocusedInactiveForeground#8F8071
tab.unfocusedInactiveModifiedBorder#00000000
terminal.ansiBlack#F4EBC2
terminal.ansiBlue#00B6C2
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#7D9D91
terminal.ansiBrightCyan#8BBC79
terminal.ansiBrightGreen#AEB124
terminal.ansiBrightMagenta#B37EC8
terminal.ansiBrightRed#ED4531
terminal.ansiBrightWhite#F4EBC2
terminal.ansiBrightYellow#EFB52D
terminal.ansiCyan#5F8F61
terminal.ansiGreen#939214
terminal.ansiMagenta#85598E
terminal.ansiRed#C7231C
terminal.ansiWhite#191C1D
terminal.ansiYellow#D09420
terminal.background#191C1D
terminal.dropBackground#85598E1A
terminal.findMatchBackground#3F4221
terminal.findMatchBorder#8ABA3C8A
terminal.findMatchHighlightBackground#AEB1243A
terminal.findMatchHighlightBorder#00000000
terminal.foreground#CCBB97
terminal.inactiveSelectionBackground#85598E10
terminal.selectionBackground#85598E35
terminal.tab.activeBorder#4E4844
terminalCommandDecoration.defaultBackground#8F8071
terminalCommandDecoration.errorBackground#85598E
terminalCommandDecoration.successBackground#8ABA3C
terminalCursor.background#191C1D
terminalCursor.foreground#FFF2D3
terminalOverviewRuler.cursorForeground#85598E
terminalOverviewRuler.findMatchForeground#BEC723
testing.iconErrored#85598E
testing.iconFailed#85598E
testing.iconPassed#8ABA3C
testing.iconQueued#00B6C2
testing.iconSkipped#8F8071
testing.iconUnset#ED7717
testing.message.error.decorationForeground#85598E
testing.message.error.lineBackground#85598E1A
testing.message.info.decorationForeground#00B6C2
testing.message.info.lineBackground#00B6C220
testing.peekBorder#4E4844
textBlockQuote.background#1D2122
textBlockQuote.border#85598E
textCodeBlock.background#1D2122
textLink.activeForeground#C6A2F0
textLink.foreground#85598E
textPreformat.foreground#6D61B7
textSeparator.foreground#4E4844
titleBar.activeBackground#1D2122
titleBar.activeForeground#AFA188
titleBar.inactiveBackground#1D2122
titleBar.inactiveForeground#97856B
toolbar.activeBackground#F4EBC22A
toolbar.hoverBackground#F4EBC21A
tree.indentGuidesStroke#4E4844
tree.tableColumnsBorder#4E4844
walkThrough.embeddedEditorBackground#191C1D
welcomePage.background#191C1D
welcomePage.progress.background#191C1D
welcomePage.progress.foreground#85598E
welcomePage.tileBackground#1D2122
welcomePage.tileHoverBackground#2E302C
welcomePage.tileShadow#0000005F
widget.shadow#0000005F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
keyword, storage.type, storage.modifier, punctuation.definition.directive.c, punctuation.definition.directive.cpp, keyword.type.go, storage.class.d, markup.deleted.git_gutter, entity.name.tag.css, punctuation.definition.keyword.css, entity.name.tag.wildcard.css, storage.modifier.mut.rust, storage.modifier.type.rust, variable.language.self.rust, storage.modifier.cs, keyword.other.this.cs, keyword.control.powershell, storage.type.powershell, meta.function.powershell, variable.language.this.js, keyword.operator.new.js, storage.type.js, constant.language.null.js, constant.language.undefined.js, keyword.operator.ternary.js, variable.language.this.ts, keyword.operator.new.ts, storage.type.ts, storage.type.namespace.ts, variable.language.this.ts, constant.language.null.ts, constant.language.undefined.ts, keyword.operator.ternary.ts, keyword.operator.expression.of.ts	#EB4B68	—
entity.name.type.primitive.rust, entity.name.type.numeric.rust, keyword.type.cs, support.type.primitive.js, support.type.primitive.ts	#EB4B68	—
punctuation, keyword.operator, keyword.operator.sigil.rust, keyword.operator.access.dot.rust, keyword.operator.key-value.rust, keyword.operator.attribute.inner.rust, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.brace.round.js, meta.brace.square.js, meta.brace.round.ts, meta.brace.square.ts, punctuation.definition.string.begin.html, punctuation.definition.string.end.html, punctuation.definition.string.begin.xml, punctuation.definition.string.end.xml, punctuation.definition.string.markdown, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, punctuation.definition.string.begin.json, punctuation.definition.string.end.json	#9F917D
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, keyword.other.common.function, entity.name.function.rust, entity.name.function.cs, support.function.powershell, entity.name.function.js, entity.name.function.ts, support.function.misc.css, support.function.misc.scss	#7E98A0	—
support.function.macro.rust, support.function.macro.builtin.rust, support.function.macro.core.rust, entity.name.type.macro.rust, entity.name.function.macro.rust, entity.name.function.macro.rules.rust, support.function.macro.julia, support.function.builtin.zig	#7E98A0	—
support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, entity.other.attribute-name.table.toml, variable.key.table.toml, storage.type.haskell, storage.type.java, storage.type.primitive.java, storage.type.object.array.java, storage.type.c, storage.type.built-in.c, meta.function.definition.parameters.c, storage.type.built-in.cpp, storage.type.built-in.primitive.cpp, entity.name.class.kotlin, storage.type.go, storage.type.boolean.go, storage.type.byte.go, storage.type.error.go, storage.type.numeric.go, storage.type.rune.go, storage.type.string.go, storage.type.uintptr.go, storage.type.concrete.nim, storage.type.basic-type.d, storage.type.d, support.type.python, basicTypes.nim, meta.class.stanza.dune, storage.type.cs, entity.name.type.rust, entity.name.type.struct.rust, entity.name.type.enum.rust, entity.name.type.union.rust, entity.name.type.declaration.rust, storage.type.cs, entity.name.type.class.cs, entity.name.type.struct.cs, entity.name.type.enum.cs, entity.name.type.class.js, support.class.builtin.js, support.class.component.js, entity.name.type.class.ts	#AEB124	—
constant.other.haskell, variable.other.enummember.cpp, support.enum.core.rust, entity.name.type.option.rust, entity.name.type.result.rust, constant.language.bool.rust, entity.name.variable.enum-member.cs, constant.language.boolean.true.cs, constant.language.boolean.false.cs, constant.language.powershell, constant.language.powershell punctuation.definition.variable.powershell, constant.language.boolean.true.js, constant.language.boolean.false.js, variable.other.enummember.ts, constant.language.boolean.true.ts, constant.language.boolean.false.ts, constant.language.boolean.yaml, constant.language.boolean.toml	#6DAF81	—
entity.name.type.trait.rust, entity.name.type.interface.ts	#B37EC8	—
entity.name.type.type-parameter.cs	#AEB124	—
variable, meta.function-call.arguments, string constant.other.placeholder, meta.function-call.java, storage.modifier.import.java, variable.other.object, variable.other.rust, entity.name.variable.local.cs, variable.other.readwrite.cs, variable.other.readwrite.js, variable.other.constant.js, , variable.css, variable.argument.css, variable.scss	#CCBB97	—
variable.parameter, keyword.other.self.rust, meta.parens.block.c, variable.css, entity.name.variable.parameter.cs, variable.parameter.js, variable.parameter.ts	#A9A9A9	—
entity.name.variable.field.cs, variable.other.object.property.cs, variable.other.member.powershell, variable.other.property.js, variable.object.property.ts, variable.other.property.ts	#B98090	—
constant.other.caps.rust, constant.language.null.cs, support.constant.variable.powershell, support.constant.variable.powershell punctuation.definition.variable.powershell, variable.other.constant.js, variable.other.constant.ts, constant.language.json, constant.other.boolean.toml	#6DAF81	—
string, punctuation.definition.string, constant.other.symbol, constant.other.key, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, string.quoted.double.rust, punctuation.definition.string.rust, string.quoted.double.cs, punctuation.definition.string.begin.cs, punctuation.definition.string.end.cs, string.quoted.double.powershell, string.quoted.single.powershell, punctuation.definition.string.begin.powershell, punctuation.definition.string.end.powershell, string.quoted.single.js, string.quoted.double.js, string.template.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.string.template.begin.js, punctuation.definition.string.template.end.js, string.quoted.single.ts, string.quoted.double.ts, string.template.ts, punctuation.definition.string.begin.ts, punctuation.definition.string.end.ts, punctuation.definition.string.template.begin.ts, punctuation.definition.string.template.end.ts, string.quoted.double.css, string.quoted.double.scss, string.quoted.single.css, string.quoted.single.scss, string.quoted.single.xml, string.quoted.double.xml, string.quoted.double.json, string.unquoted.plain.out.yaml, string.unquoted.block.yaml, punctuation.definition.string.begin.yaml, punctuation.definition.string.end.yaml, string.quoted.single.yaml, string.quoted.double.yaml, string.quoted.single.basic.line.toml, string.quoted.triple.basic.block.toml, string.quoted.single.literal.line.toml, string.quoted.triple.literal.block.toml, string.quoted.single.ini, string.quoted.double.ini, punctuation.definition.string.begin.ini, punctuation.definition.string.end.ini, string.quoted.double.bnf, string.quoted.single.bnf	#EFB52D	—
constant.character.escape, constant.character.escape.rust, constant.character.escape.cs, constant.character.escape.powershell, constant.character.escape.js, constant.character.escape.ts, punctuation.definition.constant.xml, constant.character.entity.xml, constant.character.escape.yaml, constant.character.escape.toml	#ED7717	—
punctuation.definition.char.rust, string.quoted.single.char.rust, punctuation.definition.char.begin.cs, punctuation.definition.char.end.cs, string.quoted.single.cs	#ED7717	—
constant.numeric, constant.numeric.decimal.rust, constant.numeric.bin.rust, constant.numeric.hex.rust, constant.numeric.oct.rust, punctuation.separator.dot.decimal.rust, constant.numeric.binary.cs, constant.numeric.decimal.cs, constant.numeric.hex.cs, constant.numeric.integer.powershell, constant.numeric.hex.powershell, constant.numeric.octal.powershell, constant.numeric.binary.js, constant.numeric.decimal.js, constant.numeric.hex.js, constant.numeric.octal.js, constant.numeric.binary.ts, constant.numeric.decimal.ts, constant.numeric.hex.ts, constant.numeric.octal.ts, constant.numeric.css, constant.numeric.json, constant.numeric.integer.yaml, constant.numeric.float.yaml, constant.numeric.integer.toml, constant.numeric.float.toml, constant.numeric.bin.toml, constant.numeric.hex.toml, constant.numeric.oct.toml, constant.numeric.inf.toml, constant.numeric.nan.toml	#ED7717	—
comment, punctuation.definition.comment, comment.block.cs, comment.line.double-slash.cs, comment.line.powershell, comment.block.documentation.js, comment.line.double-slash.js, comment.block.documentation.ts, comment.line.double-slash.ts, comment.block.xml, punctuation.definition.comment.xml, comment, comment.line.double-slash.js, comment.block.json, punctuation.definition.comment.yaml, comment.line.number-sign.yaml, punctuation.definition.comment.toml, comment.line.number-sign.toml, punctuation.definition.comment.ini, comment.line.semicolon.ini, comment.line.number-sign.ini, comment.line.bnf, comment.block.bnf	#5F5D5B	italic
meta.attribute.rust, meta.attribute.rust punctuation.definition.attribute.rust, meta.attribute.rust punctuation.brackets.attribute.rust, meta.attribute.rust punctuation.brackets.round.rust, meta.attribute.rust entity.name.type.rust, support.function.attribute.powershell, variable.parameter.attribute.powershell	#ED7717	—
invalid, invalid.illegal	#85598E	—
url, link, uri	—	underline
keyword.operator.misc.question-mark.rust, keyword.operator.question.rust	#EB4B68	—
punctuation.definition.lifetime.rust, entity.name.type.lifetime.rust, storage.modifier.lifetime.rust	#B37EC8	—
meta.interpolation.rust, punctuation.definition.interpolation.rust	#B37EC8	—
variable.other.metavariable.specifier.rust	#8ABA3C	—
entity.name.tag.cs, comment.block.documentation.cs punctuation.definition.tag.cs, comment.block.documentation.cs punctuation.separator.equals.cs	#5F5D5B	—
entity.other.attribute-name.cs	#ED7717	—
comment.block.documentation.cs	#CCBB97	—
punctuation.definition.interpolation.begin.cs, punctuation.definition.interpolation.end.cs	#B37EC8	—
variable.other.readwrite.powershell, punctuation.definition.variable.powershell, storage.modifier.scope.powershell	#AEB124	—
storage.modifier.scope.powershell, support.variable.drive.powershell	#AEB124	underline
support.variable.automatic.powershell, support.variable.automatic.powershell punctuation.definition.variable.powershell, variable.language.powershell, variable.language.powershell punctuation.definition.variable.powershell	#B37EC8	—
keyword.operator.comparison.powershell, keyword.operator.logical.powershell	#EB4B68	—
keyword.operator.documentation.powershell	#CCBB97	—
punctuation.section.embedded.substatement.begin.powershell, punctuation.section.embedded.substatement.end.powershell	#B37EC8	—
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js	#B37EC8	—
punctuation.definition.group.regexp, punctuation.definition.group.no-capture.regexp	#CCBB97	—
constant.other.character-class.regexp, keyword.operator.quantifier.regexp, keyword.control.anchor.regexp, punctuation.definition.look-ahead.regexp, meta.assertion.look-ahead.regexp, meta.group.assertion.regexp	#B37EC8	—
punctuation.section.embedded.begin.js, punctuation.section.embedded.end.js	#ED7717	bold
entity.other.attribute-name.js	#B37EC8	italic
punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts	#B37EC8	—
entity.name.tag.html	#EB4B68	—
meta.attribute.id.html string.quoted.double.html, entity.other.attribute-name.id.css	#ED7717	bold
meta.attribute.class.html string.quoted.double.html, entity.other.attribute-name.class.css	#AEB124	—
entity.other.attribute-name.html, entity.other.attribute-name.css	#6DAF81	italic
meta.attribute, meta.attribute-selector.css string.quoted.double.css	#EFB52D	—
meta.attribute.href.html string.quoted.double.html, meta.attribute.src.html string.quoted.double.html, meta.attribute.unrecognized.xmlns.html string.quoted.double.html	#B37EC8	—
meta.embedded.line.css	#8ABA3C	—
entity.name.tag.css	#EB4B68	—
support.type.property-name.css, meta.property-name.css, meta.property-name.scss, support.type.property-name.media.css	#B98090	—
support.constant.property-value.css	#6DAF81	—
support.constant.font-name.css	#EFB52D	—
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#8ABA3C	—
keyword.other.unit.rem.css, keyword.other.unit.em.css, keyword.other.unit.ex.css, keyword.other.unit.ch.css, keyword.other.unit.vw.css, keyword.other.unit.vh.css, keyword.other.unit.vmin.css, keyword.other.unit.vmax.css, keyword.other.unit.percentage.css, keyword.other.unit.mm.css, keyword.other.unit.in.css, keyword.other.unit.px.css, keyword.other.unit.pt.css, keyword.other.unit.pc.css, keyword.other.unit.deg.css, constant.other.scss	#ED7717	—
keyword.operator.logical.and.media.css, keyword.operator.logical.not.media.css, keyword.operator.logical.only.media.css	#EB4B68	—
support.constant.media.css	#B37EC8	—
punctuation.definition.keyword.scss, keyword.control.at-rule.include.scss, entity.name.tag.reference.scss, entity.name.tag.wildcard.scss	#EB4B68	—
entity.name.tag.xml, entity.name.tag.localname.xml	#EB4B68	—
entity.other.attribute-name.xml, entity.other.attribute-name.localname.xml	#6DAF81	italic
entity.name.tag.namespace.xml	#8ABA3C	—
entity.other.attribute-name.namespace.xml	#8ABA3C	italic
entity.other.attribute-name.xml punctuation.separator.namespace.xml	—	italic
variable.language.documentroot.xml	#B37EC8	—
text.html.markdown, punctuation.definition.list_item.markdown	#8F8071	—
punctuation.definition.raw.markdown, markup.inline.raw.string.markdown	#CCBB97	—
markup.fenced_code.block.markdown	#CCBB97	—
fenced_code.block.language.markdown, markup.fenced_code.block.markdown punctuation.definition.markdown	#CCBB97	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown	#EB4B68	—
punctuation.definition.bold.markdown, markup.bold, markup.bold string	#ED7717	bold
punctuation.definition.italic.markdown, markup.italic	#7E98A0	italic
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#7E98A0	italic bold
punctuation.definition.quote.begin.markdown, markup.quote.markdown	#EFB52D	italic
markup.strikethrough.markdown, punctuation.definition.strikethrough.markdown	#8F8071	strikethrough
meta.separator.markdown	#CCBB97	bold
punctuation.definition.list.begin.markdown	#6DAF81	—
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, string.other.link.description.title.markdown, string.other.link.description.markdown, string.other.link.title.markdown	#AEB124	—
markup.underline.link, constant.other.reference.link.markdown	#B37EC8	underline
punctuation.definition.math.begin.markdown	—	—
constant.character.math.tex, constant.character.math.tex punctuation.definition.math.tex	#6DAF81	—
support.type.property-name.json	#EB4B68	—
punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, punctuation.definition.string.begin.json, punctuation.definition.string.end.json	—	—
entity.name.tag.yaml	#EB4B68	—
constant.other.timestamp.yaml	#AEB124	—
constant.language.null.yaml	#EB4B68	—
storage.type.tag-handle.yaml	#EB4B68	—
entity.name.type.anchor.yaml, punctuation.definition.anchor.yaml, variable.other.alias.yaml, keyword.control.flow.alias.yaml punctuation.definition.alias.yaml	#8ABA3C	—
keyword.key.toml, support.type.property-name.toml	#EB4B68	—
constant.other.date.toml, constant.other.datetime.toml, constant.other.datetime-with-timezone.toml, constant.other.time.date.toml, constant.other.time.time.toml, constant.other.time.datetime.local.toml, constant.other.time.datetime.offset.toml	#AEB124	—
entity.other.attribute-name.table.toml, support.type.property-name.table.toml	#8ABA3C	—
entity.other.attribute-name.table.array.toml, support.type.property-name.array.toml	#B37EC8	—
keyword.other.definition.ini	#EB4B68	—
entity.name.section.group-title.ini	#8ABA3C	—
entity.name.class.bnf	#AEB124	—
support.variable.bnf	#6DAF81	—

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