Mate Theme

Name: Mate Theme
Author: Mate Creations

Publisher: Mate CreationsThemes in package: 4

Yerba Mate based color theme 🧉

GitHub

Color themes

VS Code preview

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

Mate Theme — Tereré

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#0000000d
activityBar.activeBorder#9aad7a
activityBar.activeFocusBorder#000000
activityBar.background#e6eed8
activityBar.border#0000001a
activityBar.dropBorder#9aad7a
activityBar.foreground#000000e6
activityBar.inactiveForeground#000000b8
activityBarBadge.background#9aad7a
activityBarBadge.foreground#000000
badge.background#9aad7a
badge.foreground#000000
banner.background#9aad7a
banner.foreground#000000
banner.iconForeground#000000
breadcrumb.activeSelectionForeground#6c7e4d
breadcrumb.background#e6eed8
breadcrumb.focusForeground#000000e6
breadcrumb.foreground#000000b8
breadcrumbPicker.background#f2ffdb
button.background#9aad7a
button.border#0000001a
button.foreground#000000
button.hoverBackground#9aad7ae6
button.secondaryBackground#0000000d
button.secondaryForeground#000000e6
button.secondaryHoverBackground#00000014
button.separator#000000
charts.blue#0052c6
charts.foreground#000000
charts.green#006904
charts.lines#0000001a
charts.orange#9f5500
charts.purple#7700ee
charts.red#b70004
charts.yellow#7d7000
chat.requestBorder#0000001a
checkbox.background#0000000d
checkbox.border#0000001a
checkbox.foreground#000000e6
checkbox.selectBackground#0000000d
checkbox.selectBorder#0000001a
commandCenter.activeBackground#00000014
commandCenter.activeBorder#0000001a
commandCenter.activeForeground#000000e6
commandCenter.background#0000000d
commandCenter.border#0000001a
commandCenter.foreground#000000e6
commandCenter.inactiveBorder#0000001a
commandCenter.inactiveForeground#000000b8
commentsView.resolvedIcon#000000b8
commentsView.unresolvedIcon#0052c6
debugConsole.errorForeground#b70004
debugConsole.infoForeground#0052c6
debugConsole.sourceForeground#000000e6
debugConsole.warningForeground#9f5500
debugConsoleInputIcon.foreground#9aad7a
debugExceptionWidget.background#e0d1d1
debugExceptionWidget.border#0000001a
debugIcon.breakpointCurrentStackframeForeground#7d7000
debugIcon.breakpointDisabledForeground#00000033
debugIcon.breakpointForeground#b70004
debugIcon.breakpointStackframeForeground#7d700080
debugIcon.breakpointUnverifiedForeground#9f5500
debugIcon.continueForeground#006904
debugIcon.disconnectForeground#b70004
debugIcon.pauseForeground#7d7000
debugIcon.restartForeground#006904
debugIcon.startForeground#006904
debugIcon.stepBackForeground#0052c6
debugIcon.stepIntoForeground#0052c6
debugIcon.stepOutForeground#0052c6
debugIcon.stepOverForeground#0052c6
debugIcon.stopForeground#b70004
debugTokenExpression.boolean#0052c6
debugTokenExpression.error#b70004
debugTokenExpression.name#6c7e4d
debugTokenExpression.number#528256
debugTokenExpression.string#784f3f
debugTokenExpression.value#006560
debugToolBar.background#f2ffdb
debugToolBar.border#0000001a
debugView.exceptionLabelBackground#b70004
debugView.exceptionLabelForeground#000000
debugView.stateLabelBackground#00000008
debugView.stateLabelForeground#000000e6
debugView.valueChangedHighlight#5b79a2
descriptionForeground#000000b8
diffEditor.border#0000001a
diffEditor.diagonalFill#0000001a
diffEditor.insertedLineBackground#0069041f
diffEditor.insertedTextBackground#00690433
diffEditor.insertedTextBorder#00000000
diffEditor.move.border#85858566
diffEditor.removedLineBackground#b700041f
diffEditor.removedTextBackground#b7000433
diffEditor.removedTextBorder#00000000
diffEditor.unchangedCodeBackground#0000000a
diffEditor.unchangedRegionBackground#c4ccb8
diffEditor.unchangedRegionForeground#000000b8
diffEditorGutter.insertedLineBackground#00000000
diffEditorGutter.removedLineBackground#00000000
diffEditorOverview.insertedForeground#006904b8
diffEditorOverview.removedForeground#b70004b8
disabledForeground#00000080
dropdown.background#0000000d
dropdown.border#0000001a
dropdown.foreground#000000e6
dropdown.listBackground#f2ffdb
editor.background#effcd9
editor.findMatchBackground#00656033
editor.findMatchBorder#0000001a
editor.findMatchHighlightBackground#0065601f
editor.findMatchHighlightBorder#0000001a
editor.findRangeHighlightBackground#0000000a
editor.findRangeHighlightBorder#00000000
editor.focusedStackFrameHighlightBackground#7d70001f
editor.foldBackground#0000000a
editor.foreground#000000b8
editor.hoverHighlightBackground#0000000a
editor.inactiveSelectionBackground#0000000a
editor.inlineValuesBackground#7d70001f
editor.inlineValuesForeground#7d7000
editor.lineHighlightBackground#00000000
editor.lineHighlightBorder#0000001a
editor.linkedEditingBackground#0052c633
editor.rangeHighlightBackground#0000000a
editor.rangeHighlightBorder#00000000
editor.selectionBackground#00000012
editor.selectionForeground#000000e6
editor.selectionHighlightBackground#0000000a
editor.selectionHighlightBorder#0000001a
editor.snippetFinalTabstopHighlightBackground#00000000
editor.snippetFinalTabstopHighlightBorder#0052c6
editor.snippetTabstopHighlightBackground#0052c633
editor.snippetTabstopHighlightBorder#0000001a
editor.stackFrameHighlightBackground#7d700033
editor.symbolHighlightBackground#00000000
editor.symbolHighlightBorder#7700ee
editor.wordHighlightBackground#ac007433
editor.wordHighlightBorder#0000001a
editor.wordHighlightStrongBackground#7700ee33
editor.wordHighlightStrongBorder#0000001a
editor.wordHighlightTextBackground#ac007433
editor.wordHighlightTextBorder#0000001a
editorBracketHighlight.foreground1#7d7852
editorBracketHighlight.foreground2#8d7252
editorBracketHighlight.foreground3#c35354
editorBracketHighlight.foreground4#8e64b9
editorBracketHighlight.foreground5#5b79a2
editorBracketHighlight.foreground6#528256
editorBracketHighlight.unexpectedBracket.foreground#b70004
editorBracketMatch.background#784f3f33
editorBracketMatch.border#0000001a
editorBracketPairGuide.activeBackground1#7d7852
editorBracketPairGuide.activeBackground2#8d7252
editorBracketPairGuide.activeBackground3#c35354
editorBracketPairGuide.activeBackground4#8e64b9
editorBracketPairGuide.activeBackground5#5b79a2
editorBracketPairGuide.activeBackground6#528256
editorBracketPairGuide.background1#7d785280
editorBracketPairGuide.background2#8d725280
editorBracketPairGuide.background3#c3535480
editorBracketPairGuide.background4#8e64b980
editorBracketPairGuide.background5#5b79a280
editorBracketPairGuide.background6#52825680
editorCodeLens.foreground#00000080
editorCommentsWidget.rangeActiveBackground#0052c633
editorCommentsWidget.rangeBackground#0052c61f
editorCommentsWidget.resolvedBorder#00000033
editorCommentsWidget.unresolvedBorder#0052c6
editorCursor.background#000000
editorCursor.foreground#9aad7a
editorError.background#00000000
editorError.border#00000000
editorError.foreground#b70004
editorGhostText.background#00000000
editorGhostText.border#00000000
editorGhostText.foreground#00000052
editorGroup.border#0000001a
editorGroup.dropBackground#00000033
editorGroup.dropIntoPromptBackground#f2ffdb
editorGroup.dropIntoPromptBorder#0000001a
editorGroup.dropIntoPromptForeground#000000e6
editorGroup.emptyBackground#e6eed8
editorGroup.focusedEmptyBorder#00000000
editorGroupHeader.border#0000001a
editorGroupHeader.noTabsBackground#e6eed8
editorGroupHeader.tabsBackground#e6eed8
editorGroupHeader.tabsBorder#0000001a
editorGutter.addedBackground#006904
editorGutter.background#e6eed8
editorGutter.commentGlyphForeground#000000b8
editorGutter.commentRangeForeground#c4ccb8
editorGutter.commentUnresolvedGlyphForeground#0052c6
editorGutter.deletedBackground#b70004
editorGutter.foldingControlForeground#000000b8
editorGutter.modifiedBackground#0052c6
editorHint.border#00000000
editorHint.foreground#006560
editorHoverWidget.background#f2ffdb
editorHoverWidget.border#0000001a
editorHoverWidget.foreground#000000e6
editorHoverWidget.highlightForeground#000000
editorHoverWidget.statusBarBackground#00000008
editorIndentGuide.activeBackground1#7d7852
editorIndentGuide.activeBackground2#8d7252
editorIndentGuide.activeBackground3#c35354
editorIndentGuide.activeBackground4#8e64b9
editorIndentGuide.activeBackground5#5b79a2
editorIndentGuide.activeBackground6#528256
editorIndentGuide.background1#7d785280
editorIndentGuide.background2#8d725280
editorIndentGuide.background3#c3535480
editorIndentGuide.background4#8e64b980
editorIndentGuide.background5#5b79a280
editorIndentGuide.background6#52825680
editorInfo.background#00000000
editorInfo.border#00000000
editorInfo.foreground#0052c6
editorInlayHint.background#00000012
editorInlayHint.foreground#000000b8
editorInlayHint.parameterBackground#e1d2c1
editorInlayHint.parameterForeground#8d7252
editorInlayHint.typeBackground#bbdbd9
editorInlayHint.typeForeground#006560
editorLightBulb.foreground#7d7000
editorLightBulbAutoFix.foreground#7d7000
editorLineNumber.activeForeground#000000e6
editorLineNumber.dimmedForeground#00000052
editorLineNumber.foreground#00000080
editorLink.activeForeground#6c7e4d
editorMarkerNavigation.background#f2ffdb
editorMarkerNavigationError.background#b70004
editorMarkerNavigationError.headerBackground#e0d1d1
editorMarkerNavigationInfo.background#0052c6
editorMarkerNavigationInfo.headerBackground#ced5df
editorMarkerNavigationWarning.background#9f5500
editorMarkerNavigationWarning.headerBackground#e1d2c1
editorOverviewRuler.addedForeground#006904b8
editorOverviewRuler.background#e6eed8
editorOverviewRuler.border#00000000
editorOverviewRuler.bracketMatchForeground#784f3fb8
editorOverviewRuler.commentForeground#00000052
editorOverviewRuler.commentUnresolvedForeground#0052c6b8
editorOverviewRuler.commonContentForeground#00000033
editorOverviewRuler.currentContentForeground#00656080
editorOverviewRuler.deletedForeground#b70004b8
editorOverviewRuler.errorForeground#b70004
editorOverviewRuler.findMatchForeground#006560b8
editorOverviewRuler.incomingContentForeground#0052c680
editorOverviewRuler.infoForeground#0052c6
editorOverviewRuler.modifiedForeground#0052c6b8
editorOverviewRuler.rangeHighlightForeground#0000000a
editorOverviewRuler.selectionHighlightForeground#00000012
editorOverviewRuler.warningForeground#9f5500
editorOverviewRuler.wordHighlightForeground#ac0074b8
editorOverviewRuler.wordHighlightStrongForeground#7700eeb8
editorOverviewRuler.wordHighlightTextForeground#ac0074b8
editorPane.background#e6eed8
editorRuler.foreground#0000001a
editorStickyScroll.background#ebf4dc
editorStickyScrollHover.background#0000000d
editorSuggestWidget.background#f2ffdb
editorSuggestWidget.border#0000001a
editorSuggestWidget.focusHighlightForeground#6c7e4d
editorSuggestWidget.foreground#000000b8
editorSuggestWidget.highlightForeground#6c7e4d
editorSuggestWidget.selectedBackground#0000000d
editorSuggestWidget.selectedForeground#000000e6
editorSuggestWidget.selectedIconForeground#000000e6
editorSuggestWidgetStatus.foreground#9aad7a
editorUnicodeHighlight.background#00000000
editorUnicodeHighlight.border#7d7000
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#000000b8
editorWarning.background#00000000
editorWarning.border#00000000
editorWarning.foreground#9f5500
editorWhitespace.foreground#00000052
editorWidget.background#f2ffdb
editorWidget.border#0000001a
editorWidget.foreground#000000e6
editorWidget.resizeBorder#9aad7a
errorForeground#b70004
errorLens.errorBackground#b700041f
errorLens.errorBackgroundLight#b700041f
errorLens.errorForeground#b70004
errorLens.errorForegroundLight#b70004
errorLens.errorMessageBackground#b700041f
errorLens.hintBackground#0065601f
errorLens.hintBackgroundLight#0065601f
errorLens.hintForeground#006560
errorLens.hintForegroundLight#006560
errorLens.hintMessageBackground#0065601f
errorLens.infoBackground#0052c61f
errorLens.infoBackgroundLight#0052c61f
errorLens.infoForeground#0052c6
errorLens.infoForegroundLight#0052c6
errorLens.infoMessageBackground#0052c61f
errorLens.statusBarErrorForeground#c35354
errorLens.statusBarHintForeground#567e7c
errorLens.statusBarIconErrorForeground#c35354
errorLens.statusBarIconWarningForeground#8d7252
errorLens.statusBarInfoForeground#5b79a2
errorLens.statusBarWarningForeground#8d7252
errorLens.warningBackground#9f55001f
errorLens.warningBackgroundLight#9f55001f
errorLens.warningForeground#9f5500
errorLens.warningForegroundLight#9f5500
errorLens.warningMessageBackground#9f55001f
extensionBadge.remoteBackground#006560
extensionBadge.remoteForeground#000000
extensionButton.background#9aad7a
extensionButton.foreground#000000
extensionButton.hoverBackground#9aad7ae6
extensionButton.prominentBackground#9aad7a
extensionButton.prominentForeground#000000
extensionButton.prominentHoverBackground#9aad7ae6
extensionButton.separator#000000
extensionIcon.preReleaseForeground#7700ee
extensionIcon.sponsorForeground#b70004
extensionIcon.starForeground#7d7000
extensionIcon.verifiedForeground#0052c6
focusBorder#85858566
foreground#000000e6
gitDecoration.addedResourceForeground#006904
gitDecoration.conflictingResourceForeground#9f5500
gitDecoration.deletedResourceForeground#c35354
gitDecoration.ignoredResourceForeground#00000080
gitDecoration.modifiedResourceForeground#5b79a2
gitDecoration.renamedResourceForeground#7d7000
gitDecoration.stageDeletedResourceForeground#b70004
gitDecoration.stageModifiedResourceForeground#0052c6
gitDecoration.submoduleResourceForeground#006560
gitDecoration.untrackedResourceForeground#528256
gitlens.closedAutolinkedIssueIconColor#7700ee
gitlens.closedPullRequestIconColor#b70004
gitlens.decorations.addedForegroundColor#006904
gitlens.decorations.branchAheadForegroundColor#006904
gitlens.decorations.branchBehindForegroundColor#9f5500
gitlens.decorations.branchDivergedForegroundColor#7d7000
gitlens.decorations.branchMissingUpstreamForegroundColor#9f5500
gitlens.decorations.branchUnpublishedForegroundColor#0052c6
gitlens.decorations.branchUpToDateForegroundColor#000000b8
gitlens.decorations.copiedForegroundColor#7d7000
gitlens.decorations.deletedForegroundColor#c35354
gitlens.decorations.ignoredForegroundColor#00000080
gitlens.decorations.modifiedForegroundColor#0052c6
gitlens.decorations.renamedForegroundColor#7d7000
gitlens.decorations.untrackedForegroundColor#528256
gitlens.decorations.workspaceCurrentForegroundColor#006904
gitlens.decorations.workspaceRepoMissingForegroundColor#00000080
gitlens.decorations.workspaceRepoOpenForegroundColor#006904
gitlens.decorations.worktreeHasUncommittedChangesForegroundColor#5b79a2
gitlens.decorations.worktreeMissingForegroundColor#b70004
gitlens.graphChangesColumnAddedColor#006904
gitlens.graphChangesColumnDeletedColor#b70004
gitlens.graphLane10Color#9f5500
gitlens.graphLane1Color#b70004
gitlens.graphLane2Color#9f5500
gitlens.graphLane3Color#7d7000
gitlens.graphLane4Color#006904
gitlens.graphLane5Color#006560
gitlens.graphLane6Color#0052c6
gitlens.graphLane7Color#7700ee
gitlens.graphLane8Color#ac0074
gitlens.graphLane9Color#b70004
gitlens.graphMinimapMarkerHeadColor#006904
gitlens.graphMinimapMarkerHighlightsColor#006560
gitlens.graphMinimapMarkerLocalBranchesColor#7700ee
gitlens.graphMinimapMarkerRemoteBranchesColor#567e7c
gitlens.graphMinimapMarkerStashesColor#ac0074
gitlens.graphMinimapMarkerTagsColor#7d7000
gitlens.graphMinimapMarkerUpstreamColor#528256
gitlens.graphScrollMarkerHeadColor#006904b8
gitlens.graphScrollMarkerHighlightsColor#006560b8
gitlens.graphScrollMarkerLocalBranchesColor#7700eeb8
gitlens.graphScrollMarkerRemoteBranchesColor#567e7cb8
gitlens.graphScrollMarkerStashesColor#ac0074b8
gitlens.graphScrollMarkerTagsColor#7d7000b8
gitlens.graphScrollMarkerUpstreamColor#528256b8
gitlens.gutterBackgroundColor#ebf4dc
gitlens.gutterForegroundColor#000000b8
gitlens.gutterUncommittedForegroundColor#5b79a2
gitlens.lineHighlightBackgroundColor#0000000a
gitlens.lineHighlightOverviewRulerColor#0000000a
gitlens.mergedPullRequestIconColor#7700ee
gitlens.openAutolinkedIssueIconColor#006904
gitlens.openPullRequestIconColor#006904
gitlens.trailingLineBackgroundColor#00000000
gitlens.trailingLineForegroundColor#00000052
gitlens.unpublishedChangesIconColor#528256
gitlens.unpublishedCommitIconColor#006904
gitlens.unpulledChangesIconColor#9f5500
icon.foreground#000000e6
inlineChat.background#f2ffdb
inlineChat.border#0000001a
inlineChat.regionHighlight#0000000a
inlineChat.shadow#00000024
inlineChatDiff.inserted#0069041f
inlineChatDiff.removed#b700041f
inlineChatInput.background#e6f2d0
inlineChatInput.border#0000001a
inlineChatInput.focusBorder#85858566
inlineChatInput.placeholderForeground#00000080
input.background#0000000d
input.border#0000001a
input.foreground#000000e6
input.placeholderForeground#000000b8
inputOption.activeBackground#9aad7a
inputOption.activeBorder#0000001a
inputOption.activeForeground#000000
inputOption.hoverBackground#0000000d
inputValidation.errorBackground#e0d1d1
inputValidation.errorBorder#b7000433
inputValidation.errorForeground#b70004
inputValidation.infoBackground#ced5df
inputValidation.infoBorder#0052c633
inputValidation.infoForeground#0052c6
inputValidation.warningBackground#e1d2c1
inputValidation.warningBorder#9f550033
inputValidation.warningForeground#9f5500
interactive.activeCodeBorder#ff0000
interactive.inactiveCodeBorder#ff0000
keybindingLabel.background#0000000d
keybindingLabel.border#0000001a
keybindingLabel.bottomBorder#0000001a
keybindingLabel.foreground#000000e6
keybindingTable.headerBackground#f2ffdb
keybindingTable.rowsBackground#f2ffdb
list.activeSelectionBackground#0000000d
list.activeSelectionForeground#000000e6
list.activeSelectionIconForeground#000000e6
list.deemphasizedForeground#00000080
list.dropBackground#00000033
list.errorForeground#b70004
list.filterMatchBackground#00656033
list.filterMatchBorder#0000001a
list.focusAndSelectionOutline#85858566
list.focusBackground#0000000d
list.focusForeground#000000e6
list.focusHighlightForeground#6c7e4d
list.focusOutline#0000001a
list.highlightForeground#6c7e4d
list.hoverBackground#00000008
list.hoverForeground#000000e6
list.inactiveFocusBackground#00000000
list.inactiveFocusOutline#ffffff1a
list.inactiveSelectionBackground#0000000d
list.inactiveSelectionForeground#000000e6
list.inactiveSelectionIconForeground#000000e6
list.invalidItemForeground#b70004
list.warningForeground#9f5500
listFilterWidget.background#f2ffdb
listFilterWidget.noMatchesOutline#b70004
listFilterWidget.outline#0000001a
listFilterWidget.shadow#00000024
menu.background#f2ffdb
menu.border#0000001a
menu.foreground#000000e6
menu.selectionBackground#0000000d
menu.selectionBorder#0000001a
menu.selectionForeground#000000e6
menu.separatorBackground#0000001a
menubar.selectionBackground#0000000d
menubar.selectionBorder#0000001a
menubar.selectionForeground#000000e6
merge.border#0000001a
merge.commonContentBackground#00000012
merge.commonHeaderBackground#0000001f
merge.currentContentBackground#0065601f
merge.currentHeaderBackground#00656080
merge.incomingContentBackground#0052c61f
merge.incomingHeaderBackground#0052c680
mergeEditor.change.background#0000000a
mergeEditor.change.word.background#00000012
mergeEditor.changeBase.background#0000000a
mergeEditor.changeBase.word.background#00000012
mergeEditor.conflict.handled.minimapOverViewRuler#00690480
mergeEditor.conflict.handledFocused.border#006904
mergeEditor.conflict.handledUnfocused.border#00690480
mergeEditor.conflict.input1.background#0052c680
mergeEditor.conflict.input2.background#00656080
mergeEditor.conflict.unhandled.minimapOverViewRuler#b7000480
mergeEditor.conflict.unhandledFocused.border#b70004
mergeEditor.conflict.unhandledUnfocused.border#b7000480
mergeEditor.conflictingLines.background#9f55001f
minimap.background#ebf4dc
minimap.errorHighlight#b7000433
minimap.findMatchHighlight#00656033
minimap.foregroundOpacity#ffffff
minimap.selectionHighlight#00000033
minimap.selectionOccurrenceHighlight#0000001f
minimap.warningHighlight#9f550033
minimapGutter.addedBackground#006904
minimapGutter.deletedBackground#b70004
minimapGutter.modifiedBackground#0052c6
minimapSlider.activeBackground#00000008
minimapSlider.background#0000000d
minimapSlider.hoverBackground#00000014
notebook.cellBorderColor#0000001a
notebook.cellEditorBackground#e6eed8
notebook.cellHoverBackground#00000008
notebook.cellInsertionIndicator#9aad7a
notebook.cellStatusBarItemHoverBackground#0000000d
notebook.cellToolbarSeparator#0000001a
notebook.editorBackground#effcd9
notebook.focusedCellBackground#00000008
notebook.focusedCellBorder#9aad7a
notebook.focusedEditorBorder#85858566
notebook.inactiveFocusedCellBorder#0000001a
notebook.inactiveSelectedCellBorder#85858566
notebook.outputContainerBackgroundColor#ebf4dc
notebook.outputContainerBorderColor#0000001a
notebook.selectedCellBackground#00000008
notebook.selectedCellBorder#9aad7a
notebook.symbolHighlightBackground#ff0000
notebookEditorOverviewRuler.runningCellForeground#7d7000
notebookScrollbarSlider.activeBackground#00000008
notebookScrollbarSlider.background#0000000d
notebookScrollbarSlider.hoverBackground#00000014
notebookStatusErrorIcon.foreground#b70004
notebookStatusRunningIcon.foreground#7d7000
notebookStatusSuccessIcon.foreground#006904
notificationCenter.border#0000001a
notificationCenterHeader.background#f2ffdb
notificationCenterHeader.foreground#000000e6
notificationLink.foreground#6c7e4d
notifications.background#f2ffdb
notifications.border#0000001a
notifications.foreground#000000e6
notificationsErrorIcon.foreground#b70004
notificationsInfoIcon.foreground#0052c6
notificationsWarningIcon.foreground#9f5500
notificationToast.border#0000001a
panel.background#ebf4dc
panel.border#0000001a
panel.dropBorder#9aad7a
panelInput.border#0000001a
panelSection.border#85858566
panelSection.dropBackground#00000033
panelSectionHeader.background#00000008
panelSectionHeader.border#85858566
panelSectionHeader.foreground#000000b8
panelTitle.activeBorder#9aad7a
panelTitle.activeForeground#000000e6
panelTitle.inactiveForeground#000000b8
peekView.border#006560
peekViewEditor.background#ebf4dc
peekViewEditor.matchHighlightBackground#00656033
peekViewEditor.matchHighlightBorder#0000001a
peekViewEditorGutter.background#effcd9
peekViewEditorStickyScroll.background#f2ffdb
peekViewResult.background#effcd9
peekViewResult.fileForeground#000000b8
peekViewResult.lineForeground#000000b8
peekViewResult.matchHighlightBackground#00656033
peekViewResult.selectionBackground#00000014
peekViewResult.selectionForeground#000000e6
peekViewTitle.background#bbdbd9
peekViewTitleDescription.foreground#000000b8
peekViewTitleLabel.foreground#567e7c
pickerGroup.border#0000001a
pickerGroup.foreground#6c7e4d
ports.iconRunningProcessForeground#006904
problemsErrorIcon.foreground#b70004
problemsInfoIcon.foreground#0052c6
problemsWarningIcon.foreground#9f5500
profileBadge.background#c4ccb8
profileBadge.foreground#000000b8
progressBar.background#9aad7a
quickInput.background#f2ffdb
quickInput.foreground#000000b8
quickInputList.focusBackground#0000000d
quickInputList.focusForeground#000000e6
quickInputList.focusIconForeground#000000e6
quickInputTitle.background#e6eed8
sash.hoverBorder#85858566
scm.providerBorder#85858566
scrollbar.shadow#00000024
scrollbarSlider.activeBackground#00000008
scrollbarSlider.background#0000000d
scrollbarSlider.hoverBackground#00000014
search.resultsInfoForeground#00000080
searchEditor.findMatchBackground#00656033
searchEditor.findMatchBorder#0000001a
searchEditor.textInputBorder#0000001a
selection.background#00000012
settings.checkboxBackground#0000000d
settings.checkboxBorder#0000001a
settings.checkboxForeground#000000e6
settings.dropdownBackground#0000000d
settings.dropdownBorder#0000001a
settings.dropdownForeground#000000e6
settings.dropdownListBorder#0000001a
settings.focusedRowBackground#00000008
settings.focusedRowBorder#0000001a
settings.headerBorder#0000001a
settings.headerForeground#000000e6
settings.modifiedItemIndicator#0052c6
settings.numberInputBackground#0000000d
settings.numberInputBorder#0000001a
settings.numberInputForeground#000000e6
settings.rowHoverBackground#00000008
settings.sashBorder#85858566
settings.settingsHeaderHoverForeground#000000
settings.textInputBackground#0000000d
settings.textInputBorder#0000001a
settings.textInputForeground#000000e6
sideBar.background#ebf4dc
sideBar.border#0000001a
sideBar.dropBackground#00000033
sideBar.foreground#000000b8
sideBarSectionHeader.background#00000008
sideBarSectionHeader.border#85858566
sideBarSectionHeader.foreground#000000b8
sideBarTitle.foreground#000000e6
sideBySideEditor.horizontalBorder#0000001a
sideBySideEditor.verticalBorder#0000001a
statusBar.background#e6eed8
statusBar.border#0000001a
statusBar.debuggingBackground#d9d6b7
statusBar.debuggingBorder#0000001a
statusBar.debuggingForeground#7d7000
statusBar.focusBorder#85858566
statusBar.foreground#000000e6
statusBar.noFolderBackground#e0d1d1
statusBar.noFolderBorder#0000001a
statusBar.noFolderForeground#b70004
statusBarItem.activeBackground#00000008
statusBarItem.compactHoverBackground#0000001f
statusBarItem.errorBackground#e0d1d1
statusBarItem.errorForeground#b70004
statusBarItem.focusBorder#85858566
statusBarItem.hoverBackground#0000000d
statusBarItem.prominentBackground#c4ccb8
statusBarItem.prominentForeground#000000e6
statusBarItem.prominentHoverBackground#00000014
statusBarItem.remoteBackground#bbdbd9
statusBarItem.remoteForeground#006560
statusBarItem.warningBackground#e1d2c1
statusBarItem.warningForeground#9f5500
symbolIcon.arrayForeground#0052c6
symbolIcon.booleanForeground#0052c6
symbolIcon.classForeground#7d7000
symbolIcon.colorForeground#000000b8
symbolIcon.constantForeground#567e7c
symbolIcon.constructorForeground#9f5500
symbolIcon.enumeratorForeground#006560
symbolIcon.enumeratorMemberForeground#567e7c
symbolIcon.eventForeground#c35354
symbolIcon.fieldForeground#7d7852
symbolIcon.fileForeground#000000b8
symbolIcon.folderForeground#000000b8
symbolIcon.functionForeground#9f5500
symbolIcon.interfaceForeground#006560
symbolIcon.keyForeground#8e64b9
symbolIcon.keywordForeground#ac0074
symbolIcon.methodForeground#9f5500
symbolIcon.moduleForeground#000000b8
symbolIcon.namespaceForeground#000000b8
symbolIcon.nullForeground#0052c6
symbolIcon.numberForeground#528256
symbolIcon.objectForeground#006560
symbolIcon.operatorForeground#000000b8
symbolIcon.packageForeground#000000b8
symbolIcon.propertyForeground#7d7852
symbolIcon.referenceForeground#7700ee
symbolIcon.snippetForeground#5b79a2
symbolIcon.stringForeground#784f3f
symbolIcon.structForeground#7d7000
symbolIcon.textForeground#000000b8
symbolIcon.typeParameterForeground#567e7c
symbolIcon.unitForeground#528256
symbolIcon.variableForeground#8d7252
tab.activeBackground#f2ffdb
tab.activeBorder#00000000
tab.activeBorderTop#00000000
tab.activeForeground#000000e6
tab.activeModifiedBorder#0052c6
tab.border#0000001a
tab.hoverBackground#f2ffdb
tab.hoverBorder#00000000
tab.hoverForeground#000000e6
tab.inactiveBackground#ebf4dc
tab.inactiveForeground#000000b8
tab.inactiveModifiedBorder#0052c680
tab.lastPinnedBorder#85858566
tab.unfocusedActiveBackground#effcd9
tab.unfocusedActiveBorder#00000000
tab.unfocusedActiveBorderTop#00000000
tab.unfocusedActiveForeground#000000b8
tab.unfocusedActiveModifiedBorder#0052c680
tab.unfocusedHoverBackground#effcd9
tab.unfocusedHoverBorder#00000000
tab.unfocusedHoverForeground#000000b8
tab.unfocusedInactiveBackground#e6eed8
tab.unfocusedInactiveForeground#00000080
tab.unfocusedInactiveModifiedBorder#0052c633
terminal.ansiBlack#a3ab94
terminal.ansiBlue#0052c6
terminal.ansiBrightBlack#787e6d
terminal.ansiBrightBlue#5b79a2
terminal.ansiBrightCyan#567e7c
terminal.ansiBrightGreen#528256
terminal.ansiBrightMagenta#af5a92
terminal.ansiBrightRed#c35354
terminal.ansiBrightWhite#181916
terminal.ansiBrightYellow#7d7852
terminal.ansiCyan#006560
terminal.ansiGreen#006904
terminal.ansiMagenta#ac0074
terminal.ansiRed#b70004
terminal.ansiWhite#43473d
terminal.ansiYellow#7d7000
terminal.background#effcd9
terminal.border#0000001a
terminal.dropBackground#00000033
terminal.findMatchBackground#00656033
terminal.findMatchBorder#0000001a
terminal.findMatchHighlightBackground#0065601f
terminal.findMatchHighlightBorder#0000001a
terminal.foreground#181916
terminal.hoverHighlightBackground#0000000a
terminal.inactiveSelectionBackground#0000000a
terminal.selectionBackground#00000012
terminal.selectionForeground#000000e6
terminal.tab.activeBorder#9aad7a
terminalCommandDecoration.defaultBackground#0052c6
terminalCommandDecoration.errorBackground#b70004
terminalCommandDecoration.successBackground#006904
terminalCursor.background#000000
terminalCursor.foreground#9aad7a
terminalOverviewRuler.cursorForeground#9aad7a
terminalOverviewRuler.findMatchForeground#006560b8
testing.iconErrored#b70004
testing.iconFailed#b70004
testing.iconPassed#006904
testing.iconQueued#7d7000
testing.iconSkipped#00000080
testing.iconUnset#00000080
testing.message.error.decorationForeground#b70004
testing.message.error.lineBackground#b7000433
testing.message.info.decorationForeground#0052c6
testing.message.info.lineBackground#0052c633
testing.peekBorder#c35354
testing.peekHeaderBackground#e0d1d1
testing.runAction#006904
textBlockQuote.background#00000008
textBlockQuote.border#9aad7a
textCodeBlock.background#00000008
textLink.activeForeground#6c7e4de6
textLink.foreground#6c7e4d
textPreformat.foreground#ac0074
textSeparator.foreground#0000001a
titleBar.activeBackground#e6eed8
titleBar.activeForeground#000000e6
titleBar.border#0000001a
titleBar.inactiveBackground#e6eed8
titleBar.inactiveForeground#000000b8
toolbar.activeBackground#00000008
toolbar.hoverBackground#0000000d
toolbar.hoverOutline#0000001a
tree.inactiveIndentGuidesStroke#0000001f
tree.indentGuidesStroke#00000033
tree.tableColumnsBorder#0000001a
tree.tableOddRowsBackground#f2ffdb
walkThrough.embeddedEditorBackground#e6eed8
walkthrough.stepTitle.foreground#000000e6
welcomePage.background#effcd9
welcomePage.progress.background#0000000d
welcomePage.progress.foreground#9aad7a
welcomePage.tileBackground#0000000d
welcomePage.tileBorder#0000001a
welcomePage.tileHoverBackground#00000014
widget.border#0000001a
widget.shadow#00000024

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
entity.name.type.namespace, entity.name.namespace, entity.name.type.module, entity.name.module, entity.name.type.package, entity.name.package, storage.modifier.import, storage.modifier.package, variable.language.wildcard.java, entity.name.scope-resolution	#000000B8
entity.name.type.class, entity.other.inherited-class, meta.definition.class.inherited.classes, entity.other.attribute-name.class	#7D7000
entity.name.type.enum	#006560
entity.name.type.interface, meta.definition.class.implemented.interfaces	#006560
entity.name.type.struct, storage.type.struct	#006560
storage.type.generic	#567E7C
entity.name.type, entity.name.tag, keyword.operator.less, support.type	#006560
storage.type	#0052C6
variable.parameter	#8D7252
variable, meta.method variable, meta.function variable, meta.block variable, entity.name.variable, variable.other.readwrite	#8D7252	underline
variable.other.constant, meta.method variable.other.constant, meta.function variable.other.constant, meta.block variable.other.constant, entity.name.variable.constant	#8D7252
variable.other.property, meta.class variable, meta.interface variable, entity.name.variable.property, entity.name.variable.field, meta.attribute.python	#7D7852	underline
variable.other.constant.property, meta.class variable.other.constant, meta.interface variable.other.constant, entity.name.variable.field.constant, entity.name.variable.property.constant, meta.attribute.constant.python	#7D7852
variable.other.enummember, constant.other.enum, entity.name.variable.enum-member	#567E7C
meta.decorator, meta.function.decorator, entity.name.function.decorator	#B70004
entity.name.type.annotation, meta.declaration.annotation, storage.type.annotation, entity.other.attribute, meta.attribute, support.attribute	#B70004
keyword.other.event, variable.other.event	#C35354
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal, entity.other.attribute-name.parent-selector	#9F5500
entity.name.method, entity.name.function.member	#9F5500
meta.preprocessor.macro, keyword.preprocessor, keyword.control.directive, entity.name.function.macro, entity.name.function.preprocessor, meta.preprocessor punctuation	#AF5A92
entity.name.label	#AF5A92
comment	#006904	italic
string, string.tag, string.value, meta.preprocessor.string, meta.embedded.assembly	#784F3F
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded, meta.template.expression	#5B79A2
constant.character, constant.other.unicode-range	#5B79A2
constant.character.escape	#B70004
keyword, storage.type.package, storage.type.import, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#AC0074
storage, storage.modifier, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike, keyword.operator.noexcept, keyword.other.var, constant.language, keyword.class, keyword.struct, keyword.interface, keyword.function, keyword.method, keyword.const, keyword.var, keyword.other.rust, keyword.other.fn, support.constant.property-value, keyword.operator.shape, support.constant.font-name, support.constant.media-type, support.constant.media	#0052C6
constant.numeric, keyword.operator.plus.exponent, keyword.operator.minus.exponent, keyword.other.unit, meta.preprocessor.numeric, source.css.less meta.property-value constant.numeric, source.css.less meta.property-value keyword.other.unit, constant.other.reference.link	#528256
string.regexp, constant.regexp	#7700EE
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp	#8E64B9
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp	#AF5A92
keyword.operator.or.regexp, keyword.control.anchor.regexp	#5B79A2
keyword.operator.quantifier.regexp	#528256
keyword.operator, punctuation.separator.key-value	#000000B8
variable.language, variable.parameter.function.language.special, keyword.other.this, variable.language.this, variable.language.super, variable.language.special.self	#7D7000
storage.type.primitive, storage.type.built-in, storage.type.builtin, support.type.primitive, support.type.built-in, support.type.builtin, keyword.type	#0052C6
keyword.operator.new, keyword.control.new	#0052C6
variable.other.constant, constant.other.caps, constant.other.php	#567E7C
variable.other.color, constant.other.color, support.constant.color, constant.other.rgb-value, constant.other.color.rgb-value	#784F3F
invalid	#B70004
entity.other.attribute-name.id	#7700EE
support.type.property-name, entity.other.attribute-name, meta.property-value	#5B79A2
support.type.vendored.property-name	#5B79A2	underline
entity.other.attribute-name.pseudo-class	#7D7852
entity.other.attribute-name.pseudo-element	#8E64B9
entity.other.keyframe-offset, entity.name.tag.reference, meta.at-rule.keyframes, entity.other.attribute-name.scss, source.css.less constant.numeric, source.css.less keyword.other.unit	#AF5A92
heading.1, markup.heading.setext.1	#B70004
heading.2, markup.heading.setext.2	#9F5500
heading.3, markup.heading.setext.3	#7D7000
heading.4, markup.heading.setext.4	#006904
heading.5, markup.heading.setext.5	#006560
heading.6, markup.heading.setext.6	#0052C6
emphasis, markup.italic	—	italic
strong, markup.bold	—	bold
deleted, markup.strikethrough	—	strikethrough
markup.underline	—	underline
markup.underline.link	#5B79A2	underline
string.other.link, punctuation.definition.list.begin.markdown	#6C7E4D
markup.fenced_code.block, markup.inline.raw, markup.raw.block	#AC0074
punctuation.definition.quote.begin	#7700EE
punctuation.definition.tag	#000000B8
meta.separator	#784F3F
markup.inserted	#006904	—
markup.deleted	#B70004	—
markup.changed	#0052C6	—
support.function.magic.python	#7700EE	—
ref.license	#CCCCCC	—
ref.snippet	#606060	—
ref.matchtext	#000000	—
token.info-token	#316BCD	—
token.warn-token	#CD9731	—
token.error-token	#CD3131	—
token.debug-token	#800080	—

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