Zen Theme

Name: Zen Theme
Author: Joie's

Publisher: Joie'sThemes in package: 2

A calm, Fleet-inspired VS Code theme with clear contrast and restrained color roles.

Open in VS Code GitHub

Color themes

VS Code preview

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

Zen Theme — Zen Light

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#0D9488E6
activityBar.activeFocusBorder#0D9488E6
activityBar.background#F5F5F5FF
activityBar.border#A0A0A04D
activityBar.dropBorder#0D9488E6
activityBar.foreground#404040E6
activityBar.inactiveForeground#939393FF
activityBarBadge.background#404040E6
activityBarBadge.foreground#FFFFFFE6
activityBarTop.activeBorder#0D9488E6
activityBarTop.dropBorder#0D9488E6
activityBarTop.foreground#404040E6
activityBarTop.inactiveForeground#939393FF
badge.background#D8D8D8FF
badge.foreground#404040E6
banner.background#F5F5F5FF
banner.foreground#404040E6
banner.iconForeground#0D9488E6
breadcrumb.activeSelectionForeground#0D9488E6
breadcrumb.background#FAFAFAFF
breadcrumb.focusForeground#0D9488E6
breadcrumb.foreground#757575FF
breadcrumbPicker.background#F5F5F5FF
button.background#0D9488CC
button.border#FFFFFF00
button.foreground#FFFFFFE6
button.hoverBackground#0D9488E6
button.secondaryBackground#A0A0A01A
button.secondaryForeground#404040E6
button.secondaryHoverBackground#FAFAFAFF
button.separator#FFFFFFE6
charts.blue#0369A1B3
charts.foreground#757575FF
charts.green#0D9488B3
charts.lines#A0A0A033
charts.orange#C2410CB3
charts.purple#7C3AEDB3
charts.red#DC2626B3
charts.yellow#D97706B3
chat.avatarBackground#F5F5F5FF
chat.avatarForeground#0D9488E6
chat.requestBackground#FAFAFAFF
chat.requestBorder#A0A0A04D
chat.slashCommandBackground#0D94881A
chat.slashCommandForeground#0D9488E6
checkbox.background#FAFAFAFF
checkbox.border#A0A0A04D
checkbox.foreground#0D9488E6
checkbox.selectBackground#0D9488CC
checkbox.selectBorder#0D9488E6
commandCenter.activeBackground#FAFAFAFF
commandCenter.activeBorder#A0A0A04D
commandCenter.activeForeground#000000E6
commandCenter.background#F5F5F5FF
commandCenter.border#A0A0A04D
commandCenter.debuggingBackground#0D94881A
commandCenter.foreground#757575FF
commandCenter.inactiveBorder#A0A0A033
commandCenter.inactiveForeground#757575FF
debugConsole.errorForeground#DC2626B3
debugConsole.infoForeground#0369A1B3
debugConsole.sourceForeground#757575FF
debugConsole.warningForeground#CA8A04B3
debugConsoleInputIcon.foreground#0D9488E6
debugIcon.breakpointCurrentStackframeForeground#CA8A04B3
debugIcon.breakpointDisabledForeground#DC262666
debugIcon.breakpointForeground#DC2626B3
debugIcon.breakpointStackframeForeground#0D9488E6
debugIcon.breakpointUnverifiedForeground#939393FF
debugIcon.continueForeground#0D9488E6
debugIcon.disconnectForeground#939393FF
debugIcon.pauseForeground#0369A1B3
debugIcon.restartForeground#0D9488E6
debugIcon.startForeground#0D9488E6
debugIcon.stepBackForeground#0369A1B3
debugIcon.stepIntoForeground#0D9488E6
debugIcon.stepOutForeground#0D9488E6
debugIcon.stepOverForeground#0D9488E6
debugIcon.stopForeground#DC2626B3
debugTokenExpression.boolean#0D9488E6
debugTokenExpression.error#DC2626B3
debugTokenExpression.name#7C3AEDE6
debugTokenExpression.number#D97706E6
debugTokenExpression.string#BE185DE6
debugTokenExpression.value#BE185DE6
debugToolBar.background#F5F5F5FF
debugToolBar.border#A0A0A04D
debugView.exceptionLabelBackground#DC262633
debugView.exceptionLabelForeground#DC2626B3
debugView.stateLabelBackground#FAFAFAFF
debugView.stateLabelForeground#757575FF
debugView.valueChangedHighlight#CA8A0480
descriptionForeground#939393FF
diffEditor.border#A0A0A04D
diffEditor.diagonalFill#A0A0A01A
diffEditor.insertedLineBackground#0D948833
diffEditor.insertedTextBackground#0D948855
diffEditor.insertedTextBorder#FFFFFF00
diffEditor.move.border#CA8A0480
diffEditor.moveActive.border#CA8A04B3
diffEditor.removedLineBackground#DC262633
diffEditor.removedTextBackground#DC262655
diffEditor.removedTextBorder#FFFFFF00
diffEditor.unchangedCodeBackground#FAFAFAFF
diffEditor.unchangedRegionBackground#FAFAFAFF
diffEditor.unchangedRegionForeground#939393FF
diffEditor.unchangedRegionShadow#FFFFFF00
diffEditorGutter.insertedLineBackground#0D94881A
diffEditorGutter.removedLineBackground#DC26261A
diffEditorOverview.insertedForeground#0D948880
diffEditorOverview.removedForeground#DC262680
disabledForeground#A0A0A0FF
dropdown.background#FAFAFAFF
dropdown.border#A0A0A04D
dropdown.foreground#404040E6
dropdown.listBackground#F5F5F5FF
editor.background#FAFAFAFF
editor.findMatchBackground#CA8A0440
editor.findMatchBorder#CA8A04E6
editor.findMatchForeground#000000E6
editor.findMatchHighlightBackground#CA8A0433
editor.findMatchHighlightBorder#CA8A044D
editor.findMatchHighlightForeground#000000E6
editor.findRangeHighlightBackground#CA8A041A
editor.findRangeHighlightBorder#FFFFFF00
editor.focusedStackFrameHighlightBackground#0D948833
editor.foldBackground#0D948814
editor.foldPlaceholderForeground#757575FF
editor.foreground#404040E6
editor.hoverHighlightBackground#A0A0A026
editor.inactiveSelectionBackground#A0A0A033
editor.inlineValuesBackground#CA8A041A
editor.inlineValuesForeground#CA8A04B3
editor.lineHighlightBackground#00000008
editor.lineHighlightBorder#FFFFFF00
editor.linkedEditingBackground#0D94881A
editor.placeholder.foreground#939393FF
editor.rangeHighlightBackground#7C3AED14
editor.rangeHighlightBorder#7C3AED26
editor.selectionBackground#0D948840
editor.selectionForeground#000000E6
editor.selectionHighlightBackground#0D948826
editor.selectionHighlightBorder#0D948866
editor.snippetFinalTabstopHighlightBackground#0D94881A
editor.snippetFinalTabstopHighlightBorder#0D9488E6
editor.snippetTabstopHighlightBackground#7C3AED1A
editor.snippetTabstopHighlightBorder#7C3AED40
editor.stackFrameHighlightBackground#CA8A0433
editor.symbolHighlightBackground#0D948833
editor.symbolHighlightBorder#FFFFFF00
editor.wordHighlightBackground#0369A122
editor.wordHighlightBorder#0369A140
editor.wordHighlightStrongBackground#0369A133
editor.wordHighlightStrongBorder#0369A166
editor.wordHighlightTextBackground#7C3AED1A
editor.wordHighlightTextBorder#7C3AED40
editorActionList.background#FAFAFAFF
editorActionList.focusBackground#A0A0A04D
editorActionList.focusForeground#000000E6
editorActionList.foreground#404040E6
editorBracketHighlight.foreground1#757575E6
editorBracketHighlight.foreground2#757575E6
editorBracketHighlight.foreground3#757575E6
editorBracketHighlight.foreground4#757575E6
editorBracketHighlight.foreground5#757575E6
editorBracketHighlight.foreground6#757575E6
editorBracketHighlight.unexpectedBracket.foreground#DC2626B3
editorBracketMatch.background#A0A0A01A
editorBracketMatch.border#75757566
editorBracketPairGuide.activeBackground1#75757566
editorBracketPairGuide.activeBackground2#75757566
editorBracketPairGuide.activeBackground3#75757566
editorBracketPairGuide.activeBackground4#75757566
editorBracketPairGuide.activeBackground5#75757566
editorBracketPairGuide.activeBackground6#75757566
editorBracketPairGuide.background1#A0A0A01F
editorBracketPairGuide.background2#A0A0A01F
editorBracketPairGuide.background3#A0A0A01F
editorBracketPairGuide.background4#A0A0A01F
editorBracketPairGuide.background5#A0A0A01F
editorBracketPairGuide.background6#A0A0A01F
editorCodeLens.foreground#A0A0A0FF
editorCommentsWidget.rangeActiveBackground#0369A133
editorCommentsWidget.rangeBackground#0369A11A
editorCommentsWidget.replyInputBackground#FAFAFAFF
editorCommentsWidget.resolvedBorder#0D948880
editorCommentsWidget.unresolvedBorder#CA8A0480
editorCursor.background#FAFAFAFF
editorCursor.foreground#0D9488E6
editorError.background#DC26261A
editorError.border#FFFFFF00
editorError.foreground#DC2626B3
editorGhostText.background#FFFFFF00
editorGhostText.border#FFFFFF00
editorGhostText.foreground#A0A0A0FF
editorGroup.border#A0A0A04D
editorGroup.dropBackground#A0A0A01A
editorGroup.dropIntoPromptBackground#F5F5F5FF
editorGroup.dropIntoPromptBorder#0D9488E6
editorGroup.dropIntoPromptForeground#000000E6
editorGroup.emptyBackground#F5F5F5FF
editorGroup.focusedEmptyBorder#0D9488E6
editorGroupHeader.border#A0A0A04D
editorGroupHeader.noTabsBackground#F5F5F5FF
editorGroupHeader.tabsBackground#F5F5F5FF
editorGroupHeader.tabsBorder#A0A0A04D
editorGutter.addedBackground#0D94884D
editorGutter.addedSecondaryBackground#0D948833
editorGutter.background#FFFFFF00
editorGutter.commentGlyphForeground#0369A1B3
editorGutter.commentRangeForeground#0369A1B3
editorGutter.commentUnresolvedGlyphForeground#CA8A04B3
editorGutter.deletedBackground#DC262680
editorGutter.deletedSecondaryBackground#DC26264D
editorGutter.foldingControlForeground#757575FF
editorGutter.modifiedBackground#0369A180
editorGutter.modifiedSecondaryBackground#0369A14D
editorHint.border#FFFFFF00
editorHint.foreground#939393FF
editorHoverWidget.background#F5F5F5FF
editorHoverWidget.border#A0A0A04D
editorHoverWidget.foreground#404040E6
editorHoverWidget.highlightForeground#0D9488E6
editorHoverWidget.statusBarBackground#FAFAFAFF
editorIndentGuide.activeBackground1#A0A0A04D
editorIndentGuide.activeBackground2#A0A0A04D
editorIndentGuide.activeBackground3#A0A0A04D
editorIndentGuide.activeBackground4#A0A0A04D
editorIndentGuide.activeBackground5#A0A0A04D
editorIndentGuide.activeBackground6#A0A0A04D
editorIndentGuide.background1#A0A0A01A
editorIndentGuide.background2#A0A0A01A
editorIndentGuide.background3#A0A0A01A
editorIndentGuide.background4#A0A0A01A
editorIndentGuide.background5#A0A0A01A
editorIndentGuide.background6#A0A0A01A
editorInfo.background#0369A11A
editorInfo.border#FFFFFF00
editorInfo.foreground#0369A1B3
editorInlayHint.background#A0A0A01A
editorInlayHint.foreground#A0A0A066
editorInlayHint.parameterBackground#A0A0A01A
editorInlayHint.parameterForeground#A0A0A066
editorInlayHint.typeBackground#A0A0A01A
editorInlayHint.typeForeground#A0A0A066
editorLightBulb.foreground#CA8A04B3
editorLightBulbAi.foreground#0369A1E6
editorLightBulbAutoFix.foreground#0D9488E6
editorLineNumber.activeForeground#757575FF
editorLineNumber.foreground#A0A0A0FF
editorLink.activeForeground#0D9488E6
editorMultiCursor.primary.background#FAFAFAFF
editorMultiCursor.primary.foreground#0D9488E6
editorMultiCursor.secondary.background#FAFAFAFF
editorMultiCursor.secondary.foreground#0369A1B3
editorOverviewRuler.addedForeground#0D94884D
editorOverviewRuler.border#FFFFFF00
editorOverviewRuler.bracketMatchForeground#4040404D
editorOverviewRuler.commonContentForeground#A0A0A04D
editorOverviewRuler.currentContentForeground#0D9488B3
editorOverviewRuler.deletedForeground#DC262680
editorOverviewRuler.errorForeground#DC2626B3
editorOverviewRuler.findMatchForeground#CA8A0480
editorOverviewRuler.incomingContentForeground#0369A1B3
editorOverviewRuler.infoForeground#0369A1B3
editorOverviewRuler.modifiedForeground#0369A180
editorOverviewRuler.rangeHighlightForeground#A0A0A04D
editorOverviewRuler.selectionHighlightForeground#A0A0A04D
editorOverviewRuler.warningForeground#CA8A04B3
editorOverviewRuler.wordHighlightForeground#A0A0A04D
editorOverviewRuler.wordHighlightStrongForeground#A0A0A04D
editorOverviewRuler.wordHighlightTextForeground#A0A0A04D
editorRuler.foreground#A0A0A01A
editorStickyScroll.background#FAFAFAFF
editorStickyScroll.border#A0A0A04D
editorStickyScrollHover.background#FAFAFAFF
editorSuggestWidget.background#F5F5F5FF
editorSuggestWidget.border#A0A0A04D
editorSuggestWidget.focusHighlightForeground#0D9488E6
editorSuggestWidget.foreground#404040E6
editorSuggestWidget.highlightForeground#0D9488E6
editorSuggestWidget.selectedBackground#A0A0A04D
editorSuggestWidget.selectedForeground#000000E6
editorUnicodeHighlight.background#CA8A041A
editorUnicodeHighlight.border#CA8A04B3
editorUnnecessaryCode.border#FFFFFF00
editorUnnecessaryCode.opacity#FFFFFFCC
editorWarning.background#CA8A041A
editorWarning.border#FFFFFF00
editorWarning.foreground#CA8A04B3
editorWhitespace.foreground#A0A0A01A
editorWidget.background#F5F5F5FF
editorWidget.border#A0A0A04D
editorWidget.foreground#404040E6
editorWidget.resizeBorder#A0A0A04D
errorForeground#DC2626B3
focusBorder#0D9488E6
foreground#404040E6
git.blame.editorDecorationForeground#939393FF
gitDecoration.addedResourceForeground#0D9488E6
gitDecoration.conflictingResourceForeground#C2410CB3
gitDecoration.deletedResourceForeground#DC2626B3
gitDecoration.ignoredResourceForeground#757575B3
gitDecoration.modifiedResourceForeground#CA8A04B3
gitDecoration.renamedResourceForeground#0891B2B3
gitDecoration.stageDeletedResourceForeground#DC2626E6
gitDecoration.stageModifiedResourceForeground#CA8A04E6
gitDecoration.submoduleResourceForeground#0369A1B3
gitDecoration.untrackedResourceForeground#0D9488B3
icon.foreground#404040E6
inlineChat.background#F5F5F5FF
inlineChat.border#A0A0A04D
inlineChat.foreground#757575FF
inlineChat.shadow#FFFFFF00
inlineChatDiff.inserted#0D948833
inlineChatDiff.removed#DC262633
inlineChatInput.background#FAFAFAFF
inlineChatInput.border#A0A0A04D
inlineChatInput.focusBorder#0D9488E6
inlineChatInput.placeholderForeground#939393FF
input.background#FAFAFAFF
input.border#A0A0A04D
input.foreground#404040E6
input.placeholderForeground#939393FF
inputOption.activeBackground#A0A0A04D
inputOption.activeBorder#0D9488E6
inputOption.activeForeground#000000E6
inputOption.hoverBackground#A0A0A033
inputValidation.errorBackground#DC262633
inputValidation.errorBorder#DC2626B3
inputValidation.errorForeground#DC2626B3
inputValidation.infoBackground#0369A133
inputValidation.infoBorder#0369A1B3
inputValidation.infoForeground#0369A1B3
inputValidation.warningBackground#CA8A0433
inputValidation.warningBorder#CA8A04B3
inputValidation.warningForeground#CA8A04B3
keybindingLabel.background#D8D8D8FF
keybindingLabel.border#A0A0A04D
keybindingLabel.bottomBorder#0D9488E6
keybindingLabel.foreground#000000E6
keybindingTable.headerBackground#F5F5F5FF
keybindingTable.rowsBackground#FAFAFAFF
list.activeSelectionBackground#A0A0A04D
list.activeSelectionForeground#000000E6
list.deemphasizedForeground#939393FF
list.dropBackground#A0A0A04D
list.dropBetweenBackground#0D948880
list.errorForeground#DC2626B3
list.filterMatchBackground#0D948833
list.filterMatchBorder#0D9488E6
list.focusBackground#A0A0A04D
list.focusForeground#000000E6
list.focusHighlightForeground#0D9488E6
list.focusOutline#A0A0A04D
list.highlightForeground#0D9488E6
list.hoverBackground#A0A0A033
list.hoverForeground#000000E6
list.inactiveFocusBackground#A0A0A01A
list.inactiveFocusOutline#FFFFFF00
list.inactiveSelectionBackground#A0A0A01A
list.inactiveSelectionForeground#000000E6
list.invalidItemForeground#DC2626B3
list.warningForeground#CA8A04B3
listFilterWidget.background#F5F5F5FF
listFilterWidget.noMatchesOutline#DC2626B3
listFilterWidget.outline#A0A0A01A
listFilterWidget.shadow#FFFFFF00
menu.background#F5F5F5FF
menu.border#A0A0A04D
menu.foreground#000000E6
menu.selectionBackground#A0A0A01A
menu.selectionBorder#A0A0A04D
menu.selectionForeground#000000E6
menu.separatorBackground#A0A0A04D
menubar.selectionBackground#A0A0A01A
menubar.selectionBorder#0D9488E6
menubar.selectionForeground#000000E6
merge.border#A0A0A04D
merge.commonContentBackground#A0A0A01A
merge.commonHeaderBackground#A0A0A01A
merge.currentContentBackground#0D948833
merge.currentHeaderBackground#0D948880
merge.incomingContentBackground#0369A133
merge.incomingHeaderBackground#0369A180
mergeEditor.change.background#0D948833
mergeEditor.change.word.background#0D94884D
mergeEditor.changeBase.background#A0A0A01A
mergeEditor.changeBase.word.background#A0A0A01A
mergeEditor.conflict.handled.minimapOverViewRuler#0D948880
mergeEditor.conflict.handledFocused.border#0D9488B3
mergeEditor.conflict.handledUnfocused.border#0D948880
mergeEditor.conflict.input1.background#0D948833
mergeEditor.conflict.input2.background#0369A133
mergeEditor.conflict.unhandled.minimapOverViewRuler#CA8A04B3
mergeEditor.conflict.unhandledFocused.border#CA8A04E6
mergeEditor.conflict.unhandledUnfocused.border#CA8A04B3
mergeEditor.conflictingLines.background#CA8A0433
minimap.background#F5F5F5FF
minimap.errorHighlight#DC2626B3
minimap.findMatchHighlight#CA8A04B3
minimap.foregroundOpacity#FFFFFFB3
minimap.infoHighlight#0369A1B3
minimap.selectionHighlight#0D948899
minimap.warningHighlight#CA8A04B3
minimapGutter.addedBackground#0D948880
minimapGutter.deletedBackground#DC262680
minimapGutter.modifiedBackground#0369A180
minimapSlider.activeBackground#A0A0A04D
minimapSlider.background#A0A0A01A
minimapSlider.hoverBackground#A0A0A033
notificationCenter.border#A0A0A04D
notificationCenterHeader.background#F5F5F5FF
notificationCenterHeader.foreground#404040E6
notificationLink.foreground#0D9488E6
notifications.background#FAFAFAFF
notifications.border#A0A0A04D
notifications.foreground#757575FF
notificationsErrorIcon.foreground#DC2626B3
notificationsInfoIcon.foreground#0369A1B3
notificationsWarningIcon.foreground#CA8A04B3
notificationToast.border#A0A0A04D
panel.background#F5F5F5FF
panel.border#A0A0A04D
panel.dropBorder#0D9488E6
panelInput.border#A0A0A04D
panelSection.border#A0A0A04D
panelSection.dropBackground#A0A0A01A
panelSectionHeader.background#F5F5F5FF
panelSectionHeader.border#A0A0A04D
panelSectionHeader.foreground#404040FF
panelTitle.activeBorder#0D9488CC
panelTitle.activeForeground#000000E6
panelTitle.inactiveForeground#757575FF
peekView.border#0D9488E6
peekViewEditor.background#FAFAFAFF
peekViewEditor.matchHighlightBackground#CA8A0433
peekViewEditor.matchHighlightBorder#CA8A04E6
peekViewEditorGutter.background#F5F5F5FF
peekViewEditorStickyScroll.background#FAFAFAFF
peekViewResult.background#F5F5F5FF
peekViewResult.fileForeground#757575FF
peekViewResult.lineForeground#939393FF
peekViewResult.matchHighlightBackground#CA8A0433
peekViewResult.selectionBackground#A0A0A01A
peekViewResult.selectionForeground#000000E6
peekViewTitle.background#F5F5F5FF
peekViewTitleDescription.foreground#757575FF
peekViewTitleLabel.foreground#404040FF
pickerGroup.foreground#0D9488E6
problemsErrorIcon.foreground#DC2626B3
problemsInfoIcon.foreground#0369A1B3
problemsWarningIcon.foreground#CA8A04B3
progressBar.background#0D9488E6
quickInput.background#F5F5F5FF
radio.activeBackground#A0A0A04D
radio.activeBorder#0D9488E6
radio.activeForeground#0D9488E6
radio.inactiveBackground#A0A0A01A
radio.inactiveBorder#A0A0A033
radio.inactiveForeground#757575FF
radio.inactiveHoverBackground#A0A0A033
sash.hoverBorder#0D9488E6
scrollbar.background#FFFFFF00
scrollbar.shadow#FFFFFF00
scrollbarSlider.activeBackground#A0A0A04D
scrollbarSlider.background#A0A0A01A
scrollbarSlider.hoverBackground#A0A0A033
searchEditor.findMatchBackground#CA8A0440
searchEditor.findMatchBorder#CA8A04E6
selection.background#0D948826
settings.focusedRowBackground#A0A0A04D
settings.focusedRowBorder#0D9488E6
settings.headerForeground#000000E6
settings.modifiedItemIndicator#0D9488E6
settings.rowHoverBackground#A0A0A033
settings.sashBorder#A0A0A04D
sideBar.background#F5F5F5FF
sideBar.border#A0A0A04D
sideBar.dropBackground#A0A0A01A
sideBar.foreground#404040E6
sideBarSectionHeader.background#F5F5F5FF
sideBarSectionHeader.border#A0A0A04D
sideBarTitle.border#A0A0A04D
sideBarTitle.foreground#404040E6
statusBar.background#F5F5F5FF
statusBar.border#A0A0A04D
statusBar.debuggingBackground#0D9488E6
statusBar.debuggingBorder#0D9488E6
statusBar.debuggingForeground#FFFFFFE6
statusBar.focusBorder#0D9488E6
statusBar.foreground#757575FF
statusBar.noFolderBackground#FAFAFAFF
statusBar.noFolderBorder#A0A0A01A
statusBar.noFolderForeground#939393FF
statusBarItem.activeBackground#A0A0A04D
statusBarItem.compactHoverBackground#A0A0A01A
statusBarItem.errorBackground#DC2626B3
statusBarItem.errorForeground#FFFFFFE6
statusBarItem.errorHoverBackground#DC2626CC
statusBarItem.errorHoverForeground#FFFFFFE6
statusBarItem.focusBorder#0D9488E6
statusBarItem.hoverBackground#FAFAFAFF
statusBarItem.hoverForeground#000000E6
statusBarItem.offlineBackground#939393FF
statusBarItem.offlineForeground#FFFFFFE6
statusBarItem.offlineHoverBackground#939393FF
statusBarItem.offlineHoverForeground#000000E6
statusBarItem.prominentBackground#0D9488E6
statusBarItem.prominentForeground#FFFFFFE6
statusBarItem.prominentHoverBackground#0D9488FF
statusBarItem.prominentHoverForeground#000000E6
statusBarItem.remoteBackground#0D9488E6
statusBarItem.remoteForeground#FFFFFFE6
statusBarItem.remoteHoverBackground#0D9488FF
statusBarItem.remoteHoverForeground#FFFFFFE6
statusBarItem.warningBackground#CA8A04B3
statusBarItem.warningForeground#FFFFFFE6
statusBarItem.warningHoverBackground#CA8A04E6
statusBarItem.warningHoverForeground#FFFFFFE6
symbolIcon.arrayForeground#0369A1E6
symbolIcon.booleanForeground#0D9488E6
symbolIcon.classForeground#0369A1E6
symbolIcon.colorForeground#BE185DE6
symbolIcon.constantForeground#D97706E6
symbolIcon.constructorForeground#D97706E6
symbolIcon.enumeratorForeground#0369A1E6
symbolIcon.enumeratorMemberForeground#7C3AEDE6
symbolIcon.eventForeground#CA8A04B3
symbolIcon.fieldForeground#7C3AEDE6
symbolIcon.fileForeground#757575FF
symbolIcon.folderForeground#757575FF
symbolIcon.functionForeground#D97706E6
symbolIcon.interfaceForeground#0369A1E6
symbolIcon.keyForeground#7C3AEDE6
symbolIcon.keywordForeground#0D9488E6
symbolIcon.methodForeground#D97706E6
symbolIcon.moduleForeground#0369A1E6
symbolIcon.namespaceForeground#0369A1E6
symbolIcon.nullForeground#939393FF
symbolIcon.numberForeground#D97706E6
symbolIcon.objectForeground#7C3AEDE6
symbolIcon.operatorForeground#40404099
symbolIcon.packageForeground#0369A1E6
symbolIcon.propertyForeground#7C3AEDE6
symbolIcon.referenceForeground#0369A1B3
symbolIcon.snippetForeground#0D9488E6
symbolIcon.stringForeground#BE185DE6
symbolIcon.structForeground#0369A1E6
symbolIcon.textForeground#757575FF
symbolIcon.typeParameterForeground#2563EBE6
symbolIcon.unitForeground#D97706E6
symbolIcon.variableForeground#404040E6
tab.activeBackground#FAFAFAFF
tab.activeBorderTop#0D9488E6
tab.activeForeground#000000E6
tab.activeModifiedBorder#0369A1B3
tab.border#A0A0A04D
tab.dragAndDropBorder#0D9488E6
tab.hoverBackground#A0A0A033
tab.hoverBorder#FFFFFF00
tab.hoverForeground#404040FF
tab.inactiveBackground#F5F5F5FF
tab.inactiveForeground#757575FF
tab.inactiveModifiedBorder#0369A180
tab.lastPinnedBorder#A0A0A04D
tab.unfocusedActiveBackground#FAFAFAFF
tab.unfocusedActiveBorderTop#0D948880
tab.unfocusedActiveForeground#404040E6
tab.unfocusedActiveModifiedBorder#0369A180
tab.unfocusedHoverBackground#FAFAFAFF
tab.unfocusedHoverBorder#FFFFFF00
tab.unfocusedHoverForeground#404040FF
tab.unfocusedInactiveBackground#F5F5F5FF
tab.unfocusedInactiveForeground#939393FF
tab.unfocusedInactiveModifiedBorder#0369A14D
terminal.ansiBlack#939393
terminal.ansiBlue#2563EB
terminal.ansiBrightBlack#757575
terminal.ansiBrightBlue#1D4ED8
terminal.ansiBrightCyan#0E7490
terminal.ansiBrightGreen#047857
terminal.ansiBrightMagenta#7E22CE
terminal.ansiBrightRed#B91C1C
terminal.ansiBrightWhite#000000
terminal.ansiBrightYellow#B45309
terminal.ansiCyan#0891B2
terminal.ansiGreen#059669
terminal.ansiMagenta#9333EA
terminal.ansiRed#DC2626
terminal.ansiWhite#404040
terminal.ansiYellow#D97706
terminal.background#F5F5F5FF
terminal.border#A0A0A04D
terminal.dropBackground#A0A0A04D
terminal.findMatchBackground#CA8A0440
terminal.findMatchBorder#CA8A04E6
terminal.findMatchHighlightBackground#CA8A0433
terminal.findMatchHighlightBorder#CA8A044D
terminal.foreground#404040E6
terminal.hoverHighlightBackground#FAFAFAFF
terminal.inactiveSelectionBackground#A0A0A033
terminal.initialHintForeground#939393FF
terminal.selectionBackground#0D948866
terminal.selectionForeground#000000E6
terminal.tab.activeBorder#FFFFFF00
terminalCommandDecoration.defaultBackground#404040B3
terminalCommandDecoration.errorBackground#DC2626B3
terminalCommandDecoration.successBackground#0D9488B3
terminalCursor.background#FAFAFAFF
terminalCursor.foreground#0D9488E6
terminalOverviewRuler.cursorForeground#0D9488E6
terminalOverviewRuler.findMatchForeground#CA8A0480
terminalStickyScroll.background#F5F5F5FF
terminalStickyScroll.border#A0A0A04D
terminalStickyScrollHover.background#FAFAFAFF
textBlockQuote.background#D8D8D8FF
textBlockQuote.border#BE185DE6
textCodeBlock.background#D8D8D8FF
textLink.activeForeground#0D9488E6
textLink.foreground#0D9488CC
textPreformat.background#D8D8D8FF
textPreformat.foreground#404040E6
textSeparator.foreground#A0A0A01A
titleBar.activeBackground#F5F5F5FF
titleBar.activeForeground#000000E6
titleBar.border#A0A0A04D
titleBar.inactiveBackground#FAFAFAFF
titleBar.inactiveForeground#757575FF
toolbar.activeBackground#A0A0A04D
toolbar.hoverBackground#A0A0A033
toolbar.hoverOutline#FFFFFF00
tree.inactiveIndentGuidesStroke#A0A0A01A
tree.indentGuidesStroke#A0A0A033
tree.tableColumnsBorder#A0A0A04D
tree.tableOddRowsBackground#FFFFFF00
widget.border#A0A0A04D
widget.shadow#FFFFFF00
window.activeBorder#FFFFFF00
window.inactiveBorder#FFFFFF00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source	#404040E6	—
comment	#40404080	—
constant.language	#0D9488E6	—
constant.character, constant.character.escape	#0D9488E6	—
constant.numeric	#D97706E6	—
string	#A21CAFE6	—
string.regexp	#0891B2CC	—
variable.language	#BE123CE6	—
variable.other.object	#404040E6	—
keyword.control	#0D9488E6	—
keyword.other	#0D9488E6	—
keyword.control.at-rule, keyword.control.directive	#16A34AE6	—
keyword.operator	#40404099	—
storage.modifier	#0D9488E6	—
storage.type, keyword.operator.new, keyword.operator.expression	#0D9488E6	—
entity.name.type, entity.name.namespace	#0369A1E6	—
support.type.builtin, support.type.primitive, storage.type.built-in.primitive	#0369A1E6	—
entity.name.function, entity.name.method, support.function, meta.function-call	#D97706E6	—
variable.other.property, variable.other.object.property, support.variable.property	#7C3AEDE6	—
entity.name.tag	#0369A1E6	—
entity.other.attribute-name	#7C3AEDE6	—
entity.name.tag.reference	#0D9488E6	—
punctuation.accessor, punctuation.separator.accessor	#40404099	—
punctuation.definition	#40404080	—
punctuation.separator, meta.separator	#40404080	—
punctuation.terminator	#40404066	—
meta.brace	#40404099	—
markup.heading	—	bold
markup.bold	—	bold
markup.italic	—	italic
markup.quote	—	italic
markup.strikethrough	—	strikethrough
entity.name.section.markdown	#D97706E6	—
markup.fenced_code	#D97706E6	—
markup.raw, markup.fenced_code, markup.inline.raw	#A21CAFE6	—
markup.underline.link, string.other.link.title.markdown, meta.link.reference.markdown, meta.link.reference.def.markdown, string.other.link.description.markdown	#2563EBE6	—
support.type.property-name.css, support.type.property-name.less	#0D9488E6	—
variable.css, variable.scss, support.other.variable.less	#0369A1E6	—
entity.name.tag.css, entity.name.tag.less, entity.name.tag.reference.scss	#7C3AEDE6	—
punctuation.definition.entity.css, punctuation.definition.entity.less	#7C3AEDE6	—
keyword.other.unit	#D97706E6	—
keyword.other.important	#16A34AE6	—
support.type.property-name.json, meta.structure.dictionary.key.json	#7C3AEDE6	—
punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json	#40404080	—
entity.name.tag.yaml	#0D9488E6	—
string.unquoted.plain.out.yaml, string.quoted.double.yaml, string.quoted.single.yaml	#7C3AEDE6	—
entity.name.tag.xml	#7C3AEDE6	—
constant.other.table-name.sql	#7C3AEDE6	—
keyword.var.go, keyword.type.go, keyword.struct.go, keyword.interface.go, keyword.switch.go, keyword.select.go, keyword.defer.go, keyword.const.go, keyword.package.go, keyword.function.go	#0D9488E6	—
entity.name.type.package.go, variable.other.go	#16A34AE6	—
keyword.other.special-method.ruby	#0D9488E6	—
constant.language.symbol.ruby	#7C3AEDE6	—
keyword.other.rust, keyword.other.fn.rust	#0D9488E6	—
entity.name.function.macro.rust, meta.macro.rust, meta.attribute.rust	#16A34AE6	—
meta.use.rust	#0369A1E6	—
storage.type.function.arrow	#40404099	—
support.class.component.js, support.class.component.tsx	#C2410CE6	—
invalid, invalid.illegal	#DC2626E6	strikethrough

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