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 Aquarelle Hydrangea

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#6394f126
activityBar.activeBorder#6394f1
activityBar.background#1e2235
activityBar.border#282d46
activityBar.dropBorder#ffffff33
activityBar.foreground#6394f1
activityBar.inactiveForeground#555d7b
activityBarBadge.background#6394f1
activityBarBadge.foreground#1e2235
activityBarTop.activeBorder#6394f1
activityBarTop.dropBorder#ffffff33
activityBarTop.foreground#6394f1
activityBarTop.inactiveForeground#52576d
badge.background#6394f1
badge.foreground#1e2235
breadcrumb.background#22273c
breadcrumb.foreground#d1dbeecc
breadcrumbPicker.background#2b324c
button.background#6394f1cc
button.border#ffffff26
button.foreground#ffffffcc
button.hoverBackground#6394f199
button.secondaryBackground#2f3653
button.secondaryForeground#d1dbeecc
button.secondaryHoverBackground#343c5d
button.separator#ffffff4d
charts.blue#afd9ec
charts.foreground#d1dbee
charts.green#c3e5a1
charts.lines#d1dbee
charts.orange#f0bba2
charts.purple#edc1ea
charts.red#eca099
charts.yellow#f3e1ac
checkbox.foreground#d1dbee
commandCenter.activeBackground#2b324c61
commandCenter.activeForeground#d1dbee8f
commandCenter.background#22273c
commandCenter.border#282d46
commandCenter.foreground#ffffff
contrastActiveBorder#00000000
contrastBorder#00000000
debugConsole.errorForeground#e87a70
debugConsole.infoForeground#73bee9
debugConsole.warningForeground#eea064
debugExceptionWidget.background#2b324c
debugExceptionWidget.border#282d46
debugIcon.breakpointCurrentStackframeForeground#e87a70
debugIcon.breakpointDisabledForeground#e87a7080
debugIcon.breakpointForeground#e87a70
debugIcon.continueForeground#73bee9
debugIcon.disconnectForeground#e87a70
debugIcon.pauseForeground#e87a70
debugIcon.restartForeground#aada77
debugIcon.startForeground#aada77
debugIcon.stepBackForeground#73bee9
debugIcon.stepIntoForeground#73bee9
debugIcon.stepOutForeground#73bee9
debugIcon.stepOverForeground#73bee9
debugIcon.stopForeground#e87a70
debugToolBar.background#29314c
descriptionForeground#d1dbee80
diffEditor.border#282d46
diffEditor.diagonalFill#2b324c
diffEditor.insertedLineBackground#aae76a1a
diffEditor.insertedTextBackground#aae76a1a
diffEditor.insertedTextBorder#00000000
diffEditor.move.border#f3e1ac4d
diffEditor.moveActive.border#f3e1acb3
diffEditor.removedLineBackground#f470641a
diffEditor.removedTextBackground#f470641a
diffEditor.removedTextBorder#00000000
diffEditor.unchangedCodeBackground#1c2032
diffEditor.unchangedRegionBackground#1c2032
diffEditor.unchangedRegionShadow#00000066
diffEditorGutter.insertedLineBackground#00000000
diffEditorGutter.removedLineBackground#00000000
diffEditorOverview.insertedForeground#aada7726
diffEditorOverview.removedForeground#e87a7030
disabledForeground#d1dbee4d
dropdown.background#272c44
dropdown.border#424969
dropdown.foreground#d1dbee
dropdown.listBackground#272c44
editor.background#22273c
editor.findMatchBackground#6394f130
editor.findMatchBorder#6394f161
editor.findMatchHighlightBackground#6394f13d
editor.findMatchHighlightBorder#6394f15c
editor.foldBackground#00000033
editor.foldPlaceholderForeground#ffffff
editor.foreground#d1dbee
editor.hoverHighlightBackground#6394f14d
editor.inactiveSelectionBackground#6394f14d
editor.lineHighlightBackground#6394f10f
editor.lineHighlightBorder#6394f108
editor.linkedEditingBackground#a5ddf633
editor.rangeHighlightBackground#6394f13d
editor.selectionBackground#6394f14d
editor.selectionForeground#d1dbee
editor.selectionHighlightBackground#6394f114
editor.selectionHighlightBorder#6394f14d
editor.wordHighlightBackground#6394f173
editor.wordHighlightBorder#6394f18a
editor.wordHighlightStrongBackground#6394f14d
editorBracketHighlight.foreground1#f3e1ac
editorBracketHighlight.foreground2#edc1ea
editorBracketHighlight.foreground3#afd9ec
editorBracketHighlight.foreground4#bcb1f1
editorBracketHighlight.foreground5#a9edd9
editorBracketHighlight.foreground6#f3aabc
editorBracketHighlight.unexpectedBracket.foreground#e87a70
editorBracketMatch.background#6394f14d
editorBracketMatch.border#6394f173
editorCodeLens.foreground#d1dbee80
editorCursor.background#07204e
editorCursor.foreground#6394f1
editorError.border#00000000
editorError.foreground#e87a70
editorGhostText.border#00000000
editorGhostText.foreground#d1dbee70
editorGroup.border#282d46
editorGroup.dropBackground#6394f114
editorGroupHeader.border#00000000
editorGroupHeader.noTabsBackground#22273c
editorGroupHeader.tabsBackground#1e2235
editorGroupHeader.tabsBorder#282d46
editorGutter.addedBackground#aada77cc
editorGutter.background#22273c
editorGutter.commentRangeForeground#2b324c
editorGutter.deletedBackground#e87a70cc
editorGutter.modifiedBackground#73bee9cc
editorHoverWidget.background#2b324c
editorHoverWidget.border#282d46
editorIndentGuide.activeBackground1#d1dbee33
editorIndentGuide.background1#d1dbee0d
editorInfo.border#00000000
editorInlayHint.background#d1dbee1a
editorInlayHint.foreground#d1dbeeb3
editorInlayHint.parameterBackground#d1dbee1a
editorInlayHint.parameterForeground#d1dbeeb3
editorInlayHint.typeBackground#d1dbee1a
editorInlayHint.typeForeground#d1dbeeb3
editorLineNumber.activeForeground#d1dbee
editorLineNumber.foreground#454c69
editorLink.activeForeground#d1dbee
editorMarkerNavigation.background#1e2235
editorMarkerNavigationError.background#e87a708f
editorMarkerNavigationInfo.background#73bee98f
editorMarkerNavigationWarning.background#eea0648f
editorOverviewRuler.addedForeground#aada7780
editorOverviewRuler.border#282d46
editorOverviewRuler.deletedForeground#e87a7080
editorOverviewRuler.errorForeground#e87a70
editorOverviewRuler.incomingContentForeground#aada7780
editorOverviewRuler.infoForeground#73bee980
editorOverviewRuler.modifiedForeground#73bee980
editorOverviewRuler.selectionHighlightForeground#6394f180
editorOverviewRuler.warningForeground#eea064
editorRuler.foreground#d1dbee0d
editorStickyScroll.shadow#00000066
editorStickyScrollHover.background#282d46
editorSuggestWidget.background#262b43
editorSuggestWidget.border#282d46
editorSuggestWidget.foreground#d1dbee
editorSuggestWidget.highlightForeground#6394f1
editorSuggestWidget.selectedBackground#343c5d
editorSuggestWidget.selectedIconForeground#d1dbee
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#000000aa
editorWarning.border#00000000
editorWarning.foreground#eea064
editorWhitespace.foreground#ffffff60
editorWidget.background#2b324c
editorWidget.border#343c5d
editorWidget.resizeBorder#6394f150
errorForeground#e87a70
errorLens.errorForeground#e87a70fc
errorLens.hintForeground#73bee9fc
errorLens.infoForeground#73bee9fc
errorLens.warningForeground#eea064fc
extensionButton.background#6394f180
extensionButton.foreground#cadbfa
extensionButton.hoverBackground#6394f199
extensionButton.prominentBackground#6394f19d
extensionButton.prominentHoverBackground#6394f1
focusBorder#47517d
foreground#d1dbee
gitDecoration.conflictingResourceForeground#6394f1
gitDecoration.deletedResourceForeground#e87a70
gitDecoration.ignoredResourceForeground#ffffff4d
gitDecoration.modifiedResourceForeground#73bee9
gitDecoration.untrackedResourceForeground#aada77
icon.foreground#d1dbee4d
inlineChat.background#2b324c
inlineChat.border#343c5d
inlineChatInput.background#262b43
inlineChatInput.border#343c5d
inlineChatInput.focusBorder#47517d
inlineEdit.gutterIndicator.background#d1dbee80
inlineEdit.gutterIndicator.primaryBackground#e6c153b3
inlineEdit.gutterIndicator.primaryBorder#e6c153
inlineEdit.gutterIndicator.primaryForeground#0b111c
inlineEdit.gutterIndicator.secondaryBackground#1458dab3
inlineEdit.gutterIndicator.secondaryBorder#1458da
inlineEdit.gutterIndicator.secondaryForeground#000000
inlineEdit.gutterIndicator.successfulBackground#78b932b3
inlineEdit.gutterIndicator.successfulBorder#78b932
inlineEdit.gutterIndicator.successfulForeground#000000
inlineEdit.modifiedBackground#aada7726
inlineEdit.modifiedBorder#aada77cc
inlineEdit.modifiedChangedLineBackground#aada7714
inlineEdit.modifiedChangedTextBackground#00000000
inlineEdit.originalBackground#eca09926
inlineEdit.originalBorder#eca099cc
inlineEdit.originalChangedLineBackground#eca099cc
inlineEdit.originalChangedTextBackground#00000000
inlineEdit.tabWillAcceptModifiedBorder#aada77
inlineEdit.tabWillAcceptOriginalBorder#eca099
input.background#272c44
input.border#424969
input.foreground#d1dbee
input.placeholderForeground#606a97
inputOption.activeBackground#59669e
inputOption.activeBorder#00000000
inputOption.activeForeground#d1dbee
inputOption.hoverBackground#343c5d
inputValidation.errorBackground#2b324c
inputValidation.errorBorder#e87a70
inputValidation.infoBackground#2b324c
inputValidation.infoBorder#73bee9
inputValidation.warningBackground#2b324c
inputValidation.warningBorder#eea064
keybindingLabel.background#2b324c
keybindingLabel.border#5b6382
keybindingLabel.bottomBorder#5b6382
keybindingLabel.foreground#9198b2
list.activeSelectionBackground#6394f133
list.activeSelectionForeground#d1dbee
list.dropBackground#6394f115
list.errorForeground#e87a70
list.focusAndSelectionOutline#6394f1e6
list.focusBackground#6394f140
list.focusForeground#d1dbee
list.focusOutline#6394f1e6
list.highlightForeground#6394f1
list.hoverBackground#3d476d4d
list.hoverForeground#ffffff
list.inactiveSelectionBackground#92b4f50d
list.inactiveSelectionForeground#d1dbee
list.warningForeground#eea064
menu.background#2b324c
menu.border#282d46
menu.foreground#d1dbee
menu.selectionBackground#2f3653
menu.selectionForeground#f6f8fc
menu.separatorBackground#282d4680
menubar.selectionBackground#2f3653
menubar.selectionForeground#d1dbee
merge.border#282d46
merge.commonContentBackground#f3e1ac30
merge.commonHeaderBackground#f3e1ac80
merge.currentContentBackground#aada7730
merge.currentHeaderBackground#aada7780
merge.incomingContentBackground#73bee930
merge.incomingHeaderBackground#73bee980
minimap.background#22273c
minimap.errorHighlight#e87a70
minimap.findMatchHighlight#6394f1
minimap.selectionHighlight#6394f1
minimap.selectionOccurrenceHighlight#6394f1
minimap.warningHighlight#eea064
minimapGutter.addedBackground#aada77
minimapGutter.deletedBackground#e87a70
minimapGutter.modifiedBackground#73bee9
multiDiffEditor.border#282d46
multiDiffEditor.headerBackground#2b324c
notificationCenterHeader.background#2b324c
notificationCenterHeader.foreground#d1dbee
notificationLink.foreground#6394f1
notifications.background#2b324c
notifications.border#282d46
notifications.foreground#d1dbee
notificationsErrorIcon.foreground#eca099
notificationsInfoIcon.foreground#afd9ec
notificationsWarningIcon.foreground#f0bba2
panel.background#202438
panel.border#282d46
panel.dropBorder#ffffff80
panelInput.border#343c5d
panelSection.border#282d46
panelSectionHeader.background#262a42
panelSectionHeader.border#282d46
panelSectionHeader.foreground#d1dbee
panelTitle.activeBorder#6394f1
panelTitle.activeForeground#d1dbee
panelTitle.inactiveForeground#979fb3
peekView.border#282d46
peekViewEditor.background#292f49
peekViewEditor.matchHighlightBackground#2b324c40
peekViewEditor.matchHighlightBorder#00000000
peekViewEditorGutter.background#292f49
peekViewEditorStickyScroll.background#282d46
peekViewResult.background#272c44
peekViewResult.fileForeground#d1dbee
peekViewResult.lineForeground#d1dbee
peekViewResult.matchHighlightBackground#6394f180
peekViewResult.selectionBackground#6394f133
peekViewResult.selectionForeground#d1dbee
peekViewTitle.background#2b324c
peekViewTitleDescription.foreground#d1dbee
peekViewTitleLabel.foreground#d1dbee
pickerGroup.border#282d46
pickerGroup.foreground#d1dbee
profileBadge.background#6394f1
profileBadge.foreground#22273c
progressBar.background#6394f1
quickInput.background#282d46
quickInput.foreground#d1dbeeb3
quickInputList.focusBackground#6394f11a
quickInputList.focusForeground#ffffff
quickInputList.focusIconForeground#d1dbee
quickInputTitle.background#1e2235
sash.hoverBorder#6394f150
scmGraph.foreground1#afd9ec
scmGraph.foreground2#edc1ea
scmGraph.foreground3#bcb1f1
scmGraph.foreground4#a9edd9
scmGraph.foreground5#f3aabc
scmGraph.historyItemBaseRefColor#bcb1f1
scmGraph.historyItemHoverAdditionsForeground#aada77
scmGraph.historyItemHoverDefaultLabelBackground#d1dbee
scmGraph.historyItemHoverDefaultLabelForeground#999999
scmGraph.historyItemHoverDeletionsForeground#e87a70
scmGraph.historyItemHoverLabelForeground#999999
scmGraph.historyItemRefColor#f3e1ac
scmGraph.historyItemRemoteRefColor#afd9ec
scrollbar.shadow#00000066
scrollbarSlider.activeBackground#d1dbee4d
scrollbarSlider.background#d1dbee26
scrollbarSlider.hoverBackground#d1dbee33
selection.background#6394f161
settings.headerForeground#d1dbee
settings.modifiedItemIndicator#6394f1
settings.settingsHeaderHoverForeground#d1dbee
sideBar.background#1e2235
sideBar.border#282d46
sideBar.foreground#d1dbeecc
sideBarSectionHeader.background#1e2235
sideBarSectionHeader.border#282d46
sideBarSectionHeader.foreground#d1dbee
sideBarStickyScroll.background#1a1e2e
sideBarStickyScroll.shadow#00000066
sideBarTitle.foreground#ffffff
statusBar.background#22273c
statusBar.border#282d46
statusBar.debuggingBackground#2f3b5d
statusBar.debuggingForeground#99a4e7
statusBar.foreground#d1dbee80
statusBar.noFolderBackground#1e2235
statusBar.noFolderBorder#282d46
statusBar.noFolderForeground#d1dbeecc
statusBarItem.activeBackground#2b324c
statusBarItem.compactHoverBackground#6394f1cc
statusBarItem.errorBackground#e87a70
statusBarItem.errorForeground#4d120c
statusBarItem.errorHoverBackground#efa39c
statusBarItem.errorHoverForeground#22273c
statusBarItem.hoverBackground#35456e
statusBarItem.hoverForeground#d1dbee
statusBarItem.offlineBackground#edc1ea
statusBarItem.offlineForeground#882781
statusBarItem.offlineHoverBackground#f8e9f7
statusBarItem.offlineHoverForeground#22273c
statusBarItem.prominentBackground#22273c
statusBarItem.prominentForeground#000000
statusBarItem.prominentHoverBackground#343c5d
statusBarItem.prominentHoverForeground#22273c
statusBarItem.remoteBackground#a9edd9
statusBarItem.remoteForeground#1a7d60
statusBarItem.remoteHoverBackground#d3f6ec
statusBarItem.remoteHoverForeground#22273c
statusBarItem.warningBackground#eea064
statusBarItem.warningForeground#4b2508
statusBarItem.warningHoverBackground#f3bc92
statusBarItem.warningHoverForeground#22273c
tab.activeBackground#22273c
tab.activeBorder#22273c
tab.activeBorderTop#6394f1
tab.activeForeground#d1dbee
tab.border#282d46
tab.hoverBackground#2d3450
tab.hoverForeground#d1dbee
tab.inactiveBackground#1e2235
tab.inactiveForeground#98a0b5
tab.lastPinnedBorder#282d46
terminal.ansiBlack#22273c
terminal.ansiBlue#73bee9
terminal.ansiBrightBlack#454e79
terminal.ansiBrightBlue#5dc4ff
terminal.ansiBrightCyan#99fddf
terminal.ansiBrightGreen#abf45d
terminal.ansiBrightMagenta#f9b5f4
terminal.ansiBrightRed#ff6759
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffe7a0
terminal.ansiCyan#a9edd9
terminal.ansiGreen#aada77
terminal.ansiMagenta#edc1ea
terminal.ansiRed#e87a70
terminal.ansiWhite#d1dbee
terminal.ansiYellow#f3e1ac
terminal.background#202438
terminal.foreground#d1dbee
terminal.selectionForeground#d1dbee
terminalCursor.background#22273c
terminalCursor.foreground#6394f1
terminalStickyScrollHover.background#282d46
textBlockQuote.background#73bee933
textBlockQuote.border#73bee9b9
textCodeBlock.background#73bee933
textLink.activeForeground#6394f1
textLink.foreground#6394f1
textPreformat.background#2f3b5d
textPreformat.foreground#6394f1
textSeparator.foreground#6394f1
titleBar.activeBackground#1e2235
titleBar.activeForeground#d1dbee66
titleBar.border#282d46
titleBar.inactiveBackground#1e2235
titleBar.inactiveForeground#d1dbee66
toolbar.activeBackground#ffffff80
toolbar.hoverBackground#292e48
tree.indentGuidesStroke#d1dbee33
walkThrough.embeddedEditorBackground#22273c
welcomePage.progress.background#2b324c
welcomePage.progress.foreground#6394f1
welcomePage.tileBackground#d1dbee1a
welcomePage.tileBorder#d1dbee33
welcomePage.tileHoverBackground#d1dbee33
widget.border#424969
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	#f0bba2	—
entity.name.type	#bcb1f1	—
comment, punctuation.definition.comment, string.quoted.docstring.multi, comment.block.documentation source	#d1dbee66	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	#d1dbee	—
constant, support.constant.core.php	#eca099	—
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	#edc1ea	—
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	#f3e1ac	—
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	#afd9ec	—
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	#f3e1ac	—
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	#f3e1ac	—
meta.object-literal.key, variable.object.property	#d1dbee	—
keyword.other.definition.ini, support.type.property-name, entity.name.tag.yaml, storage.type.function.arrow.tsx	#f3e1ac	—
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	#a9edd9	—
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	#d1dbee66	—
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	#f0bba2	—
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	#a9edd9	—
storage.type.interface, keyword.control.export.tsx	#f3e1ac	—
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	#c3e5a1	—
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	#bfb6eccc	—
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	#bcb1f1	—
support.type	#bcb1f1	—
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	#f3aabc	—
source.elm constant.type-constructor, support.class	#edc1ea	—
source.elm storage.type	#bcb1f1	—
entity.name.tag, entity.name.tag.other.html, support.class.component.tsx, support.class.component.html	#a9edd9	—
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	#c3e5a1	—
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	#eca099	—
source.diff meta.diff.header.command	#afd9ec	—
source.diff punctuation.definition.range.diff, source.diff meta.diff.range.unified	#f0bba2	—
support.variable.liquid, support.class.liquid	#f3aabc	—
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	#afd9ec	—
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	#afd9ecb3	—
entity.other.attribute-name, entity.name.tag.liquid, invalid.deprecated.entity.other.attribute-name, meta.embedded.block.blade storage.type.php	#afd9ec	—
markup.inline.raw.string.markdown, punctuation.definition.raw.markdown, markup.fenced_code.block.markdown, markup.fenced_code.block.markdown punctuation, markup.raw.block.markdown	#bcb1f1	—
fenced_code.block.language	#bcb1f1	—
punctuation.definition.list.begin	#afd9ec	—
punctuation.definition.list.begin	#afd9ec	—
entity.name.section, markup.heading.setext	#f3e1ac	—
punctuation.definition.heading	#f3e1ac	—
markup.underline.link, markup.underline.link.image	#afd9ec	—
markup.bold, punctuation.definition.bold	#f3aabc	bold
markup.strikethrough, punctuation.definition.strikethrough	#eca099	—
markup.italic, punctuation.definition.italic	#f0bba2	italic
markup.quote, markup.quote.markdown punctuation.definition.quote.begin	#edc1ea	—
punctuation.definition.quote.begin	#afd9ec	—
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	#edc1ea	—
entity.other.attribute-name.pseudo-element	#edc1ea	—
entity.other.attribute-name.class, entity.other.attribute-name.class punctuation.definition.entity, support.type.property-name.json	#a9edd9	—
entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity	#a9edd9	—
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	#d1dbee	—
source.css.scss entity.other.attribute-name.id , source.css entity.other.attribute-name.id , entity.other.attribute-name.id punctuation.definition.entity	#bcb1f1	—
entity.name.tag.reference, meta.property-list	#f0bba2	—
keyword.other.unit	#eca099	—
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	#f3e1ac	—
constant.numeric	#eca099	—
entity.name.tag.css, meta.property-list.scss entity.name.tag.css	#afd9ec	—

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