Ganbaru

Name: Ganbaru
Author: Marlodev

Publisher: MarlodevThemes in package: 2

🌿Theme inspired by oriental nature, bringing the essence of nature to your screen for a chill coding vibe.

Open in VS Code GitHub

Color themes

VS Code preview

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

Ganbaru — Ganbaru

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeFocusBorder#f3ace2
activityBar.background#151B24
activityBar.border#151B24
activityBar.foreground#b8c4c3
activityBar.inactiveForeground#505860
activityBarBadge.background#f3ace2
activityBarBadge.foreground#151b23
activityBarTop.background#0d1117
activityBarTop.foreground#b8c4c3
activityBarTop.inactiveForeground#97999b
badge.background#f3ace2
badge.foreground#151b23
banner.background#293039
banner.foreground#b8c4c3
banner.iconForeground#b8c4c3
breadcrumb.activeSelectionForeground#d0dbde
breadcrumb.focusForeground#b8c4c3
breadcrumb.foreground#888d94
breadcrumbPicker.background#151b23
button.background#293039
button.foreground#d0dbde
button.hoverBackground#505860
button.secondaryBackground#293039
button.secondaryForeground#b8c4c3
button.secondaryHoverBackground#505860
button.separator#151b23
charts.blue#7cd5f1
charts.foreground#d0dbde
charts.green#a2e57b
charts.lines#6b7678
charts.orange#ffb270
charts.purple#baa0f8
charts.red#ff6d7e
charts.yellow#f3ace2
chat.avatarBackground#151b23
chat.avatarForeground#baa0f8
chat.requestBackground#293039
chat.requestBorder#505860
chat.slashCommandBackground#00000000
chat.slashCommandForeground#f3ace2
checkbox.background#293039
checkbox.border#505860
checkbox.foreground#f3ace2
commandCenter.activeBackground#151b23
commandCenter.activeForeground#b8c4c3
commandCenter.background#151b23
commandCenter.border#151b23
commandCenter.debuggingBackground#0d1117
commandCenter.foreground#888d94
debugConsole.errorForeground#ff6d7e
debugConsole.infoForeground#7cd5f1
debugConsole.sourceForeground#d0dbde
debugConsole.warningForeground#ffb270
debugConsoleInputIcon.foreground#f3ace2
debugExceptionWidget.background#293039
debugExceptionWidget.border#41454b
debugIcon.breakpointCurrentStackframeForeground#f3ace2
debugIcon.breakpointDisabledForeground#b8c4c3
debugIcon.breakpointForeground#ff6d7e
debugIcon.breakpointStackframeForeground#d0dbde
debugIcon.breakpointUnverifiedForeground#ffb270
debugIcon.continueForeground#d0dbde
debugIcon.disconnectForeground#d0dbde
debugIcon.pauseForeground#d0dbde
debugIcon.restartForeground#a2e57b
debugIcon.startForeground#a2e57b
debugIcon.stepBackForeground#d0dbde
debugIcon.stepIntoForeground#d0dbde
debugIcon.stepOutForeground#d0dbde
debugIcon.stepOverForeground#d0dbde
debugIcon.stopForeground#ff6d7e
debugTokenExpression.boolean#ffb270
debugTokenExpression.error#ff6d7e
debugTokenExpression.name#7cd5f1
debugTokenExpression.number#baa0f8
debugTokenExpression.string#f3ace2
debugTokenExpression.value#d0dbde
debugToolBar.background#293039
debugView.exceptionLabelBackground#ff6d7e
debugView.exceptionLabelForeground#151b23
debugView.stateLabelBackground#a2e57b
debugView.stateLabelForeground#151b23
debugView.valueChangedHighlight#f3ace2
descriptionForeground#888d94
diffEditor.diagonalFill#293039
diffEditor.insertedLineBackground#a2e57b19
diffEditor.insertedTextBackground#a2e57b19
diffEditor.move.border
diffEditor.moveActive.border
diffEditor.removedLineBackground#ff6d7e19
diffEditor.removedTextBackground#ff6d7e19
diffEditor.unchangedCodeBackground#0d1117
diffEditor.unchangedRegionBackground#0d1117
diffEditor.unchangedRegionForeground#b8c4c3
diffEditor.unchangedRegionShadow#151B24
diffEditorGutter.insertedLineBackground#a2e57b19
diffEditorGutter.removedLineBackground#ff6d7e19
diffEditorOverview.insertedForeground#a2e57ba5
diffEditorOverview.removedForeground#ff6d7ea5
dropdown.background#293039
dropdown.border#505860
dropdown.foreground#888d94
dropdown.listBackground#293039
editor.background#151b23
editor.findMatchBackground#d0dbde26
editor.findMatchBorder#f3ace2
editor.findMatchHighlightBackground#d0dbde26
editor.findMatchHighlightBorder#00000000
editor.findRangeHighlightBackground#d0dbde0c
editor.findRangeHighlightBorder#00000000
editor.focusedStackFrameHighlightBackground#b8c4c326
editor.foldBackground#d0dbde0c
editor.foreground#d0dbde
editor.hoverHighlightBackground#d0dbde0c
editor.inactiveSelectionBackground#d0dbde0c
editor.inlineValuesBackground#505860
editor.inlineValuesForeground#b8c4c3
editor.lineHighlightBackground#d0dbde0c
editor.lineHighlightBorder#00000000
editor.linkedEditingBackground#293039
editor.rangeHighlightBackground#293039
editor.rangeHighlightBorder#293039
editor.selectionBackground#b8c4c326
editor.selectionHighlightBackground#d0dbde26
editor.selectionHighlightBorder#00000000
editor.stackFrameHighlightBackground#b8c4c326
editor.wordHighlightBackground#d0dbde26
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#d0dbde26
editor.wordHighlightStrongBorder#00000000
editorBracketHighlight.foreground1#ff6d7e
editorBracketHighlight.foreground2#ffb270
editorBracketHighlight.foreground3#f3ace2
editorBracketHighlight.foreground4#a2e57b
editorBracketHighlight.foreground5#7cd5f1
editorBracketHighlight.foreground6#baa0f8
editorBracketMatch.background#151b23
editorBracketMatch.border#6b7678
editorCodeLens.foreground#6b7678
editorCursor.background#151b23
editorCursor.foreground#d0dbde
editorError.background#00000000
editorError.border#00000000
editorError.foreground#ff6d7e
editorGhostText.foreground#6b7678
editorGroup.border#151b23
editorGroup.dropBackground#0d1117bf
editorGroup.emptyBackground#151B24
editorGroup.focusedEmptyBorder#41454b
editorGroupHeader.noTabsBackground#151b23
editorGroupHeader.tabsBackground#0d1117
editorGroupHeader.tabsBorder#151b23
editorGutter.addedBackground#a2e57b
editorGutter.background#151b23
editorGutter.deletedBackground#ff6d7e
editorGutter.foldingControlForeground#b8c4c3
editorGutter.modifiedBackground#ffb270
editorHint.border#151b23
editorHint.foreground#baa0f8
editorHoverWidget.background#293039
editorHoverWidget.border#41454b
editorIndentGuide.background#293039
editorInfo.background#00000000
editorInfo.border#151b23
editorInfo.foreground#7cd5f1
editorInlayHint.background#293039
editorInlayHint.foreground#888d94
editorLightBulb.foreground#f3ace2
editorLightBulbAi.foreground#f3ace2
editorLightBulbAutoFix.foreground#a2e57b
editorLineNumber.activeForeground#b8c4c3
editorLineNumber.foreground#505860
editorLink.activeForeground#7cd5f1
editorMarkerNavigation.background#293039
editorMarkerNavigationError.background#ff6d7e
editorMarkerNavigationInfo.background#7cd5f1
editorMarkerNavigationWarning.background#ffb270
editorOverviewRuler.addedForeground#a2e57b
editorOverviewRuler.border#151b23
editorOverviewRuler.currentContentForeground#293039
editorOverviewRuler.deletedForeground#ff6d7e
editorOverviewRuler.errorForeground#ff6d7e
editorOverviewRuler.findMatchForeground#d0dbde26
editorOverviewRuler.incomingContentForeground#293039
editorOverviewRuler.infoForeground#7cd5f1
editorOverviewRuler.modifiedForeground#ffb270
editorOverviewRuler.rangeHighlightForeground#d0dbde26
editorOverviewRuler.selectionHighlightForeground#d0dbde26
editorOverviewRuler.warningForeground#ffb270
editorOverviewRuler.wordHighlightForeground#d0dbde26
editorOverviewRuler.wordHighlightStrongForeground#d0dbde26
editorPane.background#151b23
editorRuler.foreground#505860
editorStickyScroll.background#151b23
editorStickyScroll.border#151b23
editorStickyScroll.shadow#151b23
editorStickyScrollHover.background#d0dbde0c
editorSuggestWidget.background#293039
editorSuggestWidget.border#41454b
editorSuggestWidget.foreground#b8c4c3
editorSuggestWidget.highlightForeground#d0dbde
editorSuggestWidget.selectedBackground#71659e
editorUnnecessaryCode.opacity#000000a5
editorWarning.background#00000000
editorWarning.border#00000000
editorWarning.foreground#ffb270
editorWhitespace.foreground#505860
editorWidget.background#293039
editorWidget.border#293039
errorForeground#ff6d7e
extensionBadge.remoteForeground#a2e57b
extensionButton.background#293039
extensionButton.foreground#b8c4c3
extensionButton.hoverBackground#505860
extensionButton.prominentBackground#293039
extensionButton.prominentForeground#d0dbde
extensionButton.prominentHoverBackground#505860
extensionIcon.preReleaseForeground#baa0f8
extensionIcon.sponsorForeground#7cd5f1
extensionIcon.starForeground#f3ace2
extensionIcon.verifiedForeground#a2e57b
focusBorder#293039
foreground#d0dbde
gitDecoration.addedResourceForeground#a2e57b
gitDecoration.conflictingResourceForeground#ffb270
gitDecoration.deletedResourceForeground#ff6d7e
gitDecoration.ignoredResourceForeground#505860
gitDecoration.modifiedResourceForeground#f3ace2
gitDecoration.stageDeletedResourceForeground#ff6d7e
gitDecoration.stageModifiedResourceForeground#f3ace2
gitDecoration.untrackedResourceForeground#b8c4c3
icon.foreground#888d94
inlineChat.background#151b23
inlineChat.border#41454b
inlineChat.shadow#151B24
inlineChatDiff.inserted#a2e57b19
inlineChatDiff.removed#a2e57b19
input.background#293039
input.border#293039
input.foreground#d0dbde
input.placeholderForeground#9facad
inputOption.activeBackground#505860
inputOption.activeBorder#505860
inputOption.activeForeground#d0dbde
inputOption.hoverBackground#505860
inputValidation.errorBackground#293039
inputValidation.errorBorder#ff6d7e
inputValidation.errorForeground#ff6d7e
inputValidation.infoBackground#293039
inputValidation.infoBorder#7cd5f1
inputValidation.infoForeground#7cd5f1
inputValidation.warningBackground#293039
inputValidation.warningBorder#ffb270
inputValidation.warningForeground#ffb270
interactive.activeCodeBorder#293039
interactive.inactiveCodeBorder#293039
keybindingLabel.background#505860
keybindingLabel.border#505860
keybindingLabel.bottomBorder#505860
keybindingLabel.foreground#b8c4c3
list.activeSelectionBackground#d0dbde0c
list.activeSelectionForeground#ffffff
list.dropBackground#0d1117bf
list.errorForeground#ff6d7e
list.focusBackground#151b23
list.focusForeground#d0dbde
list.highlightForeground#ffffff
list.hoverBackground#d0dbde0c
list.hoverForeground#d0dbde
list.inactiveFocusBackground#151b23
list.inactiveSelectionBackground#b8c4c30c
list.inactiveSelectionForeground#ffffff
list.invalidItemForeground#ff6d7e
list.warningForeground#ffb270
listFilterWidget.background#151b23
listFilterWidget.noMatchesOutline#ff6d7e
listFilterWidget.outline#151b23
listFilterWidget.shadow#151B24
menu.background#293039
menu.border#293039
menu.foreground#d0dbde
menu.selectionBackground#71659e
menu.selectionForeground#ffffff
menu.separatorBackground#293039
menubar.selectionForeground#d0dbde
merge.border#151b23
merge.commonContentBackground#d0dbde19
merge.commonHeaderBackground#d0dbde26
merge.currentContentBackground#ff6d7e19
merge.currentHeaderBackground#ff6d7e26
merge.incomingContentBackground#a2e57b19
merge.incomingHeaderBackground#a2e57b26
mergeEditor.change.background#d0dbde19
mergeEditor.change.word.background#d0dbde19
mergeEditor.conflict.handled.minimapOverViewRuler#a2e57b
mergeEditor.conflict.handledFocused.border#a2e57b
mergeEditor.conflict.handledUnfocused.border#a2e57b
mergeEditor.conflict.unhandled.minimapOverViewRuler#ff6d7e
mergeEditor.conflict.unhandledFocused.border#ff6d7e
mergeEditor.conflict.unhandledUnfocused.border#ff6d7e
minimap.errorHighlight#ff6d7ea5
minimap.findMatchHighlight#888d94a5
minimap.infoHighlight#7cd5f1a5
minimap.selectionHighlight#b8c4c326
minimap.selectionOccurrenceHighlight#6b7678a5
minimap.warningHighlight#ffb270a5
minimapGutter.addedBackground#a2e57b
minimapGutter.deletedBackground#ff6d7e
minimapGutter.modifiedBackground#f3ace2
notebook.cellBorderColor#293039
notebook.cellEditorBackground#0d11177f
notebook.cellInsertionIndicator#d0dbde
notebook.cellStatusBarItemHoverBackground#6b7678
notebook.cellToolbarSeparator#293039
notebook.editorBackground#151b23
notebook.focusedEditorBorder#6b7678
notebookStatusErrorIcon.foreground#ff6d7e
notebookStatusRunningIcon.foreground#d0dbde
notebookStatusSuccessIcon.foreground#a2e57b
notificationCenter.border#41454b
notificationCenterHeader.background#293039
notificationCenterHeader.foreground#888d94
notificationLink.foreground#f3ace2
notifications.background#293039
notifications.border#41454b
notifications.foreground#b8c4c3
notificationsErrorIcon.foreground#ff6d7e
notificationsInfoIcon.foreground#7cd5f1
notificationsWarningIcon.foreground#ffb270
notificationToast.border#41454b
panel.background#293039
panel.border#151B24
panel.dropBackground#0d1117bf
panelStickyScroll.background#293039
panelStickyScroll.border#505860
panelStickyScroll.shadow#293039
panelTitle.activeBorder#f3ace2
panelTitle.activeForeground#f3ace2
panelTitle.inactiveForeground#888d94
peekView.border#41454b
peekViewEditor.background#293039
peekViewEditor.matchHighlightBackground#505860
peekViewEditorGutter.background#293039
peekViewResult.background#293039
peekViewResult.fileForeground#888d94
peekViewResult.lineForeground#888d94
peekViewResult.matchHighlightBackground#505860
peekViewResult.selectionBackground#293039
peekViewResult.selectionForeground#d0dbde
peekViewTitle.background#0d1117
peekViewTitleDescription.foreground#888d94
peekViewTitleLabel.foreground#d0dbde
pickerGroup.border#293039
pickerGroup.foreground#505860
ports.iconRunningProcessForeground#a2e57b
problemsErrorIcon.foreground#ff6d7e
problemsInfoIcon.foreground#7cd5f1
problemsWarningIcon.foreground#ffb270
profileBadge.background#293039
profileBadge.foreground#b8c4c3
progressBar.background#6b7678
quickInput.background#293039
quickInput.foreground#888d94
quickInputList.focusBackground#71659e
sash.hoverBorder#6b7678
scmGraph.foreground1#ff6d7e
scmGraph.foreground2#ffb270
scmGraph.foreground3#f3ace2
scmGraph.foreground4#a2e57b
scmGraph.foreground5#baa0f8
scmGraph.historyItemBaseRefColor#7cd5f1
scmGraph.historyItemHoverAdditionsForeground#a2e57b
scmGraph.historyItemHoverDefaultLabelBackground#6b7678
scmGraph.historyItemHoverDefaultLabelForeground#151b23
scmGraph.historyItemHoverDeletionsForeground#ff6d7e
scmGraph.historyItemHoverLabelForeground#151b23
scmGraph.historyItemRefColor#baa0f8
scmGraph.historyItemRemoteRefColor#a2e57b
scrollbar.shadow#ff003300
scrollbarSlider.activeBackground#d0dbde59
scrollbarSlider.background#b8c4c326
scrollbarSlider.hoverBackground#d0dbde26
selection.background#b8c4c326
settings.checkboxBackground#293039
settings.checkboxBorder#505860
settings.checkboxForeground#f3ace2
settings.dropdownBackground#293039
settings.dropdownBorder#505860
settings.dropdownForeground#d0dbde
settings.dropdownListBorder#888d94
settings.headerForeground#f3ace2
settings.modifiedItemForeground#f3ace2
settings.modifiedItemIndicator#f3ace2
settings.numberInputBackground#293039
settings.numberInputBorder#505860
settings.numberInputForeground#d0dbde
settings.rowHoverBackground#6b76780c
settings.sashBorder#293039
settings.settingsHeaderHoverForeground#d0dbde
settings.textInputBackground#293039
settings.textInputBorder#505860
settings.textInputForeground#d0dbde
sideBar.background#0d1117
sideBar.border#151B24
sideBar.dropBackground#0d1117bf
sideBar.foreground#888d94
sideBarSectionHeader.background#0d1117
sideBarSectionHeader.foreground#6b7678
sideBarStickyScroll.background#0d1117
sideBarStickyScroll.border#293039
sideBarStickyScroll.shadow#0d1117
sideBarTitle.foreground#505860
simpleFindWidget.sashBorder
statusBar.background#0d1117
statusBar.border#151B24
statusBar.debuggingBackground#6b7678
statusBar.debuggingBorder#41454b
statusBar.debuggingForeground#d0dbde
statusBar.focusBorder#293039
statusBar.foreground#6b7678
statusBar.noFolderBackground#0d1117
statusBar.noFolderBorder#151B24
statusBar.noFolderForeground#6b7678
statusBarItem.activeBackground#151b23
statusBarItem.errorBackground#151b23
statusBarItem.errorForeground#ff6d7e
statusBarItem.focusBorder#6b7678
statusBarItem.hoverBackground#0d1117
statusBarItem.hoverForeground#d0dbde
statusBarItem.offlineBackground
statusBarItem.offlineForeground
statusBarItem.prominentBackground#293039
statusBarItem.prominentHoverBackground#293039
statusBarItem.remoteBackground#0d1117
statusBarItem.remoteForeground#a2e57b
statusBarItem.remoteHoverBackground#a2e57b
statusBarItem.remoteHoverForeground#151b23
statusBarItem.warningBackground#151b23
statusBarItem.warningForeground#ffb270
symbolIcon.arrayForeground#ff6d7e
symbolIcon.booleanForeground#ff6d7e
symbolIcon.classForeground#7cd5f1
symbolIcon.colorForeground#baa0f8
symbolIcon.constantForeground#baa0f8
symbolIcon.constructorForeground#a2e57b
symbolIcon.enumeratorForeground#ffb270
symbolIcon.enumeratorMemberForeground#ffb270
symbolIcon.eventForeground#ffb270
symbolIcon.fieldForeground#ffb270
symbolIcon.fileForeground#b8c4c3
symbolIcon.folderForeground#b8c4c3
symbolIcon.functionForeground#a2e57b
symbolIcon.interfaceForeground#7cd5f1
symbolIcon.keyForeground#ffb270
symbolIcon.keywordForeground#ff6d7e
symbolIcon.methodForeground#a2e57b
symbolIcon.moduleForeground#7cd5f1
symbolIcon.namespaceForeground#7cd5f1
symbolIcon.nullForeground#baa0f8
symbolIcon.numberForeground#baa0f8
symbolIcon.objectForeground#7cd5f1
symbolIcon.operatorForeground#ff6d7e
symbolIcon.packageForeground#baa0f8
symbolIcon.propertyForeground#ffb270
symbolIcon.referenceForeground#baa0f8
symbolIcon.snippetForeground#a2e57b
symbolIcon.stringForeground#f3ace2
symbolIcon.structForeground#ff6d7e
symbolIcon.textForeground#f3ace2
symbolIcon.typeParameterForeground#ffb270
symbolIcon.unitForeground#baa0f8
symbolIcon.variableForeground#7cd5f1
tab.activeBackground#151b23
tab.activeBorder#151b2300
tab.activeForeground#ffffff
tab.activeModifiedBorder#505860
tab.border#0d1117
tab.hoverBackground#0d1117
tab.hoverBorder#50586000
tab.hoverForeground#d0dbde
tab.inactiveBackground#0d1117
tab.inactiveForeground#888d94
tab.inactiveModifiedBorder#505860
tab.lastPinnedBorder#505860
tab.unfocusedActiveBorder#888d9400
tab.unfocusedActiveForeground#b8c4c3
tab.unfocusedActiveModifiedBorder#293039
tab.unfocusedHoverBackground#0d1117
tab.unfocusedHoverBorder#151b23
tab.unfocusedHoverForeground#b8c4c3
tab.unfocusedInactiveForeground#888d94
tab.unfocusedInactiveModifiedBorder#293039
terminal.ansiBlack#293039
terminal.ansiBlue#ffb270
terminal.ansiBrightBlack#6b7678
terminal.ansiBrightBlue#ffb270
terminal.ansiBrightCyan#7cd5f1
terminal.ansiBrightGreen#a2e57b
terminal.ansiBrightMagenta#baa0f8
terminal.ansiBrightRed#ff6d7e
terminal.ansiBrightWhite#d0dbde
terminal.ansiBrightYellow#f3ace2
terminal.ansiCyan#7cd5f1
terminal.ansiGreen#a2e57b
terminal.ansiMagenta#baa0f8
terminal.ansiRed#ff6d7e
terminal.ansiWhite#d0dbde
terminal.ansiYellow#f3ace2
terminal.background#293039
terminal.foreground#d0dbde
terminal.selectionBackground#d0dbde26
terminalCommandDecoration.defaultBackground#d0dbde
terminalCommandDecoration.errorBackground#ff6d7e
terminalCommandDecoration.successBackground#a2e57b
terminalCursor.background#00000000
terminalCursor.foreground#d0dbde
testing.iconErrored#ff6d7e
testing.iconFailed#ff6d7e
testing.iconPassed#a2e57b
testing.iconQueued#d0dbde
testing.iconSkipped#ffb270
testing.iconUnset#888d94
testing.message.error.decorationForeground#ff6d7e
testing.message.error.lineBackground#ff6d7e19
testing.message.info.decorationForeground#d0dbde
testing.message.info.lineBackground#d0dbde19
testing.runAction#f3ace2
textBlockQuote.background#293039
textBlockQuote.border#293039
textCodeBlock.background#293039
textLink.activeForeground#d0dbde
textLink.foreground#f3ace2
textPreformat.foreground#d0dbde
textSeparator.foreground#6b7678
titleBar.activeBackground#151b23
titleBar.activeForeground#888d94
titleBar.border#0d1117
titleBar.inactiveBackground#151b23
titleBar.inactiveForeground#505860
tree.inactiveIndentGuidesStroke#151b23
tree.indentGuidesStroke#293039
walkThrough.embeddedEditorBackground#0d1117
welcomePage.buttonBackground#293039
welcomePage.buttonHoverBackground#505860
welcomePage.progress.background#6b7678
welcomePage.progress.foreground#888d94
welcomePage.tileBackground#293039
welcomePage.tileHoverBackground#505860
welcomePage.tileShadow#151B24
widget.shadow#0d1013e1

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	#606B83	normal
comment storage.type	#606B83	—
comment entity.name.type	#9fa6aa	—
comment variable, comment variable.other	#9fa6aa	—
comment keyword, comment entity.name.tag, entity.name.tag.documentation	#9fa6aa	—
comment keyword.codetag.notation	#60cee1	—
comment.git-status.header.remote	#e8608c	—
comment.git-status.header.local	#b8abec	—
comment.other.git-status.head	#ced5e2	—
string.quoted.docstring, string.quoted.docstring punctuation.definition	#606B83	—
constant	#60cee1	—
constant.other	#ced5e2	—
constant.other.caps	#60cee1	—
constant.other.placeholder	#fbac7a	—
constant.other.property	#60cee1	—
constant.other.citation.latex	#60cee1	—
constant.other.color	#60cee1	—
constant.other.character-class.escape	#60cee1	—
constant.other.key	#60cee1	—
constant.other.symbol	#fbac7a	—
constant.other.elm	#b8abec	—
constant.language	#	—
constant.character.escape	#60cee1	—
constant.numeric.line-number.find-in-files	#535a5d	—
constant.numeric.line-number.match.find-in-files	#ecaee3	—
entity.name.section	#ecaee3	—
entity.name.function, entity.name.function.templated, entity.name.function.member.static	#a2d482	—
entity.name.label	#60cee1	—
entity.name.function.preprocessor	#b8abec	—
entity.name	#a2d482	—
entity.name.constant	#60cee1	—
entity.name.namespace	#ced5e2	—
entity.name.function	#a2d482	—
entity.name.tag, entity.name.tag.js.jsx support.class.component.js.jsx, entity.name.tag support.class.component, source.vue support.class.component	#e8608c	—
source.ansible entity.name.tag	#b8abec	—
entity.name.function.operator	#e8608c	—
meta.brackets entity.name.function.operator, punctuation.separator entity.name.function.operator	#859298	—
entity.other.attribute-name	#b8abec	normal
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, entity.other.animation-name.css	#a2d482	—
entity.other.attribute-name.id.css	#fbac7a	—
entity.other.attribute-name.pseudo-class.css, entity.other.pseudo-class.css, entity.other.pseudo-element.css	#b8abec	normal
entity.name.function, support.function	#a2d482	—
entity.other.git-status.hex	#60cee1	—
entity.other.jinja2.delimiter	#859298	—
entity.name.operator.custom-literal	#ced5e2	—
entity.name.operator.custom-literal.string	#ecaee3	—
entity.name.operator.custom-literal.number	#60cee1	—
entity.name.type.rust	#b8abec	—
entity.name.lifetime.rust	#e8608c	—
invalid	#e8608c	normal underline
invalid.deprecated	#fbac7a	normal underline
keyword	#e8608c	—
keyword.control	#e8608c	—
keyword.control.directive	#e8608c	—
keyword.operator, keyword.operator.member, keyword.operator.new	#e8608c	—
keyword.other.substitution	#859298	—
keyword.other.template.begin, keyword.other.template.end	#e8608c	—
keyword.operator.heading.restructuredtext, keyword.operator.table.row.restructuredtext keyword.operator.table.data.restructuredtext	#859298	—
keyword.other.parenthesis.elm	#859298	—
keyword.other.fn.rust, keyword.other.rust, keyword.other.unsafe.rust, keyword.other.where.rust	#b8abec	—
keyword.control.rust, keyword.operator.misc.rust	#e8608c	—
keyword.declaration.class.ruby, keyword.declaration.function.ruby, keyword.declaration.namespace.ruby	#e8608c	—
markup.normal	—	normal
markup.bold	—	bold
markup.heading	#ecaee3	—
markup.raw	#fbac7a	—
markup.underline	—	underline
markup.underline.link	#a2d482	—
markup.inserted, markup.inserted punctuation.definition.inserted	#a2d482	—
markup.deleted, markup.deleted punctuation.definition.deleted	#e8608c	—
markup.changed, markup.changed punctuation.definition.changed	#ecaee3	—
markup.ignored, markup.ignored punctuation.definition.ignored	#859298	—
markup.untracked	#859298	—
markup.quote	—	normal
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	#859298	—
meta.function-call.generic.python, support.function.builtin.python	#a2d482	—
meta.function-call.python meta.function-call.arguments.python	#ced5e2	—
meta.interpolation	#fbac7a	—
meta.instance.constructor	#a2d482	—
meta.attribute-with-value.class string, meta.attribute.class.html string	#a2d482	—
meta.attribute-with-value.id string, meta.attribute.id.html string	#fbac7a	—
source.json meta.mapping.key string	#ced5e2	—
source.yaml meta.mapping.key string	#e8608c	—
meta.object.member	#ced5e2	—
meta.property-list.css variable.other	#fbac7a	—
entity.name.constant.preprocessor, meta.preprocessor	#60cee1	—
meta.diff.git-diff.header	#ecaee3	—
meta.type_params.rust	#ced5e2	—
meta.attribute.rust, meta.annotation.rust, variable.language.rust, variable.annotation.rust, meta.annotation.rust string, meta.annotation.rust keyword, meta.annotation.rust keyword.operator, meta.attribute.rust string	#9fa6aa	—
meta.type variable, meta.type variable.other.readwrite	#60cee1	—
punctuation	#859298	—
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, punctuation.definition.block, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.separator.parameter, punctuation.accessor, punctuation.terminator	#859298	—
punctuation.definition.group	#ced5e2	—
punctuation.definition.comment	#606B83	—
punctuation.definition.variable, punctuation.definition.keyword.scss, punctuation.definition.entity.css	#9fa6aa	—
punctuation.section.embedded, punctuation.section.embedded entity.name.tag, punctuation.section.embedded constant.other, punctuation.section.embedded source, punctuation.section.embedded.begin	#fbac7a	—
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, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#e8608c	—
meta.paragraph.markdown meta.dummy.line-break, meta.paragraph.markdown meta.hard-line-break.markdown	—	—
markup.underline.link punctuation	#a2d482	—
meta.brace.round, meta.brace.square, keyword.operator.type.annotation, meta.type storage.modifier.array	#859298	—
region.redish	#e8608c	—
region.orangish	#fbac7a	—
region.yellowish	#ecaee3	—
region.greenish	#a2d482	—
region.bluish	#b8abec	—
region.purplish	#60cee1	—
region.pinkish	#e8608c	—
region.whitish	#FFFFFF	—
source	#ced5e2	—
source.scss, source.sass	#859298	—
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	#fbac7a	normal
source.git-show.commit.sha	#60cee1	—
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	#859298	—
source.git-show meta.diff.git-diff.header.extended.index.from-sha, source.git-show meta.diff.git-diff.header.extended.index.to-sha	#60cee1	—
source.git-show meta.diff.range.unified	#fbac7a	—
source.git-show meta.diff.header.from-file, source.git-show meta.diff.header.to-file	#859298	—
storage	#e8608c	—
storage.type	#b8abec	normal
storage.type.extends	#e8608c	normal
storage.type.function.arrow	#e8608c	normal
storage.modifier, storage.type.modifier	#e8608c	normal
storage.class.restructuredtext.ref	#60cee1	—
storage.modifier.visibility.rust, storage.modifier.lifetime.rust	#e8608c	—
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	#b8abec	—
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	#e8608c	—
storage.modifier.import.java	#ced5e2	—
string	#ecaee3	—
string.unquoted.label	#ced5e2	—
string source	#ced5e2	—
string source punctuation.section.embedded, string punctuation.definition.string source	#859298	—
string.other.link.title, string.other.link.description	#e8608c	—
string.other.link.description.title	#b8abec	—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end	#e8608c	—
string.other.ref, string.other.restructuredtext.ref	#a2d482	—
string.other.git-status.help.key	#9fa6aa	—
string.other.git-status.remote	#e8608c	—
support.constant	#b8abec	—
support.constant.handlebars	#859298	—
support.type.vendor-prefix.css	#9fa6aa	—
support.function	#a2d482	—
support.macro	#a2d482	—
support.function.delimiter.elm	#859298	—
support.type, entity.name.type.object.console	#b8abec	normal
support.variable, support.variable.property	#b8abec	—
support.type.property-name	#ced5e2	normal
support.class	#b8abec	—
support.constant.core.rust	#60cee1	—
comment support, comment support.class	#606B83	—
text	#ced5e2	—
text.find-in-files	#ced5e2	—
variable.parameter, parameters variable.function	#fbac7a	normal
variable.language, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python	#9fa6aa	normal
variable.language.arguments	#60cee1	—
variable.other.class	#b8abec	—
variable.other.constant	#60cee1	—
variable.other.readwrite	#ced5e2	—
variable.other.member	#ced5e2	—
variable.other.enummember	#60cee1	—
variable.other.property, variable.other.property.static, variable.other.event	#ced5e2	—
variable.function	#a2d482	—
variable.other.substitution	#fbac7a	—
source.ruby variable.other.readwrite.instance.ruby, source.ruby variable.other.readwrite.class.ruby	#60cee1	—
source.jinja2 variable.other.jinja2.block	#a2d482	—
source.jinja2 variable.other.jinja2	#fbac7a	—
		—
constant.numeric	#95bff0	—
constant.language.boolean, constant.language.false, constant.language.true	#f95b87	—
variable.property, meta.property.object, support.variable.property	#a8d9e4	—
variable.other, variable	#a8bef4	—
entity.name.class, entity.other.inherited-class, support.class, meta.function-call.constructor, entity.name.struct	#73b3ff
entity.name.enum	#73b3ff
meta.type, meta.type-alias, support.type, entity.name.type	#73b3ff
punctuation.definition.character-class.regexp	#73b3ff	—

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