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 Frappé

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#232634
activityBar.border#00000000
activityBar.foreground#babbf1
activityBar.inactiveForeground#626880
activityBarBadge.background#babbf1
activityBarBadge.foreground#232634
badge.background#414559
badge.foreground#a5adce
breadcrumb.activeSelectionForeground#babbf1
breadcrumb.background#303446
breadcrumb.focusForeground#c6d0f5
breadcrumb.foreground#a5adce
breadcrumbPicker.background#303446
button.background#414559
button.border#babbf18a
button.foreground#c6d0f5
button.hoverBackground#51576d
button.secondaryBackground#414559
button.secondaryForeground#c6d0f5
button.secondaryHoverBackground#51576d
button.separator#babbf18a
charts.blue#8caaee
charts.foreground#c6d0f5
charts.green#a6d189
charts.lines#babbf18a
charts.orange#ef9f76
charts.purple#ca9ee6
charts.red#e78284
charts.yellow#e5c890
checkbox.background#303446
checkbox.border#babbf18a
checkbox.foreground#babbf1
commandCenter.activeBackground#232634
commandCenter.activeForeground#a5adce
commandCenter.background#232634
commandCenter.border#babbf18a
commandCenter.foreground#a5adce
commandCenter.inactiveBorder#babbf18a
debugConsole.errorForeground#e78284
debugConsole.infoForeground#81c8be
debugConsole.sourceForeground#c6d0f5
debugConsole.warningForeground#e5c890
debugConsoleInputIcon.foreground#c6d0f5
debugExceptionWidget.background#414559
debugExceptionWidget.border#ca9ee6
debugIcon.breakpointCurrentStackframeForeground#e5c890
debugIcon.breakpointDisabledForeground#626880
debugIcon.breakpointForeground#e78284
debugIcon.breakpointStackframeForeground#a6d189
debugIcon.breakpointUnverifiedForeground#626880
debugIcon.continueForeground#8caaee
debugIcon.disconnectForeground#e78284
debugIcon.pauseForeground#e5c890
debugIcon.restartForeground#a6d189
debugIcon.startForeground#a6d189
debugIcon.stepBackForeground#8caaee
debugIcon.stepIntoForeground#99d1db
debugIcon.stepOutForeground#85c1dc
debugIcon.stepOverForeground#81c8be
debugIcon.stopForeground#e78284
debugTokenExpression.boolean#8caaee
debugTokenExpression.error#e78284
debugTokenExpression.name#ca9ee6
debugTokenExpression.number#81c8be
debugTokenExpression.string#ef9f76
debugTokenExpression.value#626880
debugToolBar.background#292c3c
debugToolBar.border#babbf15c
debugView.exceptionLabelBackground#e78284a6
debugView.exceptionLabelForeground#c6d0f5
debugView.stateLabelBackground#292c3c
debugView.stateLabelForeground#c6d0f5
debugView.valueChangedHighlight#8caaee
descriptionForeground#babbf1
diffEditor.border#626880
diffEditor.insertedTextBackground#99d1db20
diffEditor.removedTextBackground#e7828420
disabledForeground#a5adce
dropdown.background#303446
dropdown.border#babbf18a
dropdown.foreground#babbf1
dropdown.listBackground#292c3c
editor.background#303446
editor.findMatchBackground#2326344b
editor.findMatchBorder#e5c890af
editor.findMatchHighlightBackground#2326344b
editor.findMatchHighlightBorder#ef9f76af
editor.findRangeHighlightBackground#2326344b
editor.findRangeHighlightBorder#ef9f76af
editor.focusedStackFrameHighlightBackground#a6d18946
editor.foldBackground#3034468a
editor.foreground#c6d0f5
editor.hoverHighlightBackground#62688082
editor.inactiveSelectionBackground#62688082
editor.lineHighlightBackground#232634
editor.lineHighlightBorder#00000000
editor.linkedEditingBackground#e7828449
editor.rangeHighlightBackground#62688082
editor.rangeHighlightBorder#00000000
editor.selectionBackground#62688082
editor.selectionHighlightBackground#2326344b
editor.selectionHighlightBorder#babbf18a
editor.snippetFinalTabstopHighlightBackground#626880
editor.snippetFinalTabstopHighlightBorder#626880
editor.snippetTabstopHighlightBackground#626880
editor.snippetTabstopHighlightBorder#626880
editor.stackFrameHighlightBackground#e5c8903b
editor.symbolHighlightBackground#2326344b
editor.wordHighlightBackground#2326344b
editor.wordHighlightBorder#ca9ee68a
editor.wordHighlightStrongBackground#2326344b
editor.wordHighlightStrongBorder#ca9ee68a
editorBracketHighlight.foreground1#e5c890
editorBracketHighlight.foreground2#ca9ee6
editorBracketHighlight.foreground3#85c1dc
editorBracketHighlight.foreground4#ef9f76
editorBracketHighlight.foreground5#81c8be
editorBracketHighlight.foreground6#ea999c
editorBracketHighlight.unexpectedBracket.foreground#e78284
editorBracketMatch.background#232634
editorBracketMatch.border#99d1db8a
editorBracketPairGuide.activeBackground1#e5c890
editorBracketPairGuide.activeBackground2#ca9ee6
editorBracketPairGuide.activeBackground3#85c1dc
editorBracketPairGuide.activeBackground4#ef9f76
editorBracketPairGuide.activeBackground5#81c8be
editorBracketPairGuide.activeBackground6#ea999c
editorBracketPairGuide.background1#e5c89050
editorBracketPairGuide.background2#ca9ee650
editorBracketPairGuide.background3#85c1dc50
editorBracketPairGuide.background4#ef9f7650
editorBracketPairGuide.background5#81c8be50
editorBracketPairGuide.background6#ea999c50
editorCodeLens.foreground#626880
editorCursor.background#303446
editorCursor.foreground#e5c890
editorError.background#00000000
editorError.border#00000000
editorError.foreground#e78284
editorGroup.border#232634
editorGroup.dropBackground#e7828480
editorGroup.emptyBackground#41455933
editorGroup.focusedEmptyBorder#e78284
editorGroupHeader.noTabsBackground#292c3c
editorGroupHeader.tabsBackground#303446
editorGroupHeader.tabsBorder#292c3c
editorGutter.addedBackground#a6d189
editorGutter.background#303446
editorGutter.commentRangeForeground#babbf1
editorGutter.deletedBackground#e78284
editorGutter.foldingControlForeground#babbf1
editorGutter.modifiedBackground#85c1dc
editorHint.border#00000000
editorHint.foreground#a6d189
editorHoverWidget.background#303446
editorHoverWidget.border#babbf18a
editorHoverWidget.foreground#c6d0f5
editorHoverWidget.statusBarBackground#8caaee3f
editorIndentGuide.activeBackground1#babbf18a
editorIndentGuide.background1#414559
editorInfo.background#00000000
editorInfo.border#babbf18a
editorInfo.foreground#737994
editorInlayHint.background#303446
editorInlayHint.foreground#737994
editorInlayHint.parameterBackground#303446
editorInlayHint.parameterForeground#737994
editorInlayHint.typeBackground#303446
editorInlayHint.typeForeground#737994
editorLightBulb.foreground#e5c890
editorLightBulbAutoFix.foreground#8caaee
editorLineNumber.activeForeground#babbf1
editorLineNumber.foreground#626880
editorLink.activeForeground#ca9ee6
editorMarkerNavigation.background#f2d5cf05
editorMarkerNavigationError.background#e78284
editorMarkerNavigationInfo.background#a5adce
editorMarkerNavigationWarning.background#e5c890
editorOverviewRuler.addedForeground#a6d1893a
editorOverviewRuler.background#292c3c
editorOverviewRuler.border#303446
editorOverviewRuler.bracketMatchForeground#626880
editorOverviewRuler.commonContentForeground#626880
editorOverviewRuler.currentContentForeground#737994
editorOverviewRuler.deletedForeground#e782843a
editorOverviewRuler.errorForeground#e7828440
editorOverviewRuler.findMatchForeground#81c8be8a
editorOverviewRuler.incomingContentForeground#626880
editorOverviewRuler.infoForeground#626880
editorOverviewRuler.modifiedForeground#8caaee
editorOverviewRuler.rangeHighlightForeground#ef9e768a
editorOverviewRuler.selectionHighlightForeground#babbf18a
editorOverviewRuler.warningForeground#e5c890
editorOverviewRuler.wordHighlightForeground#ca9ee68a
editorOverviewRuler.wordHighlightStrongForeground#ca9ee68a
editorRuler.foreground#babbf18a
editorStickyScrollHover.background#414559
editorSuggestWidget.background#292c3c
editorSuggestWidget.border#babbf18a
editorSuggestWidget.foreground#c6d0f5
editorSuggestWidget.highlightForeground#babbf1
editorSuggestWidget.selectedBackground#414559
editorWarning.background#00000000
editorWarning.border#00000000
editorWarning.foreground#e5c890
editorWhitespace.foreground#babbf18a
editorWidget.background#292c3c
editorWidget.border#babbf18a
editorWidget.foreground#c6d0f5
editorWidget.resizeBorder#babbf18a
errorForeground#e78284
extensionBadge.remoteBackground#8caaee
extensionBadge.remoteForeground#292c3c
extensionButton.background#a6d189
extensionButton.foreground#292c3c
extensionButton.hoverBackground#a6d1898a
extensionButton.prominentBackground#a6d189
extensionButton.prominentForeground#292c3c
extensionButton.prominentHoverBackground#a6d189
extensionButton.separator#292c3c
extensionIcon.preReleaseForeground#ca9ee68a
extensionIcon.sponsorForeground#f4b8e48a
extensionIcon.starForeground#e5c8908a
extensionIcon.verifiedForeground#a6d1898a
focusBorder#00000000
foreground#c6d0f5
gitDecoration.addedResourceForeground#a6d189
gitDecoration.conflictingResourceForeground#e5c890
gitDecoration.deletedResourceForeground#e78284
gitDecoration.ignoredResourceForeground#737994
gitDecoration.modifiedResourceForeground#99d1db
gitDecoration.renamedResourceForeground#81c8be
gitDecoration.stageDeletedResourceForeground#e78284
gitDecoration.stageModifiedResourceForeground#e5c890
gitDecoration.submoduleResourceForeground#99d1db
gitDecoration.untrackedResourceForeground#a6d189
gitlens.closedPullRequestIconColor#e78284
gitlens.decorations.addedForegroundColor#a6d189
gitlens.decorations.branchAheadForegroundColor#a6d189
gitlens.decorations.branchBehindForegroundColor#ef9f76
gitlens.decorations.branchDivergedForegroundColor#ea999c
gitlens.decorations.branchUnpublishedForegroundColor#e5c890
gitlens.decorations.branchUpToDateForegroundColor#a5adce
gitlens.decorations.copiedForegroundColor#81c8be
gitlens.decorations.deletedForegroundColor#e78284
gitlens.decorations.ignoredForegroundColor#737994
gitlens.decorations.modifiedForegroundColor#99d1db
gitlens.decorations.renamedForegroundColor#81c8be
gitlens.decorations.untrackedForegroundColor#a6d189
gitlens.graphLane10Color#eebebe
gitlens.graphLane1Color#ca9ee6
gitlens.graphLane2Color#a6d189
gitlens.graphLane3Color#e78284
gitlens.graphLane4Color#e5c890
gitlens.graphLane5Color#99d1db
gitlens.graphLane6Color#f4b8e4
gitlens.graphLane7Color#81c8be
gitlens.graphLane8Color#ea999c
gitlens.graphLane9Color#8caaee
gitlens.gutterBackgroundColor#c6d0f513
gitlens.gutterForegroundColor#babbf1
gitlens.gutterUncommittedForegroundColor#99d1dbbd
gitlens.lineHighlightBackgroundColor#99d1db56
gitlens.lineHighlightOverviewRulerColor#e78284
gitlens.mergedPullRequestIconColor#ca9ee6
gitlens.openPullRequestIconColor#a6d189
gitlens.trailingLineBackgroundColor#23263400
gitlens.trailingLineForegroundColor#626880
gitlens.unpublishedCommitIconColor#a6d189
gitlens.unpulledChangesIconColor#e78284
icon.foreground#babbf1
input.background#414559
input.border#babbf18a
input.foreground#c6d0f5
input.placeholderForeground#626880
inputOption.activeBackground#626880
inputOption.activeBorder#626880
inputOption.activeForeground#c6d0f5
inputValidation.errorBackground#414559
inputValidation.errorBorder#00000000
inputValidation.errorForeground#e78284
inputValidation.infoBackground#8caaee7c
inputValidation.infoBorder#8caaee
inputValidation.infoForeground#99d1db
inputValidation.warningBackground#414559
inputValidation.warningBorder#00000000
inputValidation.warningForeground#e5c890
list.activeSelectionBackground#414559
list.activeSelectionForeground#babbf1
list.dropBackground#e7828480
list.errorForeground#e78284
list.focusBackground#c6d0f520
list.focusForeground#c6d0f5
list.focusOutline#00000000
list.highlightForeground#babbf1
list.hoverBackground#414559
list.hoverForeground#c6d0f5
list.inactiveFocusBackground#292c3c
list.inactiveSelectionBackground#292c3c
list.inactiveSelectionForeground#babbf1
list.warningForeground#e5c890
listFilterWidget.background#292c3c
listFilterWidget.noMatchesOutline#292c3c
listFilterWidget.outline#00000000
menu.background#303446
menu.border#3034467f
menu.foreground#c6d0f5
menu.selectionBackground#292c3c
menu.selectionBorder#00000000
menu.selectionForeground#babbf1
menu.separatorBackground#c6d0f5
menubar.selectionBackground#292c3c
menubar.selectionBorder#292c3c
menubar.selectionForeground#babbf1
merge.border#41455900
merge.commonContentBackground#6268808a
merge.commonHeaderBackground#6268808a
merge.currentContentBackground#4145598a
merge.currentHeaderBackground#a5adce8a
merge.incomingContentBackground#4145598a
merge.incomingHeaderBackground#6268808a
minimap.background#303446
minimap.errorHighlight#e78284ee
minimap.findMatchHighlight#ca9ee6ee
minimap.selectionHighlight#6268808a
minimap.warningHighlight#e5c890ee
minimapGutter.addedBackground#a6d189
minimapGutter.deletedBackground#ea999c
minimapGutter.modifiedBackground#e5c890
notebook.cellBorderColor#414559
notebook.focusedCellBorder#81c8be
notebook.focusedEditorBorder#babbf18a
notebook.inactiveFocusedCellBorder#00000000
notebook.selectedCellBorder#81c8be
notificationCenter.border#292c3c
notificationCenterHeader.background#292c3c
notificationCenterHeader.foreground#626880
notificationLink.foreground#85c1dc
notifications.background#303446
notifications.border#292c3c
notifications.foreground#c6d0f5
notificationsErrorIcon.foreground#e78284
notificationsInfoIcon.foreground#8caaee
notificationsWarningIcon.foreground#e5c890
notificationToast.border#292c3c
panel.background#292c3c
panel.border#292c3c00
panelSection.border#626880
panelSection.dropBackground#62688099
panelTitle.activeBorder#babbf18a
panelTitle.activeForeground#a5adce
panelTitle.inactiveForeground#a5adce
peekView.border#babbf18a
peekViewEditor.background#292c3c
peekViewEditor.matchHighlightBackground#292c3c
peekViewEditor.matchHighlightBorder#ef9f76
peekViewEditorGutter.background#292c3c
peekViewResult.background#292c3c
peekViewResult.fileForeground#c6d0f5
peekViewResult.lineForeground#626880
peekViewResult.matchHighlightBackground#292c3c
peekViewResult.selectionBackground#737994
peekViewResult.selectionForeground#c6d0f5
peekViewTitle.background#292c3c
peekViewTitleDescription.foreground#626880
peekViewTitleLabel.foreground#c6d0f5
pickerGroup.border#babbf18a
pickerGroup.foreground#babbf1
progressBar.background#babbf1
quickInput.background#303446
quickInput.foreground#a5adce
quickInputList.focusBackground#c6d0f520
sash.hoverBorder#babbf1
scrollbar.shadow#232634
scrollbarSlider.activeBackground#babbf150
scrollbarSlider.background#c6d0f520
scrollbarSlider.hoverBackground#232634
selection.background#babbf140
settings.checkboxBackground#292c3c
settings.checkboxBorder#babbf18a
settings.checkboxForeground#c6d0f5
settings.dropdownBackground#292c3c
settings.dropdownBorder#babbf18a
settings.dropdownForeground#c6d0f5
settings.dropdownListBorder#babbf18a
settings.focusedRowBackground#303446
settings.focusedRowBorder#eebebe
settings.headerForeground#babbf1
settings.modifiedItemIndicator#81c8be
settings.numberInputBackground#292c3c
settings.numberInputBorder#babbf18a
settings.numberInputForeground#c6d0f5
settings.textInputBackground#292c3c
settings.textInputBorder#babbf18a
settings.textInputForeground#c6d0f5
sideBar.background#292c3c
sideBar.border#292c3c
sideBar.dropBackground#292c3c
sideBar.foreground#a5adce
sideBarSectionHeader.background#292c3c
sideBarSectionHeader.border#292c3c
sideBarSectionHeader.foreground#a5adce
sideBarTitle.foreground#c6d0f5
statusBar.background#292c3c
statusBar.border#292c3c00
statusBar.debuggingBackground#ef9f76
statusBar.debuggingBorder#ef9f76
statusBar.debuggingForeground#232634
statusBar.foreground#626880
statusBar.noFolderBackground#292c3c
statusBar.noFolderBorder#414559
statusBar.noFolderForeground#626880
statusBarItem.activeBackground#626880
statusBarItem.errorBackground#232634
statusBarItem.errorForeground#e78284
statusBarItem.hoverBackground#232634
statusBarItem.hoverForeground#babbf1
statusBarItem.prominentBackground#292c3c
statusBarItem.prominentForeground#babbf1
statusBarItem.prominentHoverBackground#232634
statusBarItem.prominentHoverForeground#85c1dc
statusBarItem.remoteBackground#babbf1
statusBarItem.remoteForeground#232634
statusBarItem.remoteHoverBackground#ca9ee6
statusBarItem.remoteHoverForeground#232634
statusBarItem.warningBackground#232634
statusBarItem.warningForeground#e5c890
tab.activeBackground#303446
tab.activeBorder#babbf18a
tab.activeBorderTop#babbf18a
tab.activeForeground#c6d0f5
tab.activeModifiedBorder#a5adce
tab.border#303446
tab.inactiveBackground#303446
tab.inactiveForeground#a5adce
tab.inactiveModifiedBorder#e78284
tab.unfocusedActiveBackground#303446
tab.unfocusedActiveBorder#626880
tab.unfocusedActiveForeground#c6d0f5
tab.unfocusedActiveModifiedBorder#e78284
tab.unfocusedHoverBackground#ca9ee621
tab.unfocusedInactiveForeground#babbf1
tab.unfocusedInactiveModifiedBorder#e78284
terminal.ansiBlack#292c3c
terminal.ansiBlue#8caaee
terminal.ansiBrightBlack#626880
terminal.ansiBrightBlue#8caaee
terminal.ansiBrightCyan#99d1db
terminal.ansiBrightGreen#a6d189
terminal.ansiBrightMagenta#ca9ee6
terminal.ansiBrightRed#e78284
terminal.ansiBrightWhite#c6d0f5
terminal.ansiBrightYellow#e5c890
terminal.ansiCyan#99d1db
terminal.ansiGreen#a6d189
terminal.ansiMagenta#ca9ee6
terminal.ansiRed#e78284
terminal.ansiWhite#c6d0f5
terminal.ansiYellow#e5c890
terminal.background#292c3c
terminal.border#626880
terminal.dropBackground#62688099
terminal.foreground#c6d0f5
terminal.selectionBackground#626880
terminalCursor.background#292c3c
terminalCursor.foreground#e5c890
textBlockQuote.background#414559
textBlockQuote.border#ca9ee6
textCodeBlock.background#414559
textLink.activeForeground#ca9ee6
textLink.foreground#85c1dc
textPreformat.foreground#ef9f76
textSeparator.foreground#414559
titleBar.activeBackground#232634
titleBar.activeForeground#c6d0f5
titleBar.border#00000000
titleBar.inactiveBackground#232634
titleBar.inactiveForeground#a5adce
tree.indentGuidesStroke#51576d
walkThrough.embeddedEditorBackground#414559
welcomePage.progress.background#232634
welcomePage.progress.foreground#81c8be
welcomePage.tileBackground#292c3c
widget.shadow#232634
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	#737994	—
string.quoted.docstring.multi, string.quoted.docstring.multi punctuation.definition.string, markup.fenced_code.block	#949cbb	—
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	#c6d0f5	—
support.type.property-name.json, source.json meta.structure.dictionary.json support.type.property-name.json	#f2d5cf	—
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	#ca9ee6	—
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	#c6d0f5	—
variable.parameter.ts, meta.parameters.ts, variable.parameter.function.language.python	#ef9f76	—
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	#babbf1	—
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	#e5c890	—
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	#e78284	—
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	#a6d189	—
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	#a6d189	—
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	#ea999c	—
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	#8caaee	—
entity.name.function.decorator	#81c8be	—
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	#99d1db	—
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	#eebebe	—
invalid, invalid.illegal	#e78284	—
variable.language, variable.parameter.function.language.special	#ea999c	—
token.info-token	#8caaee	—
token.warn-token	#ef9f76	—
token.error-token	#e78284	—
token.debug-token	#ca9ee6	—
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}!`;
}