Delirium UI

Name: Delirium UI
Author: Delirium UI

Publisher: Delirium UIThemes in package: 17

Color themes for VSCode and derivative versions of VSCode, inspired by Beautiful UI.

Open in VS Code GitHub

Color themes

VS Code preview

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

Delirium UI — Delirium Everforest 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.activeBackground#4d8d8526
activityBar.activeBorder#4d8d85
activityBar.background#f6f6f6
activityBar.border#ebebeb
activityBar.dropBorder#51515133
activityBar.foreground#4d8d85
activityBar.inactiveForeground#bbc1be
activityBarBadge.background#4d8d85
activityBarBadge.foreground#f6f6f6
activityBarTop.activeBorder#4d8d85
activityBarTop.dropBorder#51515133
activityBarTop.foreground#4d8d85
activityBarTop.inactiveForeground#c7c7c7
badge.background#4d8d85
badge.foreground#f6f6f6
breadcrumb.background#FFFFFF
breadcrumb.foreground#515151cc
breadcrumbPicker.background#ffffff
button.background#4d8d85cc
button.border#00000026
button.foreground#000000cc
button.hoverBackground#4d8d8599
button.secondaryBackground#ededed
button.secondaryForeground#515151
button.secondaryHoverBackground#e6e6e6
button.separator#0000004d
charts.blue#6a8149
charts.foreground#515151
charts.green#538d61
charts.lines#515151
charts.orange#a79672
charts.purple#b49557
charts.red#ac6587
charts.yellow#b95456
checkbox.foreground#515151
commandCenter.activeBackground#ffffff61
commandCenter.activeForeground#0000008f
commandCenter.background#FFFFFF
commandCenter.border#ebebeb
commandCenter.foreground#515151
contrastActiveBorder#00000000
contrastBorder#00000000
debugConsole.errorForeground#e67e80
debugConsole.infoForeground#a7c080
debugConsole.warningForeground#dbbc7f
debugExceptionWidget.background#ffffff
debugExceptionWidget.border#ebebeb
debugIcon.breakpointCurrentStackframeForeground#e67e80
debugIcon.breakpointDisabledForeground#e67e8080
debugIcon.breakpointForeground#e67e80
debugIcon.continueForeground#a7c080
debugIcon.disconnectForeground#e67e80
debugIcon.pauseForeground#e67e80
debugIcon.restartForeground#83c092
debugIcon.startForeground#83c092
debugIcon.stepBackForeground#a7c080
debugIcon.stepIntoForeground#a7c080
debugIcon.stepOutForeground#a7c080
debugIcon.stepOverForeground#a7c080
debugIcon.stopForeground#e67e80
debugToolBar.background#edf3f2
descriptionForeground#515151cc
diffEditor.border#ebebeb
diffEditor.diagonalFill#ffffff
diffEditor.insertedLineBackground#75ce8b1a
diffEditor.insertedTextBackground#75ce8b1a
diffEditor.insertedTextBorder#00000000
diffEditor.move.border#b954564d
diffEditor.moveActive.border#b95456b3
diffEditor.removedLineBackground#f272751a
diffEditor.removedTextBackground#f272751a
diffEditor.removedTextBorder#00000000
diffEditor.unchangedCodeBackground#f3f3f3
diffEditor.unchangedRegionBackground#f3f3f3
diffEditor.unchangedRegionShadow#00000012
diffEditorGutter.insertedLineBackground#00000000
diffEditorGutter.removedLineBackground#00000000
diffEditorOverview.insertedForeground#83c09226
diffEditorOverview.removedForeground#e67e8030
disabledForeground#5151514d
dropdown.background#fafafa
dropdown.border#e6e6e6
dropdown.foreground#515151
dropdown.listBackground#fafafa
editor.background#FFFFFF
editor.findMatchBackground#4d8d8530
editor.findMatchBorder#4d8d8561
editor.findMatchHighlightBackground#4d8d853d
editor.findMatchHighlightBorder#4d8d855c
editor.foldBackground#0000000d
editor.foldPlaceholderForeground#515151
editor.foreground#515151
editor.hoverHighlightBackground#4d8d854d
editor.inactiveSelectionBackground#4d8d854d
editor.lineHighlightBackground#4d8d850f
editor.lineHighlightBorder#4d8d8508
editor.linkedEditingBackground#6e953533
editor.rangeHighlightBackground#4d8d853d
editor.selectionBackground#4d8d854d
editor.selectionForeground#515151
editor.selectionHighlightBackground#4d8d8514
editor.selectionHighlightBorder#4d8d854d
editor.wordHighlightBackground#4d8d851f
editor.wordHighlightBorder#4d8d853d
editor.wordHighlightStrongBackground#4d8d853d
editorBracketHighlight.foreground1#b95456
editorBracketHighlight.foreground2#b49557
editorBracketHighlight.foreground3#6a8149
editorBracketHighlight.foreground4#5a9f6b
editorBracketHighlight.foreground5#DB704B
editorBracketHighlight.foreground6#444b61
editorBracketHighlight.unexpectedBracket.foreground#e67e80
editorBracketMatch.background#4d8d854d
editorBracketMatch.border#4d8d8573
editorCodeLens.foreground#00000080
editorCursor.background#e7f2f1
editorCursor.foreground#4d8d85
editorError.border#00000000
editorError.foreground#e67e80
editorGhostText.border#00000000
editorGhostText.foreground#51515170
editorGroup.border#ebebeb
editorGroup.dropBackground#4d8d8514
editorGroupHeader.border#00000000
editorGroupHeader.noTabsBackground#FFFFFF
editorGroupHeader.tabsBackground#f6f6f6
editorGroupHeader.tabsBorder#ebebeb
editorGutter.addedBackground#83c092cc
editorGutter.background#FFFFFF
editorGutter.commentRangeForeground#ffffff
editorGutter.deletedBackground#e67e80cc
editorGutter.modifiedBackground#a7c080cc
editorHoverWidget.background#ffffff
editorHoverWidget.border#ebebeb
editorIndentGuide.activeBackground1#51515133
editorIndentGuide.background1#5151510d
editorInfo.border#00000000
editorInlayHint.background#0000001a
editorInlayHint.foreground#000000b3
editorInlayHint.parameterBackground#0000001a
editorInlayHint.parameterForeground#515151b3
editorInlayHint.typeBackground#5151511a
editorInlayHint.typeForeground#515151b3
editorLineNumber.activeForeground#515151
editorLineNumber.foreground#ced3d0
editorLink.activeForeground#515151
editorMarkerNavigation.background#f6f6f6
editorMarkerNavigationError.background#e67e808f
editorMarkerNavigationInfo.background#a7c0808f
editorMarkerNavigationWarning.background#dbbc7f8f
editorOverviewRuler.addedForeground#83c09280
editorOverviewRuler.border#ebebeb
editorOverviewRuler.deletedForeground#e67e8080
editorOverviewRuler.errorForeground#e67e80
editorOverviewRuler.incomingContentForeground#83c09280
editorOverviewRuler.infoForeground#a7c08080
editorOverviewRuler.modifiedForeground#a7c08080
editorOverviewRuler.selectionHighlightForeground#4d8d8580
editorOverviewRuler.warningForeground#dbbc7f
editorRuler.foreground#5151510d
editorStickyScroll.shadow#00000012
editorStickyScrollHover.background#ffffff
editorSuggestWidget.background#ffffff
editorSuggestWidget.border#ebebeb
editorSuggestWidget.foreground#515151
editorSuggestWidget.highlightForeground#4d8d85
editorSuggestWidget.selectedBackground#f2f2f2
editorSuggestWidget.selectedIconForeground#515151
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#000000aa
editorWarning.border#00000000
editorWarning.foreground#dbbc7f
editorWhitespace.foreground#51515160
editorWidget.background#ffffff
editorWidget.border#e6e6e6
editorWidget.resizeBorder#4d8d8550
errorForeground#e67e80
errorLens.errorForeground#e67e80fc
errorLens.hintForeground#a7c080fc
errorLens.infoForeground#a7c080fc
errorLens.warningForeground#dbbc7ffc
extensionButton.background#4d8d8580
extensionButton.foreground#000000
extensionButton.hoverBackground#4d8d8599
extensionButton.prominentBackground#4d8d859d
extensionButton.prominentHoverBackground#4d8d85
focusBorder#cccccc
foreground#000000
gitDecoration.conflictingResourceForeground#4d8d85
gitDecoration.deletedResourceForeground#e67e80
gitDecoration.ignoredResourceForeground#5151514d
gitDecoration.modifiedResourceForeground#a7c080
gitDecoration.untrackedResourceForeground#83c092
icon.foreground#0000004d
inlineChat.background#ffffff
inlineChat.border#e6e6e6
inlineChatInput.background#ffffff
inlineChatInput.border#e6e6e6
inlineChatInput.focusBorder#cccccc
inlineEdit.gutterIndicator.background#00000080
inlineEdit.gutterIndicator.primaryBackground#d79c9eb3
inlineEdit.gutterIndicator.primaryBorder#d79c9e00
inlineEdit.gutterIndicator.primaryForeground#000000
inlineEdit.gutterIndicator.secondaryBackground#84bcb5b3
inlineEdit.gutterIndicator.secondaryBorder#84bcb500
inlineEdit.gutterIndicator.secondaryForeground#000000
inlineEdit.gutterIndicator.successfulBackground#c7e2cdb3
inlineEdit.gutterIndicator.successfulBorder#c7e2cd00
inlineEdit.gutterIndicator.successfulForeground#000000
inlineEdit.modifiedBackground#83c09226
inlineEdit.modifiedBorder#83c092cc
inlineEdit.modifiedChangedLineBackground#83c09214
inlineEdit.modifiedChangedTextBackground#00000000
inlineEdit.originalBackground#ac658726
inlineEdit.originalBorder#ac6587cc
inlineEdit.originalChangedLineBackground#ac6587cc
inlineEdit.originalChangedTextBackground#00000000
inlineEdit.tabWillAcceptModifiedBorder#83c092
inlineEdit.tabWillAcceptOriginalBorder#ac6587
input.background#fafafa
input.border#e6e6e6
input.foreground#515151
input.placeholderForeground#b3b3b3
inputOption.activeBackground#b3b3b3
inputOption.activeBorder#00000000
inputOption.activeForeground#515151
inputOption.hoverBackground#e6e6e6
inputValidation.errorBackground#ffffff
inputValidation.errorBorder#e67e80
inputValidation.infoBackground#ffffff
inputValidation.infoBorder#a7c080
inputValidation.warningBackground#ffffff
inputValidation.warningBorder#dbbc7f
keybindingLabel.background#ffffff
keybindingLabel.border#515151
keybindingLabel.bottomBorder#515151
keybindingLabel.foreground#000000
list.activeSelectionBackground#4d8d851a
list.activeSelectionForeground#515151
list.dropBackground#4d8d8515
list.errorForeground#e67e80
list.focusAndSelectionOutline#4d8d85e6
list.focusBackground#4d8d8540
list.focusForeground#000000
list.focusOutline#4d8d85e6
list.highlightForeground#4d8d85
list.hoverBackground#5151511a
list.hoverForeground#000000
list.inactiveSelectionBackground#3b6c660d
list.inactiveSelectionForeground#515151
list.warningForeground#dbbc7f
menu.background#ffffff
menu.border#ebebeb
menu.foreground#515151
menu.selectionBackground#f6f6f6
menu.selectionForeground#1e1e1e
menu.separatorBackground#ebebeb80
menubar.selectionBackground#ededed
menubar.selectionForeground#515151
merge.border#ebebeb
merge.commonContentBackground#b9545630
merge.commonHeaderBackground#b9545680
merge.currentContentBackground#83c09230
merge.currentHeaderBackground#83c09280
merge.incomingContentBackground#a7c08030
merge.incomingHeaderBackground#a7c08080
minimap.background#FFFFFF
minimap.errorHighlight#e67e80
minimap.findMatchHighlight#4d8d85
minimap.selectionHighlight#4d8d85
minimap.selectionOccurrenceHighlight#4d8d85
minimap.warningHighlight#dbbc7f
minimapGutter.addedBackground#83c092
minimapGutter.deletedBackground#e67e80
minimapGutter.modifiedBackground#a7c080
multiDiffEditor.border#ebebeb
multiDiffEditor.headerBackground#f2f2f2
notificationCenterHeader.background#ffffff
notificationCenterHeader.foreground#515151
notificationLink.foreground#4d8d85
notifications.background#ffffff
notifications.border#ebebeb
notifications.foreground#000000
notificationsErrorIcon.foreground#ac6587
notificationsInfoIcon.foreground#6a8149
notificationsWarningIcon.foreground#a79672
panel.background#fafafa
panel.border#ebebeb
panel.dropBorder#51515180
panelInput.border#e6e6e6
panelSection.border#ebebeb
panelSectionHeader.background#ededed
panelSectionHeader.border#ebebeb
panelSectionHeader.foreground#515151
panelTitle.activeBorder#4d8d85
panelTitle.activeForeground#515151
panelTitle.inactiveForeground#808080
peekView.border#ebebeb
peekViewEditor.background#ffffff
peekViewEditor.matchHighlightBackground#ffffff40
peekViewEditor.matchHighlightBorder#00000000
peekViewEditorGutter.background#ffffff
peekViewEditorStickyScroll.background#ffffff
peekViewResult.background#ffffff
peekViewResult.fileForeground#515151
peekViewResult.lineForeground#000000
peekViewResult.matchHighlightBackground#4d8d8580
peekViewResult.selectionBackground#4d8d8533
peekViewResult.selectionForeground#515151
peekViewTitle.background#ffffff
peekViewTitleDescription.foreground#515151
peekViewTitleLabel.foreground#515151
pickerGroup.border#ebebeb
pickerGroup.foreground#515151
profileBadge.background#4d8d85
profileBadge.foreground#FFFFFF
progressBar.background#4d8d85
quickInput.background#ffffff
quickInput.foreground#000000
quickInputList.focusBackground#4d8d851a
quickInputList.focusForeground#000000
quickInputList.focusIconForeground#515151
quickInputTitle.background#f6f6f6
sash.hoverBorder#4d8d8550
scmGraph.foreground1#6a8149
scmGraph.foreground2#b49557
scmGraph.foreground3#4d8d85
scmGraph.foreground4#DB704B
scmGraph.foreground5#444b61
scmGraph.historyItemBaseRefColor#5a9f6b
scmGraph.historyItemHoverAdditionsForeground#83c092
scmGraph.historyItemHoverDefaultLabelBackground#000000
scmGraph.historyItemHoverDefaultLabelForeground#000000
scmGraph.historyItemHoverDeletionsForeground#e67e80
scmGraph.historyItemHoverLabelForeground#000000
scmGraph.historyItemRefColor#b95456
scmGraph.historyItemRemoteRefColor#6a8149
scrollbar.shadow#00000012
scrollbarSlider.activeBackground#5151514d
scrollbarSlider.background#51515126
scrollbarSlider.hoverBackground#51515133
selection.background#4d8d8561
settings.headerForeground#515151
settings.modifiedItemIndicator#4d8d85
settings.settingsHeaderHoverForeground#515151
sideBar.background#f6f6f6
sideBar.border#ebebeb
sideBar.foreground#515151cc
sideBarSectionHeader.background#f6f6f6
sideBarSectionHeader.border#ebebeb
sideBarSectionHeader.foreground#515151
sideBarStickyScroll.background#f1f1f1
sideBarStickyScroll.shadow#00000012
sideBarTitle.foreground#515151
statusBar.background#FFFFFF
statusBar.border#ebebeb
statusBar.debuggingBackground#dbe8e5
statusBar.debuggingForeground#424f4d
statusBar.foreground#00000080
statusBar.noFolderBackground#f6f6f6
statusBar.noFolderBorder#ebebeb
statusBar.noFolderForeground#000000cc
statusBarItem.activeBackground#ffffff
statusBarItem.compactHoverBackground#4d8d85cc
statusBarItem.errorBackground#e67e80
statusBarItem.errorForeground#ffffff
statusBarItem.errorHoverBackground#eea9aa
statusBarItem.errorHoverForeground#ffffff
statusBarItem.hoverBackground#c9dcd9
statusBarItem.hoverForeground#515151
statusBarItem.offlineBackground#b49557
statusBarItem.offlineForeground#ffffff
statusBarItem.offlineHoverBackground#c4ab7a
statusBarItem.offlineHoverForeground#ffffff
statusBarItem.prominentBackground#FFFFFF
statusBarItem.prominentForeground#ffffff
statusBarItem.prominentHoverBackground#ffffff
statusBarItem.prominentHoverForeground#ffffff
statusBarItem.remoteBackground#DB704B
statusBarItem.remoteForeground#ffffff
statusBarItem.remoteHoverBackground#e49276
statusBarItem.remoteHoverForeground#ffffff
statusBarItem.warningBackground#dbbc7f
statusBarItem.warningForeground#ffffff
statusBarItem.warningHoverBackground#e6d1a7
statusBarItem.warningHoverForeground#ffffff
tab.activeBackground#FFFFFF
tab.activeBorder#FFFFFF
tab.activeBorderTop#4d8d85
tab.activeForeground#515151
tab.border#ebebeb
tab.hoverBackground#f0f0f0
tab.hoverForeground#515151
tab.inactiveBackground#f6f6f6
tab.inactiveForeground#818181
tab.lastPinnedBorder#ebebeb
terminal.ansiBlack#FFFFFF
terminal.ansiBlue#a7c080
terminal.ansiBrightBlack#c7c7c7
terminal.ansiBrightBlue#addd64
terminal.ansiBrightCyan#fb602b
terminal.ansiBrightGreen#67dc84
terminal.ansiBrightMagenta#d8a133
terminal.ansiBrightRed#fd676a
terminal.ansiBrightWhite#848484
terminal.ansiBrightYellow#dd3033
terminal.ansiCyan#DB704B
terminal.ansiGreen#83c092
terminal.ansiMagenta#b49557
terminal.ansiRed#e67e80
terminal.ansiWhite#515151
terminal.ansiYellow#b95456
terminal.background#fafafa
terminal.foreground#515151
terminal.selectionForeground#515151
terminalCursor.background#FFFFFF
terminalCursor.foreground#4d8d85
terminalStickyScrollHover.background#ffffff
textBlockQuote.background#a7c08033
textBlockQuote.border#a7c080b9
textCodeBlock.background#a7c08033
textLink.activeForeground#a7c080
textLink.foreground#4d8d85
textPreformat.background#dbe8e5
textPreformat.foreground#172a28
textSeparator.foreground#4d8d85
titleBar.activeBackground#f6f6f6
titleBar.activeForeground#51515199
titleBar.border#ebebeb
titleBar.inactiveBackground#f6f6f6
titleBar.inactiveForeground#51515199
toolbar.activeBackground#51515180
toolbar.hoverBackground#ededed
tree.indentGuidesStroke#51515133
walkThrough.embeddedEditorBackground#FFFFFF
welcomePage.progress.background#ffffff
welcomePage.progress.foreground#4d8d85
welcomePage.tileBackground#0000001a
welcomePage.tileBorder#00000033
welcomePage.tileHoverBackground#00000033
widget.border#e6e6e6
widget.shadow#0000000d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
support.module.elm, entity.other.inherited-class.python, variable.other.object, support.other.namespace.php, entity.other.attribute-name.namespace.xml, record.accessor, entity.name.record.field.accessor, storage.modifier.import.java, storage.modifier.import.groovy, meta.import.swift entity.name.type.swift, meta.member.access.python, variable.other.property.ts, variable.other.property.js, constant.language.symbol.elixir, punctuation.tag.liquid support.class.liquid, meta.scriptblock.powershell meta.group.simple.subexpression.powershell meta.group.simple.subexpression.powershell meta.scriptblock.powershell meta.scriptblock.powershell support.variable.automatic.powershell punctuation.definition.variable.powershell, meta.scriptblock.powershell meta.group.simple.subexpression.powershell meta.group.simple.subexpression.powershell meta.scriptblock.powershell meta.scriptblock.powershell support.variable.automatic.powershell, source.cpp meta.block.class.cpp meta.body.class.cpp, source.cpp meta.block.class.cpp meta.body.class.cpp meta.function.definition.special.constructor.cpp meta.body.function.definition.special.constructor.cpp	#a79672	—
entity.name.type	#4d8d85	—
comment, punctuation.definition.comment, string.quoted.docstring.multi, comment.block.documentation source	#51515166	italic
meta.section.struct.go variable.other.field.go, meta.section.struct.go variable.other.declaration.go, source, support, constant.character.entity.named, meta.jsx.children, source.lua, text.html.derivative, source.graphql meta.selections variable.other.alias.graphql, source.graphql meta.type.interface.graphql meta.type.object.graphql variable.graphql, source.graphql variable.arguments.graphql, JSXNested	#515151	—
constant, support.constant.core.php	#ac6587	—
entity.name.function.decorator, meta.decorator entity.name.function, meta.decorator punctuation.decorator, punctuation.definition.decorator, meta.decorator variable.other.readwrite.ts, variable.parameter.gdscript, entity.name.variable.parameter, variable.parameter	#b49557	—
keyword.control.export, support.type.object.module, support.module, support.node, support.other.module, entity.name.type.module, entity.name.type.class.module, keyword.control.module	#b95456	—
entity.name.function, support.function, meta.definition.method, meta.function-call, meta.function, meta.method.declaration, meta.function-call support, variable.language.super.ts, source.directive, meta.function-call.generic, meta.method-call.static.php, meta.method-call.php, meta.class storage.type, meta.method.groovy, meta.bracket.square.access, entity.name.function-call.elixir, punctuation.output.liquid support.variable.liquid, meta.function.echo.edge source.js keyword.operator.error-control.js, entity.name.type.variant.gdscript, entity.name.function.powershell, string.quoted.double.json	#6a8149	—
keyword.control.import, meta.module.name.elm support, meta.import.elm support, keyword.control.at-rule, punctuation.definition.keyword, variable.control.import.include, keyword.other.import.java	#b95456	—
keyword.package.go, keyword.operator.pointer.go, keyword.control, keyword.control.conditional, storage.modifier, keyword.operator.new, keyword.operator.expression, keyword.begin.blade, keyword.end.blade, keyword.blade, keyword.type-alias, keyword.type, support.class.console, keyword.other.await, storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc, keyword.other.new, keyword.other.phpdoc, keyword.other.use.php, keyword.operator.logical.python, keyword.other.import.static.groovy, keyword.other.import.groovy, punctuation.definition.attribute.swift, source.svelte meta.scope.tag.main.svelte meta.tag.start.svelte variable.function.svelte, meta.directive.on.svelte entity.name.type.svelte, keyword.other.special-method.elixir, keyword.edge, entity.name.function.edge, support.constant.edge, keyword.other.gdscript, keyword.other.onready.gdscript, source.graphql meta.fragment.graphql keyword.on.graphql, source.graphql meta.type.interface.graphql keyword.implements.graphql, source.graphql meta.type.interface.graphql meta.type.object.graphql meta.type.list.graphql keyword.operator.nulltype.graphql, source.graphql meta.variables.graphql keyword.operator.nulltype.graphql, source.graphql meta.type.interface.graphql meta.type.object.graphql keyword.operator.nulltype.graphql, keyword.operator.class.php, keyword.operator.spread.php, keyword.operator.type.php, keyword.operator.increment-decrement.php, keyword.operator.increment-increment.php, keyword.operator.string.php, keyword.operator.ternary.php, keyword.operator.variadic.php, keyword.operator.nullable-type.php, keyword.other.use-as.php, keyword.import.go, keyword.operator.address.go, keyword.operator.null-coalescing, keyword.operator.arrow, keyword.struct.go, keyword.operator.liquid, keyword.operator.optional.ts, keyword.cmake, keyword.codetag.notation, keyword.operator.pipe.shell	#b95456	—
meta.object-literal.key, variable.object.property	#515151	—
keyword.other.definition.ini, support.type.property-name, entity.name.tag.yaml, storage.type.function.arrow.tsx	#b95456	—
keyword.operator, keyword.operator.comparison, keyword.operator.lua, keyword.operator.assignment, keyword.operator.relational, keyword.operator.increment, keyword.operator.decrement, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.math	#DB704B	—
keyword.operator.type.annotation.tsx, punctuation, attribute_value, meta.brace, punctuation.definition.parameters, punctuation.definition.template-expression, keyword.other, punctuation.separator, punctuation.definition.generic.begin, punctuation.definition.generic.end, meta.function.type-declaration, keyword.other.colon.elm, meta.record.field.elm keyword.other.elm, keyword.other.period.elm, meta.tag.xml, meta.tag.preprocessor.xml, punctuation.definition.block, punctuation.accessor, constant.name.attribute.tag.pug, string.interpolated.pug, keyword.other.whitespace.liquid, meta.tag.template.block.twig, meta.tag.template.value.twig, begin.bracket, end.bracket, text.html.twig meta.tag.inline.any, text.html.twig meta.tag.block.any, support.function.construct.begin.blade, support.function.construct.end.blade source.php, support.function.construct.end.blade, meta.function.echo.blade source.php, punctuation.definition.list.begin.python, punctuation.definition.list.end.python, text.html.vue-html meta.tag.block.any, keyword.operator.assignment.tsx, meta.definition.method.signature.java, meta.class.body.groovy, meta.definition.method.groovy meta.method.body.java meta.declaration.assertion.groovy, punctuation.definition.list.begin.erlang, meta.expression.parenthesized, meta.definition.function.swift meta.parameter-clause.swift, source.swift meta.function-call.swift, punctuation.section.embedded.end.swift source.swift, source.lua, meta.function.lua, punctuation.definition.keyword.svelte, source.svelte meta.scope.tag.SpeakerPicture.svelte meta.tag.start.svelte entity.other.attribute-name.svelte, expression.embbeded.vue punctuation.definition.tag.begin.html.vue, expression.embbeded.vue punctuation.definition.tag.end.html.vue, source.graphql meta.type.interface.graphql meta.type.object.graphql meta.type.list.graphql meta.brace.square.graphql, punctuation.output.liquid, text.html.liquid meta.tag.liquid punctuation.definition.tag.end.liquid, JSXAttrs keyword.operator.assignment.jsx, meta.tag.attributes.js keyword.operator.assignment.js	#51515166	—
entity.name.package.go, variable.language.this, variable.language.special.self, variable.parameter.function.language.special.self, variable.language.this.php punctuation.definition.variable.php, meta.class.body.php storage.type.php, variable.parameter.function.swift entity.name.function.swift, variable.other.jsdoc, support.variable.drive.powershell, entity.other.attribute.lua	#a79672	—
storage, meta.var.expr storage.type, storage.type.function, keyword.function, storage.type.class, storage.type.property, keyword.other, keyword.local.lua, entity.name.class, meta.function.lua keyword.control.lua, storage.type.enum, storage.type.type, entity.name.type.class.java, support.class.php, entity.other.inherited-class.php, entity.name.type.class.groovy, storage.type.rust, entity.name.type.class.swift, source.svelte meta.script.svelte source.ts entity.name.label.ts, meta.directive.on.svelte keyword.control.svelte, storage.type.const.gdscript, storage.type.var.gdscript, source.graphql declaration.meta.type keyword, source.graphql meta.type.interface.graphql keyword.type.graphql, source.graphql keyword.schema.graphql, source.graphql keyword.operation.graphql, source.graphql meta.enum.graphql keyword.enum.graphql, source.graphql meta.fragment.graphql keyword.fragment.graphql, storage.type.trait.php, keyword.type.go, keyword.var.go, storage.type.powershell, keyword.const.go, keyword.storage.modifier	#DB704B	—
storage.type.interface, keyword.control.export.tsx	#b95456	—
string, string.template, string.quoted.single, punctuation.quasi.element, string.other.link, constant.character.escape.regexp, variable.parameter.url, constant.other.symbol.quoted.single.erlang, constant.other.symbol.quoted.single.erlang punctuation.definition.symbol.begin.erlang, constant.other.symbol.quoted.single.erlang punctuation.definition.symbol.end.erlang, meta.import.ts punctuation.definition.variable.svelte, punctuation.definition.string.end.html source.css-ignored-vscode, text.html.edge punctuation.definition.variable.js, string.unquoted.plain.out.yaml, string.quoted.single.python punctuation.definition.string.begin.python, string.quoted.single.python punctuation.definition.string.end.python, punctuation.definition.string.end.html source.css, string.quoted.double.html source.css, punctuation.definition.subshell.single.shell, punctuation.section.parenthese.shell	#538d61	—
string.quoted.docstring.multi.python, string.quoted.double.block.python punctuation.definition.string.end.python, string.quoted.double.block.python punctuation.definition.string.begin.python, string.quoted.double.block.python, punctuation.definition.string.begin.python, punctuation.definition.string.end.python	#436460cc	—
entity.name.type.interface, storage.type, entity.other.inherited-class, keyword.type, storage.type.java, storage.type.primitive.java, storage.type.generic.java, keyword.other.type, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php source.php, punctuation.section.embedded.end.php, storage.type.object.array.java, storage.type.primitive.groovy, storage.type.groovy, meta.definition.type.body.swift meta.function-call.swift, meta.definition.type.class.swift meta.inheritance-clause.swift, variable.other.constant.elixir, source.graphql declaration.meta.type support, source.graphql meta.selections, source.graphql meta.enum.graphql meta.type.object.graphql constant.character.enum.graphql, source.graphql meta.fragment.graphql entity.name.fragment.graphql, entity.name.type.class.php, support.class.php, entity.other.inherited-class.php, entity.other.alias.php, meta.group.simple.subexpression.powershell meta.scriptblock.powershell storage.type.powershell	#5a9f6b	—
support.type	#4d8d85	—
punctuation.terminator, support.variable, meta.definition.variable, variable, variable.language, entity.name.type.class.js, entity.name.variable, support.variable.magic, meta.method.body, entity.name.variable, punctuation.definition.variable, meta.class variable.object.property, variable.other.constant entity.name.function, entity.name.variable.tuple-element.cs punctuation.separator.colon.cs, meta.definition.variable.name.groovy, meta.body.struct.cpp, parameter.variable.function.elixir, meta.directive.edge source.js, meta.function.echo.edge source.js, text.html.edge meta.function.echo.edge meta.function-call.js, source.css variable.parameter.keyframe-list.css, source.css meta.property-value.css, source.css.scss meta.at-rule.keyframes.scss entity.name.function.scss, source.css.scss meta.property-value.scss, entity.name.variable.tuple-element, meta.group.simple.subexpression.powershell support.variable.automatic.powershell, support.variable.automatic.powershell, storage.source.cmake, entity.source.cmake	#444b61	—
source.elm constant.type-constructor, support.class	#b49557	—
source.elm storage.type	#5a9f6b	—
entity.name.tag, entity.name.tag.other.html, support.class.component.tsx, support.class.component.html	#DB704B	—
source.diff meta.diff.header.to-file, source.diff markup.inserted.diff, source.diff punctuation.definition.to-file.diff, source.diff punctuation.definition.inserted.diff	#538d61	—
source.diff punctuation.definition.from-file.diff, source.diff meta.diff.header.from-file, source.diff markup.deleted.diff, source.diff punctuation.definition.deleted.diff	#ac6587	—
source.diff meta.diff.header.command	#6a8149	—
source.diff punctuation.definition.range.diff, source.diff meta.diff.range.unified	#a79672	—
support.variable.liquid, support.class.liquid	#444b61	—
text.html.basic entity.name, source.js-ignored-vscode, meta.embedded.block.blade constant.other.php, meta.embedded.block.blade keyword.operator.comparison.php, meta.embedded.block.blade keyword.operator.arithmetic.php, meta.tag.start.svelte keyword.control.svelte, meta.tag.end.svelte keyword.control.svelte	#6a8149	—
meta.tag.sgml.doctype.html, punctuation.definition.tag, meta.tag.block.any, meta.tag.block.any.html, meta.tag.inline.any, source.css-ignored-vscode, meta.tag.metadata.style.end.html, text.html.vue invalid.illegal.character-not-allowed-here.html, meta.tag.inline.i.start.html, meta.tag.structure.div.start.html, punctuation.definition.tag.end.html.vue, invalid.illegal.character-not-allowed-here.html	#6a8149b3	—
entity.other.attribute-name, entity.name.tag.liquid, invalid.deprecated.entity.other.attribute-name, meta.embedded.block.blade storage.type.php	#6a8149	—
markup.inline.raw.string.markdown, punctuation.definition.raw.markdown, markup.fenced_code.block.markdown, markup.fenced_code.block.markdown punctuation, markup.raw.block.markdown	#5a9f6b	—
fenced_code.block.language	#5a9f6b	—
punctuation.definition.list.begin	#6a8149	—
punctuation.definition.list.begin	#6a8149	—
entity.name.section, markup.heading.setext	#b95456	—
punctuation.definition.heading	#b95456	—
markup.underline.link, markup.underline.link.image	#6a8149	—
markup.bold, punctuation.definition.bold	#444b61	bold
markup.strikethrough, punctuation.definition.strikethrough	#ac6587	—
markup.italic, punctuation.definition.italic	#a79672	italic
markup.quote, markup.quote.markdown punctuation.definition.quote.begin	#b49557	—
punctuation.definition.quote.begin	#6a8149	—
meta.embedded.block.frontmatter punctuation.definition.tag.begin, meta.embedded.block.frontmatter punctuation.definition.tag.end, meta.embedded.block.frontmatter string.unquoted.plain.out	#515151	italic
entity.other.attribute-name.pseudo-class	#b49557	—
entity.other.attribute-name.pseudo-element	#b49557	—
entity.other.attribute-name.class, entity.other.attribute-name.class punctuation.definition.entity, support.type.property-name.json	#DB704B	—
entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity	#DB704B	—
support.type.property-name.css, support.type.vendored.property-name, meta.property-list entity.name.tag.css, meta.property-list.scss meta.property-list.scss entity.name.tag.css, meta.property-list meta.property-name, source.css.scss meta.property-list.scss entity.name.tag.css	#515151	—
source.css.scss entity.other.attribute-name.id , source.css entity.other.attribute-name.id , entity.other.attribute-name.id punctuation.definition.entity	#5a9f6b	—
entity.name.tag.reference, meta.property-list	#a79672	—
keyword.other.unit	#ac6587	—
support.constant.property-value, support.constant.font-name, meta.property-value.css, meta.attribute.style.html, constant.language.null, constant.language.boolean, constant.language.undefined	#b95456	—
constant.numeric	#ac6587	—
entity.name.tag.css, meta.property-list.scss entity.name.tag.css	#6a8149	—

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