M Tech Themes

Name: M Tech Themes
Author: M Tech

Publisher: M TechThemes in package: 23

✨ Professional dark & light theme + icon pack, from the author of the original M Tech color scheme.

GitHub

Color themes

VS Code preview

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

M Tech Themes — Neon Pink Light

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#00000000
activityBar.activeBorder#ff0080
activityBar.activeFocusBorder#ff0080
activityBar.background#fdf2f8
activityBar.border#fdf2f8
activityBar.foreground#4a1a4a
activityBar.inactiveForeground#737880
activityBarBadge.background#ff0080
activityBarBadge.foreground#fdf2f8
activityBarTop.activeBorder#ff0080
activityBarTop.background#f3e8ff
activityBarTop.foreground#4a1a4a
activityBarTop.inactiveForeground#737880
activityErrorBadge.background#CC0044
activityErrorBadge.foreground#fdf2f8
activityWarningBadge.background#B34700
activityWarningBadge.foreground#fdf2f8
agentSessionReadIndicator.foreground#007048
agentSessionSelectedBadge.border#ff0080
agentSessionSelectedUnfocusedBadge.border#737880
agentStatusIndicator.background#ff008040
aiCustomizationManagement.sashBorder#ff00804D
badge.background#ff0080
badge.foreground#fdf2f8
banner.background#f5f0ff
banner.foreground#1f2937
banner.iconForeground#1f2937
breadcrumb.activeSelectionForeground#000000
breadcrumb.background#fffbfe
breadcrumb.focusForeground#ff0080
breadcrumb.foreground#4a1a4a
breadcrumbPicker.background#f3e8ff
button.background#ff0080
button.border#c084fc
button.foreground#fdf2f8
button.hoverBackground#CC0066
button.secondaryBackground#f5f0ff
button.secondaryForeground#1f2937
button.secondaryHoverBackground#c084fc
button.secondaryHoverForeground#1f2937
button.separator#f3e8ff
charts.blue#ff0080
charts.foreground#000000
charts.green#008856
charts.lines#f5f0ff
charts.orange#B34700
charts.purple#9900CC
charts.red#CC0044
charts.yellow#9900CC
chat.avatarBackground#f3e8ff
chat.avatarForeground#4a1a4a
chat.checkpointSeparator#ff00804D
chat.editedFileForeground#B34700
chat.inputWorkingBorderColor1#ff0080
chat.inputWorkingBorderColor2#CC0066
chat.linesAddedForeground#007048
chat.linesRemovedForeground#CC0044
chat.requestBackground#ff00801A
chat.requestBorder#ff00804D
chat.requestBubbleBackground#ff00801A
chat.requestBubbleForeground#4a1a4a
chat.requestBubbleHoverBackground#ff008026
chat.requestCodeBorder#ff00804D
chat.slashCommandBackground#00000000
chat.slashCommandForeground#9900CC
chat.thinkingShimmer#ff008066
chatBarTitle.background#f3e8ff
chatBarTitle.foreground#1f2937
chatManagement.sashBorder#ff00804D
checkbox.background#f5f0ff
checkbox.border#c084fc
checkbox.disabled.background#f3e8ff
checkbox.disabled.foreground#AAAAAA
checkbox.foreground#ff0080
checkbox.selectBackground#f5f0ff
checkbox.selectBorder#c084fc
commandCenter.activeBackground#f3e8ff
commandCenter.activeBorder#ff0080
commandCenter.activeForeground#737880
commandCenter.background#fdf2f8
commandCenter.border#f3e8ff
commandCenter.debuggingBackground#fdf2f8
commandCenter.debuggingForeground#B34700
commandCenter.foreground#737880
commandCenter.inactiveBorder#f3e8ff
commandCenter.inactiveForeground#737880
debugConsole.errorForeground#CC0044
debugConsole.infoForeground#ff0080
debugConsole.sourceForeground#000000
debugConsole.warningForeground#B34700
debugConsoleInputIcon.foreground#9900CC
debugExceptionWidget.background#f5f0ff
debugExceptionWidget.border#fdf2f8
debugIcon.breakpointCurrentStackframeForeground#9900CC
debugIcon.breakpointDisabledForeground#c084fc
debugIcon.breakpointForeground#CC0044
debugIcon.breakpointStackframeForeground#000000
debugIcon.breakpointUnverifiedForeground#B34700
debugIcon.continueForeground#000000
debugIcon.disconnectForeground#000000
debugIcon.pauseForeground#000000
debugIcon.restartForeground#008856
debugIcon.startForeground#008856
debugIcon.stepBackForeground#000000
debugIcon.stepIntoForeground#000000
debugIcon.stepOutForeground#000000
debugIcon.stepOverForeground#000000
debugIcon.stopForeground#CC0044
debugTokenExpression.boolean#B34700
debugTokenExpression.error#CC0044
debugTokenExpression.name#ff0080
debugTokenExpression.number#9900CC
debugTokenExpression.string#008856
debugTokenExpression.value#000000
debugToolBar.background#f5f0ff
debugView.exceptionLabelBackground#CC0044
debugView.exceptionLabelForeground#fdf2f8
debugView.stateLabelBackground#008856
debugView.stateLabelForeground#000000
debugView.valueChangedHighlight#9900CC
descriptionForeground#4a1a4a
diffEditor.diagonalFill#f5f0ff
diffEditor.insertedLineBackground#0088564D
diffEditor.insertedTextBackground#0088564D
diffEditor.move.border#9ca3af66
diffEditor.moveActive.border#4a1a4a
diffEditor.removedLineBackground#CC00444D
diffEditor.removedTextBackground#CC00444D
diffEditor.unchangedCodeBackground#fdf2f8
diffEditor.unchangedRegionBackground#fdf2f8
diffEditor.unchangedRegionForeground#4a1a4a
diffEditor.unchangedRegionShadow#fdf2f8
diffEditorGutter.insertedLineBackground#00885666
diffEditorGutter.removedLineBackground#CC004466
diffEditorOverview.insertedForeground#008856a5
diffEditorOverview.removedForeground#CC0044a5
disabledForeground#848B95
dropdown.background#f5f0ff
dropdown.border#c084fc
dropdown.foreground#1f2937
dropdown.listBackground#f5f0ff
editor.background#fffbfe
editor.compositionBorder#c084fc
editor.findMatchBackground#ff008066
editor.findMatchBorder#ff0080
editor.findMatchForeground#000000
editor.findMatchHighlightBackground#ff00803D
editor.findMatchHighlightBorder#00000000
editor.findMatchHighlightForeground#000000
editor.findRangeHighlightBackground#c084fc28
editor.findRangeHighlightBorder#00000000
editor.focusedStackFrameHighlightBackground#4a1a4a26
editor.foldBackground#0000000c
editor.foldPlaceholderForeground#737880
editor.foreground#000000
editor.hoverHighlightBackground#00000014
editor.inactiveLineHighlightBackground#ff00800D
editor.inactiveSelectionBackground#00000014
editor.inlineValuesBackground#c084fc
editor.inlineValuesForeground#4a1a4a
editor.lineHighlightBackground#ff008033
editor.lineHighlightBorder#00000000
editor.linkedEditingBackground#f5f0ff
editor.placeholder.foreground#808994
editor.rangeHighlightBackground#f5f0ff
editor.rangeHighlightBorder#f5f0ff
editor.selectionBackground#ff00804D
editor.selectionForeground#000000
editor.selectionHighlightBackground#00000026
editor.selectionHighlightBorder#00000000
editor.stackFrameHighlightBackground#4a1a4a26
editor.wordHighlightBackground#00885640
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#0088564d
editor.wordHighlightStrongBorder#00000000
editorActionList.background#f5f0ff
editorActionList.focusBackground#f3e8ff
editorActionList.focusForeground#000000
editorActionList.foreground#4a1a4a
editorBracketHighlight.foreground1#c0007d
editorBracketHighlight.foreground2#B34700
editorBracketHighlight.foreground3#737300
editorBracketHighlight.foreground4#008052
editorBracketHighlight.foreground5#0E7490
editorBracketHighlight.foreground6#9900cc
editorBracketMatch.background#ff00801A
editorBracketMatch.border#737880
editorBracketMatch.foreground#c0007d
editorCodeLens.foreground#737880
editorCommentsWidget.rangeActiveBackground#ff008040
editorCommentsWidget.rangeBackground#ff008026
editorCommentsWidget.resolvedBorder#008856
editorCommentsWidget.unresolvedBorder#B34700
editorCursor.background#fffbfe
editorCursor.foreground#000000
editorError.background#00000000
editorError.border#00000000
editorError.foreground#CC0044
editorGhostText.background#00000000
editorGhostText.border#00000000
editorGhostText.foreground#848B95
editorGroup.border#f3e8ff
editorGroup.dropBackground#f3e8ffbf
editorGroup.emptyBackground#fdf2f8
editorGroup.focusedEmptyBorder#f3e8ff
editorGroupHeader.noTabsBackground#fffbfe
editorGroupHeader.tabsBackground#fffbfe
editorGroupHeader.tabsBorder#ffffff
editorGutter.addedBackground#008856
editorGutter.addedSecondaryBackground#00704880
editorGutter.background#fffbfe
editorGutter.commentDraftGlyphForeground#9900CC
editorGutter.commentGlyphForeground#4a1a4a
editorGutter.commentUnresolvedGlyphForeground#B34700
editorGutter.deletedBackground#CC0044
editorGutter.deletedSecondaryBackground#CC004480
editorGutter.foldingControlForeground#4a1a4a
editorGutter.itemBackground#fffbfe
editorGutter.itemGlyphForeground#4a1a4a
editorGutter.modifiedBackground#B34700
editorGutter.modifiedSecondaryBackground#B3470080
editorHint.border#ffffff
editorHint.foreground#9900CC
editorHoverWidget.background#f5f0ff
editorHoverWidget.border#f3e8ff
editorHoverWidget.foreground#4a1a4a
editorIndentGuide.activeBackground#c084fc
editorIndentGuide.background#f5f0ff
editorInfo.background#00000000
editorInfo.border#ffffff
editorInfo.foreground#ff0080
editorInlayHint.background#f5f0ff
editorInlayHint.foreground#1f2937
editorLightBulb.foreground#9900CC
editorLightBulbAi.foreground#9900CC
editorLightBulbAutoFix.foreground#008856
editorLineNumber.activeForeground#4a1a4a
editorLineNumber.foreground#9b6ac3
editorLink.activeForeground#ff0080
editorMarkerNavigation.background#f5f0ff
editorMarkerNavigationError.background#CC0044
editorMarkerNavigationInfo.background#ff0080
editorMarkerNavigationWarning.background#B34700
editorMinimap.inlineChatInserted#00704866
editorMinimap.inlineChatRemoved#CC004466
editorMultiCursor.primary.background#fffbfe
editorMultiCursor.primary.foreground#000000
editorMultiCursor.secondary.background#fffbfe
editorMultiCursor.secondary.foreground#9900CC
editorOverviewRuler.addedForeground#008856
editorOverviewRuler.border#ffffff
editorOverviewRuler.commentDraftForeground#9900CC80
editorOverviewRuler.currentContentForeground#f5f0ff
editorOverviewRuler.deletedForeground#CC0044
editorOverviewRuler.errorForeground#CC0044
editorOverviewRuler.findMatchForeground#00000026
editorOverviewRuler.incomingContentForeground#f5f0ff
editorOverviewRuler.infoForeground#ff0080
editorOverviewRuler.inlineChatInserted#00704866
editorOverviewRuler.inlineChatRemoved#CC004466
editorOverviewRuler.modifiedForeground#B34700
editorOverviewRuler.rangeHighlightForeground#00000026
editorOverviewRuler.selectionHighlightForeground#00000026
editorOverviewRuler.warningForeground#B34700
editorOverviewRuler.wordHighlightForeground#00000026
editorOverviewRuler.wordHighlightStrongForeground#00000026
editorPane.background#fffbfe
editorRuler.foreground#c084fc
editorStickyScroll.background#fffbfe
editorStickyScroll.border#f5f0ff
editorStickyScroll.shadow#f3e8ff
editorStickyScrollGutter.background#fffbfe
editorStickyScrollHover.background#0000000c
editorSuggestWidget.background#f5f0ff
editorSuggestWidget.border#f3e8ff
editorSuggestWidget.foreground#4a1a4a
editorSuggestWidget.highlightForeground#000000
editorSuggestWidget.selectedBackground#e9d5ff
editorSuggestWidget.selectedForeground#000000
editorSuggestWidget.selectedIconForeground#ff0080
editorUnnecessaryCode.opacity#000000a5
editorWarning.background#00000000
editorWarning.border#00000000
editorWarning.foreground#B34700
editorWhitespace.foreground#c084fc
editorWidget.background#f5f0ff
editorWidget.border#f3e8ff
editorWidget.foreground#4a1a4a
errorForeground#CC0044
extensionBadge.remoteForeground#008856
extensionButton.background#f5f0ff
extensionButton.foreground#4a1a4a
extensionButton.hoverBackground#c084fc
extensionButton.prominentBackground#f5f0ff
extensionButton.prominentForeground#000000
extensionButton.prominentHoverBackground#c084fc
extensionIcon.preReleaseForeground#9900CC
extensionIcon.privateForeground#9900CC
extensionIcon.sponsorForeground#ff0080
extensionIcon.starForeground#9900CC
extensionIcon.verifiedForeground#008856
focusBorder#9ca3af
foreground#000000
gauge.background#f5f0ff
gauge.border#c084fc
gauge.errorBackground#CC0044
gauge.errorForeground#fdf2f8
gauge.foreground#c0007d
gauge.warningBackground#B3470033
gauge.warningForeground#4a1a4a
git.blame.editorDecorationForeground#9ca3afB3
gitDecoration.addedResourceForeground#008856
gitDecoration.conflictingResourceForeground#B34700
gitDecoration.deletedResourceForeground#CC0044
gitDecoration.ignoredResourceForeground#c084fc
gitDecoration.modifiedResourceForeground#9900CC
gitDecoration.renamedResourceForeground#0E7490
gitDecoration.stageDeletedResourceForeground#CC0044
gitDecoration.stageModifiedResourceForeground#9900CC
gitDecoration.untrackedResourceForeground#4a1a4a
icon.foreground#737880
inlineChat.background#fffbfe
inlineChat.border#f3e8ff
inlineChat.foreground#4a1a4a
inlineChat.regionHighlight#ff00801A
inlineChat.shadow#fdf2f8
inlineChatDiff.inserted#00885619
inlineChatDiff.removed#CC004419
inlineChatInput.background#f5f0ff
inlineChatInput.border#c084fc
inlineChatInput.focusBorder#ff0080
inlineChatInput.placeholderForeground#808994
inlineEdit.gutterIndicator.background#fffbfe
inlineEdit.gutterIndicator.primaryBackground#ff0080
inlineEdit.gutterIndicator.primaryBorder#ff0080
inlineEdit.gutterIndicator.primaryForeground#fdf2f8
inlineEdit.gutterIndicator.secondaryBackground#f5f0ff
inlineEdit.gutterIndicator.secondaryBorder#c084fc
inlineEdit.gutterIndicator.secondaryForeground#4a1a4a
inlineEdit.gutterIndicator.successfulBackground#00704833
inlineEdit.gutterIndicator.successfulBorder#007048
inlineEdit.gutterIndicator.successfulForeground#007048
inlineEdit.modifiedBackground#00704819
inlineEdit.modifiedBorder#00704866
inlineEdit.modifiedChangedLineBackground#00704826
inlineEdit.modifiedChangedTextBackground#00704840
inlineEdit.originalBackground#CC004419
inlineEdit.originalBorder#CC004466
inlineEdit.originalChangedLineBackground#CC004426
inlineEdit.originalChangedTextBackground#CC004440
inlineEdit.tabWillAcceptModifiedBorder#007048
inlineEdit.tabWillAcceptOriginalBorder#CC0044
input.background#f5f0ff
input.border#c084fc
input.foreground#000000
input.placeholderForeground#808994
inputOption.activeBackground#FF008033
inputOption.activeBorder#ff0080
inputOption.activeForeground#737880
inputOption.hoverBackground#FF008020
inputValidation.errorBackground#f5f0ff
inputValidation.errorBorder#CC0044
inputValidation.errorForeground#CC0044
inputValidation.infoBackground#f5f0ff
inputValidation.infoBorder#ff0080
inputValidation.infoForeground#ff0080
inputValidation.warningBackground#f5f0ff
inputValidation.warningBorder#B34700
inputValidation.warningForeground#B34700
interactive.activeCodeBorder#9ca3af
interactive.inactiveCodeBorder#f5f0ff
keybindingLabel.background#c084fc
keybindingLabel.border#c084fc
keybindingLabel.bottomBorder#c084fc
keybindingLabel.foreground#4a1a4a
list.activeSelectionBackground#f3e8ff
list.activeSelectionForeground#8E0045
list.activeSelectionIconForeground#ff0080
list.dropBackground#f3e8ffbf
list.errorForeground#CC0044
list.focusAndSelectionOutline#ff0080
list.focusBackground#fffbfe
list.focusForeground#000000
list.focusOutline#ff0080
list.highlightForeground#000000
list.hoverBackground#e9d5ff
list.hoverForeground#4a1a4a
list.inactiveFocusBackground#fffbfe
list.inactiveFocusOutline#c084fc
list.inactiveSelectionBackground#4a1a4a0c
list.inactiveSelectionForeground#ff0080
list.inactiveSelectionIconForeground#9ca3af
list.invalidItemForeground#CC0044
list.warningForeground#B34700
listFilterWidget.background#fffbfe
listFilterWidget.noMatchesOutline#CC0044
listFilterWidget.outline#ffffff
listFilterWidget.shadow#fdf2f8
markdownAlert.caution.foreground#CC0044
markdownAlert.important.foreground#9900CC
markdownAlert.note.foreground#c0007d
markdownAlert.tip.foreground#007A4D
markdownAlert.warning.foreground#B34700
mcpIcon.starForeground#9900CC
menu.background#fffbfe
menu.border#f3e8ff
menu.foreground#000000
menu.selectionBackground#ff0080
menu.selectionBorder#00000000
menu.selectionForeground#000000
menu.separatorBackground#f5f0ff
menubar.selectionBackground#4a1a4a
menubar.selectionBorder#00000000
menubar.selectionForeground#fdf2f8
merge.border#ffffff
merge.commonContentBackground#00000019
merge.commonHeaderBackground#00000026
merge.currentContentBackground#CC004419
merge.currentHeaderBackground#CC004426
merge.incomingContentBackground#00885619
merge.incomingHeaderBackground#00885626
mergeEditor.change.background#00000019
mergeEditor.change.word.background#00000019
mergeEditor.conflict.handled.minimapOverViewRuler#008856
mergeEditor.conflict.handledFocused.border#008856
mergeEditor.conflict.handledUnfocused.border#008856
mergeEditor.conflict.unhandled.minimapOverViewRuler#CC0044
mergeEditor.conflict.unhandledFocused.border#CC0044
mergeEditor.conflict.unhandledUnfocused.border#CC0044
minimap.chatEditHighlight#ff008066
minimap.errorHighlight#CC0044a5
minimap.findMatchHighlight#1f2937a5
minimap.infoHighlight#ff0080a5
minimap.selectionHighlight#4a1a4a26
minimap.selectionOccurrenceHighlight#9ca3afa5
minimap.warningHighlight#B34700a5
minimapGutter.addedBackground#008856
minimapGutter.deletedBackground#CC0044
minimapGutter.modifiedBackground#9900CC
multiDiffEditor.background#fffbfe
multiDiffEditor.border#fdf2f8
multiDiffEditor.headerBackground#f5f0ff
notebook.cellBorderColor#f5f0ff
notebook.cellEditorBackground#f3e8ff7f
notebook.cellInsertionIndicator#000000
notebook.cellStatusBarItemHoverBackground#9ca3af
notebook.cellToolbarSeparator#f5f0ff
notebook.editorBackground#fffbfe
notebook.focusedEditorBorder#9ca3af
notebookStatusErrorIcon.foreground#CC0044
notebookStatusRunningIcon.foreground#000000
notebookStatusSuccessIcon.foreground#008856
notificationCenter.border#f3e8ff
notificationCenterHeader.background#f5f0ff
notificationCenterHeader.foreground#1f2937
notificationLink.foreground#ff0080
notifications.background#f5f0ff
notifications.border#f3e8ff
notifications.foreground#4a1a4a
notificationsErrorIcon.foreground#CC0044
notificationsInfoIcon.foreground#ff0080
notificationsWarningIcon.foreground#B34700
notificationToast.border#f3e8ff
outputView.background#f5f0ff
outputViewStickyScroll.background#f5f0ff
panel.background#f5f0ff
panel.border#fdf2f8
panel.dropBackground#f3e8ffbf
panelStickyScroll.background#f5f0ff
panelStickyScroll.border#c084fc
panelStickyScroll.shadow#f5f0ff
panelTitle.activeBorder#ff0080
panelTitle.activeForeground#ff0080
panelTitle.border#c084fc
panelTitle.inactiveForeground#1f2937
panelTitleBadge.background#ff0080
panelTitleBadge.foreground#fdf2f8
peekView.border#f3e8ff
peekViewEditor.background#f5f0ff
peekViewEditor.matchHighlightBackground#c084fc
peekViewEditorGutter.background#f5f0ff
peekViewEditorStickyScroll.background#f5f0ff
peekViewEditorStickyScrollGutter.background#f5f0ff
peekViewResult.background#f5f0ff
peekViewResult.fileForeground#1f2937
peekViewResult.lineForeground#1f2937
peekViewResult.matchHighlightBackground#c084fc
peekViewResult.selectionBackground#f5f0ff
peekViewResult.selectionForeground#000000
peekViewTitle.background#f3e8ff
peekViewTitleDescription.foreground#1f2937
peekViewTitleLabel.foreground#000000
pickerGroup.border#ffffff
pickerGroup.foreground#9b6ac3
ports.iconRunningProcessForeground#008856
problemsErrorIcon.foreground#CC0044
problemsInfoIcon.foreground#ff0080
problemsWarningIcon.foreground#B34700
profileBadge.background#f5f0ff
profileBadge.foreground#4a1a4a
profiles.sashBorder#ff00804D
progressBar.background#ff0080
quickInput.background#f5f0ff
quickInput.border#c084fc
quickInput.foreground#1f2937
quickInputList.focusBackground#f3e8ff
quickInputList.focusForeground#000000
quickInputList.focusHighlightForeground#ff0080
quickInputList.focusIconForeground#ff0080
quickInputList.hoverBackground#e9d5ff
quickInputTitle.background#f3e8ff
radio.activeBackground#D6006B
radio.activeBorder#ff0080
radio.activeForeground#FFFFFF
radio.inactiveBackground#fdf2f8
radio.inactiveBorder#e9d5ff
radio.inactiveForeground#737880
radio.inactiveHoverBackground#f3e8ff
sash.hoverBorder#9ca3af
scmGraph.foreground1#CC0044
scmGraph.foreground2#B34700
scmGraph.foreground3#9900CC
scmGraph.foreground4#007A4D
scmGraph.foreground5#0E7490
scmGraph.historyItemBaseRefColor#ff0080
scmGraph.historyItemHoverAdditionsForeground#008856
scmGraph.historyItemHoverDefaultLabelBackground#e9d5ff
scmGraph.historyItemHoverDefaultLabelForeground#000000
scmGraph.historyItemHoverDeletionsForeground#CC0044
scmGraph.historyItemHoverLabelBackground#f3e8ff
scmGraph.historyItemHoverLabelForeground#000000
scmGraph.historyItemRefColor#9900CC
scmGraph.historyItemRemoteRefColor#008856
scrollbar.shadow#f3e8ff
scrollbarSlider.activeBackground#ff2288CC
scrollbarSlider.background#9ca3af55
scrollbarSlider.hoverBackground#ff008088
selection.background#4a1a4a26
sessionsSidebar.background#f3e8ff
sessionsSidebar.border#fdf2f8
sessionsSidebarHeader.background#f3e8ff
sessionsSidebarHeader.foreground#737880
settings.checkboxBackground#f5f0ff
settings.checkboxBorder#c084fc
settings.checkboxForeground#ff0080
settings.dropdownBackground#f5f0ff
settings.dropdownBorder#c084fc
settings.dropdownForeground#000000
settings.dropdownListBorder#1f2937
settings.headerForeground#ff0080
settings.modifiedItemForeground#ff0080
settings.modifiedItemIndicator#ff0080
settings.numberInputBackground#f5f0ff
settings.numberInputBorder#c084fc
settings.numberInputForeground#000000
settings.rowHoverBackground#9ca3af0c
settings.sashBorder#f5f0ff
settings.settingsHeaderHoverForeground#000000
settings.textInputBackground#f5f0ff
settings.textInputBorder#c084fc
settings.textInputForeground#000000
sideBar.background#f3e8ff
sideBar.border#fdf2f8
sideBar.dropBackground#f3e8ffbf
sideBar.foreground#1f2937
sideBarSectionHeader.background#f3e8ff
sideBarSectionHeader.border#fdf2f8
sideBarSectionHeader.foreground#737880
sideBarStickyScroll.background#f3e8ff
sideBarStickyScroll.border#f5f0ff
sideBarStickyScroll.shadow#f3e8ff
sideBarTitle.foreground#9b6ac3
simpleFindWidget.sashBorder#c084fc
statusBar.background#f3e8ff
statusBar.border#fdf2f8
statusBar.debuggingBackground#9ca3af
statusBar.debuggingBorder#f3e8ff
statusBar.debuggingForeground#000000
statusBar.focusBorder#f5f0ff
statusBar.foreground#737880
statusBar.noFolderBackground#f3e8ff
statusBar.noFolderBorder#fdf2f8
statusBar.noFolderForeground#737880
statusBarItem.activeBackground#fffbfe
statusBarItem.compactHoverBackground#f3e8ff
statusBarItem.errorBackground#fffbfe
statusBarItem.errorForeground#CC0044
statusBarItem.focusBorder#9ca3af
statusBarItem.hoverBackground#f3e8ff
statusBarItem.hoverForeground#000000
statusBarItem.offlineBackground#f3e8ff
statusBarItem.offlineForeground#B34700
statusBarItem.offlineHoverBackground#f3e8ff
statusBarItem.offlineHoverForeground#000000
statusBarItem.prominentBackground#f5f0ff
statusBarItem.prominentForeground#000000
statusBarItem.prominentHoverBackground#f5f0ff
statusBarItem.prominentHoverForeground#000000
statusBarItem.remoteBackground#f3e8ff
statusBarItem.remoteForeground#008856
statusBarItem.remoteHoverBackground#008856
statusBarItem.remoteHoverForeground#fdf2f8
statusBarItem.warningBackground#fffbfe
statusBarItem.warningForeground#B34700
symbolIcon.arrayForeground#CC0044
symbolIcon.booleanForeground#CC0044
symbolIcon.classForeground#ff0080
symbolIcon.colorForeground#9900CC
symbolIcon.constantForeground#9900CC
symbolIcon.constructorForeground#008856
symbolIcon.enumeratorForeground#B34700
symbolIcon.enumeratorMemberForeground#B34700
symbolIcon.eventForeground#B34700
symbolIcon.fieldForeground#B34700
symbolIcon.fileForeground#4a1a4a
symbolIcon.folderForeground#4a1a4a
symbolIcon.functionForeground#008856
symbolIcon.interfaceForeground#ff0080
symbolIcon.keyForeground#B34700
symbolIcon.keywordForeground#CC0044
symbolIcon.methodForeground#008856
symbolIcon.moduleForeground#ff0080
symbolIcon.namespaceForeground#ff0080
symbolIcon.nullForeground#9900CC
symbolIcon.numberForeground#9900CC
symbolIcon.objectForeground#ff0080
symbolIcon.operatorForeground#CC0044
symbolIcon.packageForeground#9900CC
symbolIcon.propertyForeground#B34700
symbolIcon.referenceForeground#9900CC
symbolIcon.snippetForeground#008856
symbolIcon.stringForeground#9900CC
symbolIcon.structForeground#CC0044
symbolIcon.textForeground#9900CC
symbolIcon.typeParameterForeground#B34700
symbolIcon.unitForeground#9900CC
symbolIcon.variableForeground#ff0080
tab.activeBackground#fffbfe
tab.activeBorder#ff0080
tab.activeBorderTop#ff0080
tab.activeForeground#ff0080
tab.activeModifiedBorder#c084fc
tab.border#ffffff
tab.dragAndDropBorder#ff0080
tab.hoverBackground#fffbfe
tab.hoverBorder#c084fc
tab.hoverForeground#000000
tab.inactiveBackground#fffbfe
tab.inactiveForeground#1f2937
tab.inactiveModifiedBorder#c084fc
tab.lastPinnedBorder#c084fc
tab.selectedBackground#fffbfe
tab.selectedBorderTop#ff0080
tab.selectedForeground#c0007d
tab.unfocusedActiveBorder#1f2937
tab.unfocusedActiveForeground#4a1a4a
tab.unfocusedActiveModifiedBorder#f5f0ff
tab.unfocusedHoverBackground#fffbfe
tab.unfocusedHoverBorder#ffffff
tab.unfocusedHoverForeground#4a1a4a
tab.unfocusedInactiveForeground#1f2937
tab.unfocusedInactiveModifiedBorder#f5f0ff
terminal.ansiBlack#1f2937
terminal.ansiBlue#B34700
terminal.ansiBrightBlack#656A72
terminal.ansiBrightBlue#B34700
terminal.ansiBrightCyan#D4006C
terminal.ansiBrightGreen#007048
terminal.ansiBrightMagenta#9900CC
terminal.ansiBrightRed#CC0044
terminal.ansiBrightWhite#000000
terminal.ansiBrightYellow#9900CC
terminal.ansiCyan#D4006C
terminal.ansiGreen#007048
terminal.ansiMagenta#9900CC
terminal.ansiRed#CC0044
terminal.ansiWhite#000000
terminal.ansiYellow#9900CC
terminal.background#f5f0ff
terminal.border#f3e8ff
terminal.foreground#000000
terminal.initialHintForeground#737880
terminal.selectionBackground#00000026
terminal.selectionForeground#000000
terminal.tab.activeBorder#ff0080
terminalCommandDecoration.defaultBackground#000000
terminalCommandDecoration.errorBackground#CC0044
terminalCommandDecoration.successBackground#008856
terminalCommandGuide.foreground#c084fc40
terminalCursor.background#00000000
terminalCursor.foreground#000000
terminalOverviewRuler.border#f3e8ff
terminalStickyScroll.background#f5f0ff
terminalStickyScroll.border#c084fc
terminalStickyScrollHover.background#f3e8ff
testing.coverCountBadgeBackground#ffe0f1
testing.coverCountBadgeForeground#c0007d
testing.coveredMinimapBackground#00885633
testing.iconErrored#CC0044
testing.iconFailed#CC0044
testing.iconPassed#008856
testing.iconQueued#000000
testing.iconSkipped#B34700
testing.iconUnset#1f2937
testing.message.error.badgeBackground#CC0044
testing.message.error.badgeBorder#CC0044
testing.message.error.badgeForeground#fdf2f8
testing.message.error.decorationForeground#CC0044
testing.message.error.lineBackground#CC004419
testing.message.info.decorationForeground#000000
testing.message.info.lineBackground#00000019
testing.runAction#ff0080
testing.uncoveredBranchBackground#CC004419
testing.uncoveredMinimapBackground#CC004433
textBlockQuote.background#f5f0ff
textBlockQuote.border#f5f0ff
textCodeBlock.background#f5f0ff
textLink.activeForeground#000000
textLink.foreground#ff0080
textPreformat.foreground#000000
textSeparator.foreground#9ca3af
titleBar.activeBackground#f3e8ff
titleBar.activeForeground#737880
titleBar.border#fdf2f8
titleBar.inactiveBackground#f3e8ff
titleBar.inactiveForeground#737880
toolbar.activeBackground#00000018
toolbar.hoverBackground#00000010
toolbar.hoverOutline#00000000
tree.inactiveIndentGuidesStroke#e9d5ff
tree.indentGuidesStroke#d8c4f0
walkThrough.embeddedEditorBackground#f3e8ff
welcomePage.buttonBackground#f5f0ff
welcomePage.buttonHoverBackground#c084fc
welcomePage.buttonHoverForeground#1f2937
welcomePage.progress.background#9ca3af
welcomePage.progress.foreground#1f2937
welcomePage.tileBackground#f5f0ff
welcomePage.tileHoverBackground#c084fc
welcomePage.tileHoverForeground#1f2937
welcomePage.tileShadow#fdf2f8
widget.border#f3e8ff
widget.shadow#fdf2f8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#5b6067	italic
constant, entity.name.constant, variable.other.constant, variable.language	#9900CC	—
entity, entity.name	#007A4D	—
variable.parameter.function	#000000	—
entity.name.tag	#CC0044	—
keyword	#c0007d	—
storage, storage.type	#c0007d	—
storage.modifier.package, storage.modifier.import, storage.type.java	#000000	—
string, punctuation.definition.string	#007A4D	—
support	#c0007d	—
meta.property-name	#c0007d	—
variable	#000000	—
variable.other	#000000	—
invalid.broken	#CC0044	italic
invalid.deprecated	#CC0044	italic
invalid.illegal	#CC0044	italic
invalid.unimplemented	#CC0044	italic
carriage-return	#fdf2f8	italic underline
message.error	#CC0044	—
string source	#000000	—
string variable	#c0007d	—
source.regexp, string.regexp	#007A4D	—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition	#007A4D	—
string.regexp constant.character.escape	#007A4D	bold
support.constant	#B34700	—
support.variable	#c0007d	—
meta.module-reference	#c0007d	—
punctuation.definition.list.begin.markdown	#B34700	—
markup.heading, markup.heading entity.name	#c0007d	bold
markup.quote	#007A4D	—
markup.italic	#000000	italic
markup.bold	#000000	bold
markup.raw	#c0007d	—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted	#CC0044	—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted	#007A4D	—
markup.changed, punctuation.definition.changed	#B34700	—
markup.ignored, markup.untracked	#c084fc	—
meta.diff.range	#9900CC	bold
meta.diff.header	#c0007d	—
meta.separator	#c0007d	bold
meta.output	#c0007d	—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote	#9ca3af	—
brackethighlighter.unmatched	#CC0044	—
constant.other.reference.link, string.other.link	#007A4D	underline

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