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 Jetbrain Dark

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#0077ff26
activityBar.activeBorder#0077ff
activityBar.background#26272a
activityBar.border#323538
activityBar.dropBorder#f8f8f733
activityBar.foreground#0077ff
activityBar.inactiveForeground#555d60
activityBarBadge.background#0077ff
activityBarBadge.foreground#26272a
activityBarTop.activeBorder#0077ff
activityBarTop.dropBorder#f8f8f733
activityBarTop.foreground#0077ff
activityBarTop.inactiveForeground#525455
badge.background#0077ff
badge.foreground#26272a
breadcrumb.background#2b2d30
breadcrumb.foreground#bcbcb4cc
breadcrumbPicker.background#373a3d
button.background#0077ffcc
button.border#ffffff26
button.foreground#ffffffcc
button.hoverBackground#0077ff99
button.secondaryBackground#3c3f43
button.secondaryForeground#bbbbb5cc
button.secondaryHoverBackground#43464b
button.separator#ffffff4d
charts.blue#7fb2b3
charts.foreground#bbbbb5
charts.green#bbab97
charts.lines#bbbbb5
charts.orange#7fb2b3
charts.purple#baa2da
charts.red#d78884
charts.yellow#7eaadb
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#a7c080
debugConsole.warningForeground#dbbc7f
debugExceptionWidget.background#373a3d
debugExceptionWidget.border#323538
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#303442
descriptionForeground#bbbbb580
diffEditor.border#323538
diffEditor.diagonalFill#373a3d
diffEditor.insertedLineBackground#75ce8b1a
diffEditor.insertedTextBackground#75ce8b1a
diffEditor.insertedTextBorder#00000000
diffEditor.move.border#7eaadb4d
diffEditor.moveActive.border#7eaadbb3
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#0077ff30
editor.findMatchBorder#0077ff61
editor.findMatchHighlightBackground#0077ff3d
editor.findMatchHighlightBorder#0077ff5c
editor.foldBackground#00000033
editor.foldPlaceholderForeground#f8f8f7
editor.foreground#bbbbb5
editor.hoverHighlightBackground#0077ff4d
editor.inactiveSelectionBackground#0077ff4d
editor.lineHighlightBackground#0077ff0f
editor.lineHighlightBorder#0077ff08
editor.linkedEditingBackground#6bc6c733
editor.rangeHighlightBackground#0077ff3d
editor.selectionBackground#0077ff4d
editor.selectionForeground#bbbbb5
editor.selectionHighlightBackground#0077ff14
editor.selectionHighlightBorder#0077ff4d
editor.wordHighlightBackground#0077ff73
editor.wordHighlightBorder#0077ff8a
editor.wordHighlightStrongBackground#0077ff4d
editorBracketHighlight.foreground1#7eaadb
editorBracketHighlight.foreground2#baa2da
editorBracketHighlight.foreground3#7fb2b3
editorBracketHighlight.foreground4#baa2da
editorBracketHighlight.foreground5#baa2da
editorBracketHighlight.foreground6#bcbcb4
editorBracketHighlight.unexpectedBracket.foreground#e67e80
editorBracketMatch.background#0077ff4d
editorBracketMatch.border#0077ff73
editorCodeLens.foreground#bbbbb580
editorCursor.background#ffffff
editorCursor.foreground#0077ff
editorError.border#00000000
editorError.foreground#e67e80
editorGhostText.border#00000000
editorGhostText.foreground#bbbbb570
editorGroup.border#323538
editorGroup.dropBackground#0077ff14
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#a7c080cc
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#a7c0808f
editorMarkerNavigationWarning.background#dbbc7f8f
editorOverviewRuler.addedForeground#83c09280
editorOverviewRuler.border#323538
editorOverviewRuler.deletedForeground#e67e8080
editorOverviewRuler.errorForeground#e67e80
editorOverviewRuler.incomingContentForeground#83c09280
editorOverviewRuler.infoForeground#a7c08080
editorOverviewRuler.modifiedForeground#a7c08080
editorOverviewRuler.selectionHighlightForeground#0077ff80
editorOverviewRuler.warningForeground#dbbc7f
editorRuler.foreground#bcbcb40d
editorStickyScroll.shadow#00000066
editorStickyScrollHover.background#323538
editorSuggestWidget.background#303235
editorSuggestWidget.border#323538
editorSuggestWidget.foreground#bcbcb4
editorSuggestWidget.highlightForeground#0077ff
editorSuggestWidget.selectedBackground#43464b
editorSuggestWidget.selectedIconForeground#bbbbb5
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#000000aa
editorWarning.border#00000000
editorWarning.foreground#dbbc7f
editorWhitespace.foreground#f8f8f760
editorWidget.background#373a3d
editorWidget.border#43464b
editorWidget.resizeBorder#0077ff50
errorForeground#e67e80
errorLens.errorForeground#e67e80fc
errorLens.hintForeground#a7c080fc
errorLens.infoForeground#a7c080fc
errorLens.warningForeground#dbbc7ffc
extensionButton.background#0077ff80
extensionButton.foreground#70b3ff
extensionButton.hoverBackground#0077ff99
extensionButton.prominentBackground#0077ff9d
extensionButton.prominentHoverBackground#0077ff
focusBorder#5b5f66
foreground#bbbbb5
gitDecoration.conflictingResourceForeground#0077ff
gitDecoration.deletedResourceForeground#e67e80
gitDecoration.ignoredResourceForeground#f8f8f74d
gitDecoration.modifiedResourceForeground#a7c080
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#3576beb3
inlineEdit.gutterIndicator.primaryBorder#3576be
inlineEdit.gutterIndicator.primaryForeground#000000
inlineEdit.gutterIndicator.secondaryBackground#004799b3
inlineEdit.gutterIndicator.secondaryBorder#004799
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#d7888426
inlineEdit.originalBorder#d78884cc
inlineEdit.originalChangedLineBackground#d78884cc
inlineEdit.originalChangedTextBackground#00000000
inlineEdit.tabWillAcceptModifiedBorder#83c092
inlineEdit.tabWillAcceptOriginalBorder#d78884
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#a7c080
inputValidation.warningBackground#373a3d
inputValidation.warningBorder#dbbc7f
keybindingLabel.background#373a3d
keybindingLabel.border#6d6d6d
keybindingLabel.bottomBorder#6d6d6d
keybindingLabel.foreground#a0a0a0
list.activeSelectionBackground#0077ff33
list.activeSelectionForeground#bbbbb5
list.dropBackground#0077ff15
list.errorForeground#e67e80
list.focusAndSelectionOutline#0077ffe6
list.focusBackground#0077ff40
list.focusForeground#bbbbb5
list.focusOutline#0077ffe6
list.highlightForeground#0077ff
list.hoverBackground#4f54584d
list.hoverForeground#ffffff
list.inactiveSelectionBackground#3392ff0d
list.inactiveSelectionForeground#bbbbb5
list.warningForeground#dbbc7f
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#7eaadb30
merge.commonHeaderBackground#7eaadb80
merge.currentContentBackground#83c09230
merge.currentHeaderBackground#83c09280
merge.incomingContentBackground#a7c08030
merge.incomingHeaderBackground#a7c08080
minimap.background#2b2d30
minimap.errorHighlight#e67e80
minimap.findMatchHighlight#0077ff
minimap.selectionHighlight#0077ff
minimap.selectionOccurrenceHighlight#0077ff
minimap.warningHighlight#dbbc7f
minimapGutter.addedBackground#83c092
minimapGutter.deletedBackground#e67e80
minimapGutter.modifiedBackground#a7c080
multiDiffEditor.border#323538
multiDiffEditor.headerBackground#373a3d
notificationCenterHeader.background#373a3d
notificationCenterHeader.foreground#bbbbb5
notificationLink.foreground#0077ff
notifications.background#373a3d
notifications.border#323538
notifications.foreground#bbbbb5
notificationsErrorIcon.foreground#d78884
notificationsInfoIcon.foreground#7fb2b3
notificationsWarningIcon.foreground#7fb2b3
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#0077ff
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#0077ff80
peekViewResult.selectionBackground#0077ff33
peekViewResult.selectionForeground#bbbbb5
peekViewTitle.background#373a3d
peekViewTitleDescription.foreground#bbbbb5
peekViewTitleLabel.foreground#bbbbb5
pickerGroup.border#323538
pickerGroup.foreground#bbbbb5
profileBadge.background#0077ff
profileBadge.foreground#2b2d30
progressBar.background#0077ff
quickInput.background#323538
quickInput.foreground#bbbbb5b3
quickInputList.focusBackground#0077ff1a
quickInputList.focusForeground#ffffff
quickInputList.focusIconForeground#bbbbb5
quickInputTitle.background#26272a
sash.hoverBorder#0077ff50
scmGraph.foreground1#7fb2b3
scmGraph.foreground2#baa2da
scmGraph.foreground3#7eaadb
scmGraph.foreground4#baa2da
scmGraph.foreground5#bcbcb4
scmGraph.historyItemBaseRefColor#baa2da
scmGraph.historyItemHoverAdditionsForeground#83c092
scmGraph.historyItemHoverDefaultLabelBackground#bbbbb5
scmGraph.historyItemHoverDefaultLabelForeground#99998a
scmGraph.historyItemHoverDeletionsForeground#e67e80
scmGraph.historyItemHoverLabelForeground#99998a
scmGraph.historyItemRefColor#7eaadb
scmGraph.historyItemRemoteRefColor#7fb2b3
scrollbar.shadow#00000066
scrollbarSlider.activeBackground#bbbbb54d
scrollbarSlider.background#bbbbb526
scrollbarSlider.hoverBackground#bbbbb533
selection.background#0077ff61
settings.headerForeground#bbbbb5
settings.modifiedItemIndicator#0077ff
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#333b55
statusBar.debuggingForeground#828aab
statusBar.foreground#bbbbb580
statusBar.noFolderBackground#26272a
statusBar.noFolderBorder#323538
statusBar.noFolderForeground#bbbbb5cc
statusBarItem.activeBackground#373a3d
statusBarItem.compactHoverBackground#0077ffcc
statusBarItem.errorBackground#e67e80
statusBarItem.errorForeground#551012
statusBarItem.errorHoverBackground#eea9aa
statusBarItem.errorHoverForeground#2b2d30
statusBarItem.hoverBackground#364268
statusBarItem.hoverForeground#bbbbb5
statusBarItem.offlineBackground#baa2da
statusBarItem.offlineForeground#3b2459
statusBarItem.offlineHoverBackground#d5c6e9
statusBarItem.offlineHoverForeground#2b2d30
statusBarItem.prominentBackground#2b2d30
statusBarItem.prominentForeground#000000
statusBarItem.prominentHoverBackground#43464b
statusBarItem.prominentHoverForeground#2b2d30
statusBarItem.remoteBackground#baa2da
statusBarItem.remoteForeground#3b2459
statusBarItem.remoteHoverBackground#d5c6e9
statusBarItem.remoteHoverForeground#2b2d30
statusBarItem.warningBackground#dbbc7f
statusBarItem.warningForeground#473614
statusBarItem.warningHoverBackground#e6d1a7
statusBarItem.warningHoverForeground#2b2d30
tab.activeBackground#2b2d30
tab.activeBorder#2b2d30
tab.activeBorderTop#0077ff
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#a7c080
terminal.ansiBrightBlack#585c63
terminal.ansiBrightBlue#addd64
terminal.ansiBrightCyan#b78fee
terminal.ansiBrightGreen#67dc84
terminal.ansiBrightMagenta#b78fee
terminal.ansiBrightRed#fd676a
terminal.ansiBrightWhite#ececea
terminal.ansiBrightYellow#65a9f4
terminal.ansiCyan#baa2da
terminal.ansiGreen#83c092
terminal.ansiMagenta#baa2da
terminal.ansiRed#e67e80
terminal.ansiWhite#bbbbb5
terminal.ansiYellow#7eaadb
terminal.background#282a2d
terminal.foreground#bbbbb5
terminal.selectionForeground#bbbbb5
terminalCursor.background#2b2d30
terminalCursor.foreground#0077ff
terminalStickyScrollHover.background#323538
textBlockQuote.background#a7c08033
textBlockQuote.border#a7c080b9
textCodeBlock.background#a7c08033
textLink.activeForeground#0077ff
textLink.foreground#0077ff
textPreformat.background#333b55
textPreformat.foreground#0077ff
textSeparator.foreground#0077ff
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#0077ff
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	#7fb2b3	—
entity.name.type	#7eaadb	—
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	#d78884	—
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	#baa2da	—
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	#7eaadb	—
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	#7fb2b3	—
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	#7eaadb	—
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	#7eaadb	—
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	#7eaadb	—
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	#baa2da	—
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	#7fb2b3	—
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	#baa2da	—
storage.type.interface, keyword.control.export.tsx	#7eaadb	—
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	#bbab97	—
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	#86aad3cc	—
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	#baa2da	—
support.type	#7eaadb	—
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	#bcbcb4	—
source.elm constant.type-constructor, support.class	#baa2da	—
source.elm storage.type	#baa2da	—
entity.name.tag, entity.name.tag.other.html, support.class.component.tsx, support.class.component.html	#baa2da	—
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	#bbab97	—
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	#d78884	—
source.diff meta.diff.header.command	#7fb2b3	—
source.diff punctuation.definition.range.diff, source.diff meta.diff.range.unified	#7fb2b3	—
support.variable.liquid, support.class.liquid	#bcbcb4	—
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	#7fb2b3	—
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	#7fb2b3b3	—
entity.other.attribute-name, entity.name.tag.liquid, invalid.deprecated.entity.other.attribute-name, meta.embedded.block.blade storage.type.php	#7fb2b3	—
markup.inline.raw.string.markdown, punctuation.definition.raw.markdown, markup.fenced_code.block.markdown, markup.fenced_code.block.markdown punctuation, markup.raw.block.markdown	#baa2da	—
fenced_code.block.language	#baa2da	—
punctuation.definition.list.begin	#7fb2b3	—
punctuation.definition.list.begin	#7fb2b3	—
entity.name.section, markup.heading.setext	#7eaadb	—
punctuation.definition.heading	#7eaadb	—
markup.underline.link, markup.underline.link.image	#7fb2b3	—
markup.bold, punctuation.definition.bold	#bcbcb4	bold
markup.strikethrough, punctuation.definition.strikethrough	#d78884	—
markup.italic, punctuation.definition.italic	#7fb2b3	italic
markup.quote, markup.quote.markdown punctuation.definition.quote.begin	#baa2da	—
punctuation.definition.quote.begin	#7fb2b3	—
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	#baa2da	—
entity.other.attribute-name.pseudo-element	#baa2da	—
entity.other.attribute-name.class, entity.other.attribute-name.class punctuation.definition.entity, support.type.property-name.json	#baa2da	—
entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity	#baa2da	—
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	#baa2da	—
entity.name.tag.reference, meta.property-list	#7fb2b3	—
keyword.other.unit	#d78884	—
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	#7eaadb	—
constant.numeric	#d78884	—
entity.name.tag.css, meta.property-list.scss entity.name.tag.css	#7fb2b3	—

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