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 Shusia

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#7accd7
activityBar.activeFocusBorder#7accd7
activityBar.background#1a181a
activityBar.border#1a181a
activityBar.dropBackground#2d2a2e
activityBar.foreground#e3e1e4
activityBar.inactiveForeground#848089
activityBarBadge.background#78dce8
activityBarBadge.foreground#2d2a2e
badge.background#a9dc76
badge.foreground#2d2a2e
breadcrumb.activeSelectionForeground#e3e1e4
breadcrumb.focusForeground#e3e1e4
breadcrumb.foreground#848089
button.background#78dce8
button.foreground#2d2a2e
button.hoverBackground#7accd7
checkbox.background#2d2a2e
checkbox.border#49464e
checkbox.foreground#ef9062
debugToolBar.background#2d2a2e
diffEditor.insertedTextBackground#9ecd6f20
diffEditor.removedTextBackground#f85e8428
dropdown.background#2d2a2e
dropdown.border#49464e
dropdown.foreground#e3e1e4
editor.background#2d2a2e
editor.findMatchBackground#f85e8440
editor.findMatchHighlightBackground#ab9df240
editor.findRangeHighlightBackground#ab9df240
editor.foreground#e3e1e4
editor.hoverHighlightBackground#9ecd6f38
editor.lineHighlightBackground#343136e0
editor.lineHighlightBorder#34313600
editor.rangeHighlightBackground#ab9df240
editor.selectionBackground#423f46f0
editor.selectionHighlightBackground#423f46f0
editor.snippetFinalTabstopHighlightBackground#ab9df230
editor.snippetFinalTabstopHighlightBorder#2d2a2e
editor.snippetTabstopHighlightBackground#49464ea0
editor.symbolHighlightBackground#9ecd6f38
editor.wordHighlightBackground#3b383ec0
editor.wordHighlightStrongBackground#3b383ec0
editorBracketMatch.background#49464e
editorBracketMatch.border#2d2a2e00
editorCodeLens.foreground#848089
editorCursor.foreground#e3e1e4
editorError.foreground#f85e84
editorGroup.border#1a181a
editorGroup.dropBackground#49464e60
editorGroupHeader.noTabsBackground#2d2a2e
editorGroupHeader.tabsBackground#2d2a2e
editorGutter.addedBackground#9ecd6f40
editorGutter.background#2d2a2e00
editorGutter.deletedBackground#f85e8440
editorGutter.modifiedBackground#7accd740
editorHint.foreground#9ecd6f
editorHoverWidget.background#343136
editorHoverWidget.border#49464e
editorIndentGuide.activeBackground#49464e
editorIndentGuide.background#3b383e
editorInfo.foreground#7accd7
editorLightBulb.foreground#ef9062
editorLightBulbAutoFix.foreground#9ecd6f
editorLineNumber.activeForeground#e3e1e4
editorLineNumber.foreground#848089
editorLink.activeForeground#9ecd6f
editorMarkerNavigation.background#38353a
editorMarkerNavigationError.background#f85e84
editorMarkerNavigationInfo.background#7accd7
editorMarkerNavigationWarning.background#e5c463
editorOverviewRuler.addedForeground#9ecd6f80
editorOverviewRuler.border#2d2a2e00
editorOverviewRuler.commonContentForeground#848089
editorOverviewRuler.currentContentForeground#7accd7a0
editorOverviewRuler.deletedForeground#f85e8480
editorOverviewRuler.errorForeground#f85e84
editorOverviewRuler.findMatchForeground#9ecd6f80
editorOverviewRuler.incomingContentForeground#9ecd6fa0
editorOverviewRuler.infoForeground#7accd7
editorOverviewRuler.modifiedForeground#7accd780
editorOverviewRuler.rangeHighlightForeground#9ecd6f80
editorOverviewRuler.selectionHighlightForeground#9ecd6f80
editorOverviewRuler.warningForeground#e5c463
editorOverviewRuler.wordHighlightForeground#84808980
editorOverviewRuler.wordHighlightStrongForeground#84808960
editorRuler.foreground#49464e
editorSuggestWidget.background#38353a
editorSuggestWidget.border#38353a
editorSuggestWidget.foreground#e3e1e4
editorSuggestWidget.highlightForeground#9ecd6f
editorSuggestWidget.selectedBackground#423f46
editorUnnecessaryCode.border#848089
editorUnnecessaryCode.opacity#ffffffff
editorWarning.foreground#e5c463
editorWhitespace.foreground#848089
editorWidget.background#2d2a2e
editorWidget.border#49464e
errorForeground#f85e84
extensionBadge.remoteBackground#7accd7
extensionBadge.remoteForeground#2d2a2e
extensionButton.prominentBackground#a9dc76
extensionButton.prominentForeground#2d2a2e
extensionButton.prominentHoverBackground#9ecd6f
focusBorder#49464e00
foreground#e3e1e4
gitDecoration.addedResourceForeground#9ecd6f80
gitDecoration.conflictingResourceForeground#ab9df290
gitDecoration.deletedResourceForeground#f85e8490
gitDecoration.ignoredResourceForeground#49464e
gitDecoration.modifiedResourceForeground#7accd780
gitDecoration.submoduleResourceForeground#ef906280
gitDecoration.untrackedResourceForeground#e5c46370
icon.foreground#7accd7
imagePreview.border#2d2a2e
input.background#2d2a2e00
input.border#49464e
input.foreground#e3e1e4
input.placeholderForeground#848089
inputOption.activeBorder#9ecd6f
inputValidation.errorBackground#3b383e
inputValidation.errorBorder#f85e84
inputValidation.errorForeground#f85e84
inputValidation.infoBackground#3b383e
inputValidation.infoBorder#7accd7
inputValidation.infoForeground#7accd7
inputValidation.warningBackground#3b383e
inputValidation.warningBorder#e5c463
inputValidation.warningForeground#e5c463
list.activeSelectionBackground#2d2a2ee0
list.activeSelectionForeground#e3e1e4
list.dropBackground#34313680
list.errorForeground#f85e84
list.focusBackground#3b383e80
list.focusForeground#e3e1e4
list.highlightForeground#9ecd6f
list.hoverBackground#24212400
list.hoverForeground#e3e1e4
list.inactiveFocusBackground#3b383e68
list.inactiveSelectionBackground#2d2a2ec8
list.inactiveSelectionForeground#848089
list.invalidItemForeground#f85e8480
list.warningForeground#e5c463
menu.background#242124
menu.foreground#e3e1e4
menu.selectionBackground#2d2a2e
menu.selectionForeground#e3e1e4
menubar.selectionBackground#2d2a2e
menubar.selectionBorder#2d2a2e
merge.border#2d2a2e00
merge.currentContentBackground#7accd71a
merge.currentHeaderBackground#7accd730
merge.incomingContentBackground#9ecd6f1a
merge.incomingHeaderBackground#9ecd6f30
minimap.errorHighlight#f85e8470
minimap.findMatchHighlight#9ecd6f40
minimap.selectionHighlight#49464ef0
minimap.warningHighlight#e5c46350
minimapGutter.addedBackground#9ecd6fa0
minimapGutter.deletedBackground#f85e84a0
minimapGutter.modifiedBackground#7accd7a0
notificationCenterHeader.background#3b383e
notificationCenterHeader.foreground#e3e1e4
notificationLink.foreground#9ecd6f
notifications.background#2d2a2e
notifications.foreground#e3e1e4
notificationsErrorIcon.foreground#f85e84
notificationsInfoIcon.foreground#7accd7
notificationsWarningIcon.foreground#e5c463
panel.background#343136
panel.border#343136
panelInput.border#49464e
panelTitle.activeBorder#7accd7
panelTitle.activeForeground#e3e1e4
panelTitle.inactiveForeground#848089
peekView.border#423f46
peekViewEditor.background#343136
peekViewEditor.matchHighlightBackground#7accd728
peekViewEditorGutter.background#343136
peekViewResult.background#343136
peekViewResult.fileForeground#e3e1e4
peekViewResult.matchHighlightBackground#ef906250
peekViewResult.selectionBackground#9ecd6f28
peekViewTitle.background#423f46
peekViewTitleDescription.foreground#848089
peekViewTitleLabel.foreground#e3e1e4
pickerGroup.border#e3e1e41a
problemsErrorIcon.foreground#f85e84
problemsInfoIcon.foreground#7accd7
problemsWarningIcon.foreground#e5c463
progressBar.background#a9dc76
quickInputList.focusBackground#423f46f0
scrollbar.shadow#00000070
scrollbarSlider.activeBackground#848089b0
scrollbarSlider.background#84808970
scrollbarSlider.hoverBackground#84808990
selection.background#49464ee0
settings.checkboxBackground#2d2a2e
settings.checkboxBorder#49464e
settings.checkboxForeground#ef9062
settings.dropdownBackground#2d2a2e
settings.dropdownBorder#49464e
settings.dropdownForeground#9ecd6f
settings.headerForeground#e3e1e4
settings.numberInputBackground#2d2a2e
settings.numberInputBorder#49464e
settings.numberInputForeground#ab9df2
settings.textInputBackground#2d2a2e
settings.textInputBorder#49464e
settings.textInputForeground#7accd7
sideBar.background#242124
sideBar.foreground#848089
sideBarSectionHeader.background#2d2a2e00
sideBarSectionHeader.foreground#848089
sideBarTitle.foreground#848089
statusBar.background#242124
statusBar.border#242124
statusBar.debuggingBackground#f85e84
statusBar.debuggingBorder#f85e84
statusBar.debuggingForeground#2d2a2e
statusBar.foreground#e3e1e4
statusBar.noFolderBackground#242124
statusBar.noFolderBorder#242124
statusBar.noFolderForeground#e3e1e4
statusBar.prominentBackground#ff6188
statusBar.prominentForeground#2d2a2e
statusBar.prominentHoverBackground#ff6188
statusBarItem.activeBackground#3b383ea0
statusBarItem.hoverBackground#3b383e
statusBarItem.remoteBackground#ff6188
statusBarItem.remoteForeground#2d2a2e
symbolIcon.arrayForeground#e3e1e4
symbolIcon.booleanForeground#ab9df2
symbolIcon.classForeground#7accd7
symbolIcon.colorForeground#e3e1e4
symbolIcon.constantForeground#ab9df2
symbolIcon.constructorForeground#9ecd6f
symbolIcon.enumeratorForeground#ab9df2
symbolIcon.enumeratorMemberForeground#ab9df2
symbolIcon.eventForeground#7accd7
symbolIcon.fieldForeground#e3e1e4
symbolIcon.fileForeground#e3e1e4
symbolIcon.folderForeground#e3e1e4
symbolIcon.functionForeground#9ecd6f
symbolIcon.interfaceForeground#7accd7
symbolIcon.keyForeground#9ecd6f
symbolIcon.keywordForeground#f85e84
symbolIcon.methodForeground#9ecd6f
symbolIcon.moduleForeground#f85e84
symbolIcon.namespaceForeground#f85e84
symbolIcon.nullForeground#ab9df2
symbolIcon.numberForeground#ab9df2
symbolIcon.objectForeground#7accd7
symbolIcon.operatorForeground#f85e84
symbolIcon.packageForeground#f85e84
symbolIcon.propertyForeground#e3e1e4
symbolIcon.referenceForeground#7accd7
symbolIcon.snippetForeground#e3e1e4
symbolIcon.stringForeground#e5c463
symbolIcon.structForeground#7accd7
symbolIcon.textForeground#e3e1e4
symbolIcon.typeParameterForeground#ef9062
symbolIcon.unitForeground#e3e1e4
symbolIcon.variableForeground#e3e1e4
tab.activeBackground#2d2a2e
tab.activeBorder#7accd7
tab.activeForeground#e3e1e4
tab.border#2d2a2e
tab.hoverBackground#2d2a2e
tab.inactiveBackground#2d2a2e
tab.inactiveForeground#848089
tab.unfocusedActiveBorder#2d2a2e00
tab.unfocusedActiveForeground#e3e1e4
tab.unfocusedInactiveForeground#848089
terminal.ansiBlack#49464e
terminal.ansiBlue#7accd7
terminal.ansiBrightBlack#49464e
terminal.ansiBrightBlue#7accd7
terminal.ansiBrightCyan#ef9062
terminal.ansiBrightGreen#9ecd6f
terminal.ansiBrightMagenta#ab9df2
terminal.ansiBrightRed#f85e84
terminal.ansiBrightWhite#e3e1e4
terminal.ansiBrightYellow#e5c463
terminal.ansiCyan#ef9062
terminal.ansiGreen#9ecd6f
terminal.ansiMagenta#ab9df2
terminal.ansiRed#f85e84
terminal.ansiWhite#e3e1e4
terminal.ansiYellow#e5c463
terminal.foreground#e3e1e4
terminalCursor.foreground#e3e1e4
textBlockQuote.background#343136
textBlockQuote.border#848089
textCodeBlock.background#343136
textLink.activeForeground#9ecd6fa0
textLink.foreground#9ecd6f
titleBar.activeBackground#242124
titleBar.activeForeground#e3e1e4
titleBar.border#242124
titleBar.inactiveBackground#242124
titleBar.inactiveForeground#848089
tree.indentGuidesStroke#848089
welcomePage.buttonBackground#3b383ea0
welcomePage.buttonHoverBackground#3b383e60
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	#848089	—
comment storage.type	#848089	—
comment entity.name.type	#848089	—
comment variable, comment variable.other	#848089	—
comment keyword.codetag.notation	#ab9df2	—
comment.git-status.header.remote	#f85e84	—
comment.git-status.header.local	#7accd7	—
comment.other.git-status.head	#e3e1e4	—
constant	#ab9df2	—
constant.other	#e3e1e4	—
constant.other.php	#ab9df2	—
constant.other.property	#ab9df2	—
constant.other.citation.latex	#ab9df2	—
constant.other.color	#ab9df2	—
constant.other.character-class.escape	#ab9df2	—
constant.other.key	#ab9df2	—
constant.other.symbol	#ef9062	—
constant.numeric	#ab9df2	—
constant.language	#ab9df2	—
constant.character.escape	#ab9df2	—
constant.numeric.line-number.find-in-files	#848089	—
constant.numeric.line-number.match.find-in-files	#e5c463	—
entity.name.section	#e5c463	—
entity.name.function, entity.name.function.templated	#9ecd6f	—
entity.name.function.member.static	#e3e1e4	—
entity.name.type.class.templated, entity.name.type.class.generic, entity.name.type.namespace	#7accd7	—
entity.name.label	#ab9df2	—
entity.name.function.preprocessor	#7accd7	—
entity.name	#9ecd6f	—
entity.name.class	#7accd7	—
entity.name.constant	#ab9df2	—
entity.name.namespace	#e3e1e4	—
entity.other.inherited-class	#7accd7	italic
entity.name.function	#9ecd6f	—
entity.name.tag, entity.name.tag.js.jsx support.class.component.js.jsx, entity.name.tag support.class.component	#f85e84	—
entity.name.function.operator	#f85e84	—
entity.name.type, entity.name.type.class.reference, entity.name.type.class.value	#7accd7	—
entity.other.attribute-name	#7accd7	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	#9ecd6f	—
entity.other.attribute-name.id.css	#ef9062	—
entity.other.attribute-name.pseudo-class.css, entity.other.pseudo-class.css, entity.other.pseudo-element.css	#7accd7	italic
entity.name.function, support.function	#9ecd6f	—
entity.other.git-status.hex	#ab9df2	—
entity.other.jinja2.delimiter	#848089	—
entity.name.operator.custom-literal	#e3e1e4	—
entity.name.operator.custom-literal.string	#e5c463	—
entity.name.operator.custom-literal.number	#ab9df2	—
entity.name.type.rust	#7accd7	—
entity.name.lifetime.rust	#f85e84	—
invalid	—	italic
keyword	#f85e84	—
keyword.control	#f85e84	—
keyword.control.directive	#f85e84	—
keyword.operator, keyword.operator.member, keyword.operator.new	#f85e84	—
keyword.other.substitution	#848089	—
keyword.other.template.begin, keyword.other.template.end	#f85e84	—
keyword.operator.heading.restructuredtext, keyword.operator.table.row.restructuredtext keyword.operator.table.data.restructuredtext	#848089	—
keyword.other.fn.rust, keyword.other.rust, keyword.other.unsafe.rust, keyword.other.where.rust	#7accd7	—
keyword.control.rust, keyword.operator.misc.rust	#f85e84	—
markup.italic	—	italic
markup.bold	—	bold
markup.heading	#e5c463	—
markup.raw	#ef9062	—
markup.underline	—	underline
markup.underline.link	#9ecd6f	—
markup.inserted, markup.inserted punctuation.definition.inserted	#9ecd6f	—
markup.deleted, markup.deleted punctuation.definition.deleted	#f85e84	—
markup.changed, markup.changed punctuation.definition.changed	#e5c463	—
markup.ignored, markup.ignored punctuation.definition.ignored	#848089	—
markup.untracked	#848089	—
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	#848089	—
meta.function-call.python, meta.function-call.arguments.python meta.function-call.python	#9ecd6f	—
meta.function-call.python meta.function-call.arguments.python	#e3e1e4	—
meta.instance.constructor	#9ecd6f	—
meta.attribute-with-value.class string, meta.attribute.class.html string	#9ecd6f	—
meta.attribute-with-value.id string, meta.attribute.id.html string	#ef9062	—
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	#e3e1e4	—
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	#e5c463	—
meta.object.member	#e3e1e4	—
meta.property-list.css variable.other	#ef9062	—
entity.name.constant.preprocessor, meta.preprocessor	#ab9df2	—
meta.diff.git-diff.header	#e5c463	—
meta.type_params.rust	#e3e1e4	—
meta.attribute.rust, variable.language.rust	#ef9062	—
punctuation	#848089	—
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	#848089	—
punctuation.definition.group	#e3e1e4	—
punctuation.definition.comment	#848089	—
punctuation.definition.variable, punctuation.definition.keyword.scss, punctuation.definition.entity.css	#848089	—
punctuation.section.embedded, punctuation.section.embedded entity.name.tag, punctuation.section.embedded constant.other, punctuation.section.embedded source	#ef9062	—
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	#f85e84	—
meta.paragraph.markdown meta.dummy.line-break, meta.paragraph.markdown meta.hard-line-break.markdown	—	—
region.redish	#f85e84	—
region.orangish	#ef9062	—
region.yellowish	#e5c463	—
region.greenish	#9ecd6f	—
region.bluish	#7accd7	—
region.purplish	#ab9df2	—
region.pinkish	#f85e84	—
region.whitish	#e3e1e4	—
source	#e3e1e4	—
source.scss, source.sass	#e3e1e4	—
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	#ef9062	italic
source.git-show.commit.sha	#ab9df2	—
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	#848089	—
source.git-show meta.diff.git-diff.header.extended.index.from-sha, source.git-show meta.diff.git-diff.header.extended.index.to-sha	#ab9df2	—
source.git-show meta.diff.range.unified	#ef9062	—
source.git-show meta.diff.header.from-file, source.git-show meta.diff.header.to-file	#848089	—
storage	#f85e84	—
storage.type	#7accd7	italic
storage.type.extends	#f85e84	normal
storage.type.function.arrow	#f85e84	normal
storage.modifier, storage.type.modifier	#f85e84	italic
storage.class.restructuredtext.ref	#ab9df2	—
storage.modifier.visibility.rust, storage.modifier.lifetime.rust	#f85e84	—
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	#7accd7	—
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	#f85e84	—
string	#e5c463	—
string.unquoted.label	#e3e1e4	—
string source	#e3e1e4	—
string source punctuation.section.embedded	#848089	—
string.other.link.title, string.other.link.description	#f85e84	—
string.other.link.description.title	#7accd7	—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end	#f85e84	—
string.other.ref, string.other.restructuredtext.ref	#9ecd6f	—
string.other.git-status.help.key	#848089	—
string.other.git-status.remote	#f85e84	—
support.constant	#7accd7	—
support.constant.handlebars	#848089	—
support.type.vendor-prefix.css	#848089	—
support.function	#9ecd6f	—
support.type, entity.name.type.object.console	#7accd7	italic
support.variable	#7accd7	—
support.type.property-name	#e3e1e4	normal
support.class	#7accd7	—
support.constant.core.rust	#ab9df2	—
text	#e3e1e4	—
text.find-in-files	#e3e1e4	—
variable, variable.other	#e3e1e4	—
variable.parameter, parameters variable.function	#ef9062	italic
variable.language, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python	#ef9062	italic
variable.language.arguments	#ab9df2	—
variable.other.class	#7accd7	—
variable.other.constant	#ab9df2	—
variable.other.member	#e3e1e4	—
variable.other.enummember	#ab9df2	—
variable.other.property, variable.other.property.static, variable.other.event	#e3e1e4	—
variable.function	#9ecd6f	—
variable.other.substitution	#ef9062	—
source.ruby variable.other.readwrite.instance.ruby, source.ruby variable.other.readwrite.class.ruby	#ab9df2	—
source.jinja2 variable.other.jinja2.block	#9ecd6f	—
source.jinja2 variable.other.jinja2	#ef9062	—

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