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 Pumpkin

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#f88d6f26
activityBar.activeBorder#f88d6f
activityBar.background#26272a
activityBar.border#323538
activityBar.dropBorder#f8f8f733
activityBar.foreground#f88d6f
activityBar.inactiveForeground#555d60
activityBarBadge.background#f88d6f
activityBarBadge.foreground#26272a
activityBarTop.activeBorder#f88d6f
activityBarTop.dropBorder#f8f8f733
activityBarTop.foreground#f88d6f
activityBarTop.inactiveForeground#525455
badge.background#f88d6f
badge.foreground#26272a
breadcrumb.background#2b2d30
breadcrumb.foreground#bcbcb4cc
breadcrumbPicker.background#373a3d
button.background#f88d6fcc
button.border#ffffff26
button.foreground#ffffffcc
button.hoverBackground#f88d6f99
button.secondaryBackground#3c3f43
button.secondaryForeground#bbbbb5cc
button.secondaryHoverBackground#43464b
button.separator#ffffff4d
charts.blue#85ab86
charts.foreground#bbbbb5
charts.green#7fbbb3
charts.lines#bbbbb5
charts.orange#cfbc93
charts.purple#d3c6aa
charts.red#e67e80
charts.yellow#f88d6f
checkbox.foreground#bbbbb5
commandCenter.activeBackground#373a3d61
commandCenter.activeForeground#bbbbb58f
commandCenter.background#2b2d30
commandCenter.border#323538
commandCenter.foreground#f8f8f7
contrastActiveBorder#00000000
contrastBorder#00000000
debugConsole.errorForeground#e67e80
debugConsole.infoForeground#7fbbb3
debugConsole.warningForeground#d3c6aa
debugExceptionWidget.background#373a3d
debugExceptionWidget.border#323538
debugIcon.breakpointCurrentStackframeForeground#e67e80
debugIcon.breakpointDisabledForeground#e67e8080
debugIcon.breakpointForeground#e67e80
debugIcon.continueForeground#7fbbb3
debugIcon.disconnectForeground#e67e80
debugIcon.pauseForeground#e67e80
debugIcon.restartForeground#83c092
debugIcon.startForeground#83c092
debugIcon.stepBackForeground#7fbbb3
debugIcon.stepIntoForeground#7fbbb3
debugIcon.stepOutForeground#7fbbb3
debugIcon.stepOverForeground#7fbbb3
debugIcon.stopForeground#e67e80
debugToolBar.background#3e3636
descriptionForeground#bbbbb580
diffEditor.border#323538
diffEditor.diagonalFill#373a3d
diffEditor.insertedLineBackground#75ce8b1a
diffEditor.insertedTextBackground#75ce8b1a
diffEditor.insertedTextBorder#00000000
diffEditor.move.border#f88d6f4d
diffEditor.moveActive.border#f88d6fb3
diffEditor.removedLineBackground#f272751a
diffEditor.removedTextBackground#f272751a
diffEditor.removedTextBorder#00000000
diffEditor.unchangedCodeBackground#242527
diffEditor.unchangedRegionBackground#242527
diffEditor.unchangedRegionShadow#00000066
diffEditorGutter.insertedLineBackground#00000000
diffEditorGutter.removedLineBackground#00000000
diffEditorOverview.insertedForeground#83c09226
diffEditorOverview.removedForeground#e67e8030
disabledForeground#bbbbb54d
dropdown.background#313337
dropdown.border#535454
dropdown.foreground#bbbbb5
dropdown.listBackground#313337
editor.background#2b2d30
editor.findMatchBackground#f88d6f30
editor.findMatchBorder#f88d6f61
editor.findMatchHighlightBackground#f88d6f3d
editor.findMatchHighlightBorder#f88d6f5c
editor.foldBackground#00000033
editor.foldPlaceholderForeground#f8f8f7
editor.foreground#bbbbb5
editor.hoverHighlightBackground#f88d6f4d
editor.inactiveSelectionBackground#f88d6f4d
editor.lineHighlightBackground#f88d6f0f
editor.lineHighlightBorder#f88d6f08
editor.linkedEditingBackground#70c07233
editor.rangeHighlightBackground#f88d6f3d
editor.selectionBackground#f88d6f4d
editor.selectionForeground#bbbbb5
editor.selectionHighlightBackground#f88d6f14
editor.selectionHighlightBorder#f88d6f4d
editor.wordHighlightBackground#f88d6f73
editor.wordHighlightBorder#f88d6f8a
editor.wordHighlightStrongBackground#f88d6f4d
editorBracketHighlight.foreground1#f88d6f
editorBracketHighlight.foreground2#d3c6aa
editorBracketHighlight.foreground3#85ab86
editorBracketHighlight.foreground4#83c092
editorBracketHighlight.foreground5#e7a98c
editorBracketHighlight.foreground6#d3c6aa
editorBracketHighlight.unexpectedBracket.foreground#e67e80
editorBracketMatch.background#f88d6f4d
editorBracketMatch.border#f88d6f73
editorCodeLens.foreground#bbbbb580
editorCursor.background#631905
editorCursor.foreground#f88d6f
editorError.border#00000000
editorError.foreground#e67e80
editorGhostText.border#00000000
editorGhostText.foreground#bbbbb570
editorGroup.border#323538
editorGroup.dropBackground#f88d6f14
editorGroupHeader.border#00000000
editorGroupHeader.noTabsBackground#2b2d30
editorGroupHeader.tabsBackground#26272a
editorGroupHeader.tabsBorder#323538
editorGutter.addedBackground#83c092cc
editorGutter.background#2b2d30
editorGutter.commentRangeForeground#373a3d
editorGutter.deletedBackground#e67e80cc
editorGutter.modifiedBackground#7fbbb3cc
editorHoverWidget.background#373a3d
editorHoverWidget.border#323538
editorIndentGuide.activeBackground1#bcbcb433
editorIndentGuide.background1#bcbcb40d
editorInfo.border#00000000
editorInlayHint.background#bbbbb51a
editorInlayHint.foreground#bbbbb5b3
editorInlayHint.parameterBackground#bbbbb51a
editorInlayHint.parameterForeground#bcbcb4b3
editorInlayHint.typeBackground#bcbcb41a
editorInlayHint.typeForeground#bcbcb4b3
editorLineNumber.activeForeground#bcbcb4
editorLineNumber.foreground#484f52
editorLink.activeForeground#bbbbb5
editorMarkerNavigation.background#26272a
editorMarkerNavigationError.background#e67e808f
editorMarkerNavigationInfo.background#7fbbb38f
editorMarkerNavigationWarning.background#d3c6aa8f
editorOverviewRuler.addedForeground#83c09280
editorOverviewRuler.border#323538
editorOverviewRuler.deletedForeground#e67e8080
editorOverviewRuler.errorForeground#e67e80
editorOverviewRuler.incomingContentForeground#83c09280
editorOverviewRuler.infoForeground#7fbbb380
editorOverviewRuler.modifiedForeground#7fbbb380
editorOverviewRuler.selectionHighlightForeground#f88d6f80
editorOverviewRuler.warningForeground#d3c6aa
editorRuler.foreground#bcbcb40d
editorStickyScroll.shadow#00000066
editorStickyScrollHover.background#323538
editorSuggestWidget.background#303235
editorSuggestWidget.border#323538
editorSuggestWidget.foreground#bcbcb4
editorSuggestWidget.highlightForeground#f88d6f
editorSuggestWidget.selectedBackground#43464b
editorSuggestWidget.selectedIconForeground#bbbbb5
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#000000aa
editorWarning.border#00000000
editorWarning.foreground#d3c6aa
editorWhitespace.foreground#f8f8f760
editorWidget.background#373a3d
editorWidget.border#43464b
editorWidget.resizeBorder#f88d6f50
errorForeground#e67e80
errorLens.errorForeground#e67e80fc
errorLens.hintForeground#7fbbb3fc
errorLens.infoForeground#7fbbb3fc
errorLens.warningForeground#d3c6aafc
extensionButton.background#f88d6f80
extensionButton.foreground#fde2da
extensionButton.hoverBackground#f88d6f99
extensionButton.prominentBackground#f88d6f9d
extensionButton.prominentHoverBackground#f88d6f
focusBorder#5b5f66
foreground#bbbbb5
gitDecoration.conflictingResourceForeground#f88d6f
gitDecoration.deletedResourceForeground#e67e80
gitDecoration.ignoredResourceForeground#f8f8f74d
gitDecoration.modifiedResourceForeground#7fbbb3
gitDecoration.untrackedResourceForeground#83c092
icon.foreground#bbbbb54d
inlineChat.background#373a3d
inlineChat.border#43464b
inlineChatInput.background#303235
inlineChatInput.border#43464b
inlineChatInput.focusBorder#5b5f66
inlineEdit.gutterIndicator.background#bbbbb580
inlineEdit.gutterIndicator.primaryBackground#f3400eb3
inlineEdit.gutterIndicator.primaryBorder#f3400e
inlineEdit.gutterIndicator.primaryForeground#000000
inlineEdit.gutterIndicator.secondaryBackground#f3400eb3
inlineEdit.gutterIndicator.secondaryBorder#f3400e
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#e67e8026
inlineEdit.originalBorder#e67e80cc
inlineEdit.originalChangedLineBackground#e67e80cc
inlineEdit.originalChangedTextBackground#00000000
inlineEdit.tabWillAcceptModifiedBorder#83c092
inlineEdit.tabWillAcceptOriginalBorder#e67e80
input.background#313337
input.border#535454
input.foreground#bbbbb5
input.placeholderForeground#797a7b
inputOption.activeBackground#737981
inputOption.activeBorder#00000000
inputOption.activeForeground#bbbbb5
inputOption.hoverBackground#43464b
inputValidation.errorBackground#373a3d
inputValidation.errorBorder#e67e80
inputValidation.infoBackground#373a3d
inputValidation.infoBorder#7fbbb3
inputValidation.warningBackground#373a3d
inputValidation.warningBorder#d3c6aa
keybindingLabel.background#373a3d
keybindingLabel.border#6d6d6d
keybindingLabel.bottomBorder#6d6d6d
keybindingLabel.foreground#a0a0a0
list.activeSelectionBackground#f88d6f33
list.activeSelectionForeground#bbbbb5
list.dropBackground#f88d6f15
list.errorForeground#e67e80
list.focusAndSelectionOutline#f88d6fe6
list.focusBackground#f88d6f40
list.focusForeground#bbbbb5
list.focusOutline#f88d6fe6
list.highlightForeground#f88d6f
list.hoverBackground#4f54584d
list.hoverForeground#ffffff
list.inactiveSelectionBackground#fab4a00d
list.inactiveSelectionForeground#bbbbb5
list.warningForeground#d3c6aa
menu.background#373a3d
menu.border#323538
menu.foreground#bcbcb4
menu.selectionBackground#3c3f43
menu.selectionForeground#d4d4cf
menu.separatorBackground#32353880
menubar.selectionBackground#3c3f43
menubar.selectionForeground#bcbcb4
merge.border#323538
merge.commonContentBackground#f88d6f30
merge.commonHeaderBackground#f88d6f80
merge.currentContentBackground#83c09230
merge.currentHeaderBackground#83c09280
merge.incomingContentBackground#7fbbb330
merge.incomingHeaderBackground#7fbbb380
minimap.background#2b2d30
minimap.errorHighlight#e67e80
minimap.findMatchHighlight#f88d6f
minimap.selectionHighlight#f88d6f
minimap.selectionOccurrenceHighlight#f88d6f
minimap.warningHighlight#d3c6aa
minimapGutter.addedBackground#83c092
minimapGutter.deletedBackground#e67e80
minimapGutter.modifiedBackground#7fbbb3
multiDiffEditor.border#323538
multiDiffEditor.headerBackground#373a3d
notificationCenterHeader.background#373a3d
notificationCenterHeader.foreground#bbbbb5
notificationLink.foreground#f88d6f
notifications.background#373a3d
notifications.border#323538
notifications.foreground#bbbbb5
notificationsErrorIcon.foreground#e67e80
notificationsInfoIcon.foreground#85ab86
notificationsWarningIcon.foreground#cfbc93
panel.background#282a2d
panel.border#323538
panel.dropBorder#f8f8f780
panelInput.border#43464b
panelSection.border#323538
panelSectionHeader.background#2f3235
panelSectionHeader.border#323538
panelSectionHeader.foreground#bbbbb5
panelTitle.activeBorder#f88d6f
panelTitle.activeForeground#bcbcb4
panelTitle.inactiveForeground#8c8d88
peekView.border#323538
peekViewEditor.background#35373b
peekViewEditor.matchHighlightBackground#373a3d40
peekViewEditor.matchHighlightBorder#00000000
peekViewEditorGutter.background#35373b
peekViewEditorStickyScroll.background#323538
peekViewResult.background#313337
peekViewResult.fileForeground#bbbbb5
peekViewResult.lineForeground#bbbbb5
peekViewResult.matchHighlightBackground#f88d6f80
peekViewResult.selectionBackground#f88d6f33
peekViewResult.selectionForeground#bbbbb5
peekViewTitle.background#373a3d
peekViewTitleDescription.foreground#bbbbb5
peekViewTitleLabel.foreground#bbbbb5
pickerGroup.border#323538
pickerGroup.foreground#bbbbb5
profileBadge.background#f88d6f
profileBadge.foreground#2b2d30
progressBar.background#f88d6f
quickInput.background#323538
quickInput.foreground#bbbbb5b3
quickInputList.focusBackground#f88d6f1a
quickInputList.focusForeground#ffffff
quickInputList.focusIconForeground#bbbbb5
quickInputTitle.background#26272a
sash.hoverBorder#f88d6f50
scmGraph.foreground1#85ab86
scmGraph.foreground2#d3c6aa
scmGraph.foreground3#83c092
scmGraph.foreground4#e7a98c
scmGraph.foreground5#d3c6aa
scmGraph.historyItemBaseRefColor#83c092
scmGraph.historyItemHoverAdditionsForeground#83c092
scmGraph.historyItemHoverDefaultLabelBackground#bbbbb5
scmGraph.historyItemHoverDefaultLabelForeground#99998a
scmGraph.historyItemHoverDeletionsForeground#e67e80
scmGraph.historyItemHoverLabelForeground#99998a
scmGraph.historyItemRefColor#f88d6f
scmGraph.historyItemRemoteRefColor#85ab86
scrollbar.shadow#00000066
scrollbarSlider.activeBackground#bbbbb54d
scrollbarSlider.background#bbbbb526
scrollbarSlider.hoverBackground#bbbbb533
selection.background#f88d6f61
settings.headerForeground#bbbbb5
settings.modifiedItemIndicator#f88d6f
settings.settingsHeaderHoverForeground#bbbbb5
sideBar.background#26272a
sideBar.border#323538
sideBar.foreground#bcbcb4cc
sideBarSectionHeader.background#26272a
sideBarSectionHeader.border#323538
sideBarSectionHeader.foreground#bbbbb5
sideBarStickyScroll.background#212225
sideBarStickyScroll.shadow#00000066
sideBarTitle.foreground#f8f8f7
statusBar.background#2b2d30
statusBar.border#323538
statusBar.debuggingBackground#513f3c
statusBar.debuggingForeground#dc9274
statusBar.foreground#bbbbb580
statusBar.noFolderBackground#26272a
statusBar.noFolderBorder#323538
statusBar.noFolderForeground#bbbbb5cc
statusBarItem.activeBackground#373a3d
statusBarItem.compactHoverBackground#f88d6fcc
statusBarItem.errorBackground#e67e80
statusBarItem.errorForeground#551012
statusBarItem.errorHoverBackground#eea9aa
statusBarItem.errorHoverForeground#2b2d30
statusBarItem.hoverBackground#654942
statusBarItem.hoverForeground#bbbbb5
statusBarItem.offlineBackground#d3c6aa
statusBarItem.offlineForeground#53462b
statusBarItem.offlineHoverBackground#e4ddcc
statusBarItem.offlineHoverForeground#2b2d30
statusBarItem.prominentBackground#2b2d30
statusBarItem.prominentForeground#000000
statusBarItem.prominentHoverBackground#43464b
statusBarItem.prominentHoverForeground#2b2d30
statusBarItem.remoteBackground#e7a98c
statusBarItem.remoteForeground#602c14
statusBarItem.remoteHoverBackground#f0c9b6
statusBarItem.remoteHoverForeground#2b2d30
statusBarItem.warningBackground#d3c6aa
statusBarItem.warningForeground#53462b
statusBarItem.warningHoverBackground#e4ddcc
statusBarItem.warningHoverForeground#2b2d30
tab.activeBackground#2b2d30
tab.activeBorder#2b2d30
tab.activeBorderTop#f88d6f
tab.activeForeground#bbbbb5
tab.border#323538
tab.hoverBackground#393c40
tab.hoverForeground#bcbcb4
tab.inactiveBackground#26272a
tab.inactiveForeground#8d8e8a
tab.lastPinnedBorder#323538
terminal.ansiBlack#2b2d30
terminal.ansiBlue#7fbbb3
terminal.ansiBrightBlack#585c63
terminal.ansiBrightBlue#62d8c9
terminal.ansiBrightCyan#fca177
terminal.ansiBrightGreen#67dc84
terminal.ansiBrightMagenta#e6cd97
terminal.ansiBrightRed#fd676a
terminal.ansiBrightWhite#ececea
terminal.ansiBrightYellow#ff8968
terminal.ansiCyan#e7a98c
terminal.ansiGreen#83c092
terminal.ansiMagenta#d3c6aa
terminal.ansiRed#e67e80
terminal.ansiWhite#bbbbb5
terminal.ansiYellow#f88d6f
terminal.background#282a2d
terminal.foreground#bbbbb5
terminal.selectionForeground#bbbbb5
terminalCursor.background#2b2d30
terminalCursor.foreground#f88d6f
terminalStickyScrollHover.background#323538
textBlockQuote.background#7fbbb333
textBlockQuote.border#7fbbb3b9
textCodeBlock.background#7fbbb333
textLink.activeForeground#f88d6f
textLink.foreground#f88d6f
textPreformat.background#513f3c
textPreformat.foreground#f88d6f
textSeparator.foreground#f88d6f
titleBar.activeBackground#26272a
titleBar.activeForeground#bbbbb566
titleBar.border#323538
titleBar.inactiveBackground#26272a
titleBar.inactiveForeground#bbbbb566
toolbar.activeBackground#f8f8f780
toolbar.hoverBackground#34373b
tree.indentGuidesStroke#bcbcb433
walkThrough.embeddedEditorBackground#2b2d30
welcomePage.progress.background#373a3d
welcomePage.progress.foreground#f88d6f
welcomePage.tileBackground#bbbbb51a
welcomePage.tileBorder#bbbbb533
welcomePage.tileHoverBackground#bbbbb533
widget.border#535454
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	#cfbc93	—
entity.name.type	#83c092	—
comment, punctuation.definition.comment, string.quoted.docstring.multi, comment.block.documentation source	#bcbcb466	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	#bcbcb4	—
constant, support.constant.core.php	#e67e80	—
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	#d3c6aa	—
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	#f88d6f	—
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	#85ab86	—
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	#f88d6f	—
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	#f88d6f	—
meta.object-literal.key, variable.object.property	#bcbcb4	—
keyword.other.definition.ini, support.type.property-name, entity.name.tag.yaml, storage.type.function.arrow.tsx	#f88d6f	—
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	#e7a98c	—
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	#bcbcb466	—
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	#cfbc93	—
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	#e7a98c	—
storage.type.interface, keyword.control.export.tsx	#f88d6f	—
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	#7fbbb3	—
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	#8cb797cc	—
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	#83c092	—
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	#d3c6aa	—
source.elm constant.type-constructor, support.class	#d3c6aa	—
source.elm storage.type	#83c092	—
entity.name.tag, entity.name.tag.other.html, support.class.component.tsx, support.class.component.html	#e7a98c	—
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	#7fbbb3	—
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	#e67e80	—
source.diff meta.diff.header.command	#85ab86	—
source.diff punctuation.definition.range.diff, source.diff meta.diff.range.unified	#cfbc93	—
support.variable.liquid, support.class.liquid	#d3c6aa	—
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	#85ab86	—
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	#85ab86b3	—
entity.other.attribute-name, entity.name.tag.liquid, invalid.deprecated.entity.other.attribute-name, meta.embedded.block.blade storage.type.php	#85ab86	—
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	#85ab86	—
punctuation.definition.list.begin	#85ab86	—
entity.name.section, markup.heading.setext	#f88d6f	—
punctuation.definition.heading	#f88d6f	—
markup.underline.link, markup.underline.link.image	#85ab86	—
markup.bold, punctuation.definition.bold	#d3c6aa	bold
markup.strikethrough, punctuation.definition.strikethrough	#e67e80	—
markup.italic, punctuation.definition.italic	#cfbc93	italic
markup.quote, markup.quote.markdown punctuation.definition.quote.begin	#d3c6aa	—
punctuation.definition.quote.begin	#85ab86	—
meta.embedded.block.frontmatter punctuation.definition.tag.begin, meta.embedded.block.frontmatter punctuation.definition.tag.end, meta.embedded.block.frontmatter string.unquoted.plain.out	#f8f8f7	italic
entity.other.attribute-name.pseudo-class	#d3c6aa	—
entity.other.attribute-name.pseudo-element	#d3c6aa	—
entity.other.attribute-name.class, entity.other.attribute-name.class punctuation.definition.entity, support.type.property-name.json	#e7a98c	—
entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity	#e7a98c	—
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	#bbbbb5	—
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	#cfbc93	—
keyword.other.unit	#e67e80	—
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	#f88d6f	—
constant.numeric	#e67e80	—
entity.name.tag.css, meta.property-list.scss entity.name.tag.css	#85ab86	—

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