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 — Green Mate

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#ffffff0f
activityBar.activeBorder#9aad7a
activityBar.activeFocusBorder#ffffff
activityBar.background#1b2112
activityBar.border#ffffff14
activityBar.dropBorder#9aad7a
activityBar.foreground#ffffffc7
activityBar.inactiveForeground#ffffff8a
activityBarBadge.background#9aad7a
activityBarBadge.foreground#000000
badge.background#9aad7a
badge.foreground#000000
banner.background#9aad7a
banner.foreground#000000
banner.iconForeground#000000
breadcrumb.activeSelectionForeground#879d61
breadcrumb.background#1b2112
breadcrumb.focusForeground#ffffffc7
breadcrumb.foreground#ffffff8a
breadcrumbPicker.background#2b3120
button.background#9aad7a
button.border#ffffff14
button.foreground#000000
button.hoverBackground#9aad7ae6
button.secondaryBackground#ffffff0f
button.secondaryForeground#ffffffc7
button.secondaryHoverBackground#ffffff14
button.separator#000000
charts.blue#4b9ecd
charts.foreground#000000
charts.green#45aa41
charts.lines#ffffff14
charts.orange#d28342
charts.purple#9b87ea
charts.red#ef6363
charts.yellow#bfaf40
chat.requestBorder#ffffff14
checkbox.background#ffffff0f
checkbox.border#ffffff14
checkbox.foreground#ffffffc7
checkbox.selectBackground#ffffff0f
checkbox.selectBorder#ffffff14
commandCenter.activeBackground#ffffff14
commandCenter.activeBorder#ffffff14
commandCenter.activeForeground#ffffffc7
commandCenter.background#ffffff0f
commandCenter.border#ffffff14
commandCenter.foreground#ffffffc7
commandCenter.inactiveBorder#ffffff14
commandCenter.inactiveForeground#ffffff8a
commentsView.resolvedIcon#ffffff8a
commentsView.unresolvedIcon#4b9ecd
debugConsole.errorForeground#ef6363
debugConsole.infoForeground#4b9ecd
debugConsole.sourceForeground#ffffffc7
debugConsole.warningForeground#d28342
debugConsoleInputIcon.foreground#9aad7a
debugExceptionWidget.background#3a2727
debugExceptionWidget.border#00000033
debugIcon.breakpointCurrentStackframeForeground#bfaf40
debugIcon.breakpointDisabledForeground#ffffff5c
debugIcon.breakpointForeground#ef6363
debugIcon.breakpointStackframeForeground#bfaf408a
debugIcon.breakpointUnverifiedForeground#d28342
debugIcon.continueForeground#45aa41
debugIcon.disconnectForeground#ef6363
debugIcon.pauseForeground#bfaf40
debugIcon.restartForeground#45aa41
debugIcon.startForeground#45aa41
debugIcon.stepBackForeground#4b9ecd
debugIcon.stepIntoForeground#4b9ecd
debugIcon.stepOutForeground#4b9ecd
debugIcon.stepOverForeground#4b9ecd
debugIcon.stopForeground#ef6363
debugTokenExpression.boolean#4b9ecd
debugTokenExpression.error#ef6363
debugTokenExpression.name#879d61
debugTokenExpression.number#80b27f
debugTokenExpression.string#cb8569
debugTokenExpression.value#46a598
debugToolBar.background#2b3120
debugToolBar.border#00000033
debugView.exceptionLabelBackground#ef6363
debugView.exceptionLabelForeground#000000
debugView.stateLabelBackground#ffffff08
debugView.stateLabelForeground#ffffffc7
debugView.valueChangedHighlight#87abc0
descriptionForeground#ffffff8a
diffEditor.border#ffffff14
diffEditor.diagonalFill#ffffff14
diffEditor.insertedLineBackground#45aa4133
diffEditor.insertedTextBackground#45aa415c
diffEditor.insertedTextBorder#00000000
diffEditor.move.border#75757566
diffEditor.removedLineBackground#ef636333
diffEditor.removedTextBackground#ef63635c
diffEditor.removedTextBorder#00000000
diffEditor.unchangedCodeBackground#ffffff0f
diffEditor.unchangedRegionBackground#3a3f31
diffEditor.unchangedRegionForeground#ffffff8a
diffEditorGutter.insertedLineBackground#00000000
diffEditorGutter.removedLineBackground#00000000
diffEditorOverview.insertedForeground#45aa41c7
diffEditorOverview.removedForeground#ef6363c7
disabledForeground#ffffff5c
dropdown.background#ffffff0f
dropdown.border#ffffff14
dropdown.foreground#ffffffc7
dropdown.listBackground#2b3120
editor.background#232919
editor.findMatchBackground#46a5985c
editor.findMatchBorder#ffffff14
editor.findMatchHighlightBackground#46a59833
editor.findMatchHighlightBorder#ffffff14
editor.findRangeHighlightBackground#ffffff0f
editor.findRangeHighlightBorder#00000000
editor.focusedStackFrameHighlightBackground#bfaf4033
editor.foldBackground#ffffff0f
editor.foreground#ffffff8a
editor.hoverHighlightBackground#ffffff0f
editor.inactiveSelectionBackground#ffffff0f
editor.inlineValuesBackground#bfaf4033
editor.inlineValuesForeground#bfaf40
editor.lineHighlightBackground#00000000
editor.lineHighlightBorder#ffffff14
editor.linkedEditingBackground#4b9ecd5c
editor.rangeHighlightBackground#ffffff0f
editor.rangeHighlightBorder#00000000
editor.selectionBackground#ffffff14
editor.selectionForeground#ffffffc7
editor.selectionHighlightBackground#ffffff0f
editor.selectionHighlightBorder#ffffff14
editor.snippetFinalTabstopHighlightBackground#00000000
editor.snippetFinalTabstopHighlightBorder#4b9ecd
editor.snippetTabstopHighlightBackground#4b9ecd5c
editor.snippetTabstopHighlightBorder#ffffff14
editor.stackFrameHighlightBackground#bfaf405c
editor.symbolHighlightBackground#00000000
editor.symbolHighlightBorder#9b87ea
editor.wordHighlightBackground#ed63ba5c
editor.wordHighlightBorder#ffffff14
editor.wordHighlightStrongBackground#9b87ea5c
editor.wordHighlightStrongBorder#ffffff14
editor.wordHighlightTextBackground#ed63ba5c
editor.wordHighlightTextBorder#ffffff14
editorBracketHighlight.foreground1#ada77f
editorBracketHighlight.foreground2#c59e7f
editorBracketHighlight.foreground3#d19797
editorBracketHighlight.foreground4#a9a0cb
editorBracketHighlight.foreground5#87abc0
editorBracketHighlight.foreground6#80b27f
editorBracketHighlight.unexpectedBracket.foreground#ef6363
editorBracketMatch.background#cb85695c
editorBracketMatch.border#ffffff14
editorBracketPairGuide.activeBackground1#ada77f
editorBracketPairGuide.activeBackground2#c59e7f
editorBracketPairGuide.activeBackground3#d19797
editorBracketPairGuide.activeBackground4#a9a0cb
editorBracketPairGuide.activeBackground5#87abc0
editorBracketPairGuide.activeBackground6#80b27f
editorBracketPairGuide.background1#ada77f8a
editorBracketPairGuide.background2#c59e7f8a
editorBracketPairGuide.background3#d197978a
editorBracketPairGuide.background4#a9a0cb8a
editorBracketPairGuide.background5#87abc08a
editorBracketPairGuide.background6#80b27f8a
editorCodeLens.foreground#ffffff5c
editorCommentsWidget.rangeActiveBackground#4b9ecd5c
editorCommentsWidget.rangeBackground#4b9ecd33
editorCommentsWidget.resolvedBorder#ffffff5c
editorCommentsWidget.unresolvedBorder#4b9ecd
editorCursor.background#000000
editorCursor.foreground#9aad7a
editorError.background#00000000
editorError.border#00000000
editorError.foreground#ef6363
editorGhostText.background#00000000
editorGhostText.border#00000000
editorGhostText.foreground#ffffff33
editorGroup.border#ffffff14
editorGroup.dropBackground#0000004d
editorGroup.dropIntoPromptBackground#2b3120
editorGroup.dropIntoPromptBorder#00000033
editorGroup.dropIntoPromptForeground#ffffffc7
editorGroup.emptyBackground#1b2112
editorGroup.focusedEmptyBorder#00000000
editorGroupHeader.border#ffffff14
editorGroupHeader.noTabsBackground#1b2112
editorGroupHeader.tabsBackground#1b2112
editorGroupHeader.tabsBorder#ffffff14
editorGutter.addedBackground#45aa41
editorGutter.background#1b2112
editorGutter.commentGlyphForeground#ffffff8a
editorGutter.commentRangeForeground#3a3f31
editorGutter.commentUnresolvedGlyphForeground#4b9ecd
editorGutter.deletedBackground#ef6363
editorGutter.foldingControlForeground#ffffff8a
editorGutter.modifiedBackground#4b9ecd
editorHint.border#00000000
editorHint.foreground#46a598
editorHoverWidget.background#2b3120
editorHoverWidget.border#00000033
editorHoverWidget.foreground#ffffffc7
editorHoverWidget.highlightForeground#ffffff
editorHoverWidget.statusBarBackground#ffffff08
editorIndentGuide.activeBackground1#ada77f
editorIndentGuide.activeBackground2#c59e7f
editorIndentGuide.activeBackground3#d19797
editorIndentGuide.activeBackground4#a9a0cb
editorIndentGuide.activeBackground5#87abc0
editorIndentGuide.activeBackground6#80b27f
editorIndentGuide.background1#ada77f8a
editorIndentGuide.background2#c59e7f8a
editorIndentGuide.background3#d197978a
editorIndentGuide.background4#a9a0cb8a
editorIndentGuide.background5#87abc08a
editorIndentGuide.background6#80b27f8a
editorInfo.background#00000000
editorInfo.border#00000000
editorInfo.foreground#4b9ecd
editorInlayHint.background#ffffff14
editorInlayHint.foreground#ffffff8a
editorInlayHint.parameterBackground#322b24
editorInlayHint.parameterForeground#c59e7f
editorInlayHint.typeBackground#27302f
editorInlayHint.typeForeground#46a598
editorLightBulb.foreground#bfaf40
editorLightBulbAutoFix.foreground#bfaf40
editorLineNumber.activeForeground#ffffffc7
editorLineNumber.dimmedForeground#ffffff33
editorLineNumber.foreground#ffffff5c
editorLink.activeForeground#879d61
editorMarkerNavigation.background#2b3120
editorMarkerNavigationError.background#ef6363
editorMarkerNavigationError.headerBackground#3a2727
editorMarkerNavigationInfo.background#4b9ecd
editorMarkerNavigationInfo.headerBackground#252d31
editorMarkerNavigationWarning.background#d28342
editorMarkerNavigationWarning.headerBackground#322b24
editorOverviewRuler.addedForeground#45aa41c7
editorOverviewRuler.background#1b2112
editorOverviewRuler.border#00000000
editorOverviewRuler.bracketMatchForeground#cb8569c7
editorOverviewRuler.commentForeground#ffffff33
editorOverviewRuler.commentUnresolvedForeground#4b9ecdc7
editorOverviewRuler.commonContentForeground#ffffff5c
editorOverviewRuler.currentContentForeground#46a5988a
editorOverviewRuler.deletedForeground#ef6363c7
editorOverviewRuler.errorForeground#ef6363
editorOverviewRuler.findMatchForeground#46a598c7
editorOverviewRuler.incomingContentForeground#4b9ecd8a
editorOverviewRuler.infoForeground#4b9ecd
editorOverviewRuler.modifiedForeground#4b9ecdc7
editorOverviewRuler.rangeHighlightForeground#ffffff0f
editorOverviewRuler.selectionHighlightForeground#ffffff14
editorOverviewRuler.warningForeground#d28342
editorOverviewRuler.wordHighlightForeground#ed63bac7
editorOverviewRuler.wordHighlightStrongForeground#9b87eac7
editorOverviewRuler.wordHighlightTextForeground#ed63bac7
editorPane.background#1b2112
editorRuler.foreground#ffffff14
editorStickyScroll.background#212716
editorStickyScrollHover.background#ffffff0f
editorSuggestWidget.background#2b3120
editorSuggestWidget.border#00000033
editorSuggestWidget.focusHighlightForeground#879d61
editorSuggestWidget.foreground#ffffff8a
editorSuggestWidget.highlightForeground#879d61
editorSuggestWidget.selectedBackground#ffffff0f
editorSuggestWidget.selectedForeground#ffffffc7
editorSuggestWidget.selectedIconForeground#ffffffc7
editorSuggestWidgetStatus.foreground#9aad7a
editorUnicodeHighlight.background#00000000
editorUnicodeHighlight.border#bfaf40
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#ffffff8a
editorWarning.background#00000000
editorWarning.border#00000000
editorWarning.foreground#d28342
editorWhitespace.foreground#ffffff33
editorWidget.background#2b3120
editorWidget.border#00000033
editorWidget.foreground#ffffffc7
editorWidget.resizeBorder#9aad7a
errorForeground#ef6363
errorLens.errorBackground#ef636333
errorLens.errorBackgroundLight#ef636333
errorLens.errorForeground#ef6363
errorLens.errorForegroundLight#ef6363
errorLens.errorMessageBackground#ef636333
errorLens.hintBackground#46a59833
errorLens.hintBackgroundLight#46a59833
errorLens.hintForeground#46a598
errorLens.hintForegroundLight#46a598
errorLens.hintMessageBackground#46a59833
errorLens.infoBackground#4b9ecd33
errorLens.infoBackgroundLight#4b9ecd33
errorLens.infoForeground#4b9ecd
errorLens.infoForegroundLight#4b9ecd
errorLens.infoMessageBackground#4b9ecd33
errorLens.statusBarErrorForeground#d19797
errorLens.statusBarHintForeground#83aea8
errorLens.statusBarIconErrorForeground#d19797
errorLens.statusBarIconWarningForeground#c59e7f
errorLens.statusBarInfoForeground#87abc0
errorLens.statusBarWarningForeground#c59e7f
errorLens.warningBackground#d2834233
errorLens.warningBackgroundLight#d2834233
errorLens.warningForeground#d28342
errorLens.warningForegroundLight#d28342
errorLens.warningMessageBackground#d2834233
extensionBadge.remoteBackground#46a598
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#9b87ea
extensionIcon.sponsorForeground#ef6363
extensionIcon.starForeground#bfaf40
extensionIcon.verifiedForeground#4b9ecd
focusBorder#75757566
foreground#ffffffc7
gitDecoration.addedResourceForeground#45aa41
gitDecoration.conflictingResourceForeground#d28342
gitDecoration.deletedResourceForeground#d19797
gitDecoration.ignoredResourceForeground#ffffff5c
gitDecoration.modifiedResourceForeground#87abc0
gitDecoration.renamedResourceForeground#bfaf40
gitDecoration.stageDeletedResourceForeground#ef6363
gitDecoration.stageModifiedResourceForeground#4b9ecd
gitDecoration.submoduleResourceForeground#46a598
gitDecoration.untrackedResourceForeground#80b27f
gitlens.closedAutolinkedIssueIconColor#9b87ea
gitlens.closedPullRequestIconColor#ef6363
gitlens.decorations.addedForegroundColor#45aa41
gitlens.decorations.branchAheadForegroundColor#45aa41
gitlens.decorations.branchBehindForegroundColor#d28342
gitlens.decorations.branchDivergedForegroundColor#bfaf40
gitlens.decorations.branchMissingUpstreamForegroundColor#d28342
gitlens.decorations.branchUnpublishedForegroundColor#4b9ecd
gitlens.decorations.branchUpToDateForegroundColor#ffffff8a
gitlens.decorations.copiedForegroundColor#bfaf40
gitlens.decorations.deletedForegroundColor#d19797
gitlens.decorations.ignoredForegroundColor#ffffff5c
gitlens.decorations.modifiedForegroundColor#4b9ecd
gitlens.decorations.renamedForegroundColor#bfaf40
gitlens.decorations.untrackedForegroundColor#80b27f
gitlens.decorations.workspaceCurrentForegroundColor#45aa41
gitlens.decorations.workspaceRepoMissingForegroundColor#ffffff5c
gitlens.decorations.workspaceRepoOpenForegroundColor#45aa41
gitlens.decorations.worktreeHasUncommittedChangesForegroundColor#87abc0
gitlens.decorations.worktreeMissingForegroundColor#ef6363
gitlens.graphChangesColumnAddedColor#45aa41
gitlens.graphChangesColumnDeletedColor#ef6363
gitlens.graphLane10Color#d28342
gitlens.graphLane1Color#ef6363
gitlens.graphLane2Color#d28342
gitlens.graphLane3Color#bfaf40
gitlens.graphLane4Color#45aa41
gitlens.graphLane5Color#46a598
gitlens.graphLane6Color#4b9ecd
gitlens.graphLane7Color#9b87ea
gitlens.graphLane8Color#ed63ba
gitlens.graphLane9Color#ef6363
gitlens.graphMinimapMarkerHeadColor#45aa41
gitlens.graphMinimapMarkerHighlightsColor#46a598
gitlens.graphMinimapMarkerLocalBranchesColor#9b87ea
gitlens.graphMinimapMarkerRemoteBranchesColor#83aea8
gitlens.graphMinimapMarkerStashesColor#ed63ba
gitlens.graphMinimapMarkerTagsColor#bfaf40
gitlens.graphMinimapMarkerUpstreamColor#80b27f
gitlens.graphScrollMarkerHeadColor#45aa41c7
gitlens.graphScrollMarkerHighlightsColor#46a598c7
gitlens.graphScrollMarkerLocalBranchesColor#9b87eac7
gitlens.graphScrollMarkerRemoteBranchesColor#83aea8c7
gitlens.graphScrollMarkerStashesColor#ed63bac7
gitlens.graphScrollMarkerTagsColor#bfaf40c7
gitlens.graphScrollMarkerUpstreamColor#80b27fc7
gitlens.gutterBackgroundColor#212716
gitlens.gutterForegroundColor#ffffff8a
gitlens.gutterUncommittedForegroundColor#87abc0
gitlens.lineHighlightBackgroundColor#ffffff0f
gitlens.lineHighlightOverviewRulerColor#ffffff0f
gitlens.mergedPullRequestIconColor#9b87ea
gitlens.openAutolinkedIssueIconColor#45aa41
gitlens.openPullRequestIconColor#45aa41
gitlens.trailingLineBackgroundColor#00000000
gitlens.trailingLineForegroundColor#ffffff33
gitlens.unpublishedChangesIconColor#80b27f
gitlens.unpublishedCommitIconColor#45aa41
gitlens.unpulledChangesIconColor#d28342
icon.foreground#ffffffc7
inlineChat.background#2b3120
inlineChat.border#00000033
inlineChat.regionHighlight#ffffff0f
inlineChat.shadow#00000042
inlineChatDiff.inserted#45aa4133
inlineChatDiff.removed#ef636333
inlineChatInput.background#383d2d
inlineChatInput.border#ffffff14
inlineChatInput.focusBorder#75757566
inlineChatInput.placeholderForeground#ffffff5c
input.background#ffffff0f
input.border#ffffff14
input.foreground#ffffffc7
input.placeholderForeground#ffffff8a
inputOption.activeBackground#9aad7a
inputOption.activeBorder#ffffff14
inputOption.activeForeground#000000
inputOption.hoverBackground#ffffff0f
inputValidation.errorBackground#3a2727
inputValidation.errorBorder#ef63635c
inputValidation.errorForeground#d19797
inputValidation.infoBackground#252d31
inputValidation.infoBorder#4b9ecd5c
inputValidation.infoForeground#87abc0
inputValidation.warningBackground#322b24
inputValidation.warningBorder#d283425c
inputValidation.warningForeground#c59e7f
interactive.activeCodeBorder#ff0000
interactive.inactiveCodeBorder#ff0000
keybindingLabel.background#ffffff0f
keybindingLabel.border#ffffff14
keybindingLabel.bottomBorder#ffffff14
keybindingLabel.foreground#ffffffc7
keybindingTable.headerBackground#2b3120
keybindingTable.rowsBackground#2b3120
list.activeSelectionBackground#ffffff0f
list.activeSelectionForeground#ffffffc7
list.activeSelectionIconForeground#ffffffc7
list.deemphasizedForeground#ffffff5c
list.dropBackground#0000004d
list.errorForeground#ef6363
list.filterMatchBackground#46a5985c
list.filterMatchBorder#ffffff14
list.focusAndSelectionOutline#75757566
list.focusBackground#ffffff0f
list.focusForeground#ffffffc7
list.focusHighlightForeground#879d61
list.focusOutline#ffffff14
list.highlightForeground#879d61
list.hoverBackground#ffffff08
list.hoverForeground#ffffffc7
list.inactiveFocusBackground#00000000
list.inactiveFocusOutline#0000001a
list.inactiveSelectionBackground#ffffff0f
list.inactiveSelectionForeground#ffffffc7
list.inactiveSelectionIconForeground#ffffffc7
list.invalidItemForeground#ef6363
list.warningForeground#d28342
listFilterWidget.background#2b3120
listFilterWidget.noMatchesOutline#ef6363
listFilterWidget.outline#00000033
listFilterWidget.shadow#00000042
menu.background#2b3120
menu.border#00000033
menu.foreground#ffffffc7
menu.selectionBackground#ffffff0f
menu.selectionBorder#ffffff14
menu.selectionForeground#ffffffc7
menu.separatorBackground#ffffff14
menubar.selectionBackground#ffffff0f
menubar.selectionBorder#ffffff14
menubar.selectionForeground#ffffffc7
merge.border#ffffff14
merge.commonContentBackground#ffffff14
merge.commonHeaderBackground#ffffff33
merge.currentContentBackground#46a59833
merge.currentHeaderBackground#46a5988a
merge.incomingContentBackground#4b9ecd33
merge.incomingHeaderBackground#4b9ecd8a
mergeEditor.change.background#ffffff0f
mergeEditor.change.word.background#ffffff14
mergeEditor.changeBase.background#ffffff0f
mergeEditor.changeBase.word.background#ffffff14
mergeEditor.conflict.handled.minimapOverViewRuler#45aa418a
mergeEditor.conflict.handledFocused.border#45aa41
mergeEditor.conflict.handledUnfocused.border#45aa418a
mergeEditor.conflict.input1.background#4b9ecd8a
mergeEditor.conflict.input2.background#46a5988a
mergeEditor.conflict.unhandled.minimapOverViewRuler#ef63638a
mergeEditor.conflict.unhandledFocused.border#ef6363
mergeEditor.conflict.unhandledUnfocused.border#ef63638a
mergeEditor.conflictingLines.background#d2834233
minimap.background#212716
minimap.errorHighlight#ef63635c
minimap.findMatchHighlight#46a5985c
minimap.foregroundOpacity#ffffff
minimap.selectionHighlight#ffffff5c
minimap.selectionOccurrenceHighlight#ffffff33
minimap.warningHighlight#d283425c
minimapGutter.addedBackground#45aa41
minimapGutter.deletedBackground#ef6363
minimapGutter.modifiedBackground#4b9ecd
minimapSlider.activeBackground#ffffff08
minimapSlider.background#ffffff0f
minimapSlider.hoverBackground#ffffff14
notebook.cellBorderColor#ffffff14
notebook.cellEditorBackground#1b2112
notebook.cellHoverBackground#ffffff08
notebook.cellInsertionIndicator#9aad7a
notebook.cellStatusBarItemHoverBackground#ffffff0f
notebook.cellToolbarSeparator#00000033
notebook.editorBackground#232919
notebook.focusedCellBackground#ffffff08
notebook.focusedCellBorder#9aad7a
notebook.focusedEditorBorder#75757566
notebook.inactiveFocusedCellBorder#ffffff14
notebook.inactiveSelectedCellBorder#75757566
notebook.outputContainerBackgroundColor#212716
notebook.outputContainerBorderColor#ffffff14
notebook.selectedCellBackground#ffffff08
notebook.selectedCellBorder#9aad7a
notebook.symbolHighlightBackground#ff0000
notebookEditorOverviewRuler.runningCellForeground#bfaf40
notebookScrollbarSlider.activeBackground#ffffff08
notebookScrollbarSlider.background#ffffff0f
notebookScrollbarSlider.hoverBackground#ffffff14
notebookStatusErrorIcon.foreground#ef6363
notebookStatusRunningIcon.foreground#bfaf40
notebookStatusSuccessIcon.foreground#45aa41
notificationCenter.border#00000033
notificationCenterHeader.background#2b3120
notificationCenterHeader.foreground#ffffffc7
notificationLink.foreground#879d61
notifications.background#2b3120
notifications.border#ffffff14
notifications.foreground#ffffffc7
notificationsErrorIcon.foreground#ef6363
notificationsInfoIcon.foreground#4b9ecd
notificationsWarningIcon.foreground#d28342
notificationToast.border#00000033
panel.background#212716
panel.border#ffffff14
panel.dropBorder#9aad7a
panelInput.border#ffffff14
panelSection.border#75757566
panelSection.dropBackground#0000004d
panelSectionHeader.background#ffffff08
panelSectionHeader.border#75757566
panelSectionHeader.foreground#ffffff8a
panelTitle.activeBorder#9aad7a
panelTitle.activeForeground#ffffffc7
panelTitle.inactiveForeground#ffffff8a
peekView.border#46a598
peekViewEditor.background#212716
peekViewEditor.matchHighlightBackground#46a5985c
peekViewEditor.matchHighlightBorder#ffffff14
peekViewEditorGutter.background#232919
peekViewEditorStickyScroll.background#2b3120
peekViewResult.background#232919
peekViewResult.fileForeground#ffffff8a
peekViewResult.lineForeground#ffffff8a
peekViewResult.matchHighlightBackground#46a5985c
peekViewResult.selectionBackground#ffffff14
peekViewResult.selectionForeground#ffffffc7
peekViewTitle.background#27302f
peekViewTitleDescription.foreground#ffffff8a
peekViewTitleLabel.foreground#83aea8
pickerGroup.border#ffffff14
pickerGroup.foreground#879d61
ports.iconRunningProcessForeground#45aa41
problemsErrorIcon.foreground#ef6363
problemsInfoIcon.foreground#4b9ecd
problemsWarningIcon.foreground#d28342
profileBadge.background#3a3f31
profileBadge.foreground#ffffff8a
progressBar.background#9aad7a
quickInput.background#2b3120
quickInput.foreground#ffffff8a
quickInputList.focusBackground#ffffff0f
quickInputList.focusForeground#ffffffc7
quickInputList.focusIconForeground#ffffffc7
quickInputTitle.background#1b2112
sash.hoverBorder#75757566
scrollbar.shadow#00000042
scrollbarSlider.activeBackground#ffffff08
scrollbarSlider.background#ffffff0f
scrollbarSlider.hoverBackground#ffffff14
search.resultsInfoForeground#ffffff5c
searchEditor.findMatchBackground#46a5985c
searchEditor.findMatchBorder#ffffff14
searchEditor.textInputBorder#ffffff14
selection.background#ffffff14
settings.checkboxBackground#ffffff0f
settings.checkboxBorder#ffffff14
settings.checkboxForeground#ffffffc7
settings.dropdownBackground#ffffff0f
settings.dropdownBorder#ffffff14
settings.dropdownForeground#ffffffc7
settings.dropdownListBorder#00000033
settings.focusedRowBackground#ffffff08
settings.focusedRowBorder#ffffff14
settings.headerBorder#ffffff14
settings.headerForeground#ffffffc7
settings.modifiedItemIndicator#4b9ecd
settings.numberInputBackground#ffffff0f
settings.numberInputBorder#ffffff14
settings.numberInputForeground#ffffffc7
settings.rowHoverBackground#ffffff08
settings.sashBorder#75757566
settings.settingsHeaderHoverForeground#ffffff
settings.textInputBackground#ffffff0f
settings.textInputBorder#ffffff14
settings.textInputForeground#ffffffc7
sideBar.background#212716
sideBar.border#ffffff14
sideBar.dropBackground#0000004d
sideBar.foreground#ffffff8a
sideBarSectionHeader.background#ffffff08
sideBarSectionHeader.border#75757566
sideBarSectionHeader.foreground#ffffff8a
sideBarTitle.foreground#ffffffc7
sideBySideEditor.horizontalBorder#ffffff14
sideBySideEditor.verticalBorder#ffffff14
statusBar.background#1b2112
statusBar.border#ffffff14
statusBar.debuggingBackground#343327
statusBar.debuggingBorder#ffffff14
statusBar.debuggingForeground#ada77f
statusBar.focusBorder#75757566
statusBar.foreground#ffffffc7
statusBar.noFolderBackground#3a2727
statusBar.noFolderBorder#ffffff14
statusBar.noFolderForeground#d19797
statusBarItem.activeBackground#ffffff08
statusBarItem.compactHoverBackground#ffffff29
statusBarItem.errorBackground#3a2727
statusBarItem.errorForeground#d19797
statusBarItem.focusBorder#75757566
statusBarItem.hoverBackground#ffffff0f
statusBarItem.prominentBackground#3a3f31
statusBarItem.prominentForeground#ffffffc7
statusBarItem.prominentHoverBackground#ffffff14
statusBarItem.remoteBackground#27302f
statusBarItem.remoteForeground#83aea8
statusBarItem.warningBackground#322b24
statusBarItem.warningForeground#c59e7f
symbolIcon.arrayForeground#4b9ecd
symbolIcon.booleanForeground#4b9ecd
symbolIcon.classForeground#bfaf40
symbolIcon.colorForeground#ffffff8a
symbolIcon.constantForeground#83aea8
symbolIcon.constructorForeground#d28342
symbolIcon.enumeratorForeground#46a598
symbolIcon.enumeratorMemberForeground#83aea8
symbolIcon.eventForeground#d19797
symbolIcon.fieldForeground#ada77f
symbolIcon.fileForeground#ffffff8a
symbolIcon.folderForeground#ffffff8a
symbolIcon.functionForeground#d28342
symbolIcon.interfaceForeground#46a598
symbolIcon.keyForeground#a9a0cb
symbolIcon.keywordForeground#ed63ba
symbolIcon.methodForeground#d28342
symbolIcon.moduleForeground#ffffff8a
symbolIcon.namespaceForeground#ffffff8a
symbolIcon.nullForeground#4b9ecd
symbolIcon.numberForeground#80b27f
symbolIcon.objectForeground#46a598
symbolIcon.operatorForeground#ffffff8a
symbolIcon.packageForeground#ffffff8a
symbolIcon.propertyForeground#ada77f
symbolIcon.referenceForeground#9b87ea
symbolIcon.snippetForeground#87abc0
symbolIcon.stringForeground#cb8569
symbolIcon.structForeground#bfaf40
symbolIcon.textForeground#ffffff8a
symbolIcon.typeParameterForeground#83aea8
symbolIcon.unitForeground#80b27f
symbolIcon.variableForeground#c59e7f
tab.activeBackground#2b3120
tab.activeBorder#00000000
tab.activeBorderTop#00000000
tab.activeForeground#ffffffc7
tab.activeModifiedBorder#4b9ecd
tab.border#ffffff14
tab.hoverBackground#2b3120
tab.hoverBorder#00000000
tab.hoverForeground#ffffffc7
tab.inactiveBackground#212716
tab.inactiveForeground#ffffff8a
tab.inactiveModifiedBorder#4b9ecd8a
tab.lastPinnedBorder#75757566
tab.unfocusedActiveBackground#232919
tab.unfocusedActiveBorder#00000000
tab.unfocusedActiveBorderTop#00000000
tab.unfocusedActiveForeground#ffffff8a
tab.unfocusedActiveModifiedBorder#4b9ecd8a
tab.unfocusedHoverBackground#232919
tab.unfocusedHoverBorder#00000000
tab.unfocusedHoverForeground#ffffff8a
tab.unfocusedInactiveBackground#1b2112
tab.unfocusedInactiveForeground#ffffff5c
tab.unfocusedInactiveModifiedBorder#4b9ecd5c
terminal.ansiBlack#4f5447
terminal.ansiBlue#4b9ecd
terminal.ansiBrightBlack#72766c
terminal.ansiBrightBlue#87abc0
terminal.ansiBrightCyan#83aea8
terminal.ansiBrightGreen#80b27f
terminal.ansiBrightMagenta#cd95b8
terminal.ansiBrightRed#d19797
terminal.ansiBrightWhite#cfd0cc
terminal.ansiBrightYellow#ada77f
terminal.ansiCyan#46a598
terminal.ansiGreen#45aa41
terminal.ansiMagenta#ed63ba
terminal.ansiRed#ef6363
terminal.ansiWhite#9a9d95
terminal.ansiYellow#bfaf40
terminal.background#232919
terminal.border#ffffff14
terminal.dropBackground#0000004d
terminal.findMatchBackground#46a5985c
terminal.findMatchBorder#ffffff14
terminal.findMatchHighlightBackground#46a59833
terminal.findMatchHighlightBorder#ffffff14
terminal.foreground#cfd0cc
terminal.hoverHighlightBackground#ffffff0f
terminal.inactiveSelectionBackground#ffffff0f
terminal.selectionBackground#ffffff14
terminal.selectionForeground#ffffffc7
terminal.tab.activeBorder#9aad7a
terminalCommandDecoration.defaultBackground#4b9ecd
terminalCommandDecoration.errorBackground#ef6363
terminalCommandDecoration.successBackground#45aa41
terminalCursor.background#000000
terminalCursor.foreground#9aad7a
terminalOverviewRuler.cursorForeground#9aad7a
terminalOverviewRuler.findMatchForeground#46a598c7
testing.iconErrored#ef6363
testing.iconFailed#ef6363
testing.iconPassed#45aa41
testing.iconQueued#bfaf40
testing.iconSkipped#ffffff8a
testing.iconUnset#ffffff8a
testing.message.error.decorationForeground#ef6363
testing.message.error.lineBackground#ef63635c
testing.message.info.decorationForeground#4b9ecd
testing.message.info.lineBackground#4b9ecd5c
testing.peekBorder#d19797
testing.peekHeaderBackground#3a2727
testing.runAction#45aa41
textBlockQuote.background#ffffff08
textBlockQuote.border#9aad7a
textCodeBlock.background#ffffff08
textLink.activeForeground#879d61e6
textLink.foreground#879d61
textPreformat.foreground#ed63ba
textSeparator.foreground#ffffff14
titleBar.activeBackground#1b2112
titleBar.activeForeground#ffffffc7
titleBar.border#ffffff14
titleBar.inactiveBackground#1b2112
titleBar.inactiveForeground#ffffff8a
toolbar.activeBackground#ffffff08
toolbar.hoverBackground#ffffff0f
toolbar.hoverOutline#ffffff14
tree.inactiveIndentGuidesStroke#ffffff33
tree.indentGuidesStroke#ffffff5c
tree.tableColumnsBorder#ffffff14
tree.tableOddRowsBackground#2b3120
walkThrough.embeddedEditorBackground#1b2112
walkthrough.stepTitle.foreground#ffffffc7
welcomePage.background#232919
welcomePage.progress.background#ffffff0f
welcomePage.progress.foreground#9aad7a
welcomePage.tileBackground#ffffff0f
welcomePage.tileBorder#ffffff14
welcomePage.tileHoverBackground#ffffff14
widget.border#00000033
widget.shadow#00000042

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	#FFFFFF8A
entity.name.type.class, entity.other.inherited-class, meta.definition.class.inherited.classes, entity.other.attribute-name.class	#BFAF40
entity.name.type.enum	#46A598
entity.name.type.interface, meta.definition.class.implemented.interfaces	#46A598
entity.name.type.struct, storage.type.struct	#46A598
storage.type.generic	#83AEA8
entity.name.type, entity.name.tag, keyword.operator.less, support.type	#46A598
storage.type	#4B9ECD
variable.parameter	#C59E7F
variable, meta.method variable, meta.function variable, meta.block variable, entity.name.variable, variable.other.readwrite	#C59E7F	underline
variable.other.constant, meta.method variable.other.constant, meta.function variable.other.constant, meta.block variable.other.constant, entity.name.variable.constant	#C59E7F
variable.other.property, meta.class variable, meta.interface variable, entity.name.variable.property, entity.name.variable.field, meta.attribute.python	#ADA77F	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	#ADA77F
variable.other.enummember, constant.other.enum, entity.name.variable.enum-member	#83AEA8
meta.decorator, meta.function.decorator, entity.name.function.decorator	#EF6363
entity.name.type.annotation, meta.declaration.annotation, storage.type.annotation, entity.other.attribute, meta.attribute, support.attribute	#EF6363
keyword.other.event, variable.other.event	#D19797
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal, entity.other.attribute-name.parent-selector	#D28342
entity.name.method, entity.name.function.member	#D28342
meta.preprocessor.macro, keyword.preprocessor, keyword.control.directive, entity.name.function.macro, entity.name.function.preprocessor, meta.preprocessor punctuation	#CD95B8
entity.name.label	#CD95B8
comment	#45AA41	italic
string, string.tag, string.value, meta.preprocessor.string, meta.embedded.assembly	#CB8569
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded, meta.template.expression	#87ABC0
constant.character, constant.other.unicode-range	#87ABC0
constant.character.escape	#EF6363
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	#ED63BA
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	#4B9ECD
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	#80B27F
string.regexp, constant.regexp	#9B87EA
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	#A9A0CB
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp	#CD95B8
keyword.operator.or.regexp, keyword.control.anchor.regexp	#87ABC0
keyword.operator.quantifier.regexp	#80B27F
keyword.operator, punctuation.separator.key-value	#FFFFFF8A
variable.language, variable.parameter.function.language.special, keyword.other.this, variable.language.this, variable.language.super, variable.language.special.self	#BFAF40
storage.type.primitive, storage.type.built-in, storage.type.builtin, support.type.primitive, support.type.built-in, support.type.builtin, keyword.type	#4B9ECD
keyword.operator.new, keyword.control.new	#4B9ECD
variable.other.constant, constant.other.caps, constant.other.php	#83AEA8
variable.other.color, constant.other.color, support.constant.color, constant.other.rgb-value, constant.other.color.rgb-value	#CB8569
invalid	#EF6363
entity.other.attribute-name.id	#9B87EA
support.type.property-name, entity.other.attribute-name, meta.property-value	#87ABC0
support.type.vendored.property-name	#87ABC0	underline
entity.other.attribute-name.pseudo-class	#ADA77F
entity.other.attribute-name.pseudo-element	#A9A0CB
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	#CD95B8
heading.1, markup.heading.setext.1	#EF6363
heading.2, markup.heading.setext.2	#D28342
heading.3, markup.heading.setext.3	#BFAF40
heading.4, markup.heading.setext.4	#45AA41
heading.5, markup.heading.setext.5	#46A598
heading.6, markup.heading.setext.6	#4B9ECD
emphasis, markup.italic	—	italic
strong, markup.bold	—	bold
deleted, markup.strikethrough	—	strikethrough
markup.underline	—	underline
markup.underline.link	#87ABC0	underline
string.other.link, punctuation.definition.list.begin.markdown	#879D61
markup.fenced_code.block, markup.inline.raw, markup.raw.block	#ED63BA
punctuation.definition.quote.begin	#9B87EA
punctuation.definition.tag	#FFFFFF8A
meta.separator	#CB8569
markup.inserted	#45AA41	—
markup.deleted	#EF6363	—
markup.changed	#4B9ECD	—
support.function.magic.python	#9B87EA	—
ref.matchtext	#FFFFFF	—
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#F44747	—
token.debug-token	#B267E6	—

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