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 Atlantis

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#72cce8
activityBar.activeFocusBorder#72cce8
activityBar.background#181a1c
activityBar.border#181a1c
activityBar.dropBackground#2a2f38
activityBar.foreground#e1e3e4
activityBar.inactiveForeground#828a9a
activityBarBadge.background#7ad5f1
activityBarBadge.foreground#2a2f38
badge.background#a5e179
badge.foreground#2a2f38
breadcrumb.activeSelectionForeground#e1e3e4
breadcrumb.focusForeground#e1e3e4
breadcrumb.foreground#828a9a
button.background#7ad5f1
button.foreground#2a2f38
button.hoverBackground#72cce8
checkbox.background#2a2f38
checkbox.border#424b5b
checkbox.foreground#f69c5e
debugToolBar.background#2a2f38
diffEditor.insertedTextBackground#9dd27420
diffEditor.removedTextBackground#ff657828
dropdown.background#2a2f38
dropdown.border#424b5b
dropdown.foreground#e1e3e4
editor.background#2a2f38
editor.findMatchBackground#ff657840
editor.findMatchHighlightBackground#ba9cf340
editor.findRangeHighlightBackground#ba9cf340
editor.foreground#e1e3e4
editor.hoverHighlightBackground#9dd27438
editor.lineHighlightBackground#303541e0
editor.lineHighlightBorder#30354100
editor.rangeHighlightBackground#ba9cf340
editor.selectionBackground#3d4455f0
editor.selectionHighlightBackground#3d4455f0
editor.snippetFinalTabstopHighlightBackground#ba9cf330
editor.snippetFinalTabstopHighlightBorder#2a2f38
editor.snippetTabstopHighlightBackground#424b5ba0
editor.symbolHighlightBackground#9dd27438
editor.wordHighlightBackground#373c4bc0
editor.wordHighlightStrongBackground#373c4bc0
editorBracketMatch.background#424b5b
editorBracketMatch.border#2a2f3800
editorCodeLens.foreground#828a9a
editorCursor.foreground#e1e3e4
editorError.foreground#ff6578
editorGroup.border#181a1c
editorGroup.dropBackground#424b5b60
editorGroupHeader.noTabsBackground#2a2f38
editorGroupHeader.tabsBackground#2a2f38
editorGutter.addedBackground#9dd27440
editorGutter.background#2a2f3800
editorGutter.deletedBackground#ff657840
editorGutter.modifiedBackground#72cce840
editorHint.foreground#9dd274
editorHoverWidget.background#303541
editorHoverWidget.border#424b5b
editorIndentGuide.activeBackground#424b5b
editorIndentGuide.background#373c4b
editorInfo.foreground#72cce8
editorLightBulb.foreground#f69c5e
editorLightBulbAutoFix.foreground#9dd274
editorLineNumber.activeForeground#e1e3e4
editorLineNumber.foreground#828a9a
editorLink.activeForeground#9dd274
editorMarkerNavigation.background#343946
editorMarkerNavigationError.background#ff6578
editorMarkerNavigationInfo.background#72cce8
editorMarkerNavigationWarning.background#eacb64
editorOverviewRuler.addedForeground#9dd27480
editorOverviewRuler.border#2a2f3800
editorOverviewRuler.commonContentForeground#828a9a
editorOverviewRuler.currentContentForeground#72cce8a0
editorOverviewRuler.deletedForeground#ff657880
editorOverviewRuler.errorForeground#ff6578
editorOverviewRuler.findMatchForeground#9dd27480
editorOverviewRuler.incomingContentForeground#9dd274a0
editorOverviewRuler.infoForeground#72cce8
editorOverviewRuler.modifiedForeground#72cce880
editorOverviewRuler.rangeHighlightForeground#9dd27480
editorOverviewRuler.selectionHighlightForeground#9dd27480
editorOverviewRuler.warningForeground#eacb64
editorOverviewRuler.wordHighlightForeground#828a9a80
editorOverviewRuler.wordHighlightStrongForeground#828a9a60
editorRuler.foreground#424b5b
editorSuggestWidget.background#343946
editorSuggestWidget.border#343946
editorSuggestWidget.foreground#e1e3e4
editorSuggestWidget.highlightForeground#9dd274
editorSuggestWidget.selectedBackground#3d4455
editorUnnecessaryCode.border#828a9a
editorUnnecessaryCode.opacity#ffffffff
editorWarning.foreground#eacb64
editorWhitespace.foreground#828a9a
editorWidget.background#2a2f38
editorWidget.border#424b5b
errorForeground#ff6578
extensionBadge.remoteBackground#72cce8
extensionBadge.remoteForeground#2a2f38
extensionButton.prominentBackground#a5e179
extensionButton.prominentForeground#2a2f38
extensionButton.prominentHoverBackground#9dd274
focusBorder#424b5b00
foreground#e1e3e4
gitDecoration.addedResourceForeground#9dd27480
gitDecoration.conflictingResourceForeground#ba9cf390
gitDecoration.deletedResourceForeground#ff657890
gitDecoration.ignoredResourceForeground#424b5b
gitDecoration.modifiedResourceForeground#72cce880
gitDecoration.submoduleResourceForeground#f69c5e80
gitDecoration.untrackedResourceForeground#eacb6470
icon.foreground#72cce8
imagePreview.border#2a2f38
input.background#2a2f3800
input.border#424b5b
input.foreground#e1e3e4
input.placeholderForeground#828a9a
inputOption.activeBorder#9dd274
inputValidation.errorBackground#373c4b
inputValidation.errorBorder#ff6578
inputValidation.errorForeground#ff6578
inputValidation.infoBackground#373c4b
inputValidation.infoBorder#72cce8
inputValidation.infoForeground#72cce8
inputValidation.warningBackground#373c4b
inputValidation.warningBorder#eacb64
inputValidation.warningForeground#eacb64
list.activeSelectionBackground#2a2f38e0
list.activeSelectionForeground#e1e3e4
list.dropBackground#30354180
list.errorForeground#ff6578
list.focusBackground#373c4b80
list.focusForeground#e1e3e4
list.highlightForeground#9dd274
list.hoverBackground#21252a00
list.hoverForeground#e1e3e4
list.inactiveFocusBackground#373c4b68
list.inactiveSelectionBackground#2a2f38c8
list.inactiveSelectionForeground#828a9a
list.invalidItemForeground#ff657880
list.warningForeground#eacb64
menu.background#21252a
menu.foreground#e1e3e4
menu.selectionBackground#2a2f38
menu.selectionForeground#e1e3e4
menubar.selectionBackground#2a2f38
menubar.selectionBorder#2a2f38
merge.border#2a2f3800
merge.currentContentBackground#72cce81a
merge.currentHeaderBackground#72cce830
merge.incomingContentBackground#9dd2741a
merge.incomingHeaderBackground#9dd27430
minimap.errorHighlight#ff657870
minimap.findMatchHighlight#9dd27440
minimap.selectionHighlight#424b5bf0
minimap.warningHighlight#eacb6450
minimapGutter.addedBackground#9dd274a0
minimapGutter.deletedBackground#ff6578a0
minimapGutter.modifiedBackground#72cce8a0
notificationCenterHeader.background#373c4b
notificationCenterHeader.foreground#e1e3e4
notificationLink.foreground#9dd274
notifications.background#2a2f38
notifications.foreground#e1e3e4
notificationsErrorIcon.foreground#ff6578
notificationsInfoIcon.foreground#72cce8
notificationsWarningIcon.foreground#eacb64
panel.background#303541
panel.border#303541
panelInput.border#424b5b
panelTitle.activeBorder#72cce8
panelTitle.activeForeground#e1e3e4
panelTitle.inactiveForeground#828a9a
peekView.border#3d4455
peekViewEditor.background#303541
peekViewEditor.matchHighlightBackground#72cce828
peekViewEditorGutter.background#303541
peekViewResult.background#303541
peekViewResult.fileForeground#e1e3e4
peekViewResult.matchHighlightBackground#f69c5e50
peekViewResult.selectionBackground#9dd27428
peekViewTitle.background#3d4455
peekViewTitleDescription.foreground#828a9a
peekViewTitleLabel.foreground#e1e3e4
pickerGroup.border#e1e3e41a
problemsErrorIcon.foreground#ff6578
problemsInfoIcon.foreground#72cce8
problemsWarningIcon.foreground#eacb64
progressBar.background#a5e179
quickInputList.focusBackground#3d4455f0
scrollbar.shadow#00000070
scrollbarSlider.activeBackground#828a9ab0
scrollbarSlider.background#828a9a70
scrollbarSlider.hoverBackground#828a9a90
selection.background#424b5be0
settings.checkboxBackground#2a2f38
settings.checkboxBorder#424b5b
settings.checkboxForeground#f69c5e
settings.dropdownBackground#2a2f38
settings.dropdownBorder#424b5b
settings.dropdownForeground#9dd274
settings.headerForeground#e1e3e4
settings.numberInputBackground#2a2f38
settings.numberInputBorder#424b5b
settings.numberInputForeground#ba9cf3
settings.textInputBackground#2a2f38
settings.textInputBorder#424b5b
settings.textInputForeground#72cce8
sideBar.background#21252a
sideBar.foreground#828a9a
sideBarSectionHeader.background#2a2f3800
sideBarSectionHeader.foreground#828a9a
sideBarTitle.foreground#828a9a
statusBar.background#21252a
statusBar.border#21252a
statusBar.debuggingBackground#ff6578
statusBar.debuggingBorder#ff6578
statusBar.debuggingForeground#2a2f38
statusBar.foreground#e1e3e4
statusBar.noFolderBackground#21252a
statusBar.noFolderBorder#21252a
statusBar.noFolderForeground#e1e3e4
statusBar.prominentBackground#ff6d7e
statusBar.prominentForeground#2a2f38
statusBar.prominentHoverBackground#ff6d7e
statusBarItem.activeBackground#373c4ba0
statusBarItem.hoverBackground#373c4b
statusBarItem.remoteBackground#ff6d7e
statusBarItem.remoteForeground#2a2f38
symbolIcon.arrayForeground#e1e3e4
symbolIcon.booleanForeground#ba9cf3
symbolIcon.classForeground#72cce8
symbolIcon.colorForeground#e1e3e4
symbolIcon.constantForeground#ba9cf3
symbolIcon.constructorForeground#9dd274
symbolIcon.enumeratorForeground#ba9cf3
symbolIcon.enumeratorMemberForeground#ba9cf3
symbolIcon.eventForeground#72cce8
symbolIcon.fieldForeground#e1e3e4
symbolIcon.fileForeground#e1e3e4
symbolIcon.folderForeground#e1e3e4
symbolIcon.functionForeground#9dd274
symbolIcon.interfaceForeground#72cce8
symbolIcon.keyForeground#9dd274
symbolIcon.keywordForeground#ff6578
symbolIcon.methodForeground#9dd274
symbolIcon.moduleForeground#ff6578
symbolIcon.namespaceForeground#ff6578
symbolIcon.nullForeground#ba9cf3
symbolIcon.numberForeground#ba9cf3
symbolIcon.objectForeground#72cce8
symbolIcon.operatorForeground#ff6578
symbolIcon.packageForeground#ff6578
symbolIcon.propertyForeground#e1e3e4
symbolIcon.referenceForeground#72cce8
symbolIcon.snippetForeground#e1e3e4
symbolIcon.stringForeground#eacb64
symbolIcon.structForeground#72cce8
symbolIcon.textForeground#e1e3e4
symbolIcon.typeParameterForeground#f69c5e
symbolIcon.unitForeground#e1e3e4
symbolIcon.variableForeground#e1e3e4
tab.activeBackground#2a2f38
tab.activeBorder#72cce8
tab.activeForeground#e1e3e4
tab.border#2a2f38
tab.hoverBackground#2a2f38
tab.inactiveBackground#2a2f38
tab.inactiveForeground#828a9a
tab.unfocusedActiveBorder#2a2f3800
tab.unfocusedActiveForeground#e1e3e4
tab.unfocusedInactiveForeground#828a9a
terminal.ansiBlack#424b5b
terminal.ansiBlue#72cce8
terminal.ansiBrightBlack#424b5b
terminal.ansiBrightBlue#72cce8
terminal.ansiBrightCyan#f69c5e
terminal.ansiBrightGreen#9dd274
terminal.ansiBrightMagenta#ba9cf3
terminal.ansiBrightRed#ff6578
terminal.ansiBrightWhite#e1e3e4
terminal.ansiBrightYellow#eacb64
terminal.ansiCyan#f69c5e
terminal.ansiGreen#9dd274
terminal.ansiMagenta#ba9cf3
terminal.ansiRed#ff6578
terminal.ansiWhite#e1e3e4
terminal.ansiYellow#eacb64
terminal.foreground#e1e3e4
terminalCursor.foreground#e1e3e4
textBlockQuote.background#303541
textBlockQuote.border#828a9a
textCodeBlock.background#303541
textLink.activeForeground#9dd274a0
textLink.foreground#9dd274
titleBar.activeBackground#21252a
titleBar.activeForeground#e1e3e4
titleBar.border#21252a
titleBar.inactiveBackground#21252a
titleBar.inactiveForeground#828a9a
tree.indentGuidesStroke#828a9a
welcomePage.buttonBackground#373c4ba0
welcomePage.buttonHoverBackground#373c4b60
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	#828a9a	—
comment storage.type	#828a9a	—
comment entity.name.type	#828a9a	—
comment variable, comment variable.other	#828a9a	—
comment keyword.codetag.notation	#ba9cf3	—
comment.git-status.header.remote	#ff6578	—
comment.git-status.header.local	#72cce8	—
comment.other.git-status.head	#e1e3e4	—
constant	#ba9cf3	—
constant.other	#e1e3e4	—
constant.other.php	#ba9cf3	—
constant.other.property	#ba9cf3	—
constant.other.citation.latex	#ba9cf3	—
constant.other.color	#ba9cf3	—
constant.other.character-class.escape	#ba9cf3	—
constant.other.key	#ba9cf3	—
constant.other.symbol	#f69c5e	—
constant.numeric	#ba9cf3	—
constant.language	#ba9cf3	—
constant.character.escape	#ba9cf3	—
constant.numeric.line-number.find-in-files	#828a9a	—
constant.numeric.line-number.match.find-in-files	#eacb64	—
entity.name.section	#eacb64	—
entity.name.function, entity.name.function.templated	#9dd274	—
entity.name.function.member.static	#e1e3e4	—
entity.name.type.class.templated, entity.name.type.class.generic, entity.name.type.namespace	#72cce8	—
entity.name.label	#ba9cf3	—
entity.name.function.preprocessor	#72cce8	—
entity.name	#9dd274	—
entity.name.class	#72cce8	—
entity.name.constant	#ba9cf3	—
entity.name.namespace	#e1e3e4	—
entity.other.inherited-class	#72cce8	italic
entity.name.function	#9dd274	—
entity.name.tag, entity.name.tag.js.jsx support.class.component.js.jsx, entity.name.tag support.class.component	#ff6578	—
entity.name.function.operator	#ff6578	—
entity.name.type, entity.name.type.class.reference, entity.name.type.class.value	#72cce8	—
entity.other.attribute-name	#72cce8	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	#9dd274	—
entity.other.attribute-name.id.css	#f69c5e	—
entity.other.attribute-name.pseudo-class.css, entity.other.pseudo-class.css, entity.other.pseudo-element.css	#72cce8	italic
entity.name.function, support.function	#9dd274	—
entity.other.git-status.hex	#ba9cf3	—
entity.other.jinja2.delimiter	#828a9a	—
entity.name.operator.custom-literal	#e1e3e4	—
entity.name.operator.custom-literal.string	#eacb64	—
entity.name.operator.custom-literal.number	#ba9cf3	—
entity.name.type.rust	#72cce8	—
entity.name.lifetime.rust	#ff6578	—
invalid	—	italic
keyword	#ff6578	—
keyword.control	#ff6578	—
keyword.control.directive	#ff6578	—
keyword.operator, keyword.operator.member, keyword.operator.new	#ff6578	—
keyword.other.substitution	#828a9a	—
keyword.other.template.begin, keyword.other.template.end	#ff6578	—
keyword.operator.heading.restructuredtext, keyword.operator.table.row.restructuredtext keyword.operator.table.data.restructuredtext	#828a9a	—
keyword.other.fn.rust, keyword.other.rust, keyword.other.unsafe.rust, keyword.other.where.rust	#72cce8	—
keyword.control.rust, keyword.operator.misc.rust	#ff6578	—
markup.italic	—	italic
markup.bold	—	bold
markup.heading	#eacb64	—
markup.raw	#f69c5e	—
markup.underline	—	underline
markup.underline.link	#9dd274	—
markup.inserted, markup.inserted punctuation.definition.inserted	#9dd274	—
markup.deleted, markup.deleted punctuation.definition.deleted	#ff6578	—
markup.changed, markup.changed punctuation.definition.changed	#eacb64	—
markup.ignored, markup.ignored punctuation.definition.ignored	#828a9a	—
markup.untracked	#828a9a	—
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	#828a9a	—
meta.function-call.python, meta.function-call.arguments.python meta.function-call.python	#9dd274	—
meta.function-call.python meta.function-call.arguments.python	#e1e3e4	—
meta.instance.constructor	#9dd274	—
meta.attribute-with-value.class string, meta.attribute.class.html string	#9dd274	—
meta.attribute-with-value.id string, meta.attribute.id.html string	#f69c5e	—
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	#eacb64	—
meta.object.member	#e1e3e4	—
meta.property-list.css variable.other	#f69c5e	—
entity.name.constant.preprocessor, meta.preprocessor	#ba9cf3	—
meta.diff.git-diff.header	#eacb64	—
meta.type_params.rust	#e1e3e4	—
meta.attribute.rust, variable.language.rust	#f69c5e	—
punctuation	#828a9a	—
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	#828a9a	—
punctuation.definition.group	#e1e3e4	—
punctuation.definition.comment	#828a9a	—
punctuation.definition.variable, punctuation.definition.keyword.scss, punctuation.definition.entity.css	#828a9a	—
punctuation.section.embedded, punctuation.section.embedded entity.name.tag, punctuation.section.embedded constant.other, punctuation.section.embedded source	#f69c5e	—
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	#ff6578	—
meta.paragraph.markdown meta.dummy.line-break, meta.paragraph.markdown meta.hard-line-break.markdown	—	—
region.redish	#ff6578	—
region.orangish	#f69c5e	—
region.yellowish	#eacb64	—
region.greenish	#9dd274	—
region.bluish	#72cce8	—
region.purplish	#ba9cf3	—
region.pinkish	#ff6578	—
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	#f69c5e	italic
source.git-show.commit.sha	#ba9cf3	—
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	#828a9a	—
source.git-show meta.diff.git-diff.header.extended.index.from-sha, source.git-show meta.diff.git-diff.header.extended.index.to-sha	#ba9cf3	—
source.git-show meta.diff.range.unified	#f69c5e	—
source.git-show meta.diff.header.from-file, source.git-show meta.diff.header.to-file	#828a9a	—
storage	#ff6578	—
storage.type	#72cce8	italic
storage.type.extends	#ff6578	normal
storage.type.function.arrow	#ff6578	normal
storage.modifier, storage.type.modifier	#ff6578	italic
storage.class.restructuredtext.ref	#ba9cf3	—
storage.modifier.visibility.rust, storage.modifier.lifetime.rust	#ff6578	—
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	#72cce8	—
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	#ff6578	—
string	#eacb64	—
string.unquoted.label	#e1e3e4	—
string source	#e1e3e4	—
string source punctuation.section.embedded	#828a9a	—
string.other.link.title, string.other.link.description	#ff6578	—
string.other.link.description.title	#72cce8	—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end	#ff6578	—
string.other.ref, string.other.restructuredtext.ref	#9dd274	—
string.other.git-status.help.key	#828a9a	—
string.other.git-status.remote	#ff6578	—
support.constant	#72cce8	—
support.constant.handlebars	#828a9a	—
support.type.vendor-prefix.css	#828a9a	—
support.function	#9dd274	—
support.type, entity.name.type.object.console	#72cce8	italic
support.variable	#72cce8	—
support.type.property-name	#e1e3e4	normal
support.class	#72cce8	—
support.constant.core.rust	#ba9cf3	—
text	#e1e3e4	—
text.find-in-files	#e1e3e4	—
variable, variable.other	#e1e3e4	—
variable.parameter, parameters variable.function	#f69c5e	italic
variable.language, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python	#f69c5e	italic
variable.language.arguments	#ba9cf3	—
variable.other.class	#72cce8	—
variable.other.constant	#ba9cf3	—
variable.other.member	#e1e3e4	—
variable.other.enummember	#ba9cf3	—
variable.other.property, variable.other.property.static, variable.other.event	#e1e3e4	—
variable.function	#9dd274	—
variable.other.substitution	#f69c5e	—
source.ruby variable.other.readwrite.instance.ruby, source.ruby variable.other.readwrite.class.ruby	#ba9cf3	—
source.jinja2 variable.other.jinja2.block	#9dd274	—
source.jinja2 variable.other.jinja2	#f69c5e	—

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