Catppuccin Noctis

Name: Catppuccin Noctis
Author: Alex Dauenhauer

Publisher: Alex DauenhauerThemes in package: 5

Catppuccin palette with Noctis syntax highlighting!

GitHub

Color themes

Catppuccin Noctis Mocha

VS Code preview

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

Catppuccin Noctis — Catppuccin Noctis Mocha

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#11111b
activityBar.border#00000000
activityBar.foreground#b4befe
activityBar.inactiveForeground#585b70
activityBarBadge.background#b4befe
activityBarBadge.foreground#11111b
badge.background#313244
badge.foreground#a6adc8
breadcrumb.activeSelectionForeground#b4befe
breadcrumb.background#1e1e2e
breadcrumb.focusForeground#cdd6f4
breadcrumb.foreground#a6adc8
breadcrumbPicker.background#1e1e2e
button.background#313244
button.border#b4befe8a
button.foreground#cdd6f4
button.hoverBackground#45475a
button.secondaryBackground#313244
button.secondaryForeground#cdd6f4
button.secondaryHoverBackground#45475a
button.separator#b4befe8a
charts.blue#89b4fa
charts.foreground#cdd6f4
charts.green#a6e3a1
charts.lines#b4befe8a
charts.orange#fab387
charts.purple#cba6f7
charts.red#f38ba8
charts.yellow#f9e2af
checkbox.background#1e1e2e
checkbox.border#b4befe8a
checkbox.foreground#b4befe
commandCenter.activeBackground#11111b
commandCenter.activeForeground#a6adc8
commandCenter.background#11111b
commandCenter.border#b4befe8a
commandCenter.foreground#a6adc8
commandCenter.inactiveBorder#b4befe8a
debugConsole.errorForeground#f38ba8
debugConsole.infoForeground#94e2d5
debugConsole.sourceForeground#cdd6f4
debugConsole.warningForeground#f9e2af
debugConsoleInputIcon.foreground#cdd6f4
debugExceptionWidget.background#313244
debugExceptionWidget.border#cba6f7
debugIcon.breakpointCurrentStackframeForeground#f9e2af
debugIcon.breakpointDisabledForeground#585b70
debugIcon.breakpointForeground#f38ba8
debugIcon.breakpointStackframeForeground#a6e3a1
debugIcon.breakpointUnverifiedForeground#585b70
debugIcon.continueForeground#89b4fa
debugIcon.disconnectForeground#f38ba8
debugIcon.pauseForeground#f9e2af
debugIcon.restartForeground#a6e3a1
debugIcon.startForeground#a6e3a1
debugIcon.stepBackForeground#89b4fa
debugIcon.stepIntoForeground#89dceb
debugIcon.stepOutForeground#74c7ec
debugIcon.stepOverForeground#94e2d5
debugIcon.stopForeground#f38ba8
debugTokenExpression.boolean#89b4fa
debugTokenExpression.error#f38ba8
debugTokenExpression.name#cba6f7
debugTokenExpression.number#94e2d5
debugTokenExpression.string#fab387
debugTokenExpression.value#585b70
debugToolBar.background#181825
debugToolBar.border#b4befe5c
debugView.exceptionLabelBackground#f38ba8a6
debugView.exceptionLabelForeground#cdd6f4
debugView.stateLabelBackground#181825
debugView.stateLabelForeground#cdd6f4
debugView.valueChangedHighlight#89b4fa
descriptionForeground#b4befe
diffEditor.border#585b70
diffEditor.insertedTextBackground#89dceb20
diffEditor.removedTextBackground#f38ba820
disabledForeground#a6adc8
dropdown.background#1e1e2e
dropdown.border#b4befe8a
dropdown.foreground#b4befe
dropdown.listBackground#181825
editor.background#1e1e2e
editor.findMatchBackground#11111b4b
editor.findMatchBorder#f9e2afaf
editor.findMatchHighlightBackground#11111b4b
editor.findMatchHighlightBorder#fab387af
editor.findRangeHighlightBackground#11111b4b
editor.findRangeHighlightBorder#fab387af
editor.focusedStackFrameHighlightBackground#a6e3a146
editor.foldBackground#1e1e2e7d
editor.foreground#cdd6f4
editor.hoverHighlightBackground#585b7082
editor.inactiveSelectionBackground#585b7082
editor.lineHighlightBackground#11111b
editor.lineHighlightBorder#00000000
editor.linkedEditingBackground#f38ba849
editor.rangeHighlightBackground#585b7082
editor.rangeHighlightBorder#00000000
editor.selectionBackground#585b7082
editor.selectionHighlightBackground#11111b4b
editor.selectionHighlightBorder#b4befe8a
editor.snippetFinalTabstopHighlightBackground#585b70
editor.snippetFinalTabstopHighlightBorder#585b70
editor.snippetTabstopHighlightBackground#585b70
editor.snippetTabstopHighlightBorder#585b70
editor.stackFrameHighlightBackground#f9e2af3b
editor.symbolHighlightBackground#11111b4b
editor.wordHighlightBackground#11111b4b
editor.wordHighlightBorder#cba6f78a
editor.wordHighlightStrongBackground#11111b4b
editor.wordHighlightStrongBorder#cba6f78a
editorBracketHighlight.foreground1#f9e2af
editorBracketHighlight.foreground2#cba6f7
editorBracketHighlight.foreground3#74c7ec
editorBracketHighlight.foreground4#fab387
editorBracketHighlight.foreground5#94e2d5
editorBracketHighlight.foreground6#eba0ac
editorBracketHighlight.unexpectedBracket.foreground#f38ba8
editorBracketMatch.background#11111b
editorBracketMatch.border#89dceb8a
editorBracketPairGuide.activeBackground1#f9e2af
editorBracketPairGuide.activeBackground2#cba6f7
editorBracketPairGuide.activeBackground3#74c7ec
editorBracketPairGuide.activeBackground4#fab387
editorBracketPairGuide.activeBackground5#94e2d5
editorBracketPairGuide.activeBackground6#eba0ac
editorBracketPairGuide.background1#f9e2af50
editorBracketPairGuide.background2#cba6f750
editorBracketPairGuide.background3#74c7ec50
editorBracketPairGuide.background4#fab38750
editorBracketPairGuide.background5#94e2d550
editorBracketPairGuide.background6#eba0ac50
editorCodeLens.foreground#585b70
editorCursor.background#1e1e2e
editorCursor.foreground#f9e2af
editorError.background#00000000
editorError.border#00000000
editorError.foreground#f38ba8
editorGroup.border#11111b
editorGroup.dropBackground#f38ba880
editorGroup.emptyBackground#31324433
editorGroup.focusedEmptyBorder#f38ba8
editorGroupHeader.noTabsBackground#181825
editorGroupHeader.tabsBackground#1e1e2e
editorGroupHeader.tabsBorder#181825
editorGutter.addedBackground#a6e3a1
editorGutter.background#1e1e2e
editorGutter.commentRangeForeground#b4befe
editorGutter.deletedBackground#f38ba8
editorGutter.foldingControlForeground#b4befe
editorGutter.modifiedBackground#74c7ec
editorHint.border#00000000
editorHint.foreground#a6e3a1
editorHoverWidget.background#1e1e2e
editorHoverWidget.border#b4befe8a
editorHoverWidget.foreground#cdd6f4
editorHoverWidget.statusBarBackground#89b4fa3f
editorIndentGuide.activeBackground1#b4befe8a
editorIndentGuide.background1#313244
editorInfo.background#00000000
editorInfo.border#b4befe8a
editorInfo.foreground#6c7086
editorInlayHint.background#1e1e2e
editorInlayHint.foreground#6c7086
editorInlayHint.parameterBackground#1e1e2e
editorInlayHint.parameterForeground#6c7086
editorInlayHint.typeBackground#1e1e2e
editorInlayHint.typeForeground#6c7086
editorLightBulb.foreground#f9e2af
editorLightBulbAutoFix.foreground#89b4fa
editorLineNumber.activeForeground#b4befe
editorLineNumber.foreground#585b70
editorLink.activeForeground#cba6f7
editorMarkerNavigation.background#f5e0dc05
editorMarkerNavigationError.background#f38ba8
editorMarkerNavigationInfo.background#a6adc8
editorMarkerNavigationWarning.background#f9e2af
editorOverviewRuler.addedForeground#a6e3a13a
editorOverviewRuler.background#181825
editorOverviewRuler.border#1e1e2e
editorOverviewRuler.bracketMatchForeground#585b70
editorOverviewRuler.commonContentForeground#585b70
editorOverviewRuler.currentContentForeground#6c7086
editorOverviewRuler.deletedForeground#f38ba83a
editorOverviewRuler.errorForeground#f38ba840
editorOverviewRuler.findMatchForeground#94e2d58a
editorOverviewRuler.incomingContentForeground#585b70
editorOverviewRuler.infoForeground#585b70
editorOverviewRuler.modifiedForeground#89b4fa
editorOverviewRuler.rangeHighlightForeground#fab3878a
editorOverviewRuler.selectionHighlightForeground#b4befe8a
editorOverviewRuler.warningForeground#f9e2af
editorOverviewRuler.wordHighlightForeground#cba6f78a
editorOverviewRuler.wordHighlightStrongForeground#cba6f78a
editorRuler.foreground#b4befe8a
editorStickyScrollHover.background#313244
editorSuggestWidget.background#181825
editorSuggestWidget.border#b4befe8a
editorSuggestWidget.foreground#cdd6f4
editorSuggestWidget.highlightForeground#b4befe
editorSuggestWidget.selectedBackground#313244
editorWarning.background#00000000
editorWarning.border#00000000
editorWarning.foreground#f9e2af
editorWhitespace.foreground#b4befe8a
editorWidget.background#181825
editorWidget.border#b4befe8a
editorWidget.foreground#cdd6f4
editorWidget.resizeBorder#b4befe8a
errorForeground#f38ba8
extensionBadge.remoteBackground#89b4fa
extensionBadge.remoteForeground#181825
extensionButton.background#a6e3a1
extensionButton.foreground#181825
extensionButton.hoverBackground#a6e3a18a
extensionButton.prominentBackground#a6e3a1
extensionButton.prominentForeground#181825
extensionButton.prominentHoverBackground#a6e3a1
extensionButton.separator#181825
extensionIcon.preReleaseForeground#cba6f78a
extensionIcon.sponsorForeground#f5c2e78a
extensionIcon.starForeground#f9e2af8a
extensionIcon.verifiedForeground#a6e3a18a
focusBorder#00000000
foreground#cdd6f4
gitDecoration.addedResourceForeground#a6e3a1
gitDecoration.conflictingResourceForeground#f9e2af
gitDecoration.deletedResourceForeground#f38ba8
gitDecoration.ignoredResourceForeground#6c7086
gitDecoration.modifiedResourceForeground#89dceb
gitDecoration.renamedResourceForeground#94e2d5
gitDecoration.stageDeletedResourceForeground#f38ba8
gitDecoration.stageModifiedResourceForeground#f9e2af
gitDecoration.submoduleResourceForeground#89dceb
gitDecoration.untrackedResourceForeground#a6e3a1
gitlens.closedPullRequestIconColor#f38ba8
gitlens.decorations.addedForegroundColor#a6e3a1
gitlens.decorations.branchAheadForegroundColor#a6e3a1
gitlens.decorations.branchBehindForegroundColor#fab387
gitlens.decorations.branchDivergedForegroundColor#eba0ac
gitlens.decorations.branchUnpublishedForegroundColor#f9e2af
gitlens.decorations.branchUpToDateForegroundColor#a6adc8
gitlens.decorations.copiedForegroundColor#94e2d5
gitlens.decorations.deletedForegroundColor#f38ba8
gitlens.decorations.ignoredForegroundColor#6c7086
gitlens.decorations.modifiedForegroundColor#89dceb
gitlens.decorations.renamedForegroundColor#94e2d5
gitlens.decorations.untrackedForegroundColor#a6e3a1
gitlens.graphLane10Color#f2cdcd
gitlens.graphLane1Color#cba6f7
gitlens.graphLane2Color#a6e3a1
gitlens.graphLane3Color#f38ba8
gitlens.graphLane4Color#f9e2af
gitlens.graphLane5Color#89dceb
gitlens.graphLane6Color#f5c2e7
gitlens.graphLane7Color#94e2d5
gitlens.graphLane8Color#eba0ac
gitlens.graphLane9Color#89b4fa
gitlens.gutterBackgroundColor#cdd6f413
gitlens.gutterForegroundColor#b4befe
gitlens.gutterUncommittedForegroundColor#89dcebbd
gitlens.lineHighlightBackgroundColor#89dceb56
gitlens.lineHighlightOverviewRulerColor#f38ba8
gitlens.mergedPullRequestIconColor#cba6f7
gitlens.openPullRequestIconColor#a6e3a1
gitlens.trailingLineBackgroundColor#11111b00
gitlens.trailingLineForegroundColor#585b70
gitlens.unpublishedCommitIconColor#a6e3a1
gitlens.unpulledChangesIconColor#f38ba8
icon.foreground#b4befe
input.background#313244
input.border#b4befe8a
input.foreground#cdd6f4
input.placeholderForeground#585b70
inputOption.activeBackground#585b70
inputOption.activeBorder#585b70
inputOption.activeForeground#cdd6f4
inputValidation.errorBackground#313244
inputValidation.errorBorder#00000000
inputValidation.errorForeground#f38ba8
inputValidation.infoBackground#89b4fa7c
inputValidation.infoBorder#89b4fa
inputValidation.infoForeground#89dceb
inputValidation.warningBackground#313244
inputValidation.warningBorder#00000000
inputValidation.warningForeground#f9e2af
list.activeSelectionBackground#313244
list.activeSelectionForeground#b4befe
list.dropBackground#f38ba880
list.errorForeground#f38ba8
list.focusBackground#cdd6f420
list.focusForeground#cdd6f4
list.focusOutline#00000000
list.highlightForeground#b4befe
list.hoverBackground#313244
list.hoverForeground#cdd6f4
list.inactiveFocusBackground#181825
list.inactiveSelectionBackground#181825
list.inactiveSelectionForeground#b4befe
list.warningForeground#f9e2af
listFilterWidget.background#181825
listFilterWidget.noMatchesOutline#181825
listFilterWidget.outline#00000000
menu.background#1e1e2e
menu.border#1e1e2e7f
menu.foreground#cdd6f4
menu.selectionBackground#181825
menu.selectionBorder#00000000
menu.selectionForeground#b4befe
menu.separatorBackground#cdd6f4
menubar.selectionBackground#181825
menubar.selectionBorder#181825
menubar.selectionForeground#b4befe
merge.border#31324400
merge.commonContentBackground#585b708a
merge.commonHeaderBackground#585b708a
merge.currentContentBackground#3132448a
merge.currentHeaderBackground#a6adc88a
merge.incomingContentBackground#3132448a
merge.incomingHeaderBackground#585b708a
minimap.background#1e1e2e
minimap.errorHighlight#f38ba8ee
minimap.findMatchHighlight#cba6f7ee
minimap.selectionHighlight#585b708a
minimap.warningHighlight#f9e2afee
minimapGutter.addedBackground#a6e3a1
minimapGutter.deletedBackground#eba0ac
minimapGutter.modifiedBackground#f9e2af
notebook.cellBorderColor#313244
notebook.focusedCellBorder#94e2d5
notebook.focusedEditorBorder#b4befe8a
notebook.inactiveFocusedCellBorder#00000000
notebook.selectedCellBorder#94e2d5
notificationCenter.border#181825
notificationCenterHeader.background#181825
notificationCenterHeader.foreground#585b70
notificationLink.foreground#74c7ec
notifications.background#1e1e2e
notifications.border#181825
notifications.foreground#cdd6f4
notificationsErrorIcon.foreground#f38ba8
notificationsInfoIcon.foreground#89b4fa
notificationsWarningIcon.foreground#f9e2af
notificationToast.border#181825
panel.background#181825
panel.border#18182500
panelSection.border#585b70
panelSection.dropBackground#585b7099
panelTitle.activeBorder#b4befe8a
panelTitle.activeForeground#a6adc8
panelTitle.inactiveForeground#a6adc8
peekView.border#b4befe8a
peekViewEditor.background#181825
peekViewEditor.matchHighlightBackground#181825
peekViewEditor.matchHighlightBorder#fab387
peekViewEditorGutter.background#181825
peekViewResult.background#181825
peekViewResult.fileForeground#cdd6f4
peekViewResult.lineForeground#585b70
peekViewResult.matchHighlightBackground#181825
peekViewResult.selectionBackground#313244
peekViewResult.selectionForeground#cdd6f4
peekViewTitle.background#181825
peekViewTitleDescription.foreground#585b70
peekViewTitleLabel.foreground#cdd6f4
pickerGroup.border#b4befe8a
pickerGroup.foreground#b4befe
progressBar.background#b4befe
quickInput.background#1e1e2e
quickInput.foreground#a6adc8
quickInputList.focusBackground#cdd6f420
sash.hoverBorder#b4befe
scrollbar.shadow#11111b
scrollbarSlider.activeBackground#b4befe50
scrollbarSlider.background#cdd6f420
scrollbarSlider.hoverBackground#11111b
selection.background#b4befe40
settings.checkboxBackground#181825
settings.checkboxBorder#b4befe8a
settings.checkboxForeground#cdd6f4
settings.dropdownBackground#181825
settings.dropdownBorder#b4befe8a
settings.dropdownForeground#cdd6f4
settings.dropdownListBorder#b4befe8a
settings.focusedRowBackground#1e1e2e
settings.focusedRowBorder#f2cdcd
settings.headerForeground#b4befe
settings.modifiedItemIndicator#94e2d5
settings.numberInputBackground#181825
settings.numberInputBorder#b4befe8a
settings.numberInputForeground#cdd6f4
settings.textInputBackground#181825
settings.textInputBorder#b4befe8a
settings.textInputForeground#cdd6f4
sideBar.background#181825
sideBar.border#181825
sideBar.dropBackground#181825
sideBar.foreground#a6adc8
sideBarSectionHeader.background#181825
sideBarSectionHeader.border#181825
sideBarSectionHeader.foreground#a6adc8
sideBarTitle.foreground#cdd6f4
statusBar.background#181825
statusBar.border#00000000
statusBar.debuggingBackground#fab387
statusBar.debuggingBorder#fab387
statusBar.debuggingForeground#11111b
statusBar.foreground#585b70
statusBar.noFolderBackground#181825
statusBar.noFolderBorder#313244
statusBar.noFolderForeground#585b70
statusBarItem.activeBackground#585b70
statusBarItem.errorBackground#11111b
statusBarItem.errorForeground#f38ba8
statusBarItem.hoverBackground#11111b
statusBarItem.hoverForeground#b4befe
statusBarItem.prominentBackground#181825
statusBarItem.prominentForeground#585b70
statusBarItem.prominentHoverBackground#11111b
statusBarItem.prominentHoverForeground#74c7ec
statusBarItem.remoteBackground#b4befe
statusBarItem.remoteForeground#11111b
statusBarItem.remoteHoverBackground#cba6f7
statusBarItem.remoteHoverForeground#11111b
statusBarItem.warningBackground#11111b
statusBarItem.warningForeground#f9e2af
tab.activeBackground#1e1e2e
tab.activeBorder#b4befe8a
tab.activeBorderTop#b4befe8a
tab.activeForeground#cdd6f4
tab.activeModifiedBorder#a6adc8
tab.border#1e1e2e
tab.inactiveBackground#1e1e2e
tab.inactiveForeground#a6adc8
tab.inactiveModifiedBorder#f38ba8
tab.unfocusedActiveBackground#1e1e2e
tab.unfocusedActiveBorder#585b70
tab.unfocusedActiveForeground#cdd6f4
tab.unfocusedActiveModifiedBorder#f38ba8
tab.unfocusedHoverBackground#cba6f721
tab.unfocusedInactiveForeground#b4befe
tab.unfocusedInactiveModifiedBorder#f38ba8
terminal.ansiBlack#181825
terminal.ansiBlue#89b4fa
terminal.ansiBrightBlack#585b70
terminal.ansiBrightBlue#89b4fa
terminal.ansiBrightCyan#89dceb
terminal.ansiBrightGreen#a6e3a1
terminal.ansiBrightMagenta#cba6f7
terminal.ansiBrightRed#f38ba8
terminal.ansiBrightWhite#cdd6f4
terminal.ansiBrightYellow#f9e2af
terminal.ansiCyan#89dceb
terminal.ansiGreen#a6e3a1
terminal.ansiMagenta#cba6f7
terminal.ansiRed#f38ba8
terminal.ansiWhite#cdd6f4
terminal.ansiYellow#f9e2af
terminal.background#181825
terminal.border#585b70
terminal.dropBackground#585b7099
terminal.foreground#cdd6f4
terminal.selectionBackground#585b70
terminalCursor.background#181825
terminalCursor.foreground#f9e2af
textBlockQuote.background#313244
textBlockQuote.border#cba6f7
textCodeBlock.background#313244
textLink.activeForeground#cba6f7
textLink.foreground#74c7ec
textPreformat.foreground#fab387
textSeparator.foreground#313244
titleBar.activeBackground#11111b
titleBar.activeForeground#cdd6f4
titleBar.border#00000000
titleBar.inactiveBackground#11111b
titleBar.inactiveForeground#a6adc8
tree.indentGuidesStroke#45475a
walkThrough.embeddedEditorBackground#313244
welcomePage.progress.background#11111b
welcomePage.progress.foreground#94e2d5
welcomePage.tileBackground#181825
widget.shadow#11111b
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	#6c7086	—
string.quoted.docstring.multi, string.quoted.docstring.multi punctuation.definition.string, markup.fenced_code.block	#9399b2	—
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	#cdd6f4	—
support.type.property-name.json, source.json meta.structure.dictionary.json support.type.property-name.json	#f5e0dc	—
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	#cba6f7	—
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	#cdd6f4	—
variable.parameter.ts, meta.parameters.ts, variable.parameter.function.language.python	#fab387	—
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	#b4befe	—
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	#f9e2af	—
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	#f38ba8	—
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	#a6e3a1	—
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	#a6e3a1	—
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	#eba0ac	—
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	#89b4fa	—
entity.name.function.decorator	#94e2d5	—
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	#89dceb	—
source.python entity.name.namespace	#cdd6f4	—
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	#f2cdcd	—
invalid, invalid.illegal	#f38ba8	—
variable.language, variable.parameter.function.language.special	#eba0ac	—
token.info-token	#89b4fa	—
token.warn-token	#fab387	—
token.error-token	#f38ba8	—
token.debug-token	#cba6f7	—
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}!`;
}