Catppuccin Noctis

Name: Catppuccin Noctis
Author: Alex Dauenhauer

Publisher: Alex DauenhauerThemes in package: 5

Catppuccin palette with Noctis syntax highlighting!

GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Catppuccin Noctis — Catppuccin Noctis Macchiato

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#00000000
activityBar.activeBorder#00000000
activityBar.activeFocusBorder#00000000
activityBar.background#181926
activityBar.border#00000000
activityBar.foreground#b7bdf8
activityBar.inactiveForeground#5b6078
activityBarBadge.background#b7bdf8
activityBarBadge.foreground#181926
badge.background#363a4f
badge.foreground#a5adcb
breadcrumb.activeSelectionForeground#b7bdf8
breadcrumb.background#24273a
breadcrumb.focusForeground#cad3f5
breadcrumb.foreground#a5adcb
breadcrumbPicker.background#24273a
button.background#363a4f
button.border#b7bdf88a
button.foreground#cad3f5
button.hoverBackground#494d64
button.secondaryBackground#363a4f
button.secondaryForeground#cad3f5
button.secondaryHoverBackground#494d64
button.separator#b7bdf88a
charts.blue#8aadf4
charts.foreground#cad3f5
charts.green#a6da95
charts.lines#b7bdf88a
charts.orange#f5a97f
charts.purple#c6a0f6
charts.red#ed8796
charts.yellow#eed49f
checkbox.background#24273a
checkbox.border#b7bdf88a
checkbox.foreground#b7bdf8
commandCenter.activeBackground#181926
commandCenter.activeForeground#a5adcb
commandCenter.background#181926
commandCenter.border#b7bdf88a
commandCenter.foreground#a5adcb
commandCenter.inactiveBorder#b7bdf88a
debugConsole.errorForeground#ed8796
debugConsole.infoForeground#8bd5ca
debugConsole.sourceForeground#cad3f5
debugConsole.warningForeground#eed49f
debugConsoleInputIcon.foreground#cad3f5
debugExceptionWidget.background#363a4f
debugExceptionWidget.border#c6a0f6
debugIcon.breakpointCurrentStackframeForeground#eed49f
debugIcon.breakpointDisabledForeground#5b6078
debugIcon.breakpointForeground#ed8796
debugIcon.breakpointStackframeForeground#a6da95
debugIcon.breakpointUnverifiedForeground#5b6078
debugIcon.continueForeground#8aadf4
debugIcon.disconnectForeground#ed8796
debugIcon.pauseForeground#eed49f
debugIcon.restartForeground#a6da95
debugIcon.startForeground#a6da95
debugIcon.stepBackForeground#8aadf4
debugIcon.stepIntoForeground#91d7e3
debugIcon.stepOutForeground#7dc4e4
debugIcon.stepOverForeground#8bd5ca
debugIcon.stopForeground#ed8796
debugTokenExpression.boolean#8aadf4
debugTokenExpression.error#ed8796
debugTokenExpression.name#c6a0f6
debugTokenExpression.number#8bd5ca
debugTokenExpression.string#f5a97f
debugTokenExpression.value#5b6078
debugToolBar.background#1e2030
debugToolBar.border#b7bdf85c
debugView.exceptionLabelBackground#ed8796a6
debugView.exceptionLabelForeground#cad3f5
debugView.stateLabelBackground#1e2030
debugView.stateLabelForeground#cad3f5
debugView.valueChangedHighlight#8aadf4
descriptionForeground#b7bdf8
diffEditor.border#5b6078
diffEditor.insertedTextBackground#91d7e320
diffEditor.removedTextBackground#ed879620
disabledForeground#a5adcb
dropdown.background#24273a
dropdown.border#b7bdf88a
dropdown.foreground#b7bdf8
dropdown.listBackground#1e2030
editor.background#24273a
editor.findMatchBackground#1819264b
editor.findMatchBorder#eed49faf
editor.findMatchHighlightBackground#1819264b
editor.findMatchHighlightBorder#f5a97faf
editor.findRangeHighlightBackground#1819264b
editor.findRangeHighlightBorder#f5a97faf
editor.focusedStackFrameHighlightBackground#a6da9546
editor.foldBackground#24273a8a
editor.foreground#cad3f5
editor.hoverHighlightBackground#5b607882
editor.inactiveSelectionBackground#5b607882
editor.lineHighlightBackground#181926
editor.lineHighlightBorder#00000000
editor.linkedEditingBackground#ed879649
editor.rangeHighlightBackground#5b607882
editor.rangeHighlightBorder#00000000
editor.selectionBackground#5b607882
editor.selectionHighlightBackground#1819264b
editor.selectionHighlightBorder#b7bdf88a
editor.snippetFinalTabstopHighlightBackground#5b6078
editor.snippetFinalTabstopHighlightBorder#5b6078
editor.snippetTabstopHighlightBackground#5b6078
editor.snippetTabstopHighlightBorder#5b6078
editor.stackFrameHighlightBackground#eed49f3b
editor.symbolHighlightBackground#1819264b
editor.wordHighlightBackground#1819264b
editor.wordHighlightBorder#c6a0f68a
editor.wordHighlightStrongBackground#1819264b
editor.wordHighlightStrongBorder#c6a0f68a
editorBracketHighlight.foreground1#eed49f
editorBracketHighlight.foreground2#c6a0f6
editorBracketHighlight.foreground3#7dc4e4
editorBracketHighlight.foreground4#f5a97f
editorBracketHighlight.foreground5#8bd5ca
editorBracketHighlight.foreground6#ee99a0
editorBracketHighlight.unexpectedBracket.foreground#ed8796
editorBracketMatch.background#181926
editorBracketMatch.border#91d7e38a
editorBracketPairGuide.activeBackground1#eed49f
editorBracketPairGuide.activeBackground2#c6a0f6
editorBracketPairGuide.activeBackground3#7dc4e4
editorBracketPairGuide.activeBackground4#f5a97f
editorBracketPairGuide.activeBackground5#8bd5ca
editorBracketPairGuide.activeBackground6#ee99a0
editorBracketPairGuide.background1#eed49f50
editorBracketPairGuide.background2#c6a0f650
editorBracketPairGuide.background3#7dc4e450
editorBracketPairGuide.background4#f5a97f50
editorBracketPairGuide.background5#8bd5ca50
editorBracketPairGuide.background6#ee99a050
editorCodeLens.foreground#5b6078
editorCursor.background#24273a
editorCursor.foreground#eed49f
editorError.background#00000000
editorError.border#00000000
editorError.foreground#ed8796
editorGroup.border#181926
editorGroup.dropBackground#ed879680
editorGroup.emptyBackground#363a4f33
editorGroup.focusedEmptyBorder#ed8796
editorGroupHeader.noTabsBackground#1e2030
editorGroupHeader.tabsBackground#24273a
editorGroupHeader.tabsBorder#1e2030
editorGutter.addedBackground#a6da95
editorGutter.background#24273a
editorGutter.commentRangeForeground#b7bdf8
editorGutter.deletedBackground#ed8796
editorGutter.foldingControlForeground#b7bdf8
editorGutter.modifiedBackground#7dc4e4
editorHint.border#00000000
editorHint.foreground#a6da95
editorHoverWidget.background#24273a
editorHoverWidget.border#b7bdf88a
editorHoverWidget.foreground#cad3f5
editorHoverWidget.statusBarBackground#8aadf43f
editorIndentGuide.activeBackground1#b7bdf88a
editorIndentGuide.background1#363a4f
editorInfo.background#00000000
editorInfo.border#b7bdf88a
editorInfo.foreground#6e738d
editorInlayHint.background#24273a
editorInlayHint.foreground#6e738d
editorInlayHint.parameterBackground#24273a
editorInlayHint.parameterForeground#6e738d
editorInlayHint.typeBackground#24273a
editorInlayHint.typeForeground#6e738d
editorLightBulb.foreground#eed49f
editorLightBulbAutoFix.foreground#8aadf4
editorLineNumber.activeForeground#b7bdf8
editorLineNumber.foreground#5b6078
editorLink.activeForeground#c6a0f6
editorMarkerNavigation.background#f4dbd605
editorMarkerNavigationError.background#ed8796
editorMarkerNavigationInfo.background#a5adcb
editorMarkerNavigationWarning.background#eed49f
editorOverviewRuler.addedForeground#a6da953a
editorOverviewRuler.background#1e2030
editorOverviewRuler.border#24273a
editorOverviewRuler.bracketMatchForeground#5b6078
editorOverviewRuler.commonContentForeground#5b6078
editorOverviewRuler.currentContentForeground#6e738d
editorOverviewRuler.deletedForeground#ed87963a
editorOverviewRuler.errorForeground#ed879640
editorOverviewRuler.findMatchForeground#8bd5ca8a
editorOverviewRuler.incomingContentForeground#5b6078
editorOverviewRuler.infoForeground#5b6078
editorOverviewRuler.modifiedForeground#8aadf4
editorOverviewRuler.rangeHighlightForeground#f5a97f8a
editorOverviewRuler.selectionHighlightForeground#b7bdf88a
editorOverviewRuler.warningForeground#eed49f
editorOverviewRuler.wordHighlightForeground#c6a0f68a
editorOverviewRuler.wordHighlightStrongForeground#c6a0f68a
editorRuler.foreground#b7bdf88a
editorStickyScrollHover.background#363a4f
editorSuggestWidget.background#1e2030
editorSuggestWidget.border#b7bdf88a
editorSuggestWidget.foreground#cad3f5
editorSuggestWidget.highlightForeground#b7bdf8
editorSuggestWidget.selectedBackground#363a4f
editorWarning.background#00000000
editorWarning.border#00000000
editorWarning.foreground#eed49f
editorWhitespace.foreground#b7bdf88a
editorWidget.background#1e2030
editorWidget.border#b7bdf88a
editorWidget.foreground#cad3f5
editorWidget.resizeBorder#b7bdf88a
errorForeground#ed8796
extensionBadge.remoteBackground#8aadf4
extensionBadge.remoteForeground#1e2030
extensionButton.background#a6da95
extensionButton.foreground#1e2030
extensionButton.hoverBackground#a6da958a
extensionButton.prominentBackground#a6da95
extensionButton.prominentForeground#1e2030
extensionButton.prominentHoverBackground#a6da95
extensionButton.separator#1e2030
extensionIcon.preReleaseForeground#c6a0f68a
extensionIcon.sponsorForeground#f5bde68a
extensionIcon.starForeground#eed49f8a
extensionIcon.verifiedForeground#a6da958a
focusBorder#00000000
foreground#cad3f5
gitDecoration.addedResourceForeground#a6da95
gitDecoration.conflictingResourceForeground#eed49f
gitDecoration.deletedResourceForeground#ed8796
gitDecoration.ignoredResourceForeground#6e738d
gitDecoration.modifiedResourceForeground#91d7e3
gitDecoration.renamedResourceForeground#8bd5ca
gitDecoration.stageDeletedResourceForeground#ed8796
gitDecoration.stageModifiedResourceForeground#eed49f
gitDecoration.submoduleResourceForeground#91d7e3
gitDecoration.untrackedResourceForeground#a6da95
gitlens.closedPullRequestIconColor#ed8796
gitlens.decorations.addedForegroundColor#a6da95
gitlens.decorations.branchAheadForegroundColor#a6da95
gitlens.decorations.branchBehindForegroundColor#f5a97f
gitlens.decorations.branchDivergedForegroundColor#ee99a0
gitlens.decorations.branchUnpublishedForegroundColor#eed49f
gitlens.decorations.branchUpToDateForegroundColor#a5adcb
gitlens.decorations.copiedForegroundColor#8bd5ca
gitlens.decorations.deletedForegroundColor#ed8796
gitlens.decorations.ignoredForegroundColor#6e738d
gitlens.decorations.modifiedForegroundColor#91d7e3
gitlens.decorations.renamedForegroundColor#8bd5ca
gitlens.decorations.untrackedForegroundColor#a6da95
gitlens.graphLane10Color#f0c6c6
gitlens.graphLane1Color#c6a0f6
gitlens.graphLane2Color#a6da95
gitlens.graphLane3Color#ed8796
gitlens.graphLane4Color#eed49f
gitlens.graphLane5Color#91d7e3
gitlens.graphLane6Color#f5bde6
gitlens.graphLane7Color#8bd5ca
gitlens.graphLane8Color#ee99a0
gitlens.graphLane9Color#8aadf4
gitlens.gutterBackgroundColor#cad3f513
gitlens.gutterForegroundColor#b7bdf8
gitlens.gutterUncommittedForegroundColor#91d7e3bd
gitlens.lineHighlightBackgroundColor#91d7e356
gitlens.lineHighlightOverviewRulerColor#ed8796
gitlens.mergedPullRequestIconColor#c6a0f6
gitlens.openPullRequestIconColor#a6da95
gitlens.trailingLineBackgroundColor#18192600
gitlens.trailingLineForegroundColor#5b6078
gitlens.unpublishedCommitIconColor#a6da95
gitlens.unpulledChangesIconColor#ed8796
icon.foreground#b7bdf8
input.background#363a4f
input.border#b7bdf88a
input.foreground#cad3f5
input.placeholderForeground#5b6078
inputOption.activeBackground#5b6078
inputOption.activeBorder#5b6078
inputOption.activeForeground#cad3f5
inputValidation.errorBackground#363a4f
inputValidation.errorBorder#00000000
inputValidation.errorForeground#ed8796
inputValidation.infoBackground#8aadf47c
inputValidation.infoBorder#8aadf4
inputValidation.infoForeground#91d7e3
inputValidation.warningBackground#363a4f
inputValidation.warningBorder#00000000
inputValidation.warningForeground#eed49f
list.activeSelectionBackground#363a4f
list.activeSelectionForeground#b7bdf8
list.dropBackground#ed879680
list.errorForeground#ed8796
list.focusBackground#cad3f520
list.focusForeground#cad3f5
list.focusOutline#00000000
list.highlightForeground#b7bdf8
list.hoverBackground#363a4f
list.hoverForeground#cad3f5
list.inactiveFocusBackground#1e2030
list.inactiveSelectionBackground#1e2030
list.inactiveSelectionForeground#b7bdf8
list.warningForeground#eed49f
listFilterWidget.background#1e2030
listFilterWidget.noMatchesOutline#1e2030
listFilterWidget.outline#00000000
menu.background#24273a
menu.border#24273a7f
menu.foreground#cad3f5
menu.selectionBackground#1e2030
menu.selectionBorder#00000000
menu.selectionForeground#b7bdf8
menu.separatorBackground#cad3f5
menubar.selectionBackground#1e2030
menubar.selectionBorder#1e2030
menubar.selectionForeground#b7bdf8
merge.border#363a4f00
merge.commonContentBackground#5b60788a
merge.commonHeaderBackground#5b60788a
merge.currentContentBackground#363a4f8a
merge.currentHeaderBackground#a5adcb8a
merge.incomingContentBackground#363a4f8a
merge.incomingHeaderBackground#5b60788a
minimap.background#24273a
minimap.errorHighlight#ed8796ee
minimap.findMatchHighlight#c6a0f6ee
minimap.selectionHighlight#5b60788a
minimap.warningHighlight#eed49fee
minimapGutter.addedBackground#a6da95
minimapGutter.deletedBackground#ee99a0
minimapGutter.modifiedBackground#eed49f
notebook.cellBorderColor#363a4f
notebook.focusedCellBorder#8bd5ca
notebook.focusedEditorBorder#b7bdf88a
notebook.inactiveFocusedCellBorder#00000000
notebook.selectedCellBorder#8bd5ca
notificationCenter.border#1e2030
notificationCenterHeader.background#1e2030
notificationCenterHeader.foreground#5b6078
notificationLink.foreground#7dc4e4
notifications.background#24273a
notifications.border#1e2030
notifications.foreground#cad3f5
notificationsErrorIcon.foreground#ed8796
notificationsInfoIcon.foreground#8aadf4
notificationsWarningIcon.foreground#eed49f
notificationToast.border#1e2030
panel.background#1e2030
panel.border#1e203000
panelSection.border#5b6078
panelSection.dropBackground#5b607899
panelTitle.activeBorder#b7bdf88a
panelTitle.activeForeground#a5adcb
panelTitle.inactiveForeground#a5adcb
peekView.border#b7bdf88a
peekViewEditor.background#1e2030
peekViewEditor.matchHighlightBackground#1e2030
peekViewEditor.matchHighlightBorder#f5a97f
peekViewEditorGutter.background#1e2030
peekViewResult.background#1e2030
peekViewResult.fileForeground#cad3f5
peekViewResult.lineForeground#5b6078
peekViewResult.matchHighlightBackground#1e2030
peekViewResult.selectionBackground#363a4f
peekViewResult.selectionForeground#cad3f5
peekViewTitle.background#1e2030
peekViewTitleDescription.foreground#5b6078
peekViewTitleLabel.foreground#cad3f5
pickerGroup.border#b7bdf88a
pickerGroup.foreground#b7bdf8
progressBar.background#b7bdf8
quickInput.background#24273a
quickInput.foreground#a5adcb
quickInputList.focusBackground#cad3f520
sash.hoverBorder#b7bdf8
scrollbar.shadow#181926
scrollbarSlider.activeBackground#b7bdf850
scrollbarSlider.background#cad3f520
scrollbarSlider.hoverBackground#181926
selection.background#b7bdf840
settings.checkboxBackground#1e2030
settings.checkboxBorder#b7bdf88a
settings.checkboxForeground#cad3f5
settings.dropdownBackground#1e2030
settings.dropdownBorder#b7bdf88a
settings.dropdownForeground#cad3f5
settings.dropdownListBorder#b7bdf88a
settings.focusedRowBackground#24273a
settings.focusedRowBorder#f0c6c6
settings.headerForeground#b7bdf8
settings.modifiedItemIndicator#8bd5ca
settings.numberInputBackground#1e2030
settings.numberInputBorder#b7bdf88a
settings.numberInputForeground#cad3f5
settings.textInputBackground#1e2030
settings.textInputBorder#b7bdf88a
settings.textInputForeground#cad3f5
sideBar.background#1e2030
sideBar.border#1e2030
sideBar.dropBackground#1e2030
sideBar.foreground#a5adcb
sideBarSectionHeader.background#1e2030
sideBarSectionHeader.border#1e2030
sideBarSectionHeader.foreground#a5adcb
sideBarTitle.foreground#cad3f5
statusBar.background#1e2030
statusBar.border#00000000
statusBar.debuggingBackground#f5a97f
statusBar.debuggingBorder#f5a97f
statusBar.debuggingForeground#181926
statusBar.foreground#5b6078
statusBar.noFolderBackground#1e2030
statusBar.noFolderBorder#363a4f
statusBar.noFolderForeground#5b6078
statusBarItem.activeBackground#5b6078
statusBarItem.errorBackground#1e2030
statusBarItem.errorForeground#ed8796
statusBarItem.hoverBackground#181926
statusBarItem.hoverForeground#b7bdf8
statusBarItem.prominentBackground#1e2030
statusBarItem.prominentForeground#5b6078
statusBarItem.prominentHoverBackground#181926
statusBarItem.prominentHoverForeground#7dc4e4
statusBarItem.remoteBackground#b7bdf8
statusBarItem.remoteForeground#181926
statusBarItem.remoteHoverBackground#c6a0f6
statusBarItem.remoteHoverForeground#181926
statusBarItem.warningBackground#181926
statusBarItem.warningForeground#eed49f
tab.activeBackground#24273a
tab.activeBorder#b7bdf88a
tab.activeBorderTop#b7bdf88a
tab.activeForeground#cad3f5
tab.activeModifiedBorder#a5adcb
tab.border#24273a
tab.inactiveBackground#24273a
tab.inactiveForeground#a5adcb
tab.inactiveModifiedBorder#ed8796
tab.unfocusedActiveBackground#24273a
tab.unfocusedActiveBorder#5b6078
tab.unfocusedActiveForeground#cad3f5
tab.unfocusedActiveModifiedBorder#ed8796
tab.unfocusedHoverBackground#c6a0f621
tab.unfocusedInactiveForeground#b7bdf8
tab.unfocusedInactiveModifiedBorder#ed8796
terminal.ansiBlack#1e2030
terminal.ansiBlue#8aadf4
terminal.ansiBrightBlack#5b6078
terminal.ansiBrightBlue#8aadf4
terminal.ansiBrightCyan#91d7e3
terminal.ansiBrightGreen#a6da95
terminal.ansiBrightMagenta#c6a0f6
terminal.ansiBrightRed#ed8796
terminal.ansiBrightWhite#cad3f5
terminal.ansiBrightYellow#eed49f
terminal.ansiCyan#91d7e3
terminal.ansiGreen#a6da95
terminal.ansiMagenta#c6a0f6
terminal.ansiRed#ed8796
terminal.ansiWhite#cad3f5
terminal.ansiYellow#eed49f
terminal.background#1e2030
terminal.border#5b6078
terminal.dropBackground#5b607899
terminal.foreground#cad3f5
terminal.selectionBackground#5b6078
terminalCursor.background#1e2030
terminalCursor.foreground#eed49f
textBlockQuote.background#363a4f
textBlockQuote.border#c6a0f6
textCodeBlock.background#363a4f
textLink.activeForeground#c6a0f6
textLink.foreground#7dc4e4
textPreformat.foreground#f5a97f
textSeparator.foreground#363a4f
titleBar.activeBackground#181926
titleBar.activeForeground#cad3f5
titleBar.border#00000000
titleBar.inactiveBackground#181926
titleBar.inactiveForeground#a5adcb
tree.indentGuidesStroke#494d64
walkThrough.embeddedEditorBackground#363a4f
welcomePage.progress.background#181926
welcomePage.progress.foreground#8bd5ca
welcomePage.tileBackground#1e2030
widget.shadow#181926
window.activeBorder#00000000
window.inactiveBorder#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, punctuation.definition.tag, comment.block.documentation punctuation.definition.bracket, source.ocaml comment constant.regexp meta.separator, markup.other.anchor support.constant, markup.fenced_code, markup.fenced_code punctuation.definition	#6e738d	—
string.quoted.docstring.multi, string.quoted.docstring.multi punctuation.definition.string, markup.fenced_code.block	#939ab7	—
constant.character, constant.escape, text.html.markdown, punctuation.definition.list_item, keyword.begin.tag.ejs, constant.name.attribute.tag.pug, source.clojure meta.symbol, constant.other.description.jsdoc, keyword.other.array.phpdoc.php, keyword.operator.other.powershell, meta.link.inline punctuation.definition.string, source.sql, source meta.brace, source punctuation, text.html punctuation, markup meta punctuation.definition, meta.bracket.julia, meta.array.julia, punctuation.separator.key-value, entity.name.footnote, source.ocaml punctuation.definition.tag, source.ocaml entity.name.filename, source.reason entity.name.filename, entity.other.attribute-name strong, binding.fsharp keyword.symbol.fsharp, entity.name.record.field.elm, entity.name.record.field.accessor.elm, storage.modifier.array.bracket, source.css entity.other, meta.attribute-selector punctuation.definition.entity, markup.other.anchor string	#cad3f5	—
support.type.property-name.json, source.json meta.structure.dictionary.json support.type.property-name.json	#f4dbd6	—
keyword, keyword.control, keyword.other.template, keyword.other.substitution, storage.modifier, meta.tag.sgml, punctuation.accessor, constant.other.color, entity.name.section, markup.heading, markup.heading punctuation.definition, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, storage.type.function.pug, text.pug storage.type, text.pug meta.tag.other, source.clojure storage.control, meta.expression.clojure, punctuation.separator.slice.python, punctuation.separator.question-mark.cs, punctuation.definition.parameters.varargs, source.go keyword.operator, punctuation.separator.pointer-access, punctuation.separator.other.ruby, keyword.package, keyword.import, punctuation.definition.keyword, punctuation.separator.hash.cs, entity.other.attribute-name.pseudo-class.css punctuation.definition.entity.css, entity.other.attribute-name.pseudo-element.css punctuation.definition.entity.css, source.kotlin storage.type.import, source.kotlin storage.type.package, constant.string.documentation.powershell, punctuation.section.directive, storage.type.rust, punctuation.definition.attribute, punctuation.definition.preprocessor, punctuation.separator.namespace, punctuation.separator.method, keyword.control punctuation.definition.function, source.ocaml variable.interpolation string, source.reason variable.interpolation, punctuation.definition.directive, storage.type.modifier, keyword.other.class.fileds, source.toml entity.other.attribute-name, source.css entity.name.tag.custom, sharing.modifier, keyword.control.class.ruby, keyword.control.def.ruby	#c6a0f6	—
variable, variable.object, variable.other, variable.parameter, support, entity.name.module, variable.import.parameter, variable.other.class, meta.toc-list.id.html, meta.var.clojure, entity.name.variable, source.java meta.class.body.java, entity.name.package.go, source.c, source.cpp, source.go, source.python, source.ruby, source.coffee.embedded.source, source.coffee, storage.modifier.import, storage.modifier.package, storage.type.annotation, punctuation.definition.annotation, source.groovy.embedded.source, punctuation.definition.variable, source.powershell, string.quoted.interpolated.vala constant.character.escape.vala, source.apacheconf, source.objc, source.crystal, string.quoted.double.kotlin entity.string.template.element.kotlin, entity.name.package.kotlin, meta.template.expression.kotlin, parameter.variable.function, variable.other.constant.elixir, source.elixir.embedded.source, source.sql.embedded, punctuation.definition.placeholder, source.swift, source.julia, source.shell, variable.other.normal punctuation.definition.variable.shell, source.reason variable.language, source.reason variable.language string.other.link, source.elm meta.value, source.elm meta.declaration.module, meta.embedded.block variable punctuation.definition.variable.php, string.quoted.double.class.other, source.toml keyword, support.type.nim, source.tf meta.template.expression, source.scala entity.name.import, markup.code	#cad3f5	—
variable.parameter.ts, meta.parameters.ts, variable.parameter.function.language.python	#f5a97f	—
support.variable.property, constant.other.symbol.hashkey.ruby, constant.other.symbol.hashkey.ruby punctuation.definition.constant.ruby, entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity, entity.name.type.annotation.kotlin, support.type.primitive, meta.type.parameters entity.name.type, meta.type.annotation entity.name.type, punctuation.definition.typeparameters, comment.block.documentation.phpdoc.php keyword.other.type.php, storage.type.php, keyword.type, storage.type.cs, storage.type.c, storage.type.objc, punctuation.definition.storage.type.objc, markup punctuation.definition, storage.type.powershell, comment.block.documentation entity.name.type, source.java storage.type, storage.type.primitive, source.groovy storage.type, storage.type.r, source.haskell storage.type, punctuation.separator.clause-head-body, source.go storage.type, storage.type.core.rust, storage.class.std.rust, storage.modifier.lifetime.rust, entity.name.lifetime.rust, support.type.vb, entity.name.type.kotlin, support.type.julia, constant.other.reference, source.graphql support.type, source.reason support.type string, entity.name.type.fsharp, source.elm storage.type, storage.type.user-defined, storage.type.built-in, support.type.builtin, source.swift support.type, support.class.crystal, storage.type.integral, source.cpp storage.type.cpp, source.vala storage.type, source.hlsl storage.type.basic, source.hlsl support.type.other, source.apex storage.type, source.nim storage.type, source.cpp entity.name.type, support.class.builtin, source.tf meta.keyword.string, source.tf meta.keyword.number, source.scala entity.name.class, markup.raw.monospace, markup.mark, markup.meta.attribute-list	#b7bdf8	—
constant, variable.other.constant, support.constant, punctuation.definition.entity, constant.character.entity, support.variable.magic, markup.quote, entity.name.type.type-parameter.cs, punctuation.bracket.angle, entity.name.function.preprocessor.c, storage.type.scala, entity.helper.apacheconf, variable.language.crystal, punctuation.definition.constant, support.constant punctuation.definition.variable, constant.character.math, support.class.math, source.graphql constant.character, source.reason constant.language.list, source.cpp variable.other.enummember, support.variable.class.hideshow, entity.other.attribute-name.class, meta.attribute.id entity.other.attribute-name, text.html entity.other.attribute-name, meta.tag.attributes entity.other.attribute-name, text.xml entity.other.attribute-name, source.cs entity.other.attribute-name, constant.character.format.placeholder, constant.other.placeholder, source.vue entity.other.attribute-name, entity.other.attribute-name.mjml, source.vue meta.directive punctuation.separator.key-value, meta.definition.attribute-entry punctuation.separator	#eed49f	—
markup.bold, markup.italic, punctuation.definition.italic, punctuation.definition.bold, entity.name.tag, variable.language punctuation.definition.variable, keyword.control.clojure, support.type.exception.python, keyword.other.this.cs, keyword.other.base.cs, keyword.other.var.cs, storage.modifier.super, source.go keyword, keyword.function.go, meta.separator, keyword.other.fn.rust, storage.modifier.static.rust, source.r meta.function.r keyword.control.r, storage.type.def, meta.class.identifier storage.modifier, source.scala keyword.declaration, storage.type, comment.block.documentation punctuation.definition.block.tag, comment.block.documentation punctuation.definition.inline.tag, entity.tag.apacheconf, keyword.other.julia, source.julia storage.modifier, constant.language.empty-list.haskell, meta.function.powershell storage.type.powershell, keyword.control.fun, punctuation.terminator.function, keyword.other.rust, keyword.other.declaration-specifier.swift, keyword.control.class, keyword.control.def, source.ocaml keyword markup.underline, source.ocaml storage.type markup.underline, binding.fsharp keyword, function.anonymous keyword, function.anonymous keyword.symbol.fsharp, meta.embedded.block variable.language punctuation.definition.variable.php, keyword.declaration.dart, source.wsd keyword.other.class, source.wsd keyword.other.linebegin, keyword.other.skinparam.keyword, keyword.other.nim, markup.deleted.diff, source.tf support.class.variable, meta.function.lua keyword.control.lua, markup.italic punctuation.definition, markup.bold punctuation.definition, markup.block entity.name.tag	#ed8796	—
string, string.quoted.multi, string.quoted.multi punctuation.definition.string, punctuation.definition.string, source.css support.constant, entity.name.import.go, markup.raw.texttt, markup.inserted.diff, source.scala punctuation.definition.character, constant.character.literal.scala, source.tf entity.name	#a6da95	—
string.template, punctuation.definition.string.template, string.interpolated.python string.quoted.single.python, string.quoted.double.heredoc, string.quoted.interpolated.vala, string.quoted.interpolated.vala punctuation.definition.string, string.regexp.apacheconf, markup.inline.raw.string, markup.inline.raw punctuation.definition.raw, string.quoted.double.interpolated.crystal, string.quoted.double.interpolated.crystal punctuation.definition.string, text.tex markup.raw	#a6da95	—
constant.numeric, constant.language, punctuation.separator.decimal.period.php, keyword.operator.null-conditional.cs, punctuation.separator.question-mark.cs, constant.integer.apacheconf, keyword.operator.nullable-type, constant.language punctuation.definition.variable, constant.others.fsharp, keyword.other.unit, string.quoted.double.skinparam.value, source.toml constant	#ee99a0	—
variable.function, support.type.property-name, entity.name.function, string.other.link, markup.link, support.type.vendored, support.other.variable, meta.function-call.generic.python, meta.method-call.groovy meta.method.groovy, meta.class.body.groovy meta.method.body.java storage.type.groovy, punctuation.definition.decorator, support.function.any-method, text.tex support.function, text.tex punctuation.definition.function, entity.name.section.fsharp entity.name.section.fsharp, support.variable.class.function, keyword.control.cucumber.table, punctuation.decorator, source.tf support.class	#8aadf4	—
entity.name.function.decorator	#8bd5ca	—
entity.name, entity.other, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, support.type, support.class, punctuation.definition.parameters, support.function, support.function.construct, markup.changed.git_gutter, markup.underline.link, markup.underline.link.image, markup.underline, meta.symbol.namespace.clojure, entity.mime-type.apacheconf, keyword.operator.function.infix, entity.name.function.infix, entity.name.function.call.kotlin, text.tex support.function.verb, text.tex support.function.texttt, source.reason constant.language.unit, source.ocaml constant.language constant.numeric entity.other.attribute-name.id.css, source.reason entity.other.attribute-name constant.language constant.numeric, constant.language.unit.fsharp, source.wsd support.class.preprocessings, keyword.language.gherkin.feature.scenario, source.nim keyword.other.common.function, entity.name.type.namespace, entity.name.scope-resolution.function.call, punctuation.definition.arguments.begin.python, punctuation.definition.arguments.end.python	#91d7e3	—
source.js constant.other.object.key.js string.unquoted.label.js, source.js punctuation.section.embedded, punctuation.definition.template-expression, string.interpolated.pug, support.constant.handlebars, source.clojure punctuation.section.set, source.clojure punctuation.section.metadata, entity.global.clojure, punctuation.definition.interpolation, punctuation.section.embedded.begin.ruby, punctuation.section.embedded.end.ruby source.ruby, support.constant.math, entity.namespace.r, meta.method-call.groovy storage.type.groovy, source.scala entity.name.class.declaration, constant.character.escape, support.function.macro.julia, string.replacement.apacheconf, storage.modifier.using.vala, constant.other.haskell, source.objc entity.name.tag, string.quoted.other.literal.upper.crystal punctuation.definition.string, meta.embedded.line.crystal punctuation.section.embedded, meta.embedded.line.crystal punctuation.section.embedded source.crystal, punctuation.section.embedded, punctuation.section.tag, punctuation.section.embedded source.swift, variable.other.bracket punctuation.definition.variable, string.interpolated.dollar punctuation.definition.string, constant.character.escape punctuation.definition.keyword, source.ocaml entity.name.class constant.numeric, source.reason entity.name.class, keyword.format.specifier.fsharp, support.module.elm, meta.embedded.block.php punctuation.definition.variable.php, source.vala storage.type, support.variable.class.group, entity.name.type.class, source.tf meta.keyword.list, source.tf meta.keyword.map, entity.name.class.lua, markup.substitution	#f0c6c6	—
invalid, invalid.illegal	#ed8796	—
variable.language, variable.parameter.function.language.special	#ee99a0	—
token.info-token	#8aadf4	—
token.warn-token	#f5a97f	—
token.error-token	#ed8796	—
token.debug-token	#c6a0f6	—
comment, storage.modifier, punctuation.definition.comment, entity.other, variable.language, support.type.vendored, support.constant.vendored, markup.quote, markup.italic, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, keyword.control.clojure, source.clojure meta.symbol.dynamic, keyword.other.this.cs, keyword.other.base.cs, variable.other.member.c, support.type.core.rust, variable.other.object.property, variable.other.property, source.r meta.function.r keyword.control.r, comment.line.roxygen.r keyword, comment.line.roxygen.r variable.parameter.r, keyword.control.inheritance.coffee, comment.block.documentation.phpdoc.php keyword, keyword.other.array.phpdoc.php, storage.type.modifier, comment.block.javadoc.java keyword, comment.block.javadoc.java variable.parameter.java, keyword.operator.documentation.powershell, storage.type.scala, variable.parameter.function.language.special, comment.block.documentation.scala keyword, comment.block.documentation.scala variable.parameter, support.function.builtin.go, constant.other.symbol.hashkey.ruby, constant.other.symbol.hashkey.ruby punctuation.definition.constant.ruby, constant.other.symbol.ruby, source.vala storage.type.generic, constant.other.table-name, constant.other.placeholder, variable.other.field, entity.alias.import.go, source.swift keyword.other.declaration-specifier, support.variable.swift, keyword.other.capture-specifier, text.tex support.function.emph, constant.other.math, support.function.textit, entity.name.footnote, entity.name.function.directive.graphql, source.graphql support.type.enum, source.ocaml entity.name.filename, source.reason entity.name.filename, abstract.definition.fsharp keyword, abstract.definition.fsharp entity, function.anonymous keyword, entity.name.record.field.accessor.elm, support.type.primitive, support.type.builtin, keyword.type.cs, storage.type.built-in, storage.type.primitive, source.python support.type.python, storage.type.core.rust, source.swift support.type, source.go storage.type, storage.type.php, storage.type.function.kotlin, entity.name.type.kotlin, support.type.julia, variable.other.member, keyword.other.import, keyword.package, keyword.import, source.wsd keyword.control.diagram, keyword.language.gherkin.feature.step, source.hlsl storage.type.basic, source.apex keyword.type, sharing.modifier, source.nim storage.type.concrete, meta.preprocessor.pragma.nim, storage.type.integral, entity.name.scope-resolution.function.call, support.class.builtin, comment.block.documentation storage.type.class, source.tf meta.keyword.string, source.tf meta.keyword.number, source.scala entity.name.class, meta.import keyword.control, keyword.control.export, source.vue meta.directive punctuation.separator.key-value, keyword.local.lua, markup.list, markup.mark.constrained markup.mark, markup.block.open, string.quoted.docstring.multi, string.quoted.multi	—	italic
keyword, keyword.control, keyword.operator, keyword.other.template, keyword.other.substitution, storage.type.function.arrow, constant.other.color, punctuation.accessor, entity.name.section, markup.bold, markup.bold string, markdown.heading, markup.inline.raw punctuation.definition.raw, markup.heading, storage.type.function.pug, storage.type.function.python, storage.type.annotation, punctuation.bracket.angle, keyword.other.new, punctuation.separator.question-mark.cs, storage.type.generic.wildcard, source.go keyword.operator, punctuation.separator.namespace, constant.other.symbol.ruby punctuation.definition.constant.ruby, variable.parameter, support.function.builtin.rust, storage.type.function.coffee, entity.name.variable.parameter, punctuation.separator.hash.cs, constant.other.symbol.ruby punctuation.definition.constant.ruby, constant.other.symbol.hashkey.ruby punctuation.definition.constant.ruby, meta.function.parameters variable.other, entity.name.type.annotation.kotlin, storage.type.objc, parameter.variable.function, markup punctuation.definition, punctuation.section.directive, punctuation.definition.preprocessor, source.ruby punctuation.definition.variable, punctuation.separator.method, support.function.textbf, source.graphql support.type.builtin, source.ocaml variable.interpolation string, entity.name.function.definition.special.constructor, entity.name.function.definition.special.member.destructor., meta.function.parameters variable punctuation.definition.variable.php, source.wsd keyword.other.activity, keyword.control.class.ruby, keyword.control.def.ruby, keyword.function.go, keyword.other.fn.rust, markup.other.anchor, markup.list.bullet, markup.list punctuation.definition, storage.type.class.python	—	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string, text.html punctuation.section.embedded, variable.other.c, storage.modifier.lifetime.rust, entity.name.lifetime.rust, source.rust meta.attribute.rust, meta.attribute.id entity.other.attribute-name, source.ocaml punctuation.definition.tag emphasis, source.tf entity.name, markup.quote punctuation.definition, markup.fenced_code punctuation.definition, fenced_code.block.language	—	bold italic
keyword.begin.tag.ejs, source.python meta.function.decorator.python support.type.python, source.cs keyword.other, keyword.other.var.cs, source.go keyword, storage.modifier.static.rust, variable.parameter.r, variable.parameter.handlebars, storage.modifier.import, storage.modifier.package, meta.class.identifier storage.modifier, keyword.operator.other.powershell, source.css variable.parameter, string.interpolated variable.parameter, source.apacheconf keyword, keyword.other.julia, storage.modifier.using.vala, source.objc keyword.other.property.attribute, source.sql keyword.other, keyword.other.using.vala, keyword.operator.function.infix, keyword.control.directive, keyword.other.rust, keyword.other.declaration-specifier.swift, entity.name.function.swift, keyword.control.class, keyword.control.def, punctuation.definition.variable, entity.name.section.latex, source.ocaml keyword markup.underline, source.ocaml constant.language constant.numeric entity.other.attribute-name.id.css, source.reason entity.other.attribute-name constant.language constant.numeric, keyword.format.specifier.fsharp, entity.name.section.fsharp, binding.fsharp keyword, binding.fsharp keyword.symbol, record.fsharp keyword, keyword.symbol.fsharp, entity.name.section.fsharp keyword, namespace.open.fsharp keyword, namespace.open.fsharp entity, storage.type, source.cpp keyword.other, source.c keyword.other, keyword.other.unit, storage.modifier.array.bracket, keyword.control.default, meta.import.haskell keyword, keyword.declaration.dart, source.wsd keyword.other, keyword.other.skinparam, source.css keyword.control, source.css keyword.operator, keyword.language.gherkin.feature.scenario, keyword.control.cucumber.table, source.toml entity.other.attribute-name, source.toml keyword, keyword.other.nim, source.nim keyword.other.common.function, source.nim keyword.other, source.scala keyword.declaration, source.scala entity.name.class.declaration, keyword.control.lua, source.python meta.function-call.python support.type.python	—

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