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 Lilac

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.activeBackground#9587ff26
activityBar.activeBorder#9587ff
activityBar.background#201f2c
activityBar.border#2c2a3c
activityBar.dropBorder#ffffff33
activityBar.foreground#9587ff
activityBar.inactiveForeground#645c6e
activityBarBadge.background#9587ff
activityBarBadge.foreground#201f2c
activityBarTop.activeBorder#9587ff
activityBarTop.dropBorder#ffffff33
activityBarTop.foreground#9587ff
activityBarTop.inactiveForeground#5b5861
badge.background#9587ff
badge.foreground#201f2c
breadcrumb.background#252433
breadcrumb.foreground#ede7dacc
breadcrumbPicker.background#302f42
button.background#9587ffcc
button.border#ffffff26
button.foreground#ffffffcc
button.hoverBackground#9587ff99
button.secondaryBackground#343348
button.secondaryForeground#ede7dacc
button.secondaryHoverBackground#3b3951
button.separator#ffffff4d
charts.blue#a7c080
charts.foreground#ede7da
charts.green#83c092
charts.lines#ede7da
charts.orange#e1d7c3
charts.purple#dbbc7f
charts.red#d699b6
charts.yellow#e67e80
checkbox.foreground#ede7da
commandCenter.activeBackground#302f4261
commandCenter.activeForeground#ede7da8f
commandCenter.background#252433
commandCenter.border#2c2a3c
commandCenter.foreground#ffffff
contrastActiveBorder#00000000
contrastBorder#00000000
debugConsole.errorForeground#e67e80
debugConsole.infoForeground#a7c080
debugConsole.warningForeground#dbbc7f
debugExceptionWidget.background#302f42
debugExceptionWidget.border#2c2a3c
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#2f2d45
descriptionForeground#ede7da80
diffEditor.border#2c2a3c
diffEditor.diagonalFill#302f42
diffEditor.insertedLineBackground#75ce8b1a
diffEditor.insertedTextBackground#75ce8b1a
diffEditor.insertedTextBorder#00000000
diffEditor.move.border#e67e804d
diffEditor.moveActive.border#e67e80b3
diffEditor.removedLineBackground#f272751a
diffEditor.removedTextBackground#f272751a
diffEditor.removedTextBorder#00000000
diffEditor.unchangedCodeBackground#1e1d29
diffEditor.unchangedRegionBackground#1e1d29
diffEditor.unchangedRegionShadow#00000066
diffEditorGutter.insertedLineBackground#00000000
diffEditorGutter.removedLineBackground#00000000
diffEditorOverview.insertedForeground#83c09226
diffEditorOverview.removedForeground#e67e8030
disabledForeground#ede7da4d
dropdown.background#2a293a
dropdown.border#49485c
dropdown.foreground#ede7da
dropdown.listBackground#2a293a
editor.background#252433
editor.findMatchBackground#9587ff30
editor.findMatchBorder#9587ff61
editor.findMatchHighlightBackground#9587ff3d
editor.findMatchHighlightBorder#9587ff5c
editor.foldBackground#00000033
editor.foldPlaceholderForeground#ffffff
editor.foreground#ede7da
editor.hoverHighlightBackground#9587ff4d
editor.inactiveSelectionBackground#9587ff4d
editor.lineHighlightBackground#9587ff0f
editor.lineHighlightBorder#9587ff08
editor.linkedEditingBackground#abd36d33
editor.rangeHighlightBackground#9587ff3d
editor.selectionBackground#9587ff4d
editor.selectionForeground#ede7da
editor.selectionHighlightBackground#9587ff14
editor.selectionHighlightBorder#9587ff4d
editor.wordHighlightBackground#9587ff73
editor.wordHighlightBorder#9587ff8a
editor.wordHighlightStrongBackground#9587ff4d
editorBracketHighlight.foreground1#e67e80
editorBracketHighlight.foreground2#dbbc7f
editorBracketHighlight.foreground3#a7c080
editorBracketHighlight.foreground4#83c092
editorBracketHighlight.foreground5#e69875
editorBracketHighlight.foreground6#e1d7c3
editorBracketHighlight.unexpectedBracket.foreground#e67e80
editorBracketMatch.background#9587ff4d
editorBracketMatch.border#9587ff73
editorCodeLens.foreground#ede7da80
editorCursor.background#100087
editorCursor.foreground#9587ff
editorError.border#00000000
editorError.foreground#e67e80
editorGhostText.border#00000000
editorGhostText.foreground#ede7da70
editorGroup.border#2c2a3c
editorGroup.dropBackground#9587ff14
editorGroupHeader.border#00000000
editorGroupHeader.noTabsBackground#252433
editorGroupHeader.tabsBackground#201f2c
editorGroupHeader.tabsBorder#2c2a3c
editorGutter.addedBackground#83c092cc
editorGutter.background#252433
editorGutter.commentRangeForeground#302f42
editorGutter.deletedBackground#e67e80cc
editorGutter.modifiedBackground#a7c080cc
editorHoverWidget.background#302f42
editorHoverWidget.border#2c2a3c
editorIndentGuide.activeBackground1#e1d7c333
editorIndentGuide.background1#e1d7c30d
editorInfo.border#00000000
editorInlayHint.background#ede7da1a
editorInlayHint.foreground#ede7dab3
editorInlayHint.parameterBackground#ede7da1a
editorInlayHint.parameterForeground#ede7dab3
editorInlayHint.typeBackground#ede7da1a
editorInlayHint.typeForeground#ede7dab3
editorLineNumber.activeForeground#e1d7c3
editorLineNumber.foreground#4f4858
editorLink.activeForeground#ede7da
editorMarkerNavigation.background#201f2c
editorMarkerNavigationError.background#e67e808f
editorMarkerNavigationInfo.background#a7c0808f
editorMarkerNavigationWarning.background#dbbc7f8f
editorOverviewRuler.addedForeground#83c09280
editorOverviewRuler.border#2c2a3c
editorOverviewRuler.deletedForeground#e67e8080
editorOverviewRuler.errorForeground#e67e80
editorOverviewRuler.incomingContentForeground#83c09280
editorOverviewRuler.infoForeground#a7c08080
editorOverviewRuler.modifiedForeground#a7c08080
editorOverviewRuler.selectionHighlightForeground#9587ff80
editorOverviewRuler.warningForeground#dbbc7f
editorRuler.foreground#e1d7c30d
editorStickyScroll.shadow#00000066
editorStickyScrollHover.background#2c2a3c
editorSuggestWidget.background#292839
editorSuggestWidget.border#2c2a3c
editorSuggestWidget.foreground#ede7da
editorSuggestWidget.highlightForeground#9587ff
editorSuggestWidget.selectedBackground#3b3951
editorSuggestWidget.selectedIconForeground#ede7da
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#000000aa
editorWarning.border#00000000
editorWarning.foreground#dbbc7f
editorWhitespace.foreground#ffffff60
editorWidget.background#302f42
editorWidget.border#3b3951
editorWidget.resizeBorder#9587ff50
errorForeground#e67e80
errorLens.errorForeground#e67e80fc
errorLens.hintForeground#a7c080fc
errorLens.infoForeground#a7c080fc
errorLens.warningForeground#dbbc7ffc
extensionButton.background#9587ff80
extensionButton.foreground#f8f7ff
extensionButton.hoverBackground#9587ff99
extensionButton.prominentBackground#9587ff9d
extensionButton.prominentHoverBackground#9587ff
focusBorder#504e6f
foreground#ede7da
gitDecoration.conflictingResourceForeground#9587ff
gitDecoration.deletedResourceForeground#e67e80
gitDecoration.ignoredResourceForeground#ffffff4d
gitDecoration.modifiedResourceForeground#a7c080
gitDecoration.untrackedResourceForeground#83c092
icon.foreground#ede7da4d
inlineChat.background#302f42
inlineChat.border#3b3951
inlineChatInput.background#292839
inlineChatInput.border#3b3951
inlineChatInput.focusBorder#504e6f
inlineEdit.gutterIndicator.background#ede7da80
inlineEdit.gutterIndicator.primaryBackground#d5292db3
inlineEdit.gutterIndicator.primaryBorder#d5292d
inlineEdit.gutterIndicator.primaryForeground#201a0f
inlineEdit.gutterIndicator.secondaryBackground#3b21ffb3
inlineEdit.gutterIndicator.secondaryBorder#3b21ff
inlineEdit.gutterIndicator.secondaryForeground#000000
inlineEdit.gutterIndicator.successfulBackground#4a935cb3
inlineEdit.gutterIndicator.successfulBorder#4a935c
inlineEdit.gutterIndicator.successfulForeground#000000
inlineEdit.modifiedBackground#83c09226
inlineEdit.modifiedBorder#83c092cc
inlineEdit.modifiedChangedLineBackground#83c09214
inlineEdit.modifiedChangedTextBackground#00000000
inlineEdit.originalBackground#d699b626
inlineEdit.originalBorder#d699b6cc
inlineEdit.originalChangedLineBackground#d699b6cc
inlineEdit.originalChangedTextBackground#00000000
inlineEdit.tabWillAcceptModifiedBorder#83c092
inlineEdit.tabWillAcceptOriginalBorder#d699b6
input.background#2a293a
input.border#49485c
input.foreground#ede7da
input.placeholderForeground#6b6987
inputOption.activeBackground#66638d
inputOption.activeBorder#00000000
inputOption.activeForeground#ede7da
inputOption.hoverBackground#3b3951
inputValidation.errorBackground#302f42
inputValidation.errorBorder#e67e80
inputValidation.infoBackground#302f42
inputValidation.infoBorder#a7c080
inputValidation.warningBackground#302f42
inputValidation.warningBorder#dbbc7f
keybindingLabel.background#302f42
keybindingLabel.border#656473
keybindingLabel.bottomBorder#656473
keybindingLabel.foreground#9998a5
list.activeSelectionBackground#9587ff33
list.activeSelectionForeground#ede7da
list.dropBackground#9587ff15
list.errorForeground#e67e80
list.focusAndSelectionOutline#9587ffe6
list.focusBackground#9587ff40
list.focusForeground#ede7da
list.focusOutline#9587ffe6
list.highlightForeground#9587ff
list.hoverBackground#4644604d
list.hoverForeground#ffffff
list.inactiveSelectionBackground#c2baff0d
list.inactiveSelectionForeground#ede7da
list.warningForeground#dbbc7f
menu.background#302f42
menu.border#2c2a3c
menu.foreground#ede7da
menu.selectionBackground#343348
menu.selectionForeground#fefdfc
menu.separatorBackground#2c2a3c80
menubar.selectionBackground#343348
menubar.selectionForeground#ede7da
merge.border#2c2a3c
merge.commonContentBackground#e67e8030
merge.commonHeaderBackground#e67e8080
merge.currentContentBackground#83c09230
merge.currentHeaderBackground#83c09280
merge.incomingContentBackground#a7c08030
merge.incomingHeaderBackground#a7c08080
minimap.background#252433
minimap.errorHighlight#e67e80
minimap.findMatchHighlight#9587ff
minimap.selectionHighlight#9587ff
minimap.selectionOccurrenceHighlight#9587ff
minimap.warningHighlight#dbbc7f
minimapGutter.addedBackground#83c092
minimapGutter.deletedBackground#e67e80
minimapGutter.modifiedBackground#a7c080
multiDiffEditor.border#2c2a3c
multiDiffEditor.headerBackground#302f42
notificationCenterHeader.background#302f42
notificationCenterHeader.foreground#ede7da
notificationLink.foreground#9587ff
notifications.background#302f42
notifications.border#2c2a3c
notifications.foreground#ede7da
notificationsErrorIcon.foreground#d699b6
notificationsInfoIcon.foreground#a7c080
notificationsWarningIcon.foreground#e1d7c3
panel.background#22212f
panel.border#2c2a3c
panel.dropBorder#ffffff80
panelInput.border#3b3951
panelSection.border#2c2a3c
panelSectionHeader.background#292738
panelSectionHeader.border#2c2a3c
panelSectionHeader.foreground#ede7da
panelTitle.activeBorder#9587ff
panelTitle.activeForeground#ede7da
panelTitle.inactiveForeground#aaa6a3
peekView.border#2c2a3c
peekViewEditor.background#2e2c3f
peekViewEditor.matchHighlightBackground#302f4240
peekViewEditor.matchHighlightBorder#00000000
peekViewEditorGutter.background#2e2c3f
peekViewEditorStickyScroll.background#2c2a3c
peekViewResult.background#2a293a
peekViewResult.fileForeground#ede7da
peekViewResult.lineForeground#ede7da
peekViewResult.matchHighlightBackground#9587ff80
peekViewResult.selectionBackground#9587ff33
peekViewResult.selectionForeground#ede7da
peekViewTitle.background#302f42
peekViewTitleDescription.foreground#ede7da
peekViewTitleLabel.foreground#ede7da
pickerGroup.border#2c2a3c
pickerGroup.foreground#ede7da
profileBadge.background#9587ff
profileBadge.foreground#252433
progressBar.background#9587ff
quickInput.background#2c2a3c
quickInput.foreground#ede7dab3
quickInputList.focusBackground#9587ff1a
quickInputList.focusForeground#ffffff
quickInputList.focusIconForeground#ede7da
quickInputTitle.background#201f2c
sash.hoverBorder#9587ff50
scmGraph.foreground1#a7c080
scmGraph.foreground2#dbbc7f
scmGraph.foreground3#7fbbb3
scmGraph.foreground4#e69875
scmGraph.foreground5#e1d7c3
scmGraph.historyItemBaseRefColor#83c092
scmGraph.historyItemHoverAdditionsForeground#83c092
scmGraph.historyItemHoverDefaultLabelBackground#ede7da
scmGraph.historyItemHoverDefaultLabelForeground#999999
scmGraph.historyItemHoverDeletionsForeground#e67e80
scmGraph.historyItemHoverLabelForeground#999999
scmGraph.historyItemRefColor#e67e80
scmGraph.historyItemRemoteRefColor#a7c080
scrollbar.shadow#00000066
scrollbarSlider.activeBackground#ede7da4d
scrollbarSlider.background#ede7da26
scrollbarSlider.hoverBackground#ede7da33
selection.background#9587ff61
settings.headerForeground#ede7da
settings.modifiedItemIndicator#9587ff
settings.settingsHeaderHoverForeground#ede7da
sideBar.background#201f2c
sideBar.border#2c2a3c
sideBar.foreground#ede7dacc
sideBarSectionHeader.background#201f2c
sideBarSectionHeader.border#2c2a3c
sideBarSectionHeader.foreground#ede7da
sideBarStickyScroll.background#1c1b26
sideBarStickyScroll.shadow#00000066
sideBarTitle.foreground#ffffff
statusBar.background#252433
statusBar.border#2c2a3c
statusBar.debuggingBackground#3a3657
statusBar.debuggingForeground#bb99ec
statusBar.foreground#ede7da80
statusBar.noFolderBackground#201f2c
statusBar.noFolderBorder#2c2a3c
statusBar.noFolderForeground#ede7dacc
statusBarItem.activeBackground#302f42
statusBarItem.compactHoverBackground#9587ffcc
statusBarItem.errorBackground#e67e80
statusBarItem.errorForeground#551012
statusBarItem.errorHoverBackground#eea9aa
statusBarItem.errorHoverForeground#252433
statusBarItem.hoverBackground#453f6a
statusBarItem.hoverForeground#ede7da
statusBarItem.offlineBackground#dbbc7f
statusBarItem.offlineForeground#473614
statusBarItem.offlineHoverBackground#e6d1a7
statusBarItem.offlineHoverForeground#252433
statusBarItem.prominentBackground#252433
statusBarItem.prominentForeground#000000
statusBarItem.prominentHoverBackground#3b3951
statusBarItem.prominentHoverForeground#252433
statusBarItem.remoteBackground#e69875
statusBarItem.remoteForeground#4e220e
statusBarItem.remoteHoverBackground#eeb8a0
statusBarItem.remoteHoverForeground#252433
statusBarItem.warningBackground#dbbc7f
statusBarItem.warningForeground#473614
statusBarItem.warningHoverBackground#e6d1a7
statusBarItem.warningHoverForeground#252433
tab.activeBackground#252433
tab.activeBorder#252433
tab.activeBorderTop#9587ff
tab.activeForeground#ede7da
tab.border#2c2a3c
tab.hoverBackground#323145
tab.hoverForeground#ede7da
tab.inactiveBackground#201f2c
tab.inactiveForeground#aca7a4
tab.lastPinnedBorder#2c2a3c
terminal.ansiBlack#252433
terminal.ansiBlue#a7c080
terminal.ansiBrightBlack#4d4b6b
terminal.ansiBrightBlue#addd64
terminal.ansiBrightCyan#fe8f5d
terminal.ansiBrightGreen#67dc84
terminal.ansiBrightMagenta#f4c466
terminal.ansiBrightRed#fd676a
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#fd676a
terminal.ansiCyan#e69875
terminal.ansiGreen#83c092
terminal.ansiMagenta#dbbc7f
terminal.ansiRed#e67e80
terminal.ansiWhite#ede7da
terminal.ansiYellow#e67e80
terminal.background#22212f
terminal.foreground#ede7da
terminal.selectionForeground#ede7da
terminalCursor.background#252433
terminalCursor.foreground#9587ff
terminalStickyScrollHover.background#2c2a3c
textBlockQuote.background#a7c08033
textBlockQuote.border#a7c080b9
textCodeBlock.background#a7c08033
textLink.activeForeground#9587ff
textLink.foreground#9587ff
textPreformat.background#3a3657
textPreformat.foreground#9587ff
textSeparator.foreground#9587ff
titleBar.activeBackground#201f2c
titleBar.activeForeground#ede7da66
titleBar.border#2c2a3c
titleBar.inactiveBackground#201f2c
titleBar.inactiveForeground#ede7da66
toolbar.activeBackground#ffffff80
toolbar.hoverBackground#2d2c3e
tree.indentGuidesStroke#e1d7c333
walkThrough.embeddedEditorBackground#252433
welcomePage.progress.background#302f42
welcomePage.progress.foreground#9587ff
welcomePage.tileBackground#ede7da1a
welcomePage.tileBorder#ede7da33
welcomePage.tileHoverBackground#ede7da33
widget.border#49485c
widget.shadow#00000033

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	#e1d7c3	—
entity.name.type	#7fbbb3	—
comment, punctuation.definition.comment, string.quoted.docstring.multi, comment.block.documentation source	#e1d7c366	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	#e1d7c3	—
constant, support.constant.core.php	#d699b6	—
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	#dbbc7f	—
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	#e67e80	—
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	#a7c080	—
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	#e67e80	—
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	#e67e80	—
meta.object-literal.key, variable.object.property	#e1d7c3	—
keyword.other.definition.ini, support.type.property-name, entity.name.tag.yaml, storage.type.function.arrow.tsx	#e67e80	—
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	#e69875	—
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	#e1d7c366	—
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	#e1d7c3	—
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	#e69875	—
storage.type.interface, keyword.control.export.tsx	#e67e80	—
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	#83c092	—
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	#89b1accc	—
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	#83c092	—
support.type	#7fbbb3	—
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	#e1d7c3	—
source.elm constant.type-constructor, support.class	#dbbc7f	—
source.elm storage.type	#83c092	—
entity.name.tag, entity.name.tag.other.html, support.class.component.tsx, support.class.component.html	#e69875	—
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	#83c092	—
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	#d699b6	—
source.diff meta.diff.header.command	#a7c080	—
source.diff punctuation.definition.range.diff, source.diff meta.diff.range.unified	#e1d7c3	—
support.variable.liquid, support.class.liquid	#e1d7c3	—
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	#a7c080	—
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	#a7c080b3	—
entity.other.attribute-name, entity.name.tag.liquid, invalid.deprecated.entity.other.attribute-name, meta.embedded.block.blade storage.type.php	#a7c080	—
markup.inline.raw.string.markdown, punctuation.definition.raw.markdown, markup.fenced_code.block.markdown, markup.fenced_code.block.markdown punctuation, markup.raw.block.markdown	#83c092	—
fenced_code.block.language	#83c092	—
punctuation.definition.list.begin	#a7c080	—
punctuation.definition.list.begin	#a7c080	—
entity.name.section, markup.heading.setext	#e67e80	—
punctuation.definition.heading	#e67e80	—
markup.underline.link, markup.underline.link.image	#a7c080	—
markup.bold, punctuation.definition.bold	#e1d7c3	bold
markup.strikethrough, punctuation.definition.strikethrough	#d699b6	—
markup.italic, punctuation.definition.italic	#e1d7c3	italic
markup.quote, markup.quote.markdown punctuation.definition.quote.begin	#dbbc7f	—
punctuation.definition.quote.begin	#a7c080	—
meta.embedded.block.frontmatter punctuation.definition.tag.begin, meta.embedded.block.frontmatter punctuation.definition.tag.end, meta.embedded.block.frontmatter string.unquoted.plain.out	#ffffff	italic
entity.other.attribute-name.pseudo-class	#dbbc7f	—
entity.other.attribute-name.pseudo-element	#dbbc7f	—
entity.other.attribute-name.class, entity.other.attribute-name.class punctuation.definition.entity, support.type.property-name.json	#e69875	—
entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity	#e69875	—
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	#ede7da	—
source.css.scss entity.other.attribute-name.id , source.css entity.other.attribute-name.id , entity.other.attribute-name.id punctuation.definition.entity	#83c092	—
entity.name.tag.reference, meta.property-list	#e1d7c3	—
keyword.other.unit	#d699b6	—
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	#e67e80	—
constant.numeric	#d699b6	—
entity.name.tag.css, meta.property-list.scss entity.name.tag.css	#a7c080	—

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