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 Latte

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

Problems1

Output

Debug Console

Terminal

Ports

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

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#00000000
activityBar.activeBorder#00000000
activityBar.activeFocusBorder#00000000
activityBar.background#dce0e8
activityBar.border#00000000
activityBar.foreground#7287fd
activityBar.inactiveForeground#acb0be
activityBarBadge.background#7287fd
activityBarBadge.foreground#dce0e8
badge.background#ccd0da
badge.foreground#6c6f85
breadcrumb.activeSelectionForeground#7287fd
breadcrumb.background#eff1f5
breadcrumb.focusForeground#4c4f69
breadcrumb.foreground#6c6f85
breadcrumbPicker.background#eff1f5
button.background#ccd0da
button.border#7287fd8a
button.foreground#4c4f69
button.hoverBackground#bcc0cc
button.secondaryBackground#ccd0da
button.secondaryForeground#4c4f69
button.secondaryHoverBackground#bcc0cc
button.separator#7287fd8a
charts.blue#1e66f5
charts.foreground#4c4f69
charts.green#40a02b
charts.lines#7287fd8a
charts.orange#ef9f76
charts.purple#8839ef
charts.red#d20f39
charts.yellow#df8e1d
checkbox.background#eff1f5
checkbox.border#7287fd8a
checkbox.foreground#7287fd
commandCenter.activeBackground#dce0e8
commandCenter.activeForeground#6c6f85
commandCenter.background#dce0e8
commandCenter.border#7287fd8a
commandCenter.foreground#6c6f85
commandCenter.inactiveBorder#7287fd8a
debugConsole.errorForeground#d20f39
debugConsole.infoForeground#179299
debugConsole.sourceForeground#4c4f69
debugConsole.warningForeground#df8e1d
debugConsoleInputIcon.foreground#4c4f69
debugExceptionWidget.background#ccd0da
debugExceptionWidget.border#8839ef
debugIcon.breakpointCurrentStackframeForeground#df8e1d
debugIcon.breakpointDisabledForeground#acb0be
debugIcon.breakpointForeground#d20f39
debugIcon.breakpointStackframeForeground#40a02b
debugIcon.breakpointUnverifiedForeground#acb0be
debugIcon.continueForeground#1e66f5
debugIcon.disconnectForeground#d20f39
debugIcon.pauseForeground#df8e1d
debugIcon.restartForeground#40a02b
debugIcon.startForeground#40a02b
debugIcon.stepBackForeground#1e66f5
debugIcon.stepIntoForeground#04a5e5
debugIcon.stepOutForeground#209fb5
debugIcon.stepOverForeground#179299
debugIcon.stopForeground#d20f39
debugTokenExpression.boolean#1e66f5
debugTokenExpression.error#d20f39
debugTokenExpression.name#8839ef
debugTokenExpression.number#179299
debugTokenExpression.string#ef9f76
debugTokenExpression.value#acb0be
debugToolBar.background#e6e9ef
debugToolBar.border#7287fd5c
debugView.exceptionLabelBackground#d20f39a6
debugView.exceptionLabelForeground#4c4f69
debugView.stateLabelBackground#e6e9ef
debugView.stateLabelForeground#4c4f69
debugView.valueChangedHighlight#1e66f5
descriptionForeground#7287fd
diffEditor.border#acb0be
diffEditor.insertedTextBackground#04a5e520
diffEditor.removedTextBackground#d20f3920
disabledForeground#6c6f85
dropdown.background#eff1f5
dropdown.border#7287fd8a
dropdown.foreground#7287fd
dropdown.listBackground#e6e9ef
editor.background#eff1f5
editor.findMatchBackground#dce0e84b
editor.findMatchBorder#df8e1daf
editor.findMatchHighlightBackground#dce0e84b
editor.findMatchHighlightBorder#ef9f76af
editor.findRangeHighlightBackground#dce0e84b
editor.findRangeHighlightBorder#ef9f76af
editor.focusedStackFrameHighlightBackground#40a02b46
editor.foldBackground#eff1f57d
editor.foreground#4c4f69
editor.hoverHighlightBackground#acb0be82
editor.inactiveSelectionBackground#acb0be82
editor.lineHighlightBackground#dce0e8
editor.lineHighlightBorder#00000000
editor.linkedEditingBackground#d20f3949
editor.rangeHighlightBackground#acb0be82
editor.rangeHighlightBorder#00000000
editor.selectionBackground#acb0be82
editor.selectionHighlightBackground#dce0e84b
editor.selectionHighlightBorder#7287fd8a
editor.snippetFinalTabstopHighlightBackground#acb0be
editor.snippetFinalTabstopHighlightBorder#acb0be
editor.snippetTabstopHighlightBackground#acb0be
editor.snippetTabstopHighlightBorder#acb0be
editor.stackFrameHighlightBackground#df8e1d3b
editor.symbolHighlightBackground#dce0e84b
editor.wordHighlightBackground#dce0e84b
editor.wordHighlightBorder#8839ef8a
editor.wordHighlightStrongBackground#dce0e84b
editor.wordHighlightStrongBorder#8839ef8a
editorBracketHighlight.foreground1#df8e1d
editorBracketHighlight.foreground2#8839ef
editorBracketHighlight.foreground3#209fb5
editorBracketHighlight.foreground4#ef9f76
editorBracketHighlight.foreground5#179299
editorBracketHighlight.foreground6#e64553
editorBracketHighlight.unexpectedBracket.foreground#d20f39
editorBracketMatch.background#dce0e8
editorBracketMatch.border#04a5e58a
editorBracketPairGuide.activeBackground1#df8e1d
editorBracketPairGuide.activeBackground2#8839ef
editorBracketPairGuide.activeBackground3#209fb5
editorBracketPairGuide.activeBackground4#ef9f76
editorBracketPairGuide.activeBackground5#179299
editorBracketPairGuide.activeBackground6#e64553
editorBracketPairGuide.background1#df8e1d50
editorBracketPairGuide.background2#8839ef50
editorBracketPairGuide.background3#209fb550
editorBracketPairGuide.background4#ef9f7650
editorBracketPairGuide.background5#17929950
editorBracketPairGuide.background6#e6455350
editorCodeLens.foreground#acb0be
editorCursor.background#eff1f5
editorCursor.foreground#df8e1d
editorError.background#00000000
editorError.border#00000000
editorError.foreground#d20f39
editorGroup.border#dce0e8
editorGroup.dropBackground#d20f3980
editorGroup.emptyBackground#ccd0da33
editorGroup.focusedEmptyBorder#d20f39
editorGroupHeader.noTabsBackground#e6e9ef
editorGroupHeader.tabsBackground#eff1f5
editorGroupHeader.tabsBorder#e6e9ef
editorGutter.addedBackground#40a02b
editorGutter.background#eff1f5
editorGutter.commentRangeForeground#7287fd
editorGutter.deletedBackground#d20f39
editorGutter.foldingControlForeground#7287fd
editorGutter.modifiedBackground#209fb5
editorHint.border#00000000
editorHint.foreground#40a02b
editorHoverWidget.background#eff1f5
editorHoverWidget.border#7287fd8a
editorHoverWidget.foreground#4c4f69
editorHoverWidget.statusBarBackground#1e66f53f
editorIndentGuide.activeBackground1#7287fd8a
editorIndentGuide.background1#ccd0da
editorInfo.background#00000000
editorInfo.border#7287fd8a
editorInfo.foreground#9ca0b0
editorInlayHint.background#eff1f5
editorInlayHint.foreground#9ca0b0
editorInlayHint.parameterBackground#eff1f5
editorInlayHint.parameterForeground#9ca0b0
editorInlayHint.typeBackground#eff1f5
editorInlayHint.typeForeground#9ca0b0
editorLightBulb.foreground#df8e1d
editorLightBulbAutoFix.foreground#1e66f5
editorLineNumber.activeForeground#7287fd
editorLineNumber.foreground#acb0be
editorLink.activeForeground#8839ef
editorMarkerNavigation.background#dc8a7805
editorMarkerNavigationError.background#d20f39
editorMarkerNavigationInfo.background#6c6f85
editorMarkerNavigationWarning.background#df8e1d
editorOverviewRuler.addedForeground#40a02b3a
editorOverviewRuler.background#e6e9ef
editorOverviewRuler.border#eff1f5
editorOverviewRuler.bracketMatchForeground#acb0be
editorOverviewRuler.commonContentForeground#acb0be
editorOverviewRuler.currentContentForeground#9ca0b0
editorOverviewRuler.deletedForeground#d20f393a
editorOverviewRuler.errorForeground#d20f3940
editorOverviewRuler.findMatchForeground#1792998a
editorOverviewRuler.incomingContentForeground#acb0be
editorOverviewRuler.infoForeground#acb0be
editorOverviewRuler.modifiedForeground#1e66f5
editorOverviewRuler.rangeHighlightForeground#ef9f768a
editorOverviewRuler.selectionHighlightForeground#7287fd8a
editorOverviewRuler.warningForeground#df8e1d
editorOverviewRuler.wordHighlightForeground#8839ef8a
editorOverviewRuler.wordHighlightStrongForeground#8839ef8a
editorRuler.foreground#7287fd8a
editorStickyScrollHover.background#ccd0da
editorSuggestWidget.background#e6e9ef
editorSuggestWidget.border#7287fd8a
editorSuggestWidget.foreground#4c4f69
editorSuggestWidget.highlightForeground#7287fd
editorSuggestWidget.selectedBackground#ccd0da
editorWarning.background#00000000
editorWarning.border#00000000
editorWarning.foreground#df8e1d
editorWhitespace.foreground#7287fd8a
editorWidget.background#e6e9ef
editorWidget.border#7287fd8a
editorWidget.foreground#4c4f69
editorWidget.resizeBorder#7287fd8a
errorForeground#d20f39
extensionBadge.remoteBackground#1e66f5
extensionBadge.remoteForeground#e6e9ef
extensionButton.background#40a02b
extensionButton.foreground#e6e9ef
extensionButton.hoverBackground#40a02b8a
extensionButton.prominentBackground#40a02b
extensionButton.prominentForeground#e6e9ef
extensionButton.prominentHoverBackground#40a02b
extensionButton.separator#e6e9ef
extensionIcon.preReleaseForeground#8839ef8a
extensionIcon.sponsorForeground#ea76cb8a
extensionIcon.starForeground#df8e1d8a
extensionIcon.verifiedForeground#40a02b8a
focusBorder#00000000
foreground#4c4f69
gitDecoration.addedResourceForeground#40a02b
gitDecoration.conflictingResourceForeground#df8e1d
gitDecoration.deletedResourceForeground#d20f39
gitDecoration.ignoredResourceForeground#9ca0b0
gitDecoration.modifiedResourceForeground#04a5e5
gitDecoration.renamedResourceForeground#179299
gitDecoration.stageDeletedResourceForeground#d20f39
gitDecoration.stageModifiedResourceForeground#df8e1d
gitDecoration.submoduleResourceForeground#04a5e5
gitDecoration.untrackedResourceForeground#40a02b
gitlens.closedPullRequestIconColor#d20f39
gitlens.decorations.addedForegroundColor#40a02b
gitlens.decorations.branchAheadForegroundColor#40a02b
gitlens.decorations.branchBehindForegroundColor#ef9f76
gitlens.decorations.branchDivergedForegroundColor#e64553
gitlens.decorations.branchUnpublishedForegroundColor#df8e1d
gitlens.decorations.branchUpToDateForegroundColor#6c6f85
gitlens.decorations.copiedForegroundColor#179299
gitlens.decorations.deletedForegroundColor#d20f39
gitlens.decorations.ignoredForegroundColor#9ca0b0
gitlens.decorations.modifiedForegroundColor#04a5e5
gitlens.decorations.renamedForegroundColor#179299
gitlens.decorations.untrackedForegroundColor#40a02b
gitlens.graphLane10Color#dd7878
gitlens.graphLane1Color#8839ef
gitlens.graphLane2Color#40a02b
gitlens.graphLane3Color#d20f39
gitlens.graphLane4Color#df8e1d
gitlens.graphLane5Color#04a5e5
gitlens.graphLane6Color#ea76cb
gitlens.graphLane7Color#179299
gitlens.graphLane8Color#e64553
gitlens.graphLane9Color#1e66f5
gitlens.gutterBackgroundColor#4c4f6913
gitlens.gutterForegroundColor#7287fd
gitlens.gutterUncommittedForegroundColor#04a5e5bd
gitlens.lineHighlightBackgroundColor#04a5e556
gitlens.lineHighlightOverviewRulerColor#d20f39
gitlens.mergedPullRequestIconColor#8839ef
gitlens.openPullRequestIconColor#40a02b
gitlens.trailingLineBackgroundColor#dce0e800
gitlens.trailingLineForegroundColor#acb0be
gitlens.unpublishedCommitIconColor#40a02b
gitlens.unpulledChangesIconColor#d20f39
icon.foreground#7287fd
input.background#ccd0da
input.border#7287fd8a
input.foreground#4c4f69
input.placeholderForeground#acb0be
inputOption.activeBackground#acb0be
inputOption.activeBorder#acb0be
inputOption.activeForeground#4c4f69
inputValidation.errorBackground#ccd0da
inputValidation.errorBorder#00000000
inputValidation.errorForeground#d20f39
inputValidation.infoBackground#1e66f57c
inputValidation.infoBorder#1e66f5
inputValidation.infoForeground#04a5e5
inputValidation.warningBackground#ccd0da
inputValidation.warningBorder#00000000
inputValidation.warningForeground#df8e1d
list.activeSelectionBackground#ccd0da
list.activeSelectionForeground#7287fd
list.dropBackground#d20f3980
list.errorForeground#d20f39
list.focusBackground#4c4f6920
list.focusForeground#4c4f69
list.focusOutline#00000000
list.highlightForeground#7287fd
list.hoverBackground#ccd0da
list.hoverForeground#4c4f69
list.inactiveFocusBackground#e6e9ef
list.inactiveSelectionBackground#e6e9ef
list.inactiveSelectionForeground#7287fd
list.warningForeground#df8e1d
listFilterWidget.background#e6e9ef
listFilterWidget.noMatchesOutline#e6e9ef
listFilterWidget.outline#00000000
menu.background#eff1f5
menu.border#eff1f57f
menu.foreground#4c4f69
menu.selectionBackground#e6e9ef
menu.selectionBorder#00000000
menu.selectionForeground#7287fd
menu.separatorBackground#4c4f69
menubar.selectionBackground#e6e9ef
menubar.selectionBorder#e6e9ef
menubar.selectionForeground#7287fd
merge.border#ccd0da00
merge.commonContentBackground#acb0be8a
merge.commonHeaderBackground#acb0be8a
merge.currentContentBackground#ccd0da8a
merge.currentHeaderBackground#6c6f858a
merge.incomingContentBackground#ccd0da8a
merge.incomingHeaderBackground#acb0be8a
minimap.background#eff1f5
minimap.errorHighlight#d20f39ee
minimap.findMatchHighlight#8839efee
minimap.selectionHighlight#acb0be8a
minimap.warningHighlight#df8e1dee
minimapGutter.addedBackground#40a02b
minimapGutter.deletedBackground#e64553
minimapGutter.modifiedBackground#df8e1d
notebook.cellBorderColor#ccd0da
notebook.focusedCellBorder#179299
notebook.focusedEditorBorder#7287fd8a
notebook.inactiveFocusedCellBorder#00000000
notebook.selectedCellBorder#179299
notificationCenter.border#e6e9ef
notificationCenterHeader.background#e6e9ef
notificationCenterHeader.foreground#acb0be
notificationLink.foreground#209fb5
notifications.background#eff1f5
notifications.border#e6e9ef
notifications.foreground#4c4f69
notificationsErrorIcon.foreground#d20f39
notificationsInfoIcon.foreground#1e66f5
notificationsWarningIcon.foreground#df8e1d
notificationToast.border#e6e9ef
panel.background#e6e9ef
panel.border#e6e9ef00
panelSection.border#acb0be
panelSection.dropBackground#acb0be99
panelTitle.activeBorder#7287fd8a
panelTitle.activeForeground#6c6f85
panelTitle.inactiveForeground#6c6f85
peekView.border#7287fd8a
peekViewEditor.background#e6e9ef
peekViewEditor.matchHighlightBackground#e6e9ef
peekViewEditor.matchHighlightBorder#ef9f76
peekViewEditorGutter.background#e6e9ef
peekViewResult.background#e6e9ef
peekViewResult.fileForeground#4c4f69
peekViewResult.lineForeground#acb0be
peekViewResult.matchHighlightBackground#e6e9ef
peekViewResult.selectionBackground#ccd0da
peekViewResult.selectionForeground#4c4f69
peekViewTitle.background#e6e9ef
peekViewTitleDescription.foreground#acb0be
peekViewTitleLabel.foreground#4c4f69
pickerGroup.border#7287fd8a
pickerGroup.foreground#7287fd
progressBar.background#7287fd
quickInput.background#eff1f5
quickInput.foreground#6c6f85
quickInputList.focusBackground#4c4f6920
sash.hoverBorder#7287fd
scrollbar.shadow#dce0e8
scrollbarSlider.activeBackground#7287fd50
scrollbarSlider.background#4c4f6920
scrollbarSlider.hoverBackground#dce0e8
selection.background#7287fd40
settings.checkboxBackground#e6e9ef
settings.checkboxBorder#7287fd8a
settings.checkboxForeground#4c4f69
settings.dropdownBackground#e6e9ef
settings.dropdownBorder#7287fd8a
settings.dropdownForeground#4c4f69
settings.dropdownListBorder#7287fd8a
settings.focusedRowBackground#eff1f5
settings.focusedRowBorder#dd7878
settings.headerForeground#7287fd
settings.modifiedItemIndicator#179299
settings.numberInputBackground#e6e9ef
settings.numberInputBorder#7287fd8a
settings.numberInputForeground#4c4f69
settings.textInputBackground#e6e9ef
settings.textInputBorder#7287fd8a
settings.textInputForeground#4c4f69
sideBar.background#e6e9ef
sideBar.border#e6e9ef
sideBar.dropBackground#e6e9ef
sideBar.foreground#6c6f85
sideBarSectionHeader.background#e6e9ef
sideBarSectionHeader.border#e6e9ef
sideBarSectionHeader.foreground#6c6f85
sideBarTitle.foreground#4c4f69
statusBar.background#e6e9ef
statusBar.border#e6e9ef00
statusBar.debuggingBackground#ef9f76
statusBar.debuggingBorder#ef9f76
statusBar.debuggingForeground#dce0e8
statusBar.foreground#acb0be
statusBar.noFolderBackground#e6e9ef
statusBar.noFolderBorder#ccd0da
statusBar.noFolderForeground#acb0be
statusBarItem.activeBackground#acb0be
statusBarItem.errorBackground#dce0e8
statusBarItem.errorForeground#d20f39
statusBarItem.hoverBackground#dce0e8
statusBarItem.hoverForeground#7287fd
statusBarItem.prominentBackground#e6e9ef
statusBarItem.prominentForeground#7287fd
statusBarItem.prominentHoverBackground#dce0e8
statusBarItem.prominentHoverForeground#209fb5
statusBarItem.remoteBackground#7287fd
statusBarItem.remoteForeground#dce0e8
statusBarItem.remoteHoverBackground#8839ef
statusBarItem.remoteHoverForeground#dce0e8
statusBarItem.warningBackground#dce0e8
statusBarItem.warningForeground#df8e1d
tab.activeBackground#eff1f5
tab.activeBorder#7287fd8a
tab.activeBorderTop#7287fd8a
tab.activeForeground#4c4f69
tab.activeModifiedBorder#6c6f85
tab.border#eff1f5
tab.inactiveBackground#eff1f5
tab.inactiveForeground#6c6f85
tab.inactiveModifiedBorder#d20f39
tab.unfocusedActiveBackground#eff1f5
tab.unfocusedActiveBorder#acb0be
tab.unfocusedActiveForeground#4c4f69
tab.unfocusedActiveModifiedBorder#d20f39
tab.unfocusedHoverBackground#8839ef21
tab.unfocusedInactiveForeground#7287fd
tab.unfocusedInactiveModifiedBorder#d20f39
terminal.ansiBlack#e6e9ef
terminal.ansiBlue#1e66f5
terminal.ansiBrightBlack#acb0be
terminal.ansiBrightBlue#1e66f5
terminal.ansiBrightCyan#04a5e5
terminal.ansiBrightGreen#40a02b
terminal.ansiBrightMagenta#8839ef
terminal.ansiBrightRed#d20f39
terminal.ansiBrightWhite#4c4f69
terminal.ansiBrightYellow#df8e1d
terminal.ansiCyan#04a5e5
terminal.ansiGreen#40a02b
terminal.ansiMagenta#8839ef
terminal.ansiRed#d20f39
terminal.ansiWhite#4c4f69
terminal.ansiYellow#df8e1d
terminal.background#e6e9ef
terminal.border#acb0be
terminal.dropBackground#acb0be99
terminal.foreground#4c4f69
terminal.selectionBackground#acb0be
terminalCursor.background#e6e9ef
terminalCursor.foreground#df8e1d
textBlockQuote.background#ccd0da
textBlockQuote.border#8839ef
textCodeBlock.background#ccd0da
textLink.activeForeground#8839ef
textLink.foreground#209fb5
textPreformat.foreground#ef9f76
textSeparator.foreground#ccd0da
titleBar.activeBackground#dce0e8
titleBar.activeForeground#4c4f69
titleBar.border#00000000
titleBar.inactiveBackground#dce0e8
titleBar.inactiveForeground#6c6f85
tree.indentGuidesStroke#bcc0cc
walkThrough.embeddedEditorBackground#ccd0da
welcomePage.progress.background#dce0e8
welcomePage.progress.foreground#179299
welcomePage.tileBackground#e6e9ef
widget.shadow#dce0e8
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	#9ca0b0	—
string.quoted.docstring.multi, string.quoted.docstring.multi punctuation.definition.string, markup.fenced_code.block	#7c7f93	—
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	#4c4f69	—
support.type.property-name.json, source.json meta.structure.dictionary.json support.type.property-name.json	#dc8a78	—
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	#8839ef	—
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	#4c4f69	—
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	#7287fd	—
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	#df8e1d	—
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	#d20f39	—
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	#40a02b	—
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	#40a02b	—
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	#e64553	—
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	#1e66f5	—
entity.name.function.decorator	#179299	—
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	#04a5e5	—
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	#dd7878	—
invalid, invalid.illegal	#d20f39	—
variable.language, variable.parameter.function.language.special	#e64553	—
token.info-token	#1e66f5	—
token.warn-token	#ef9f76	—
token.error-token	#d20f39	—
token.debug-token	#8839ef	—
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}!`;
}