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 Maia

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#78cee9
activityBar.activeFocusBorder#78cee9
activityBar.background#1c1e1f
activityBar.border#1c1e1f
activityBar.dropBackground#273136
activityBar.foreground#e1e2e3
activityBar.inactiveForeground#82878b
activityBarBadge.background#7cd5f1
activityBarBadge.foreground#273136
badge.background#a2e57b
badge.foreground#273136
breadcrumb.activeSelectionForeground#e1e2e3
breadcrumb.focusForeground#e1e2e3
breadcrumb.foreground#82878b
button.background#7cd5f1
button.foreground#273136
button.hoverBackground#78cee9
checkbox.background#273136
checkbox.border#414b53
checkbox.foreground#f3a96a
debugToolBar.background#273136
diffEditor.insertedTextBackground#9cd57b20
diffEditor.removedTextBackground#f76c7c28
dropdown.background#273136
dropdown.border#414b53
dropdown.foreground#e1e2e3
editor.background#273136
editor.findMatchBackground#f76c7c40
editor.findMatchHighlightBackground#baa0f840
editor.findRangeHighlightBackground#baa0f840
editor.foreground#e1e2e3
editor.hoverHighlightBackground#9cd57b38
editor.lineHighlightBackground#2e383ee0
editor.lineHighlightBorder#2e383e00
editor.rangeHighlightBackground#baa0f840
editor.selectionBackground#3a444bf0
editor.selectionHighlightBackground#3a444bf0
editor.snippetFinalTabstopHighlightBackground#baa0f830
editor.snippetFinalTabstopHighlightBorder#273136
editor.snippetTabstopHighlightBackground#414b53a0
editor.symbolHighlightBackground#9cd57b38
editor.wordHighlightBackground#353f46c0
editor.wordHighlightStrongBackground#353f46c0
editorBracketMatch.background#414b53
editorBracketMatch.border#27313600
editorCodeLens.foreground#82878b
editorCursor.foreground#e1e2e3
editorError.foreground#f76c7c
editorGroup.border#1c1e1f
editorGroup.dropBackground#414b5360
editorGroupHeader.noTabsBackground#273136
editorGroupHeader.tabsBackground#273136
editorGutter.addedBackground#9cd57b40
editorGutter.background#27313600
editorGutter.deletedBackground#f76c7c40
editorGutter.modifiedBackground#78cee940
editorHint.foreground#9cd57b
editorHoverWidget.background#2e383e
editorHoverWidget.border#414b53
editorIndentGuide.activeBackground#414b53
editorIndentGuide.background#353f46
editorInfo.foreground#78cee9
editorLightBulb.foreground#f3a96a
editorLightBulbAutoFix.foreground#9cd57b
editorLineNumber.activeForeground#e1e2e3
editorLineNumber.foreground#82878b
editorLink.activeForeground#9cd57b
editorMarkerNavigation.background#323c42
editorMarkerNavigationError.background#f76c7c
editorMarkerNavigationInfo.background#78cee9
editorMarkerNavigationWarning.background#e3d367
editorOverviewRuler.addedForeground#9cd57b80
editorOverviewRuler.border#27313600
editorOverviewRuler.commonContentForeground#82878b
editorOverviewRuler.currentContentForeground#78cee9a0
editorOverviewRuler.deletedForeground#f76c7c80
editorOverviewRuler.errorForeground#f76c7c
editorOverviewRuler.findMatchForeground#9cd57b80
editorOverviewRuler.incomingContentForeground#9cd57ba0
editorOverviewRuler.infoForeground#78cee9
editorOverviewRuler.modifiedForeground#78cee980
editorOverviewRuler.rangeHighlightForeground#9cd57b80
editorOverviewRuler.selectionHighlightForeground#9cd57b80
editorOverviewRuler.warningForeground#e3d367
editorOverviewRuler.wordHighlightForeground#82878b80
editorOverviewRuler.wordHighlightStrongForeground#82878b60
editorRuler.foreground#414b53
editorSuggestWidget.background#323c42
editorSuggestWidget.border#323c42
editorSuggestWidget.foreground#e1e2e3
editorSuggestWidget.highlightForeground#9cd57b
editorSuggestWidget.selectedBackground#3a444b
editorUnnecessaryCode.border#82878b
editorUnnecessaryCode.opacity#ffffffff
editorWarning.foreground#e3d367
editorWhitespace.foreground#82878b
editorWidget.background#273136
editorWidget.border#414b53
errorForeground#f76c7c
extensionBadge.remoteBackground#78cee9
extensionBadge.remoteForeground#273136
extensionButton.prominentBackground#a2e57b
extensionButton.prominentForeground#273136
extensionButton.prominentHoverBackground#9cd57b
focusBorder#414b5300
foreground#e1e2e3
gitDecoration.addedResourceForeground#9cd57b80
gitDecoration.conflictingResourceForeground#baa0f890
gitDecoration.deletedResourceForeground#f76c7c90
gitDecoration.ignoredResourceForeground#414b53
gitDecoration.modifiedResourceForeground#78cee980
gitDecoration.submoduleResourceForeground#f3a96a80
gitDecoration.untrackedResourceForeground#e3d36770
icon.foreground#78cee9
imagePreview.border#273136
input.background#27313600
input.border#414b53
input.foreground#e1e2e3
input.placeholderForeground#82878b
inputOption.activeBorder#9cd57b
inputValidation.errorBackground#353f46
inputValidation.errorBorder#f76c7c
inputValidation.errorForeground#f76c7c
inputValidation.infoBackground#353f46
inputValidation.infoBorder#78cee9
inputValidation.infoForeground#78cee9
inputValidation.warningBackground#353f46
inputValidation.warningBorder#e3d367
inputValidation.warningForeground#e3d367
list.activeSelectionBackground#273136e0
list.activeSelectionForeground#e1e2e3
list.dropBackground#2e383e80
list.errorForeground#f76c7c
list.focusBackground#353f4680
list.focusForeground#e1e2e3
list.highlightForeground#9cd57b
list.hoverBackground#22282b00
list.hoverForeground#e1e2e3
list.inactiveFocusBackground#353f4668
list.inactiveSelectionBackground#273136c8
list.inactiveSelectionForeground#82878b
list.invalidItemForeground#f76c7c80
list.warningForeground#e3d367
menu.background#22282b
menu.foreground#e1e2e3
menu.selectionBackground#273136
menu.selectionForeground#e1e2e3
menubar.selectionBackground#273136
menubar.selectionBorder#273136
merge.border#27313600
merge.currentContentBackground#78cee91a
merge.currentHeaderBackground#78cee930
merge.incomingContentBackground#9cd57b1a
merge.incomingHeaderBackground#9cd57b30
minimap.errorHighlight#f76c7c70
minimap.findMatchHighlight#9cd57b40
minimap.selectionHighlight#414b53f0
minimap.warningHighlight#e3d36750
minimapGutter.addedBackground#9cd57ba0
minimapGutter.deletedBackground#f76c7ca0
minimapGutter.modifiedBackground#78cee9a0
notificationCenterHeader.background#353f46
notificationCenterHeader.foreground#e1e2e3
notificationLink.foreground#9cd57b
notifications.background#273136
notifications.foreground#e1e2e3
notificationsErrorIcon.foreground#f76c7c
notificationsInfoIcon.foreground#78cee9
notificationsWarningIcon.foreground#e3d367
panel.background#2e383e
panel.border#2e383e
panelInput.border#414b53
panelTitle.activeBorder#78cee9
panelTitle.activeForeground#e1e2e3
panelTitle.inactiveForeground#82878b
peekView.border#3a444b
peekViewEditor.background#2e383e
peekViewEditor.matchHighlightBackground#78cee928
peekViewEditorGutter.background#2e383e
peekViewResult.background#2e383e
peekViewResult.fileForeground#e1e2e3
peekViewResult.matchHighlightBackground#f3a96a50
peekViewResult.selectionBackground#9cd57b28
peekViewTitle.background#3a444b
peekViewTitleDescription.foreground#82878b
peekViewTitleLabel.foreground#e1e2e3
pickerGroup.border#e1e2e31a
problemsErrorIcon.foreground#f76c7c
problemsInfoIcon.foreground#78cee9
problemsWarningIcon.foreground#e3d367
progressBar.background#a2e57b
quickInputList.focusBackground#3a444bf0
scrollbar.shadow#00000070
scrollbarSlider.activeBackground#82878bb0
scrollbarSlider.background#82878b70
scrollbarSlider.hoverBackground#82878b90
selection.background#414b53e0
settings.checkboxBackground#273136
settings.checkboxBorder#414b53
settings.checkboxForeground#f3a96a
settings.dropdownBackground#273136
settings.dropdownBorder#414b53
settings.dropdownForeground#9cd57b
settings.headerForeground#e1e2e3
settings.numberInputBackground#273136
settings.numberInputBorder#414b53
settings.numberInputForeground#baa0f8
settings.textInputBackground#273136
settings.textInputBorder#414b53
settings.textInputForeground#78cee9
sideBar.background#22282b
sideBar.foreground#82878b
sideBarSectionHeader.background#27313600
sideBarSectionHeader.foreground#82878b
sideBarTitle.foreground#82878b
statusBar.background#22282b
statusBar.border#22282b
statusBar.debuggingBackground#f76c7c
statusBar.debuggingBorder#f76c7c
statusBar.debuggingForeground#273136
statusBar.foreground#e1e2e3
statusBar.noFolderBackground#22282b
statusBar.noFolderBorder#22282b
statusBar.noFolderForeground#e1e2e3
statusBar.prominentBackground#ff6d7e
statusBar.prominentForeground#273136
statusBar.prominentHoverBackground#ff6d7e
statusBarItem.activeBackground#353f46a0
statusBarItem.hoverBackground#353f46
statusBarItem.remoteBackground#ff6d7e
statusBarItem.remoteForeground#273136
symbolIcon.arrayForeground#e1e2e3
symbolIcon.booleanForeground#baa0f8
symbolIcon.classForeground#78cee9
symbolIcon.colorForeground#e1e2e3
symbolIcon.constantForeground#baa0f8
symbolIcon.constructorForeground#9cd57b
symbolIcon.enumeratorForeground#baa0f8
symbolIcon.enumeratorMemberForeground#baa0f8
symbolIcon.eventForeground#78cee9
symbolIcon.fieldForeground#e1e2e3
symbolIcon.fileForeground#e1e2e3
symbolIcon.folderForeground#e1e2e3
symbolIcon.functionForeground#9cd57b
symbolIcon.interfaceForeground#78cee9
symbolIcon.keyForeground#9cd57b
symbolIcon.keywordForeground#f76c7c
symbolIcon.methodForeground#9cd57b
symbolIcon.moduleForeground#f76c7c
symbolIcon.namespaceForeground#f76c7c
symbolIcon.nullForeground#baa0f8
symbolIcon.numberForeground#baa0f8
symbolIcon.objectForeground#78cee9
symbolIcon.operatorForeground#f76c7c
symbolIcon.packageForeground#f76c7c
symbolIcon.propertyForeground#e1e2e3
symbolIcon.referenceForeground#78cee9
symbolIcon.snippetForeground#e1e2e3
symbolIcon.stringForeground#e3d367
symbolIcon.structForeground#78cee9
symbolIcon.textForeground#e1e2e3
symbolIcon.typeParameterForeground#f3a96a
symbolIcon.unitForeground#e1e2e3
symbolIcon.variableForeground#e1e2e3
tab.activeBackground#273136
tab.activeBorder#78cee9
tab.activeForeground#e1e2e3
tab.border#273136
tab.hoverBackground#273136
tab.inactiveBackground#273136
tab.inactiveForeground#82878b
tab.unfocusedActiveBorder#27313600
tab.unfocusedActiveForeground#e1e2e3
tab.unfocusedInactiveForeground#82878b
terminal.ansiBlack#414b53
terminal.ansiBlue#78cee9
terminal.ansiBrightBlack#414b53
terminal.ansiBrightBlue#78cee9
terminal.ansiBrightCyan#f3a96a
terminal.ansiBrightGreen#9cd57b
terminal.ansiBrightMagenta#baa0f8
terminal.ansiBrightRed#f76c7c
terminal.ansiBrightWhite#e1e2e3
terminal.ansiBrightYellow#e3d367
terminal.ansiCyan#f3a96a
terminal.ansiGreen#9cd57b
terminal.ansiMagenta#baa0f8
terminal.ansiRed#f76c7c
terminal.ansiWhite#e1e2e3
terminal.ansiYellow#e3d367
terminal.foreground#e1e2e3
terminalCursor.foreground#e1e2e3
textBlockQuote.background#2e383e
textBlockQuote.border#82878b
textCodeBlock.background#2e383e
textLink.activeForeground#9cd57ba0
textLink.foreground#9cd57b
titleBar.activeBackground#22282b
titleBar.activeForeground#e1e2e3
titleBar.border#22282b
titleBar.inactiveBackground#22282b
titleBar.inactiveForeground#82878b
tree.indentGuidesStroke#82878b
welcomePage.buttonBackground#353f46a0
welcomePage.buttonHoverBackground#353f4660
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	#82878b	—
comment storage.type	#82878b	—
comment entity.name.type	#82878b	—
comment variable, comment variable.other	#82878b	—
comment keyword.codetag.notation	#baa0f8	—
comment.git-status.header.remote	#f76c7c	—
comment.git-status.header.local	#78cee9	—
comment.other.git-status.head	#e1e2e3	—
constant	#baa0f8	—
constant.other	#e1e2e3	—
constant.other.php	#baa0f8	—
constant.other.property	#baa0f8	—
constant.other.citation.latex	#baa0f8	—
constant.other.color	#baa0f8	—
constant.other.character-class.escape	#baa0f8	—
constant.other.key	#baa0f8	—
constant.other.symbol	#f3a96a	—
constant.numeric	#baa0f8	—
constant.language	#baa0f8	—
constant.character.escape	#baa0f8	—
constant.numeric.line-number.find-in-files	#82878b	—
constant.numeric.line-number.match.find-in-files	#e3d367	—
entity.name.section	#e3d367	—
entity.name.function, entity.name.function.templated	#9cd57b	—
entity.name.function.member.static	#e1e2e3	—
entity.name.type.class.templated, entity.name.type.class.generic, entity.name.type.namespace	#78cee9	—
entity.name.label	#baa0f8	—
entity.name.function.preprocessor	#78cee9	—
entity.name	#9cd57b	—
entity.name.class	#78cee9	—
entity.name.constant	#baa0f8	—
entity.name.namespace	#e1e2e3	—
entity.other.inherited-class	#78cee9	italic
entity.name.function	#9cd57b	—
entity.name.tag, entity.name.tag.js.jsx support.class.component.js.jsx, entity.name.tag support.class.component	#f76c7c	—
entity.name.function.operator	#f76c7c	—
entity.name.type, entity.name.type.class.reference, entity.name.type.class.value	#78cee9	—
entity.other.attribute-name	#78cee9	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	#9cd57b	—
entity.other.attribute-name.id.css	#f3a96a	—
entity.other.attribute-name.pseudo-class.css, entity.other.pseudo-class.css, entity.other.pseudo-element.css	#78cee9	italic
entity.name.function, support.function	#9cd57b	—
entity.other.git-status.hex	#baa0f8	—
entity.other.jinja2.delimiter	#82878b	—
entity.name.operator.custom-literal	#e1e2e3	—
entity.name.operator.custom-literal.string	#e3d367	—
entity.name.operator.custom-literal.number	#baa0f8	—
entity.name.type.rust	#78cee9	—
entity.name.lifetime.rust	#f76c7c	—
invalid	—	italic
keyword	#f76c7c	—
keyword.control	#f76c7c	—
keyword.control.directive	#f76c7c	—
keyword.operator, keyword.operator.member, keyword.operator.new	#f76c7c	—
keyword.other.substitution	#82878b	—
keyword.other.template.begin, keyword.other.template.end	#f76c7c	—
keyword.operator.heading.restructuredtext, keyword.operator.table.row.restructuredtext keyword.operator.table.data.restructuredtext	#82878b	—
keyword.other.fn.rust, keyword.other.rust, keyword.other.unsafe.rust, keyword.other.where.rust	#78cee9	—
keyword.control.rust, keyword.operator.misc.rust	#f76c7c	—
markup.italic	—	italic
markup.bold	—	bold
markup.heading	#e3d367	—
markup.raw	#f3a96a	—
markup.underline	—	underline
markup.underline.link	#9cd57b	—
markup.inserted, markup.inserted punctuation.definition.inserted	#9cd57b	—
markup.deleted, markup.deleted punctuation.definition.deleted	#f76c7c	—
markup.changed, markup.changed punctuation.definition.changed	#e3d367	—
markup.ignored, markup.ignored punctuation.definition.ignored	#82878b	—
markup.untracked	#82878b	—
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	#82878b	—
meta.function-call.python, meta.function-call.arguments.python meta.function-call.python	#9cd57b	—
meta.function-call.python meta.function-call.arguments.python	#e1e2e3	—
meta.instance.constructor	#9cd57b	—
meta.attribute-with-value.class string, meta.attribute.class.html string	#9cd57b	—
meta.attribute-with-value.id string, meta.attribute.id.html string	#f3a96a	—
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	#e1e2e3	—
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	#e3d367	—
meta.object.member	#e1e2e3	—
meta.property-list.css variable.other	#f3a96a	—
entity.name.constant.preprocessor, meta.preprocessor	#baa0f8	—
meta.diff.git-diff.header	#e3d367	—
meta.type_params.rust	#e1e2e3	—
meta.attribute.rust, variable.language.rust	#f3a96a	—
punctuation	#82878b	—
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	#82878b	—
punctuation.definition.group	#e1e2e3	—
punctuation.definition.comment	#82878b	—
punctuation.definition.variable, punctuation.definition.keyword.scss, punctuation.definition.entity.css	#82878b	—
punctuation.section.embedded, punctuation.section.embedded entity.name.tag, punctuation.section.embedded constant.other, punctuation.section.embedded source	#f3a96a	—
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	#f76c7c	—
meta.paragraph.markdown meta.dummy.line-break, meta.paragraph.markdown meta.hard-line-break.markdown	—	—
region.redish	#f76c7c	—
region.orangish	#f3a96a	—
region.yellowish	#e3d367	—
region.greenish	#9cd57b	—
region.bluish	#78cee9	—
region.purplish	#baa0f8	—
region.pinkish	#f76c7c	—
region.whitish	#e1e2e3	—
source	#e1e2e3	—
source.scss, source.sass	#e1e2e3	—
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	#f3a96a	italic
source.git-show.commit.sha	#baa0f8	—
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	#82878b	—
source.git-show meta.diff.git-diff.header.extended.index.from-sha, source.git-show meta.diff.git-diff.header.extended.index.to-sha	#baa0f8	—
source.git-show meta.diff.range.unified	#f3a96a	—
source.git-show meta.diff.header.from-file, source.git-show meta.diff.header.to-file	#82878b	—
storage	#f76c7c	—
storage.type	#78cee9	italic
storage.type.extends	#f76c7c	normal
storage.type.function.arrow	#f76c7c	normal
storage.modifier, storage.type.modifier	#f76c7c	italic
storage.class.restructuredtext.ref	#baa0f8	—
storage.modifier.visibility.rust, storage.modifier.lifetime.rust	#f76c7c	—
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	#78cee9	—
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	#f76c7c	—
string	#e3d367	—
string.unquoted.label	#e1e2e3	—
string source	#e1e2e3	—
string source punctuation.section.embedded	#82878b	—
string.other.link.title, string.other.link.description	#f76c7c	—
string.other.link.description.title	#78cee9	—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end	#f76c7c	—
string.other.ref, string.other.restructuredtext.ref	#9cd57b	—
string.other.git-status.help.key	#82878b	—
string.other.git-status.remote	#f76c7c	—
support.constant	#78cee9	—
support.constant.handlebars	#82878b	—
support.type.vendor-prefix.css	#82878b	—
support.function	#9cd57b	—
support.type, entity.name.type.object.console	#78cee9	italic
support.variable	#78cee9	—
support.type.property-name	#e1e2e3	normal
support.class	#78cee9	—
support.constant.core.rust	#baa0f8	—
text	#e1e2e3	—
text.find-in-files	#e1e2e3	—
variable, variable.other	#e1e2e3	—
variable.parameter, parameters variable.function	#f3a96a	italic
variable.language, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python	#f3a96a	italic
variable.language.arguments	#baa0f8	—
variable.other.class	#78cee9	—
variable.other.constant	#baa0f8	—
variable.other.member	#e1e2e3	—
variable.other.enummember	#baa0f8	—
variable.other.property, variable.other.property.static, variable.other.event	#e1e2e3	—
variable.function	#9cd57b	—
variable.other.substitution	#f3a96a	—
source.ruby variable.other.readwrite.instance.ruby, source.ruby variable.other.readwrite.class.ruby	#baa0f8	—
source.jinja2 variable.other.jinja2.block	#9cd57b	—
source.jinja2 variable.other.jinja2	#f3a96a	—

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