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 Light

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#EBEBEB
activityBar.border#C5CCCE
activityBar.foreground#5900DF
activityBar.inactiveForeground#8B99A7BB
activityBarBadge.background#5900DF
activityBarBadge.foreground#EBEBEB
badge.background#5900DF
badge.foreground#F4F4F4
breadcrumb.background#EBEBEB
breadcrumb.focusForeground#101113
breadcrumb.foreground#8B99A7
breadcrumbPicker.background#F4F4F4
button.background#7261E4
button.border#7261E4
button.foreground#F4F4F4
button.hoverBackground#5900DF
button.secondaryBackground#6655DB
button.secondaryForeground#455059
button.secondaryHoverBackground#5900DF
charts.blue#0F8FE4
charts.foreground#455059
charts.green#188D0E
charts.lines#455059
charts.orange#DD7404
charts.purple#5900DF
charts.red#DF3C3C
charts.yellow#C38703
checkbox.foreground#455059
commandCenter.activeBackground#FFFFFF60
commandCenter.activeForeground#363E4590
commandCenter.background#F4F4F4
commandCenter.border#C5CCCE
commandCenter.foreground#8B99A7
contrastActiveBorder#C5CCCE
contrastBorder#C5CCCE
dart.closingLabels#363E45AA
debugExceptionWidget.background#FFFFFF
debugExceptionWidget.border#C5CCCE
debugToolBar.background#FFFFFF
descriptionForeground#455059
diffEditor.border#C5CCCE
diffEditor.diagonalFill#C5CCCE80
diffEditor.insertedTextBackground#188D0E20
diffEditor.removedTextBackground#C1383825
diffEditorGutter.insertedLineBackground#00000000
diffEditorGutter.removedLineBackground#00000000
dropdown.background#F4F4F4
dropdown.border#AAAAAA50
dropdown.foreground#000000
dropdown.listBackground#F4F4F4
editor.background#F4F2F6
editor.findMatchBackground#5900DF20
editor.findMatchBorder#5900DF60
editor.findMatchHighlightBackground#5900DF20
editor.findMatchHighlightBorder#5900DF40
editor.foreground#455059
editor.hoverHighlightBackground#5900DF40
editor.inactiveSelectionBackground#C3870320
editor.lineHighlightBackground#5900DF08
editor.lineHighlightBorder#5900DF0C
editor.rangeHighlightBackground#5900DF20
editor.selectionBackground#5900DF25
editor.selectionHighlightBackground#00000000
editor.selectionHighlightBorder#5900DF60
editor.wordHighlightBackground#5900DF20
editor.wordHighlightStrongBackground#5900DF40
editorBracketHighlight.foreground1#188D0E
editorBracketHighlight.foreground2#0094E4
editorBracketHighlight.foreground3#CF7606
editorBracketHighlight.foreground4#FF3636
editorBracketHighlight.foreground5#BF45F3
editorBracketHighlight.foreground6#975F88
editorBracketHighlight.unexpectedBracket.foreground#5900DF
editorBracketMatch.background#5900DF20
editorBracketMatch.border#5900DF40
editorBracketPairGuide.activeBackground1#188D0E
editorBracketPairGuide.activeBackground2#0094E4
editorBracketPairGuide.activeBackground3#CF7606
editorBracketPairGuide.activeBackground4#FF3636
editorBracketPairGuide.activeBackground5#BF45F3
editorBracketPairGuide.activeBackground6#975F88
editorCodeLens.foreground#363E4580
editorCursor.background#F4F2F6
editorCursor.foreground#5900DF
editorError.border#00000000
editorError.foreground#C13838
editorGhostText.background#188D0E01
editorGhostText.border#188D0E01
editorGhostText.foreground#188D0E70
editorGroup.border#C5CCCE
editorGroup.dropBackground#5900DF15
editorGroupHeader.border#5900DF05
editorGroupHeader.noTabsBackground#F4F4F4
editorGroupHeader.tabsBackground#EBEBEB
editorGroupHeader.tabsBorder#C5CCCE
editorGutter.addedBackground#188D0Ecc
editorGutter.background#f4f2f6
editorGutter.commentRangeForeground#FFFFFF
editorGutter.deletedBackground#C13838CC
editorGutter.modifiedBackground#3398DBCC
editorHoverWidget.background#FFFFFF
editorHoverWidget.border#C5CCCE
editorIndentGuide.activeBackground#8B99A7BB
editorIndentGuide.background#8B99A730
editorInlayHint.background#363E4520
editorInlayHint.foreground#363E4590
editorInlayHint.typeBackground#9244EC30
editorInlayHint.typeForeground#9244ECAA
editorLineNumber.activeForeground#101113
editorLineNumber.foreground#45505950
editorLink.activeForeground#455059
editorMarkerNavigation.background#EBEBEB
editorMarkerNavigationError.background#C1383890
editorMarkerNavigationInfo.background#3398DB90
editorMarkerNavigationWarning.background#C9A02290
editorOverviewRuler.border#C5CCCE
editorOverviewRuler.commonContentForeground#C38703
editorOverviewRuler.currentContentForeground#C13838
editorOverviewRuler.incomingContentForeground#188D0E
editorRuler.foreground#C5CCCE40
editorStickyScroll.background#FFFFFF
editorSuggestWidget.background#F4F4F4
editorSuggestWidget.border#C5CCCE
editorSuggestWidget.foreground#363E45
editorSuggestWidget.highlightForeground#C38703
editorSuggestWidget.selectedBackground#5900DF4d
editorWarning.foreground#C38703
editorWhitespace.foreground#8B99A760
editorWidget.background#FFFFFF
editorWidget.resizeBorder#5900DF50
errorForeground#FC0C9B
errorLens.errorBackgroundLight#FC0C9B1A
errorLens.errorForegroundLight#FC0C9B
errorLens.errorGutterIconColor#FC0C9B
errorLens.hintBackgroundLight#188D0E20
errorLens.hintForegroundLight#188D0E
errorLens.infoBackgroundLight#00729F20
errorLens.infoForegroundLight#00729F
errorLens.infoGutterIconColor#00729F
errorLens.statusBarErrorForeground#FC0C9B
errorLens.statusBarHintForeground#188D0E
errorLens.statusBarIconErrorForeground#FC0C9B
errorLens.statusBarIconWarningForeground#FF8B25
errorLens.statusBarInfoForeground#00729F
errorLens.statusBarWarningForeground#FF8B25
errorLens.warningBackgroundLight#FF8B2520
errorLens.warningForeground#C9A02299
errorLens.warningForegroundLight#FF8B25
errorLens.warningGutterIconColor#FF8B25
extensionButton.prominentBackground#5900DF9d
extensionButton.prominentForeground#EBEBEB
extensionButton.prominentHoverBackground#5900DF
focusBorder#5900DF40
foreground#363E45AA
gitDecoration.addedResourceForeground#188D0E
gitDecoration.conflictingResourceForeground#FC0C9B
gitDecoration.deletedResourceForeground#FC0C9B
gitDecoration.ignoredResourceForeground#8B99A7
gitDecoration.modifiedResourceForeground#00729F
gitDecoration.renamedResourceForeground#009793
gitDecoration.stageDeletedResourceForeground#ADB1C2
gitDecoration.stageModifiedResourceForeground#188D0E
gitDecoration.submoduleResourceForeground#ADB1C2
gitDecoration.untrackedResourceForeground#188D0E
gitlens.graphLane10Color#6FCDC1
gitlens.graphLane1Color#F85EB4
gitlens.graphLane2Color#5900DF
gitlens.graphLane3Color#00D647
gitlens.graphLane4Color#FF8B25
gitlens.graphLane5Color#E66DFF
gitlens.graphLane6Color#FF7135
gitlens.graphLane7Color#B58E95
gitlens.graphLane8Color#00D6C4
gitlens.graphLane9Color#188D0E
gitlens.gutterForegroundColor#737AA2
gitlens.gutterUncommittedForegroundColor#737AA2
gitlens.trailingLineForegroundColor#737AA2
icon.foreground#363E45AA
input.background#00000000
input.border#8B99A750
input.foreground#455059
input.placeholderForeground#45505960
inputOption.activeBorder#5900DF
inputValidation.errorBackground#FFFFFF
inputValidation.errorBorder#C38703
inputValidation.infoBackground#FFFFFF
inputValidation.infoBorder#5900DF
inputValidation.warningBackground#FFFFFF
inputValidation.warningBorder#C38703
list.activeSelectionBackground#5900DF30
list.activeSelectionForeground#455059
list.dropBackground#5900DF15
list.errorForeground#C13838
list.focusBackground#5900DF40
list.focusForeground#363E45
list.highlightForeground#C38703
list.hoverBackground#8B99A720
list.hoverForeground#455059
list.inactiveSelectionBackground#8B99A730
list.warningForeground#C9A022
menu.background#FFFFFF
menu.border#C5CCCE
menu.foreground#363E45
menu.selectionForeground#363E45
menu.separatorBackground#C5CCCE
menubar.selectionBackground#FFFFFF
menubar.selectionForeground#363E45
merge.border#C5CCCE
merge.commonContentBackground#C3870330
merge.commonHeaderBackground#C3870380
merge.currentContentBackground#188D0E30
merge.currentHeaderBackground#188D0E80
merge.incomingContentBackground#0094E430
merge.incomingHeaderBackground#0094E480
notificationCenterHeader.background#FFFFFF
notificationCenterHeader.foreground#455059
notificationLink.foreground#C38703
notifications.background#FFFFFF
notifications.border#C5CCCE
notifications.foreground#363E45
notificationsErrorIcon.foreground#DF3C3C
notificationsInfoIcon.foreground#5900DF
notificationsWarningIcon.foreground#DD7404
panel.background#F0F0F0
panel.border#C5CCCE
panelInput.border#8B99A7
panelSection.border#C5CCCE
panelSectionHeader.background#8B99A720
panelSectionHeader.border#C5CCCE
panelSectionHeader.foreground#455059
panelTitle.activeBorder#5900DF
panelTitle.activeForeground#101113
panelTitle.inactiveForeground#8B99A7
peekView.border#5900DF
peekViewEditor.background#8B99A720
peekViewEditor.matchHighlightBackground#FFFFFF40
peekViewEditorGutter.background#8B99A720
peekViewResult.background#8B99A720
peekViewResult.fileForeground#455059
peekViewResult.lineForeground#455059
peekViewResult.matchHighlightBackground#FFFFFF
peekViewResult.selectionBackground#FFFFFF
peekViewResult.selectionForeground#455059
peekViewTitle.background#C5CCCE
peekViewTitleDescription.foreground#455059
peekViewTitleLabel.foreground#455059
pickerGroup.border#C5CCCE
pickerGroup.foreground#455059
progressBar.background#C38703
sash.hoverBorder#5900DF50
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#5900DF40
scrollbarSlider.background#5900DF20
scrollbarSlider.hoverBackground#5900DF30
selection.background#5900DF60
settings.headerForeground#101113
settings.modifiedItemIndicator#5900DF
sideBar.background#EBEBEB
sideBar.border#C5CCCE
sideBar.foreground#363E45
sideBarSectionHeader.background#EBEBEB
sideBarSectionHeader.border#C5CCCE
sideBarSectionHeader.foreground#101113
sideBarTitle.foreground#8B99A7
statusBar.background#EBEBEB
statusBar.border#C5CCCE
statusBar.debuggingBackground#5900DF44
statusBar.debuggingForeground#455059
statusBar.foreground#455059
statusBar.noFolderBackground#C5CCCE
statusBar.noFolderBorder#5900DF
statusBar.noFolderForeground#455059
statusBarItem.activeBackground#FFFFFF
statusBarItem.errorBackground#DF3C3C
statusBarItem.hoverBackground#8B99A725
statusBarItem.prominentBackground#C5CCCE
statusBarItem.prominentHoverBackground#FFFFFF
tab.activeBackground#F4F4F4
tab.activeBorder#F4F4F4
tab.activeBorderTop#101113
tab.activeForeground#101113
tab.border#C5CCCE
tab.hoverBackground#F4F4F4cc
tab.hoverBorder#00000000
tab.inactiveBackground#EBEBEB
tab.inactiveForeground#8B99A7BB
tab.lastPinnedBorder#C5CCCE
tab.unfocusedActiveForeground#455059
tab.unfocusedHoverBackground#5900DF10
tab.unfocusedHoverBorder#00000000
tab.unfocusedInactiveForeground#455059
terminal.ansiBlack#63828A
terminal.ansiBlue#0F7CD7
terminal.ansiBrightBlack#303742
terminal.ansiBrightBlue#09A1ED
terminal.ansiBrightCyan#009793
terminal.ansiBrightGreen#30B95E
terminal.ansiBrightMagenta#BF45F3
terminal.ansiBrightRed#FF3A70
terminal.ansiBrightWhite#958FB7
terminal.ansiBrightYellow#ab5200
terminal.ansiCyan#007874
terminal.ansiGreen#1EA330
terminal.ansiMagenta#B016EE
terminal.ansiRed#FF0046
terminal.ansiWhite#a19cbc
terminal.ansiYellow#C06736
terminal.background#EBEBEB
terminal.dropBackground#5900DF1A
terminal.findMatchBackground#5900DF5A
terminal.findMatchBorder#5900DF8A
terminal.findMatchHighlightBackground#CCD00C3A
terminal.findMatchHighlightBorder#00000000
terminal.foreground#767FA7
terminal.selectionBackground#C387035A
terminal.selectionForeground#0c0935
terminal.tab.activeBorder#5900DF
terminalCommandDecoration.defaultBackground#636D83
terminalCommandDecoration.errorBackground#FF3A70
terminalCommandDecoration.successBackground#30B95E
terminalCursor.background#000000
terminalCursor.foreground#999F9F
terminalOverviewRuler.cursorForeground#FF3A70
terminalOverviewRuler.findMatchForeground#9CA320
textBlockQuote.background#5900DF34
textBlockQuote.border#5900DFb9
textCodeBlock.background#5900DF34
textLink.activeForeground#5900DF
textLink.foreground#5900DF
textPreformat.foreground#C38703
textSeparator.foreground#7A7A7A
titleBar.activeBackground#EBEBEB
titleBar.activeForeground#101113
titleBar.border#C5CCCE
titleBar.inactiveBackground#C5CCCE
titleBar.inactiveForeground#8B99A7
toolbar.hoverBackground#8B99A720
tree.indentGuidesStroke#8B99A770
walkThrough.embeddedEditorBackground#F4F4F4
widget.shadow#C5CCCE30

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, keyword.control.shell, storage.type.shell, meta.function.shell, 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	#D04094	—
entity.name.type.primitive.rust, entity.name.type.numeric.rust, keyword.type.cs, support.type.primitive.js, support.type.primitive.ts	#D04094	—
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	#5E5E5E
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, support.function.shell, entity.name.function.js, entity.name.function.ts, support.function.misc.css, support.function.misc.scss	#0060A4	—
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	#0060A4	—
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	#0B8C36	—
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.shell, constant.language.powershell punctuation.definition.variable.powershell, constant.language.shell, constant.language.shell punctuation.definition.variable.shell, 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	#008785	—
entity.name.type.trait.rust, entity.name.type.interface.ts	#B245DE	—
entity.name.type.type-parameter.cs	#0B8C36	—
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	#565869
variable.parameter, keyword.other.self.rust, meta.parens.block.c, variable.css, entity.name.variable.parameter.cs, variable.parameter.js, variable.parameter.ts	#617AA5	—
entity.name.variable.field.cs, variable.other.object.property.cs, variable.other.member.powershell, variable.other.member.shell, variable.other.property.js, variable.object.property.ts, variable.other.property.ts	#804D72	—
constant.other.caps.rust, constant.language.null.cs, support.constant.variable.powershell, support.constant.variable.shell, support.constant.variable.powershell punctuation.definition.variable.powershell, support.constant.variable.shell punctuation.definition.variable.shell, variable.other.constant.js, variable.other.constant.ts, constant.language.json, constant.other.boolean.toml	#008785
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.double.shell, string.quoted.single.powershell, string.quoted.single.shell, punctuation.definition.string.begin.powershell, punctuation.definition.string.begin.shell, punctuation.definition.string.end.powershell, string.quoted.double.shell, string.quoted.single.shell, punctuation.definition.string.begin.shell, punctuation.definition.string.end.shell, 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	#9B7200
constant.character.escape, constant.character.escape.rust, constant.character.escape.cs, constant.character.escape.powershell, constant.character.escape.shell, constant.character.escape.js, constant.character.escape.ts, punctuation.definition.constant.xml, constant.character.entity.xml, constant.character.escape.yaml, constant.character.escape.toml	#DF3C37	—
punctuation.definition.char.rust, string.quoted.single.char.rust, punctuation.definition.char.begin.cs, punctuation.definition.char.end.cs, string.quoted.single.cs	#DF3C37	—
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.integer.shell, constant.numeric.hex.shell, constant.numeric.octal.shell, 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	#DF3C37	—
comment, punctuation.definition.comment, comment.block.cs, comment.line.double-slash.cs, comment.line.powershell, comment.line.shell, 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	#A6B0BA	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, support.function.attribute.shell, variable.parameter.attribute.shell	#DF3C37	—
invalid, invalid.illegal	#EE0166	—
url, link, uri	—	underline
keyword.operator.misc.question-mark.rust, keyword.operator.question.rust	#D04094	—
punctuation.definition.lifetime.rust, entity.name.type.lifetime.rust, storage.modifier.lifetime.rust	#B245DE	—
meta.interpolation.rust, punctuation.definition.interpolation.rust	#B245DE	—
variable.other.metavariable.specifier.rust	#8CBA10	—
entity.name.tag.cs, comment.block.documentation.cs punctuation.definition.tag.cs, comment.block.documentation.cs punctuation.separator.equals.cs	#747889	—
entity.other.attribute-name.cs	#DF3C37	—
comment.block.documentation.cs	#565869	—
punctuation.definition.interpolation.begin.cs, punctuation.definition.interpolation.end.cs	#B245DE	—
variable.other.readwrite.powershell, variable.other.readwrite.shell, punctuation.definition.variable.powershell, storage.modifier.scope.powershell, variable.other.readwrite.shell, punctuation.definition.variable.shell, storage.modifier.scope.shell, variable.other.assignment.shell, punctuation.definition.variable.shell	#0B8C36	—
storage.modifier.scope.powershell, storage.modifier.scope.shell, support.variable.drive.powershell, storage.modifier.scope.shell, support.variable.drive.shell, punctuation.definition.variable.shell	#0B8C36	underline
support.variable.automatic.powershell, support.variable.automatic.shell, support.variable.automatic.powershell punctuation.definition.variable.powershell, support.variable.automatic.shell punctuation.definition.variable.shell, variable.other.normal.shell	#B245DE	—
keyword.operator.comparison.powershell, keyword.operator.comparison.powershell, keyword.operator.logical.shell, keyword.operator.logical.shell	#D04094	—
keyword.operator.documentation.powershell, keyword.operator.documentation.shell, punctuation.definition.variable.shell	#565869	—
punctuation.section.embedded.substatement.begin.powershell, punctuation.section.embedded.substatement.end.powershell, punctuation.section.embedded.substatement.begin.shell, punctuation.section.embedded.substatement.end.shell	#B245DE	—
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js	#B245DE	—
punctuation.definition.group.regexp, punctuation.definition.group.no-capture.regexp	#565869	—
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	#B245DE	—
punctuation.section.embedded.begin.js, punctuation.section.embedded.end.js	#DF3C37	bold
entity.other.attribute-name.js	#B245DE	italic
punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts	#B245DE	—
entity.name.tag.html	#D04094	—
entity.other.attribute-name.html, entity.other.attribute-name.css	#008785	italic
meta.attribute.id.html string.quoted.double.html, entity.other.attribute-name.id.css	#DF3C37	bold
meta.attribute.class.html string.quoted.double.html, entity.other.attribute-name.class.css	#0B8C36
meta.attribute, meta.attribute-selector.css string.quoted.double.css	#9B7200	—
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	#B245DE	—
meta.embedded.line.css	#8CBA10	—
entity.name.tag.css	#D04094	—
support.type.property-name.css, meta.property-name.css, meta.property-name.scss, support.type.property-name.media.css	#804D72
support.constant.property-value.css	#008785	—
support.constant.font-name.css	#9B7200	—
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#8CBA10	—
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	#DF3C37	—
keyword.operator.logical.and.media.css, keyword.operator.logical.not.media.css, keyword.operator.logical.only.media.css	#D04094	—
support.constant.media.css	#B245DE	—
punctuation.definition.keyword.scss, keyword.control.at-rule.include.scss, entity.name.tag.reference.scss, entity.name.tag.wildcard.scss	#D04094
entity.name.tag.xml, entity.name.tag.localname.xml	#D04094	—
entity.other.attribute-name.xml, entity.other.attribute-name.localname.xml	#008785	italic
entity.name.tag.namespace.xml	#8CBA10	—
entity.other.attribute-name.namespace.xml	#8CBA10	italic
entity.other.attribute-name.xml punctuation.separator.namespace.xml	—	italic
variable.language.documentroot.xml	#B245DE	—
text.html.markdown, punctuation.definition.list_item.markdown	#565869	—
punctuation.definition.raw.markdown, markup.inline.raw.string.markdown	#565869
markup.fenced_code.block.markdown	#565869	—
fenced_code.block.language.markdown, markup.fenced_code.block.markdown punctuation.definition.markdown	#565869
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown	#D04094	—
punctuation.definition.bold.markdown, markup.bold, markup.bold string	#DF3C37	bold
punctuation.definition.italic.markdown, markup.italic	#0060A4	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	#0060A4	italic bold
punctuation.definition.quote.begin.markdown, markup.quote.markdown	#9B7200	italic
markup.strikethrough.markdown, punctuation.definition.strikethrough.markdown	#747889	strikethrough
meta.separator.markdown	#565869	bold
punctuation.definition.list.begin.markdown	#008785	—
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	#0B8C36	—
markup.underline.link, constant.other.reference.link.markdown	#B245DE	underline
punctuation.definition.math.begin.markdown	#8CBA10	—
constant.character.math.tex, constant.character.math.tex punctuation.definition.math.tex	#008785	—
support.type.property-name.json	#D04094	—
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	#D04094	—
constant.other.timestamp.yaml	#0B8C36	—
constant.language.null.yaml	#D04094	—
storage.type.tag-handle.yaml	#D04094	—
entity.name.type.anchor.yaml, punctuation.definition.anchor.yaml, variable.other.alias.yaml, keyword.control.flow.alias.yaml punctuation.definition.alias.yaml	#8CBA10	—
keyword.key.toml, support.type.property-name.toml	#D04094	—
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	#0B8C36	—
entity.other.attribute-name.table.toml, support.type.property-name.table.toml	#8CBA10	—
entity.other.attribute-name.table.array.toml, support.type.property-name.array.toml	#B245DE	—
keyword.other.definition.ini	#D04094	—
entity.name.section.group-title.ini	#8CBA10	—
entity.name.class.bnf	#0B8C36	—
support.variable.bnf	#008785	—
entity.name.tag.njk	#6F7A8D	—
support.variable.njk	#6F7A8D	—
keyword.operator.njk, punctuation.output.njk, punctuation.tag.njk	#966F76	—
keyword.separator.pipe.njk, support.function.filter.njk, punctuation.tag.njk	#AB51CF	—

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