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 Light

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#0063d326
activityBar.activeBorder#0063d3
activityBar.background#eeeeee
activityBar.border#e3e3e3
activityBar.dropBorder#444b6133
activityBar.foreground#0063d3
activityBar.inactiveForeground#b6bdb9
activityBarBadge.background#0063d3
activityBarBadge.foreground#eeeeee
activityBarTop.activeBorder#0063d3
activityBarTop.dropBorder#444b6133
activityBarTop.foreground#0063d3
activityBarTop.inactiveForeground#c2c2c2
badge.background#0063d3
badge.foreground#eeeeee
breadcrumb.background#f7f7f7
breadcrumb.foreground#444b61cc
breadcrumbPicker.background#ffffff
button.background#0063d3cc
button.border#00000026
button.foreground#000000cc
button.hoverBackground#0063d399
button.secondaryBackground#e5e5e5
button.secondaryForeground#525252
button.secondaryHoverBackground#dedede
button.separator#0000004d
charts.blue#008D90
charts.foreground#525252
charts.green#8C6C41
charts.lines#525252
charts.orange#008D90
charts.purple#6B2FBA
charts.red#AA3731
charts.yellow#0063d3
checkbox.foreground#525252
commandCenter.activeBackground#fcfcfc61
commandCenter.activeForeground#0000008f
commandCenter.background#f7f7f7
commandCenter.border#e3e3e3
commandCenter.foreground#444b61
contrastActiveBorder#00000000
contrastBorder#00000000
debugConsole.errorForeground#e67e80
debugConsole.infoForeground#a7c080
debugConsole.warningForeground#dbbc7f
debugExceptionWidget.background#fcfcfc
debugExceptionWidget.border#e3e3e3
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#e5e7f4
descriptionForeground#525252cc
diffEditor.border#e3e3e3
diffEditor.diagonalFill#ffffff
diffEditor.insertedLineBackground#75ce8b1a
diffEditor.insertedTextBackground#75ce8b1a
diffEditor.insertedTextBorder#00000000
diffEditor.move.border#0063d34d
diffEditor.moveActive.border#0063d3b3
diffEditor.removedLineBackground#f272751a
diffEditor.removedTextBackground#f272751a
diffEditor.removedTextBorder#00000000
diffEditor.unchangedCodeBackground#ebebeb
diffEditor.unchangedRegionBackground#ebebeb
diffEditor.unchangedRegionShadow#00000012
diffEditorGutter.insertedLineBackground#00000000
diffEditorGutter.removedLineBackground#00000000
diffEditorOverview.insertedForeground#83c09226
diffEditorOverview.removedForeground#e67e8030
disabledForeground#5252524d
dropdown.background#f2f2f2
dropdown.border#dedede
dropdown.foreground#525252
dropdown.listBackground#f2f2f2
editor.background#f7f7f7
editor.findMatchBackground#0063d330
editor.findMatchBorder#0063d361
editor.findMatchHighlightBackground#0063d33d
editor.findMatchHighlightBorder#0063d35c
editor.foldBackground#0000000d
editor.foldPlaceholderForeground#444b61
editor.foreground#525252
editor.hoverHighlightBackground#0063d34d
editor.inactiveSelectionBackground#0063d34d
editor.lineHighlightBackground#0063d30f
editor.lineHighlightBorder#0063d308
editor.linkedEditingBackground#008d9033
editor.rangeHighlightBackground#0063d33d
editor.selectionBackground#0063d34d
editor.selectionForeground#525252
editor.selectionHighlightBackground#0063d314
editor.selectionHighlightBorder#0063d34d
editor.wordHighlightBackground#0063d31f
editor.wordHighlightBorder#0063d33d
editor.wordHighlightStrongBackground#0063d33d
editorBracketHighlight.foreground1#0063d3
editorBracketHighlight.foreground2#6B2FBA
editorBracketHighlight.foreground3#008D90
editorBracketHighlight.foreground4#6B2FBA
editorBracketHighlight.foreground5#6B2FBA
editorBracketHighlight.foreground6#444b61
editorBracketHighlight.unexpectedBracket.foreground#e67e80
editorBracketMatch.background#0063d34d
editorBracketMatch.border#0063d373
editorCodeLens.foreground#00000080
editorCursor.background#d3e8ff
editorCursor.foreground#0063d3
editorError.border#00000000
editorError.foreground#e67e80
editorGhostText.border#00000000
editorGhostText.foreground#52525270
editorGroup.border#e3e3e3
editorGroup.dropBackground#0063d314
editorGroupHeader.border#00000000
editorGroupHeader.noTabsBackground#f7f7f7
editorGroupHeader.tabsBackground#eeeeee
editorGroupHeader.tabsBorder#e3e3e3
editorGutter.addedBackground#83c092cc
editorGutter.background#f7f7f7
editorGutter.commentRangeForeground#fcfcfc
editorGutter.deletedBackground#e67e80cc
editorGutter.modifiedBackground#a7c080cc
editorHoverWidget.background#fcfcfc
editorHoverWidget.border#e3e3e3
editorIndentGuide.activeBackground1#444b6133
editorIndentGuide.background1#444b610d
editorInfo.border#00000000
editorInlayHint.background#0000001a
editorInlayHint.foreground#000000b3
editorInlayHint.parameterBackground#0000001a
editorInlayHint.parameterForeground#444b61b3
editorInlayHint.typeBackground#444b611a
editorInlayHint.typeForeground#444b61b3
editorLineNumber.activeForeground#444b61
editorLineNumber.foreground#c5c7d2
editorLink.activeForeground#525252
editorMarkerNavigation.background#eeeeee
editorMarkerNavigationError.background#e67e808f
editorMarkerNavigationInfo.background#a7c0808f
editorMarkerNavigationWarning.background#dbbc7f8f
editorOverviewRuler.addedForeground#83c09280
editorOverviewRuler.border#e3e3e3
editorOverviewRuler.deletedForeground#e67e8080
editorOverviewRuler.errorForeground#e67e80
editorOverviewRuler.incomingContentForeground#83c09280
editorOverviewRuler.infoForeground#a7c08080
editorOverviewRuler.modifiedForeground#a7c08080
editorOverviewRuler.selectionHighlightForeground#0063d380
editorOverviewRuler.warningForeground#dbbc7f
editorRuler.foreground#444b610d
editorStickyScroll.shadow#00000012
editorStickyScrollHover.background#ffffff
editorSuggestWidget.background#fcfcfc
editorSuggestWidget.border#e3e3e3
editorSuggestWidget.foreground#444b61
editorSuggestWidget.highlightForeground#0063d3
editorSuggestWidget.selectedBackground#eaeaea
editorSuggestWidget.selectedIconForeground#525252
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#000000aa
editorWarning.border#00000000
editorWarning.foreground#dbbc7f
editorWhitespace.foreground#444b6160
editorWidget.background#fcfcfc
editorWidget.border#dedede
editorWidget.resizeBorder#0063d350
errorForeground#e67e80
errorLens.errorForeground#e67e80fc
errorLens.hintForeground#a7c080fc
errorLens.infoForeground#a7c080fc
errorLens.warningForeground#dbbc7ffc
extensionButton.background#0063d380
extensionButton.foreground#000000
extensionButton.hoverBackground#0063d399
extensionButton.prominentBackground#0063d39d
extensionButton.prominentHoverBackground#0063d3
focusBorder#c4c4c4
foreground#000000
gitDecoration.conflictingResourceForeground#0063d3
gitDecoration.deletedResourceForeground#e67e80
gitDecoration.ignoredResourceForeground#444b614d
gitDecoration.modifiedResourceForeground#a7c080
gitDecoration.untrackedResourceForeground#83c092
icon.foreground#0000004d
inlineChat.background#ffffff
inlineChat.border#dedede
inlineChatInput.background#fcfcfc
inlineChatInput.border#dedede
inlineChatInput.focusBorder#c4c4c4
inlineEdit.gutterIndicator.background#00000080
inlineEdit.gutterIndicator.primaryBackground#3a96ffb3
inlineEdit.gutterIndicator.primaryBorder#3a96ff00
inlineEdit.gutterIndicator.primaryForeground#000000
inlineEdit.gutterIndicator.secondaryBackground#3a96ffb3
inlineEdit.gutterIndicator.secondaryBorder#3a96ff00
inlineEdit.gutterIndicator.secondaryForeground#000000
inlineEdit.gutterIndicator.successfulBackground#c7e2cdb3
inlineEdit.gutterIndicator.successfulBorder#c7e2cd00
inlineEdit.gutterIndicator.successfulForeground#000000
inlineEdit.modifiedBackground#83c09226
inlineEdit.modifiedBorder#83c092cc
inlineEdit.modifiedChangedLineBackground#83c09214
inlineEdit.modifiedChangedTextBackground#00000000
inlineEdit.originalBackground#aa373126
inlineEdit.originalBorder#aa3731cc
inlineEdit.originalChangedLineBackground#aa3731cc
inlineEdit.originalChangedTextBackground#00000000
inlineEdit.tabWillAcceptModifiedBorder#83c092
inlineEdit.tabWillAcceptOriginalBorder#AA3731
input.background#f2f2f2
input.border#dedede
input.foreground#525252
input.placeholderForeground#ababab
inputOption.activeBackground#ababab
inputOption.activeBorder#00000000
inputOption.activeForeground#525252
inputOption.hoverBackground#dedede
inputValidation.errorBackground#fcfcfc
inputValidation.errorBorder#e67e80
inputValidation.infoBackground#fcfcfc
inputValidation.infoBorder#a7c080
inputValidation.warningBackground#fcfcfc
inputValidation.warningBorder#dbbc7f
keybindingLabel.background#fcfcfc
keybindingLabel.border#444b61
keybindingLabel.bottomBorder#444b61
keybindingLabel.foreground#000000
list.activeSelectionBackground#0063d31a
list.activeSelectionForeground#525252
list.dropBackground#0063d315
list.errorForeground#e67e80
list.focusAndSelectionOutline#0063d3e6
list.focusBackground#0063d340
list.focusForeground#000000
list.focusOutline#0063d3e6
list.highlightForeground#0063d3
list.hoverBackground#444b611a
list.hoverForeground#000000
list.inactiveSelectionBackground#004ba00d
list.inactiveSelectionForeground#525252
list.warningForeground#dbbc7f
menu.background#fcfcfc
menu.border#e3e3e3
menu.foreground#444b61
menu.selectionBackground#eeeeee
menu.selectionForeground#1a1d25
menu.separatorBackground#e3e3e380
menubar.selectionBackground#e5e5e5
menubar.selectionForeground#444b61
merge.border#e3e3e3
merge.commonContentBackground#0063d330
merge.commonHeaderBackground#0063d380
merge.currentContentBackground#83c09230
merge.currentHeaderBackground#83c09280
merge.incomingContentBackground#a7c08030
merge.incomingHeaderBackground#a7c08080
minimap.background#f7f7f7
minimap.errorHighlight#e67e80
minimap.findMatchHighlight#0063d3
minimap.selectionHighlight#0063d3
minimap.selectionOccurrenceHighlight#0063d3
minimap.warningHighlight#dbbc7f
minimapGutter.addedBackground#83c092
minimapGutter.deletedBackground#e67e80
minimapGutter.modifiedBackground#a7c080
multiDiffEditor.border#e3e3e3
multiDiffEditor.headerBackground#eaeaea
notificationCenterHeader.background#fcfcfc
notificationCenterHeader.foreground#525252
notificationLink.foreground#0063d3
notifications.background#fcfcfc
notifications.border#e3e3e3
notifications.foreground#000000
notificationsErrorIcon.foreground#AA3731
notificationsInfoIcon.foreground#008D90
notificationsWarningIcon.foreground#008D90
panel.background#f2f2f2
panel.border#e3e3e3
panel.dropBorder#444b6180
panelInput.border#dedede
panelSection.border#e3e3e3
panelSectionHeader.background#e5e5e5
panelSectionHeader.border#e3e3e3
panelSectionHeader.foreground#525252
panelTitle.activeBorder#0063d3
panelTitle.activeForeground#444b61
panelTitle.inactiveForeground#75798a
peekView.border#e3e3e3
peekViewEditor.background#ffffff
peekViewEditor.matchHighlightBackground#fcfcfc40
peekViewEditor.matchHighlightBorder#00000000
peekViewEditorGutter.background#ffffff
peekViewEditorStickyScroll.background#ffffff
peekViewResult.background#fdfdfd
peekViewResult.fileForeground#525252
peekViewResult.lineForeground#000000
peekViewResult.matchHighlightBackground#0063d380
peekViewResult.selectionBackground#0063d333
peekViewResult.selectionForeground#525252
peekViewTitle.background#ffffff
peekViewTitleDescription.foreground#525252
peekViewTitleLabel.foreground#525252
pickerGroup.border#e3e3e3
pickerGroup.foreground#525252
profileBadge.background#0063d3
profileBadge.foreground#f7f7f7
progressBar.background#0063d3
quickInput.background#ffffff
quickInput.foreground#000000
quickInputList.focusBackground#0063d31a
quickInputList.focusForeground#000000
quickInputList.focusIconForeground#525252
quickInputTitle.background#eeeeee
sash.hoverBorder#0063d350
scmGraph.foreground1#008D90
scmGraph.foreground2#6B2FBA
scmGraph.foreground3#0063d3
scmGraph.foreground4#6B2FBA
scmGraph.foreground5#444b61
scmGraph.historyItemBaseRefColor#6B2FBA
scmGraph.historyItemHoverAdditionsForeground#83c092
scmGraph.historyItemHoverDefaultLabelBackground#000000
scmGraph.historyItemHoverDefaultLabelForeground#000000
scmGraph.historyItemHoverDeletionsForeground#e67e80
scmGraph.historyItemHoverLabelForeground#000000
scmGraph.historyItemRefColor#0063d3
scmGraph.historyItemRemoteRefColor#008D90
scrollbar.shadow#00000012
scrollbarSlider.activeBackground#5252524d
scrollbarSlider.background#52525226
scrollbarSlider.hoverBackground#52525233
selection.background#0063d361
settings.headerForeground#525252
settings.modifiedItemIndicator#0063d3
settings.settingsHeaderHoverForeground#525252
sideBar.background#eeeeee
sideBar.border#e3e3e3
sideBar.foreground#444b61cc
sideBarSectionHeader.background#eeeeee
sideBarSectionHeader.border#e3e3e3
sideBarSectionHeader.foreground#525252
sideBarStickyScroll.background#e9e9e9
sideBarStickyScroll.shadow#00000012
sideBarTitle.foreground#444b61
statusBar.background#f7f7f7
statusBar.border#e3e3e3
statusBar.debuggingBackground#d3d7f1
statusBar.debuggingForeground#3e455d
statusBar.foreground#00000080
statusBar.noFolderBackground#eeeeee
statusBar.noFolderBorder#e3e3e3
statusBar.noFolderForeground#000000cc
statusBarItem.activeBackground#fcfcfc
statusBarItem.compactHoverBackground#0063d3cc
statusBarItem.errorBackground#e67e80
statusBarItem.errorForeground#f7f7f7
statusBarItem.errorHoverBackground#eea9aa
statusBarItem.errorHoverForeground#f7f7f7
statusBarItem.hoverBackground#c1c8ed
statusBarItem.hoverForeground#525252
statusBarItem.offlineBackground#6B2FBA
statusBarItem.offlineForeground#f7f7f7
statusBarItem.offlineHoverBackground#854bd1
statusBarItem.offlineHoverForeground#f7f7f7
statusBarItem.prominentBackground#f7f7f7
statusBarItem.prominentForeground#f7f7f7
statusBarItem.prominentHoverBackground#ffffff
statusBarItem.prominentHoverForeground#f7f7f7
statusBarItem.remoteBackground#6B2FBA
statusBarItem.remoteForeground#f7f7f7
statusBarItem.remoteHoverBackground#854bd1
statusBarItem.remoteHoverForeground#f7f7f7
statusBarItem.warningBackground#dbbc7f
statusBarItem.warningForeground#f7f7f7
statusBarItem.warningHoverBackground#e6d1a7
statusBarItem.warningHoverForeground#f7f7f7
tab.activeBackground#f7f7f7
tab.activeBorder#f7f7f7
tab.activeBorderTop#0063d3
tab.activeForeground#525252
tab.border#e3e3e3
tab.hoverBackground#e8e8e8
tab.hoverForeground#444b61
tab.inactiveBackground#eeeeee
tab.inactiveForeground#767b8b
tab.lastPinnedBorder#e3e3e3
terminal.ansiBlack#f7f7f7
terminal.ansiBlue#a7c080
terminal.ansiBrightBlack#bfbfbf
terminal.ansiBrightBlue#addd64
terminal.ansiBrightCyan#660cdd
terminal.ansiBrightGreen#67dc84
terminal.ansiBrightMagenta#660cdd
terminal.ansiBrightRed#fd676a
terminal.ansiBrightWhite#858585
terminal.ansiBrightYellow#0063d3
terminal.ansiCyan#6B2FBA
terminal.ansiGreen#83c092
terminal.ansiMagenta#6B2FBA
terminal.ansiRed#e67e80
terminal.ansiWhite#525252
terminal.ansiYellow#0063d3
terminal.background#f2f2f2
terminal.foreground#525252
terminal.selectionForeground#525252
terminalCursor.background#f7f7f7
terminalCursor.foreground#0063d3
terminalStickyScrollHover.background#ffffff
textBlockQuote.background#a7c08033
textBlockQuote.border#a7c080b9
textCodeBlock.background#a7c08033
textLink.activeForeground#0063d3
textLink.foreground#0063d3
textPreformat.background#d3d7f1
textPreformat.foreground#001b3a
textSeparator.foreground#0063d3
titleBar.activeBackground#eeeeee
titleBar.activeForeground#52525299
titleBar.border#e3e3e3
titleBar.inactiveBackground#eeeeee
titleBar.inactiveForeground#52525299
toolbar.activeBackground#444b6180
toolbar.hoverBackground#e5e5e5
tree.indentGuidesStroke#444b6133
walkThrough.embeddedEditorBackground#f7f7f7
welcomePage.progress.background#fcfcfc
welcomePage.progress.foreground#0063d3
welcomePage.tileBackground#0000001a
welcomePage.tileBorder#00000033
welcomePage.tileHoverBackground#00000033
widget.border#dedede
widget.shadow#0000000d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
support.module.elm, entity.other.inherited-class.python, variable.other.object, support.other.namespace.php, entity.other.attribute-name.namespace.xml, record.accessor, entity.name.record.field.accessor, storage.modifier.import.java, storage.modifier.import.groovy, meta.import.swift entity.name.type.swift, meta.member.access.python, variable.other.property.ts, variable.other.property.js, constant.language.symbol.elixir, punctuation.tag.liquid support.class.liquid, meta.scriptblock.powershell meta.group.simple.subexpression.powershell meta.group.simple.subexpression.powershell meta.scriptblock.powershell meta.scriptblock.powershell support.variable.automatic.powershell punctuation.definition.variable.powershell, meta.scriptblock.powershell meta.group.simple.subexpression.powershell meta.group.simple.subexpression.powershell meta.scriptblock.powershell meta.scriptblock.powershell support.variable.automatic.powershell, source.cpp meta.block.class.cpp meta.body.class.cpp, source.cpp meta.block.class.cpp meta.body.class.cpp meta.function.definition.special.constructor.cpp meta.body.function.definition.special.constructor.cpp	#008D90	—
entity.name.type	#0063d3	—
comment, punctuation.definition.comment, string.quoted.docstring.multi, comment.block.documentation source	#444b6166	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	#444b61	—
constant, support.constant.core.php	#AA3731	—
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	#6B2FBA	—
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	#0063d3	—
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	#008D90	—
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	#0063d3	—
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	#0063d3	—
meta.object-literal.key, variable.object.property	#444b61	—
keyword.other.definition.ini, support.type.property-name, entity.name.tag.yaml, storage.type.function.arrow.tsx	#0063d3	—
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	#6B2FBA	—
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	#444b6166	—
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	#008D90	—
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	#6B2FBA	—
storage.type.interface, keyword.control.export.tsx	#0063d3	—
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	#8C6C41	—
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	#084c98cc	—
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	#6B2FBA	—
support.type	#0063d3	—
punctuation.terminator, support.variable, meta.definition.variable, variable, variable.language, entity.name.type.class.js, entity.name.variable, support.variable.magic, meta.method.body, entity.name.variable, punctuation.definition.variable, meta.class variable.object.property, variable.other.constant entity.name.function, entity.name.variable.tuple-element.cs punctuation.separator.colon.cs, meta.definition.variable.name.groovy, meta.body.struct.cpp, parameter.variable.function.elixir, meta.directive.edge source.js, meta.function.echo.edge source.js, text.html.edge meta.function.echo.edge meta.function-call.js, source.css variable.parameter.keyframe-list.css, source.css meta.property-value.css, source.css.scss meta.at-rule.keyframes.scss entity.name.function.scss, source.css.scss meta.property-value.scss, entity.name.variable.tuple-element, meta.group.simple.subexpression.powershell support.variable.automatic.powershell, support.variable.automatic.powershell, storage.source.cmake, entity.source.cmake	#444b61	—
source.elm constant.type-constructor, support.class	#6B2FBA	—
source.elm storage.type	#6B2FBA	—
entity.name.tag, entity.name.tag.other.html, support.class.component.tsx, support.class.component.html	#6B2FBA	—
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	#8C6C41	—
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	#AA3731	—
source.diff meta.diff.header.command	#008D90	—
source.diff punctuation.definition.range.diff, source.diff meta.diff.range.unified	#008D90	—
support.variable.liquid, support.class.liquid	#444b61	—
text.html.basic entity.name, source.js-ignored-vscode, meta.embedded.block.blade constant.other.php, meta.embedded.block.blade keyword.operator.comparison.php, meta.embedded.block.blade keyword.operator.arithmetic.php, meta.tag.start.svelte keyword.control.svelte, meta.tag.end.svelte keyword.control.svelte	#008D90	—
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	#008d90b3	—
entity.other.attribute-name, entity.name.tag.liquid, invalid.deprecated.entity.other.attribute-name, meta.embedded.block.blade storage.type.php	#008D90	—
markup.inline.raw.string.markdown, punctuation.definition.raw.markdown, markup.fenced_code.block.markdown, markup.fenced_code.block.markdown punctuation, markup.raw.block.markdown	#6B2FBA	—
fenced_code.block.language	#6B2FBA	—
punctuation.definition.list.begin	#008D90	—
punctuation.definition.list.begin	#008D90	—
entity.name.section, markup.heading.setext	#0063d3	—
punctuation.definition.heading	#0063d3	—
markup.underline.link, markup.underline.link.image	#008D90	—
markup.bold, punctuation.definition.bold	#444b61	bold
markup.strikethrough, punctuation.definition.strikethrough	#AA3731	—
markup.italic, punctuation.definition.italic	#008D90	italic
markup.quote, markup.quote.markdown punctuation.definition.quote.begin	#6B2FBA	—
punctuation.definition.quote.begin	#008D90	—
meta.embedded.block.frontmatter punctuation.definition.tag.begin, meta.embedded.block.frontmatter punctuation.definition.tag.end, meta.embedded.block.frontmatter string.unquoted.plain.out	#444b61	italic
entity.other.attribute-name.pseudo-class	#6B2FBA	—
entity.other.attribute-name.pseudo-element	#6B2FBA	—
entity.other.attribute-name.class, entity.other.attribute-name.class punctuation.definition.entity, support.type.property-name.json	#6B2FBA	—
entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity	#6B2FBA	—
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	#525252	—
source.css.scss entity.other.attribute-name.id , source.css entity.other.attribute-name.id , entity.other.attribute-name.id punctuation.definition.entity	#6B2FBA	—
entity.name.tag.reference, meta.property-list	#008D90	—
keyword.other.unit	#AA3731	—
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	#0063d3	—
constant.numeric	#AA3731	—
entity.name.tag.css, meta.property-list.scss entity.name.tag.css	#008D90	—

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