Sonokai

Name: Sonokai
Author: sainnhe

Publisher: sainnheThemes in package: 6

High Contrast & Vivid Color Scheme based on Monokai Pro

GitHub

Color themes

VS Code preview

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

Sonokai — Sonokai Andromeda

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.activeBorder#6dcae8
activityBar.activeFocusBorder#6dcae8
activityBar.background#181a1c
activityBar.border#181a1c
activityBar.dropBackground#2b2d3a
activityBar.foreground#e1e3e4
activityBar.inactiveForeground#7e8294
activityBarBadge.background#77d5f0
activityBarBadge.foreground#2b2d3a
badge.background#a9dc76
badge.foreground#2b2d3a
breadcrumb.activeSelectionForeground#e1e3e4
breadcrumb.focusForeground#e1e3e4
breadcrumb.foreground#7e8294
button.background#77d5f0
button.foreground#2b2d3a
button.hoverBackground#6dcae8
checkbox.background#2b2d3a
checkbox.border#3f445b
checkbox.foreground#f89860
debugToolBar.background#2b2d3a
diffEditor.insertedTextBackground#9ed06c20
diffEditor.removedTextBackground#fb617e28
dropdown.background#2b2d3a
dropdown.border#3f445b
dropdown.foreground#e1e3e4
editor.background#2b2d3a
editor.findMatchBackground#fb617e40
editor.findMatchHighlightBackground#bb97ee40
editor.findRangeHighlightBackground#bb97ee40
editor.foreground#e1e3e4
editor.hoverHighlightBackground#9ed06c38
editor.lineHighlightBackground#2f3242e0
editor.lineHighlightBorder#2f324200
editor.rangeHighlightBackground#bb97ee40
editor.selectionBackground#393e53f0
editor.selectionHighlightBackground#393e53f0
editor.snippetFinalTabstopHighlightBackground#bb97ee30
editor.snippetFinalTabstopHighlightBorder#2b2d3a
editor.snippetTabstopHighlightBackground#3f445ba0
editor.symbolHighlightBackground#9ed06c38
editor.wordHighlightBackground#363a4ec0
editor.wordHighlightStrongBackground#363a4ec0
editorBracketMatch.background#3f445b
editorBracketMatch.border#2b2d3a00
editorCodeLens.foreground#7e8294
editorCursor.foreground#e1e3e4
editorError.foreground#fb617e
editorGroup.border#181a1c
editorGroup.dropBackground#3f445b60
editorGroupHeader.noTabsBackground#2b2d3a
editorGroupHeader.tabsBackground#2b2d3a
editorGutter.addedBackground#9ed06c40
editorGutter.background#2b2d3a00
editorGutter.deletedBackground#fb617e40
editorGutter.modifiedBackground#6dcae840
editorHint.foreground#9ed06c
editorHoverWidget.background#2f3242
editorHoverWidget.border#3f445b
editorIndentGuide.activeBackground#3f445b
editorIndentGuide.background#363a4e
editorInfo.foreground#6dcae8
editorLightBulb.foreground#f89860
editorLightBulbAutoFix.foreground#9ed06c
editorLineNumber.activeForeground#e1e3e4
editorLineNumber.foreground#7e8294
editorLink.activeForeground#9ed06c
editorMarkerNavigation.background#333648
editorMarkerNavigationError.background#fb617e
editorMarkerNavigationInfo.background#6dcae8
editorMarkerNavigationWarning.background#edc763
editorOverviewRuler.addedForeground#9ed06c80
editorOverviewRuler.border#2b2d3a00
editorOverviewRuler.commonContentForeground#7e8294
editorOverviewRuler.currentContentForeground#6dcae8a0
editorOverviewRuler.deletedForeground#fb617e80
editorOverviewRuler.errorForeground#fb617e
editorOverviewRuler.findMatchForeground#9ed06c80
editorOverviewRuler.incomingContentForeground#9ed06ca0
editorOverviewRuler.infoForeground#6dcae8
editorOverviewRuler.modifiedForeground#6dcae880
editorOverviewRuler.rangeHighlightForeground#9ed06c80
editorOverviewRuler.selectionHighlightForeground#9ed06c80
editorOverviewRuler.warningForeground#edc763
editorOverviewRuler.wordHighlightForeground#7e829480
editorOverviewRuler.wordHighlightStrongForeground#7e829460
editorRuler.foreground#3f445b
editorSuggestWidget.background#333648
editorSuggestWidget.border#333648
editorSuggestWidget.foreground#e1e3e4
editorSuggestWidget.highlightForeground#9ed06c
editorSuggestWidget.selectedBackground#393e53
editorUnnecessaryCode.border#7e8294
editorUnnecessaryCode.opacity#ffffffff
editorWarning.foreground#edc763
editorWhitespace.foreground#7e8294
editorWidget.background#2b2d3a
editorWidget.border#3f445b
errorForeground#fb617e
extensionBadge.remoteBackground#6dcae8
extensionBadge.remoteForeground#2b2d3a
extensionButton.prominentBackground#a9dc76
extensionButton.prominentForeground#2b2d3a
extensionButton.prominentHoverBackground#9ed06c
focusBorder#3f445b00
foreground#e1e3e4
gitDecoration.addedResourceForeground#9ed06c80
gitDecoration.conflictingResourceForeground#bb97ee90
gitDecoration.deletedResourceForeground#fb617e90
gitDecoration.ignoredResourceForeground#3f445b
gitDecoration.modifiedResourceForeground#6dcae880
gitDecoration.submoduleResourceForeground#f8986080
gitDecoration.untrackedResourceForeground#edc76370
icon.foreground#6dcae8
imagePreview.border#2b2d3a
input.background#2b2d3a00
input.border#3f445b
input.foreground#e1e3e4
input.placeholderForeground#7e8294
inputOption.activeBorder#9ed06c
inputValidation.errorBackground#363a4e
inputValidation.errorBorder#fb617e
inputValidation.errorForeground#fb617e
inputValidation.infoBackground#363a4e
inputValidation.infoBorder#6dcae8
inputValidation.infoForeground#6dcae8
inputValidation.warningBackground#363a4e
inputValidation.warningBorder#edc763
inputValidation.warningForeground#edc763
list.activeSelectionBackground#2b2d3ae0
list.activeSelectionForeground#e1e3e4
list.dropBackground#2f324280
list.errorForeground#fb617e
list.focusBackground#363a4e80
list.focusForeground#e1e3e4
list.highlightForeground#9ed06c
list.hoverBackground#21232b00
list.hoverForeground#e1e3e4
list.inactiveFocusBackground#363a4e68
list.inactiveSelectionBackground#2b2d3ac8
list.inactiveSelectionForeground#7e8294
list.invalidItemForeground#fb617e80
list.warningForeground#edc763
menu.background#21232b
menu.foreground#e1e3e4
menu.selectionBackground#2b2d3a
menu.selectionForeground#e1e3e4
menubar.selectionBackground#2b2d3a
menubar.selectionBorder#2b2d3a
merge.border#2b2d3a00
merge.currentContentBackground#6dcae81a
merge.currentHeaderBackground#6dcae830
merge.incomingContentBackground#9ed06c1a
merge.incomingHeaderBackground#9ed06c30
minimap.errorHighlight#fb617e70
minimap.findMatchHighlight#9ed06c40
minimap.selectionHighlight#3f445bf0
minimap.warningHighlight#edc76350
minimapGutter.addedBackground#9ed06ca0
minimapGutter.deletedBackground#fb617ea0
minimapGutter.modifiedBackground#6dcae8a0
notificationCenterHeader.background#363a4e
notificationCenterHeader.foreground#e1e3e4
notificationLink.foreground#9ed06c
notifications.background#2b2d3a
notifications.foreground#e1e3e4
notificationsErrorIcon.foreground#fb617e
notificationsInfoIcon.foreground#6dcae8
notificationsWarningIcon.foreground#edc763
panel.background#2f3242
panel.border#2f3242
panelInput.border#3f445b
panelTitle.activeBorder#6dcae8
panelTitle.activeForeground#e1e3e4
panelTitle.inactiveForeground#7e8294
peekView.border#393e53
peekViewEditor.background#2f3242
peekViewEditor.matchHighlightBackground#6dcae828
peekViewEditorGutter.background#2f3242
peekViewResult.background#2f3242
peekViewResult.fileForeground#e1e3e4
peekViewResult.matchHighlightBackground#f8986050
peekViewResult.selectionBackground#9ed06c28
peekViewTitle.background#393e53
peekViewTitleDescription.foreground#7e8294
peekViewTitleLabel.foreground#e1e3e4
pickerGroup.border#e1e3e41a
problemsErrorIcon.foreground#fb617e
problemsInfoIcon.foreground#6dcae8
problemsWarningIcon.foreground#edc763
progressBar.background#a9dc76
quickInputList.focusBackground#363a4e80
scrollbar.shadow#00000070
scrollbarSlider.activeBackground#7e8294b0
scrollbarSlider.background#7e829470
scrollbarSlider.hoverBackground#7e829490
selection.background#3f445be0
settings.checkboxBackground#2b2d3a
settings.checkboxBorder#3f445b
settings.checkboxForeground#f89860
settings.dropdownBackground#2b2d3a
settings.dropdownBorder#3f445b
settings.dropdownForeground#9ed06c
settings.headerForeground#e1e3e4
settings.numberInputBackground#2b2d3a
settings.numberInputBorder#3f445b
settings.numberInputForeground#bb97ee
settings.textInputBackground#2b2d3a
settings.textInputBorder#3f445b
settings.textInputForeground#6dcae8
sideBar.background#21232b
sideBar.foreground#7e8294
sideBarSectionHeader.background#2b2d3a00
sideBarSectionHeader.foreground#7e8294
sideBarTitle.foreground#7e8294
statusBar.background#21232b
statusBar.border#21232b
statusBar.debuggingBackground#fb617e
statusBar.debuggingBorder#fb617e
statusBar.debuggingForeground#2b2d3a
statusBar.foreground#e1e3e4
statusBar.noFolderBackground#21232b
statusBar.noFolderBorder#21232b
statusBar.noFolderForeground#e1e3e4
statusBar.prominentBackground#ff6188
statusBar.prominentForeground#2b2d3a
statusBar.prominentHoverBackground#ff6188
statusBarItem.activeBackground#363a4ea0
statusBarItem.hoverBackground#363a4e
statusBarItem.remoteBackground#ff6188
statusBarItem.remoteForeground#2b2d3a
symbolIcon.arrayForeground#e1e3e4
symbolIcon.booleanForeground#bb97ee
symbolIcon.classForeground#6dcae8
symbolIcon.colorForeground#e1e3e4
symbolIcon.constantForeground#bb97ee
symbolIcon.constructorForeground#9ed06c
symbolIcon.enumeratorForeground#bb97ee
symbolIcon.enumeratorMemberForeground#bb97ee
symbolIcon.eventForeground#6dcae8
symbolIcon.fieldForeground#e1e3e4
symbolIcon.fileForeground#e1e3e4
symbolIcon.folderForeground#e1e3e4
symbolIcon.functionForeground#9ed06c
symbolIcon.interfaceForeground#6dcae8
symbolIcon.keyForeground#9ed06c
symbolIcon.keywordForeground#fb617e
symbolIcon.methodForeground#9ed06c
symbolIcon.moduleForeground#fb617e
symbolIcon.namespaceForeground#fb617e
symbolIcon.nullForeground#bb97ee
symbolIcon.numberForeground#bb97ee
symbolIcon.objectForeground#6dcae8
symbolIcon.operatorForeground#fb617e
symbolIcon.packageForeground#fb617e
symbolIcon.propertyForeground#e1e3e4
symbolIcon.referenceForeground#6dcae8
symbolIcon.snippetForeground#e1e3e4
symbolIcon.stringForeground#edc763
symbolIcon.structForeground#6dcae8
symbolIcon.textForeground#e1e3e4
symbolIcon.typeParameterForeground#f89860
symbolIcon.unitForeground#e1e3e4
symbolIcon.variableForeground#e1e3e4
tab.activeBackground#2b2d3a
tab.activeBorder#6dcae8
tab.activeForeground#e1e3e4
tab.border#2b2d3a
tab.hoverBackground#2b2d3a
tab.inactiveBackground#2b2d3a
tab.inactiveForeground#7e8294
tab.unfocusedActiveBorder#2b2d3a00
tab.unfocusedActiveForeground#e1e3e4
tab.unfocusedInactiveForeground#7e8294
terminal.ansiBlack#3f445b
terminal.ansiBlue#6dcae8
terminal.ansiBrightBlack#3f445b
terminal.ansiBrightBlue#6dcae8
terminal.ansiBrightCyan#f89860
terminal.ansiBrightGreen#9ed06c
terminal.ansiBrightMagenta#bb97ee
terminal.ansiBrightRed#fb617e
terminal.ansiBrightWhite#e1e3e4
terminal.ansiBrightYellow#edc763
terminal.ansiCyan#f89860
terminal.ansiGreen#9ed06c
terminal.ansiMagenta#bb97ee
terminal.ansiRed#fb617e
terminal.ansiWhite#e1e3e4
terminal.ansiYellow#edc763
terminal.foreground#e1e3e4
terminalCursor.foreground#e1e3e4
textBlockQuote.background#2f3242
textBlockQuote.border#7e8294
textCodeBlock.background#2f3242
textLink.activeForeground#9ed06ca0
textLink.foreground#9ed06c
titleBar.activeBackground#21232b
titleBar.activeForeground#e1e3e4
titleBar.border#21232b
titleBar.inactiveBackground#21232b
titleBar.inactiveForeground#7e8294
tree.indentGuidesStroke#7e8294
welcomePage.buttonBackground#363a4ea0
welcomePage.buttonHoverBackground#363a4e60
widget.shadow#00000070

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment keyword, comment markup.underline.link, comment string, comment punctuation.definition, comment punctuation, comment text	#7e8294	—
comment storage.type	#7e8294	—
comment entity.name.type	#7e8294	—
comment variable, comment variable.other	#7e8294	—
comment keyword.codetag.notation	#bb97ee	—
comment.git-status.header.remote	#fb617e	—
comment.git-status.header.local	#6dcae8	—
comment.other.git-status.head	#e1e3e4	—
constant	#bb97ee	—
constant.other	#e1e3e4	—
constant.other.php	#bb97ee	—
constant.other.property	#bb97ee	—
constant.other.citation.latex	#bb97ee	—
constant.other.color	#bb97ee	—
constant.other.character-class.escape	#bb97ee	—
constant.other.key	#bb97ee	—
constant.other.symbol	#f89860	—
constant.numeric	#bb97ee	—
constant.language	#bb97ee	—
constant.character.escape	#bb97ee	—
constant.numeric.line-number.find-in-files	#7e8294	—
constant.numeric.line-number.match.find-in-files	#edc763	—
entity.name.section	#edc763	—
entity.name.function, entity.name.function.templated	#9ed06c	—
entity.name.function.member.static	#e1e3e4	—
entity.name.type.class.templated, entity.name.type.class.generic, entity.name.type.namespace	#6dcae8	—
entity.name.label	#bb97ee	—
entity.name.function.preprocessor	#6dcae8	—
entity.name	#9ed06c	—
entity.name.class	#6dcae8	—
entity.name.constant	#bb97ee	—
entity.name.namespace	#e1e3e4	—
entity.other.inherited-class	#6dcae8	italic
entity.name.function	#9ed06c	—
entity.name.tag, entity.name.tag.js.jsx support.class.component.js.jsx, entity.name.tag support.class.component	#fb617e	—
entity.name.function.operator	#fb617e	—
entity.name.type, entity.name.type.class.reference, entity.name.type.class.value	#6dcae8	—
entity.other.attribute-name	#6dcae8	italic
entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector-suffix.css, entity.other.attribute-name.parent-selector-suffix.css punctuation.definition.entity.css, entity.other.attribute-name.css	#9ed06c	—
entity.other.attribute-name.id.css	#f89860	—
entity.other.attribute-name.pseudo-class.css, entity.other.pseudo-class.css, entity.other.pseudo-element.css	#6dcae8	italic
entity.name.function, support.function	#9ed06c	—
entity.other.git-status.hex	#bb97ee	—
entity.other.jinja2.delimiter	#7e8294	—
entity.name.operator.custom-literal	#e1e3e4	—
entity.name.operator.custom-literal.string	#edc763	—
entity.name.operator.custom-literal.number	#bb97ee	—
entity.name.type.rust	#6dcae8	—
entity.name.lifetime.rust	#fb617e	—
invalid	—	italic
keyword	#fb617e	—
keyword.control	#fb617e	—
keyword.control.directive	#fb617e	—
keyword.operator, keyword.operator.member, keyword.operator.new	#fb617e	—
keyword.other.substitution	#7e8294	—
keyword.other.template.begin, keyword.other.template.end	#fb617e	—
keyword.operator.heading.restructuredtext, keyword.operator.table.row.restructuredtext keyword.operator.table.data.restructuredtext	#7e8294	—
keyword.other.fn.rust, keyword.other.rust, keyword.other.unsafe.rust, keyword.other.where.rust	#6dcae8	—
keyword.control.rust, keyword.operator.misc.rust	#fb617e	—
markup.italic	—	italic
markup.bold	—	bold
markup.heading	#edc763	—
markup.raw	#f89860	—
markup.underline	—	underline
markup.underline.link	#9ed06c	—
markup.inserted, markup.inserted punctuation.definition.inserted	#9ed06c	—
markup.deleted, markup.deleted punctuation.definition.deleted	#fb617e	—
markup.changed, markup.changed punctuation.definition.changed	#edc763	—
markup.ignored, markup.ignored punctuation.definition.ignored	#7e8294	—
markup.untracked	#7e8294	—
markup.quote	—	italic
meta.brace.round, meta.brace.square, meta.brace.curly, meta.delimiter.comma.js, meta.function-call.without-arguments.js, meta.function-call.method.without-arguments.js	#7e8294	—
meta.function-call.python, meta.function-call.arguments.python meta.function-call.python	#9ed06c	—
meta.function-call.python meta.function-call.arguments.python	#e1e3e4	—
meta.instance.constructor	#9ed06c	—
meta.attribute-with-value.class string, meta.attribute.class.html string	#9ed06c	—
meta.attribute-with-value.id string, meta.attribute.id.html string	#f89860	—
source.json meta.structure.dictionary, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary, source.json meta.structure.dictionary string, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary string, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary string, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary string, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary string, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary string, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary string, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary string, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary string, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary string, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary string, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary string, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary string, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary string, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary string, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary string	#e1e3e4	—
source.json meta.structure.dictionary.value string, source.json meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value string, source.json meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value string, source.json meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value string, source.json meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value string, source.json meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value string, source.json meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value string, source.json meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value string, source.json meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value string, source.json meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value string, source.json meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value string, source.json meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value string, source.json meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value string, source.json meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value string, source.json meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value string, source.json meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value string	#edc763	—
meta.object.member	#e1e3e4	—
meta.property-list.css variable.other	#f89860	—
entity.name.constant.preprocessor, meta.preprocessor	#bb97ee	—
meta.diff.git-diff.header	#edc763	—
meta.type_params.rust	#e1e3e4	—
meta.attribute.rust, variable.language.rust	#f89860	—
punctuation	#7e8294	—
punctuation.definition.tag, punctuation.definition.tag source, punctuation.definition.group.begin.ruby, punctuation.definition.group.end.ruby, punctuation.definition.group.begin.css, punctuation.definition.group.end.css, punctuation.definition.string.end.html source.css	#7e8294	—
punctuation.definition.group	#e1e3e4	—
punctuation.definition.comment	#7e8294	—
punctuation.definition.variable, punctuation.definition.keyword.scss, punctuation.definition.entity.css	#7e8294	—
punctuation.section.embedded, punctuation.section.embedded entity.name.tag, punctuation.section.embedded constant.other, punctuation.section.embedded source	#f89860	—
punctuation.template-string.element.begin, punctuation.template-string.element.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end, string.quoted.template punctuation.definition.string.begin, string.quoted.template punctuation.definition.string.end	#fb617e	—
meta.paragraph.markdown meta.dummy.line-break, meta.paragraph.markdown meta.hard-line-break.markdown	—	—
region.redish	#fb617e	—
region.orangish	#f89860	—
region.yellowish	#edc763	—
region.greenish	#9ed06c	—
region.bluish	#6dcae8	—
region.purplish	#bb97ee	—
region.pinkish	#fb617e	—
region.whitish	#e1e3e4	—
source	#e1e3e4	—
source.scss, source.sass	#e1e3e4	—
source.sass variable.other, source.sass variable.sass, source.scss variable.other, source.scss variable.scss, source.scss variable.sass, source.css variable.other, source.css variable.scss, source.less variable.other, source.less variable.other.less, source.less variable.declaration.less	#f89860	italic
source.git-show.commit.sha	#bb97ee	—
source.git-show.author, source.git-show.date, source.git-diff.command, source.git-diff.command meta.diff.git-diff.header.from-file, source.git-diff.command meta.diff.git-diff.header.to-file	#7e8294	—
source.git-show meta.diff.git-diff.header.extended.index.from-sha, source.git-show meta.diff.git-diff.header.extended.index.to-sha	#bb97ee	—
source.git-show meta.diff.range.unified	#f89860	—
source.git-show meta.diff.header.from-file, source.git-show meta.diff.header.to-file	#7e8294	—
storage	#fb617e	—
storage.type	#6dcae8	italic
storage.type.extends	#fb617e	normal
storage.type.function.arrow	#fb617e	normal
storage.modifier, storage.type.modifier	#fb617e	italic
storage.class.restructuredtext.ref	#bb97ee	—
storage.modifier.visibility.rust, storage.modifier.lifetime.rust	#fb617e	—
storage.modifier.const.rust, storage.modifier.dyn.rust, storage.modifier.mut.rust, storage.modifier.static.rust, storage.type.rust, storage.type.core.rust, storage.class.std.rust	#6dcae8	—
storage.type.rust, storage.modifier.const.rust, storage.modifier.dyn.rust, storage.modifier.mut.rust, storage.modifier.static.rust, keyword.other.rust, keyword.other.where.rust	#fb617e	—
string	#edc763	—
string.unquoted.label	#e1e3e4	—
string source	#e1e3e4	—
string source punctuation.section.embedded	#7e8294	—
string.other.link.title, string.other.link.description	#fb617e	—
string.other.link.description.title	#6dcae8	—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end	#fb617e	—
string.other.ref, string.other.restructuredtext.ref	#9ed06c	—
string.other.git-status.help.key	#7e8294	—
string.other.git-status.remote	#fb617e	—
support.constant	#6dcae8	—
support.constant.handlebars	#7e8294	—
support.type.vendor-prefix.css	#7e8294	—
support.function	#9ed06c	—
support.type, entity.name.type.object.console	#6dcae8	italic
support.variable	#6dcae8	—
support.type.property-name	#e1e3e4	normal
support.class	#6dcae8	—
support.constant.core.rust	#bb97ee	—
text	#e1e3e4	—
text.find-in-files	#e1e3e4	—
variable, variable.other	#e1e3e4	—
variable.parameter, parameters variable.function	#f89860	italic
variable.language, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python	#f89860	italic
variable.language.arguments	#bb97ee	—
variable.other.class	#6dcae8	—
variable.other.constant	#bb97ee	—
variable.other.member	#e1e3e4	—
variable.other.enummember	#bb97ee	—
variable.other.property, variable.other.property.static, variable.other.event	#e1e3e4	—
variable.function	#9ed06c	—
variable.other.substitution	#f89860	—
source.ruby variable.other.readwrite.instance.ruby, source.ruby variable.other.readwrite.class.ruby	#bb97ee	—
source.jinja2 variable.other.jinja2.block	#9ed06c	—
source.jinja2 variable.other.jinja2	#f89860	—

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