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 — Cyberpunk Neon

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...
~/my-project

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#00000000
activityBar.activeBorder#FF00FF
activityBar.activeFocusBorder#ff0080
activityBar.background#0d001a
activityBar.border#0d001a
activityBar.foreground#FF0080
activityBar.inactiveForeground#FF00FF
activityBarBadge.background#ff0080
activityBarBadge.foreground#0d001a
activityBarTop.activeBorder#FF00FF
activityBarTop.background#1a0033
activityBarTop.foreground#FF0080
activityBarTop.inactiveForeground#FF00FF
activityErrorBadge.background#ff3366
activityErrorBadge.foreground#0d001a
activityWarningBadge.background#ffff00
activityWarningBadge.foreground#0d001a
agentSessionReadIndicator.foreground#00ccff
agentSessionSelectedBadge.border#ff0080
agentSessionSelectedUnfocusedBadge.border#8866cc
agentStatusIndicator.background#FF008040
aiCustomizationManagement.sashBorder#4d1a4d
badge.background#ff0080
badge.foreground#0d001a
banner.background#4d1a4d
banner.foreground#e6e6fa
banner.iconForeground#e6e6fa
breadcrumb.activeSelectionForeground#ffffff
breadcrumb.background#1a0033
breadcrumb.focusForeground#ff0080
breadcrumb.foreground#e6e6fa
breadcrumbPicker.background#1a0033
button.background#ff0080
button.border#4d0033
button.foreground#ffffff
button.hoverBackground#ff4da6
button.secondaryBackground#4d1a4d
button.secondaryForeground#e6e6fa
button.secondaryHoverBackground#330066
button.secondaryHoverForeground#ffffff
button.separator#1a0033
charts.blue#ff0080
charts.foreground#ffffff
charts.green#00ff99
charts.lines#4d1a4d
charts.orange#ff6600
charts.purple#cc33ff
charts.red#ff3366
charts.yellow#ffff00
chat.avatarBackground#1a0033
chat.avatarForeground#cc33ff
chat.checkpointSeparator#9966FF
chat.editedFileForeground#ffff00
chat.inputWorkingBorderColor1#ff0080
chat.inputWorkingBorderColor2#990050
chat.linesAddedForeground#00ff99
chat.linesRemovedForeground#ff3366
chat.requestBackground#FF008026
chat.requestBorder#9966FF
chat.requestBubbleBackground#FF008026
chat.requestBubbleForeground#ffffff
chat.requestBubbleHoverBackground#00CCFF26
chat.requestCodeBorder#9966FF
chat.slashCommandBackground#00000000
chat.slashCommandForeground#ffff00
chat.thinkingShimmer#ff0080
chatBarTitle.background#0d001a
chatBarTitle.foreground#e6e6fa
chatManagement.sashBorder#4d1a4d
checkbox.background#4d1a4d
checkbox.border#9966FF
checkbox.disabled.background#0d001a
checkbox.disabled.foreground#666666
checkbox.foreground#ff0080
checkbox.selectBackground#4d1a4d
checkbox.selectBorder#9966FF
commandCenter.activeBackground#1a0033
commandCenter.activeBorder#ff0080
commandCenter.activeForeground#FF00FF
commandCenter.background#0d001a
commandCenter.border#1a0033
commandCenter.debuggingBackground#0d001a
commandCenter.debuggingForeground#ffff00
commandCenter.foreground#FF00FF
commandCenter.inactiveBorder#1a0033
commandCenter.inactiveForeground#FF00FF
debugConsole.errorForeground#ff3366
debugConsole.infoForeground#ff0080
debugConsole.sourceForeground#ffffff
debugConsole.warningForeground#ff6600
debugConsoleInputIcon.foreground#ffff00
debugExceptionWidget.background#4d1a4d
debugExceptionWidget.border#0d001a
debugIcon.breakpointCurrentStackframeForeground#ffff00
debugIcon.breakpointDisabledForeground#9966FF
debugIcon.breakpointForeground#ff3366
debugIcon.breakpointStackframeForeground#ffffff
debugIcon.breakpointUnverifiedForeground#ff6600
debugIcon.continueForeground#ffffff
debugIcon.disconnectForeground#ffffff
debugIcon.pauseForeground#ffffff
debugIcon.restartForeground#00ff99
debugIcon.startForeground#00ff99
debugIcon.stepBackForeground#ffffff
debugIcon.stepIntoForeground#ffffff
debugIcon.stepOutForeground#ffffff
debugIcon.stepOverForeground#ffffff
debugIcon.stopForeground#ff3366
debugTokenExpression.boolean#ff6600
debugTokenExpression.error#ff3366
debugTokenExpression.name#ff0080
debugTokenExpression.number#cc33ff
debugTokenExpression.string#00ff99
debugTokenExpression.value#ffffff
debugToolBar.background#4d1a4d
debugView.exceptionLabelBackground#ff3366
debugView.exceptionLabelForeground#0d001a
debugView.stateLabelBackground#00ff99
debugView.stateLabelForeground#0d001a
debugView.valueChangedHighlight#ffff00
descriptionForeground#e6e6fa
diffEditor.diagonalFill#4d1a4d
diffEditor.insertedLineBackground#00ff9948
diffEditor.insertedTextBackground#00ff9950
diffEditor.move.border#9966FF
diffEditor.moveActive.border#ff0080
diffEditor.removedLineBackground#ff336648
diffEditor.removedTextBackground#ff336650
diffEditor.unchangedCodeBackground#0d001a
diffEditor.unchangedRegionBackground#0d001a
diffEditor.unchangedRegionForeground#e6e6fa
diffEditor.unchangedRegionShadow#000000
diffEditorGutter.insertedLineBackground#00ff9980
diffEditorGutter.removedLineBackground#ff336680
diffEditorOverview.insertedForeground#00ff99a5
diffEditorOverview.removedForeground#ff3366a5
disabledForeground#bba8ff
dropdown.background#4d1a4d
dropdown.border#8866cc
dropdown.foreground#e6e6fa
dropdown.listBackground#4d1a4d
editor.background#1a0033
editor.compositionBorder#ff0080
editor.findMatchBackground#00ff9966
editor.findMatchBorder#ffff00
editor.findMatchForeground#ffffff
editor.findMatchHighlightBackground#00ff994D
editor.findMatchHighlightBorder#00000000
editor.findMatchHighlightForeground#ffffff
editor.findRangeHighlightBackground#00ff9935
editor.findRangeHighlightBorder#00000000
editor.focusedStackFrameHighlightBackground#9966FF80
editor.foldBackground#ff008015
editor.foldPlaceholderForeground#bba8ff
editor.foreground#ffffff
editor.hoverHighlightBackground#ff008019
editor.inactiveLineHighlightBackground#9966FF10
editor.inactiveSelectionBackground#9966FF33
editor.inlineValuesBackground#9966FF40
editor.inlineValuesForeground#e6e6fa
editor.lineHighlightBackground#ff008026
editor.lineHighlightBorder#00000000
editor.linkedEditingBackground#4d1a4d
editor.placeholder.foreground#bba8ff
editor.rangeHighlightBackground#4d1a4d
editor.rangeHighlightBorder#4d1a4d
editor.selectionBackground#9966FF66
editor.selectionForeground#ffffff
editor.selectionHighlightBackground#9966FF4D
editor.selectionHighlightBorder#00000000
editor.stackFrameHighlightBackground#9966FF80
editor.wordHighlightBackground#00ff9940
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#00ff994d
editor.wordHighlightStrongBorder#00000000
editorActionList.background#4d1a4d
editorActionList.focusBackground#9966FF
editorActionList.focusForeground#0d001a
editorActionList.foreground#e6e6fa
editorBracketHighlight.foreground1#ff3366
editorBracketHighlight.foreground2#ff6600
editorBracketHighlight.foreground3#ffff00
editorBracketHighlight.foreground4#00ff99
editorBracketHighlight.foreground5#ff0080
editorBracketHighlight.foreground6#cc33ff
editorBracketHighlight.unexpectedBracket.foreground#ff3366
editorBracketMatch.background#9966FF80
editorBracketMatch.border#ff0080
editorBracketMatch.foreground#00ccff
editorBracketPairGuide.activeBackground1#ff336680
editorBracketPairGuide.activeBackground2#ff660080
editorBracketPairGuide.activeBackground3#ffff0080
editorBracketPairGuide.activeBackground4#00ff9980
editorBracketPairGuide.activeBackground5#ff008080
editorBracketPairGuide.activeBackground6#cc33ff80
editorBracketPairGuide.background1#ff336633
editorBracketPairGuide.background2#ff660033
editorBracketPairGuide.background3#ffff0033
editorBracketPairGuide.background4#00ff9933
editorBracketPairGuide.background5#ff008033
editorBracketPairGuide.background6#cc33ff33
editorCodeLens.foreground#bba8ff
editorCommentsWidget.rangeActiveBackground#ff008059
editorCommentsWidget.rangeBackground#ff008019
editorCommentsWidget.resolvedBorder#00ff99
editorCommentsWidget.unresolvedBorder#ffff00
editorCursor.background#1a0033
editorCursor.foreground#ffffff
editorError.background#00000000
editorError.border#00000000
editorError.foreground#ff3366
editorGhostText.background#00000000
editorGhostText.border#00000000
editorGhostText.foreground#bba8ff
editorGroup.border#0d001a
editorGroup.dropBackground#0d001abf
editorGroup.emptyBackground#0d001a
editorGroup.focusedEmptyBorder#1a0033
editorGroupHeader.noTabsBackground#1a0033
editorGroupHeader.tabsBackground#1a0033
editorGroupHeader.tabsBorder#1a0033
editorGutter.addedBackground#00ff99
editorGutter.addedSecondaryBackground#00ff9980
editorGutter.background#1a0033
editorGutter.commentDraftGlyphForeground#00ccff
editorGutter.commentGlyphForeground#e6e6fa
editorGutter.commentUnresolvedGlyphForeground#ffff00
editorGutter.deletedBackground#ff3366
editorGutter.deletedSecondaryBackground#ff336680
editorGutter.foldingControlForeground#e6e6fa
editorGutter.itemBackground#1a003300
editorGutter.itemGlyphForeground#bba8ff
editorGutter.modifiedBackground#ffff00
editorGutter.modifiedSecondaryBackground#ffff0080
editorHint.border#1a0033
editorHint.foreground#00ccff
editorHoverWidget.background#4d1a4d
editorHoverWidget.border#9966FF
editorHoverWidget.foreground#e6e6fa
editorIndentGuide.activeBackground#00ccff
editorIndentGuide.background#9966FF
editorInfo.background#00000000
editorInfo.border#1a0033
editorInfo.foreground#ff0080
editorInlayHint.background#4d1a4d
editorInlayHint.foreground#9966FF
editorLightBulb.foreground#ffff00
editorLightBulbAi.foreground#ffff00
editorLightBulbAutoFix.foreground#00ff99
editorLineNumber.activeForeground#e6e6fa
editorLineNumber.foreground#9966FF
editorLink.activeForeground#ff0080
editorMarkerNavigation.background#4d1a4d
editorMarkerNavigationError.background#ff3366
editorMarkerNavigationInfo.background#ff0080
editorMarkerNavigationWarning.background#ffff00
editorMinimap.inlineChatInserted#00ff9966
editorMinimap.inlineChatRemoved#ff336666
editorMultiCursor.primary.background#1a0033
editorMultiCursor.primary.foreground#ffffff
editorMultiCursor.secondary.background#1a0033
editorMultiCursor.secondary.foreground#00ccff
editorOverviewRuler.addedForeground#00ff99
editorOverviewRuler.border#1a0033
editorOverviewRuler.bracketMatchForeground#ff008080
editorOverviewRuler.commentDraftForeground#00ccff80
editorOverviewRuler.currentContentForeground#4d1a4d
editorOverviewRuler.deletedForeground#ff3366
editorOverviewRuler.errorForeground#FF0040
editorOverviewRuler.findMatchForeground#9966FF80
editorOverviewRuler.incomingContentForeground#4d1a4d
editorOverviewRuler.infoForeground#ff0080
editorOverviewRuler.inlineChatInserted#00ff9980
editorOverviewRuler.inlineChatRemoved#ff336680
editorOverviewRuler.modifiedForeground#ffff00
editorOverviewRuler.rangeHighlightForeground#9966FF80
editorOverviewRuler.selectionHighlightForeground#9966FF80
editorOverviewRuler.warningForeground#FFFF33
editorOverviewRuler.wordHighlightForeground#9966FF80
editorOverviewRuler.wordHighlightStrongForeground#9966FF80
editorPane.background#1a0033
editorRuler.foreground#9966FF
editorStickyScroll.background#1a0033
editorStickyScroll.border#4d1a4d
editorStickyScroll.shadow#000000
editorStickyScrollGutter.background#1a0033
editorStickyScrollHover.background#ff008019
editorSuggestWidget.background#4d1a4d
editorSuggestWidget.border#9966FF
editorSuggestWidget.foreground#e6e6fa
editorSuggestWidget.highlightForeground#ffffff
editorSuggestWidget.selectedBackground#9966FF
editorSuggestWidget.selectedForeground#0d001a
editorSuggestWidget.selectedIconForeground#0d001a
editorUnnecessaryCode.opacity#000000a5
editorWarning.background#00000000
editorWarning.border#00000000
editorWarning.foreground#ffff00
editorWhitespace.foreground#bba8ff
editorWidget.background#4d1a4d
editorWidget.border#9966FF
editorWidget.foreground#e6e6fa
errorForeground#ff4d7a
extensionBadge.remoteForeground#00ff99
extensionButton.background#ff0080
extensionButton.foreground#ffffff
extensionButton.hoverBackground#ff4da6
extensionButton.prominentBackground#ff0080
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#ff4da6
extensionIcon.preReleaseForeground#cc33ff
extensionIcon.privateForeground#bba8ff
extensionIcon.sponsorForeground#ff0080
extensionIcon.starForeground#ffff00
extensionIcon.verifiedForeground#00ff99
focusBorder#8866cc
foreground#e2d6ff
gauge.background#4d1a4d
gauge.border#9966FF
gauge.errorBackground#ff3366
gauge.errorForeground#0d001a
gauge.foreground#00ff99
gauge.warningBackground#ffff0040
gauge.warningForeground#ffff00
git.blame.editorDecorationForeground#bba8ff
gitDecoration.addedResourceForeground#00ff99
gitDecoration.conflictingResourceForeground#ff6600
gitDecoration.deletedResourceForeground#ff3366
gitDecoration.ignoredResourceForeground#bba8ff
gitDecoration.modifiedResourceForeground#ffff00
gitDecoration.renamedResourceForeground#00ccff
gitDecoration.stageDeletedResourceForeground#ff3366
gitDecoration.stageModifiedResourceForeground#ffff00
gitDecoration.untrackedResourceForeground#00ccff
icon.foreground#FF00FF
inlineChat.background#1a0033
inlineChat.border#9966FF
inlineChat.foreground#e6e6fa
inlineChat.regionHighlight#9966FF26
inlineChat.shadow#000000
inlineChatDiff.inserted#00ff9966
inlineChatDiff.removed#ff336666
inlineChatInput.background#4d1a4d
inlineChatInput.border#8866cc
inlineChatInput.focusBorder#ff0080
inlineChatInput.placeholderForeground#bba8ff
inlineEdit.gutterIndicator.background#1a0033
inlineEdit.gutterIndicator.primaryBackground#ff0080
inlineEdit.gutterIndicator.primaryBorder#ff0080
inlineEdit.gutterIndicator.primaryForeground#ffffff
inlineEdit.gutterIndicator.secondaryBackground#4d1a4d
inlineEdit.gutterIndicator.secondaryBorder#9966FF
inlineEdit.gutterIndicator.secondaryForeground#e6e6fa
inlineEdit.gutterIndicator.successfulBackground#00ff99
inlineEdit.gutterIndicator.successfulBorder#00ff99
inlineEdit.gutterIndicator.successfulForeground#0d001a
inlineEdit.modifiedBackground#00ff9919
inlineEdit.modifiedBorder#00ff9980
inlineEdit.modifiedChangedLineBackground#00ff9933
inlineEdit.modifiedChangedTextBackground#00ff9959
inlineEdit.originalBackground#ff336619
inlineEdit.originalBorder#ff336680
inlineEdit.originalChangedLineBackground#ff336633
inlineEdit.originalChangedTextBackground#ff336659
inlineEdit.tabWillAcceptModifiedBorder#ff0080
inlineEdit.tabWillAcceptOriginalBorder#9966FF
input.background#4d1a4d
input.border#8866cc
input.foreground#ffffff
input.placeholderForeground#bba8ff
inputOption.activeBackground#FF00FF40
inputOption.activeBorder#FF00FF
inputOption.activeForeground#FF00FF
inputOption.hoverBackground#FF00FF20
inputValidation.errorBackground#4d1a4d
inputValidation.errorBorder#ff3366
inputValidation.errorForeground#ff3366
inputValidation.infoBackground#4d1a4d
inputValidation.infoBorder#ff0080
inputValidation.infoForeground#ff0080
inputValidation.warningBackground#4d1a4d
inputValidation.warningBorder#ffff00
inputValidation.warningForeground#ffff00
interactive.activeCodeBorder#ff0080
interactive.inactiveCodeBorder#4d1a4d
keybindingLabel.background#9966FF
keybindingLabel.border#9966FF
keybindingLabel.bottomBorder#9966FF
keybindingLabel.foreground#ffffff
keybindingTable.headerBackground#4d1a4d
keybindingTable.rowsBackground#0d001a
list.activeSelectionBackground#9966FF
list.activeSelectionForeground#0d001a
list.activeSelectionIconForeground#0d001a
list.dropBackground#0d001abf
list.errorForeground#ff3366
list.focusAndSelectionOutline#ff0080
list.focusBackground#4d1a4d
list.focusForeground#ffffff
list.focusOutline#ff0080
list.highlightForeground#ff0080
list.hoverBackground#9966FF
list.hoverForeground#0d001a
list.inactiveFocusBackground#4d1a4d
list.inactiveFocusOutline#8866cc
list.inactiveSelectionBackground#4d1a4d
list.inactiveSelectionForeground#ffffff
list.inactiveSelectionIconForeground#9966FF
list.invalidItemForeground#ff3366
list.warningForeground#ffff00
listFilterWidget.background#4d1a4d
listFilterWidget.noMatchesOutline#ff3366
listFilterWidget.outline#ff0080
listFilterWidget.shadow#000000
markdownAlert.caution.foreground#ff3366
markdownAlert.important.foreground#cc33ff
markdownAlert.note.foreground#00ccff
markdownAlert.tip.foreground#00ff99
markdownAlert.warning.foreground#ffff00
mcpIcon.starForeground#ffff00
menu.background#4d1a4d
menu.border#9966FF
menu.foreground#e6e6fa
menu.selectionBackground#00ff99
menu.selectionBorder#00000000
menu.selectionForeground#0d001a
menu.separatorBackground#9966FF
menubar.selectionBackground#00ff99
menubar.selectionBorder#00000000
menubar.selectionForeground#0d001a
merge.border#9966FF
merge.commonContentBackground#ff008019
merge.commonHeaderBackground#9966FF80
merge.currentContentBackground#ff336666
merge.currentHeaderBackground#9966FF80
merge.incomingContentBackground#00ff9966
merge.incomingHeaderBackground#9966FF80
mergeEditor.change.background#ff008019
mergeEditor.change.word.background#ff008019
mergeEditor.conflict.handled.minimapOverViewRuler#00ff99
mergeEditor.conflict.handledFocused.border#00ff99
mergeEditor.conflict.handledUnfocused.border#00ff99
mergeEditor.conflict.unhandled.minimapOverViewRuler#ff3366
mergeEditor.conflict.unhandledFocused.border#ff3366
mergeEditor.conflict.unhandledUnfocused.border#ff3366
minimap.background#1a0033
minimap.chatEditHighlight#cc33ff66
minimap.errorHighlight#FF0040a5
minimap.findMatchHighlight#ff0080a5
minimap.infoHighlight#ff0080a5
minimap.selectionHighlight#9966FF80
minimap.selectionOccurrenceHighlight#ff0080a5
minimap.warningHighlight#FFFF33a5
minimapGutter.addedBackground#00ff99
minimapGutter.deletedBackground#ff3366
minimapGutter.modifiedBackground#ffff00
multiDiffEditor.background#1a0033
multiDiffEditor.border#4d1a4d
multiDiffEditor.headerBackground#4d1a4d
notebook.cellBorderColor#4d1a4d
notebook.cellEditorBackground#0d001a7f
notebook.cellInsertionIndicator#ff0080
notebook.cellStatusBarItemHoverBackground#9966FF
notebook.cellToolbarSeparator#9966FF
notebook.editorBackground#1a0033
notebook.focusedEditorBorder#ff0080
notebookStatusErrorIcon.foreground#ff3366
notebookStatusRunningIcon.foreground#ffff00
notebookStatusSuccessIcon.foreground#00ff99
notificationCenter.border#9966FF
notificationCenterHeader.background#4d1a4d
notificationCenterHeader.foreground#e6e6fa
notificationLink.foreground#ff0080
notifications.background#4d1a4d
notifications.border#9966FF
notifications.foreground#e6e6fa
notificationsErrorIcon.foreground#ff3366
notificationsInfoIcon.foreground#ff0080
notificationsWarningIcon.foreground#ffff00
notificationToast.border#9966FF
outputView.background#0d001a
outputViewStickyScroll.background#0d001a
panel.background#0d001a
panel.border#4d1a4d
panel.dropBackground#0d001abf
panelStickyScroll.background#0d001a
panelStickyScroll.border#4d1a4d
panelStickyScroll.shadow#000000
panelTitle.activeBorder#ff0080
panelTitle.activeForeground#ff0080
panelTitle.border#4d1a4d
panelTitle.inactiveForeground#e6e6fa
panelTitleBadge.background#ff0080
panelTitleBadge.foreground#0d001a
peekView.border#ff0080
peekViewEditor.background#4d1a4d
peekViewEditor.matchHighlightBackground#9966FF80
peekViewEditorGutter.background#4d1a4d
peekViewEditorStickyScroll.background#4d1a4d
peekViewEditorStickyScrollGutter.background#4d1a4d
peekViewResult.background#0d001a
peekViewResult.fileForeground#e6e6fa
peekViewResult.lineForeground#e6e6fa
peekViewResult.matchHighlightBackground#9966FF80
peekViewResult.selectionBackground#9966FF
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#0d001a
peekViewTitleDescription.foreground#e6e6fa
peekViewTitleLabel.foreground#ffffff
pickerGroup.border#4d1a4d
pickerGroup.foreground#bba8ff
ports.iconRunningProcessForeground#00ff99
problemsErrorIcon.foreground#ff4d7a
problemsInfoIcon.foreground#ff0080
problemsWarningIcon.foreground#ffff00
profileBadge.background#ff0080
profileBadge.foreground#0d001a
profiles.sashBorder#4d1a4d
progressBar.background#ff0080
quickInput.background#4d1a4d
quickInput.border#9966FF
quickInput.foreground#e6e6fa
quickInputList.focusBackground#9966FF
quickInputList.focusForeground#0d001a
quickInputList.focusHighlightForeground#ffff00
quickInputList.focusIconForeground#0d001a
quickInputList.hoverBackground#9966FF
quickInputTitle.background#1a0033
radio.activeBackground#FF008040
radio.activeBorder#FF0080
radio.activeForeground#ffffff
radio.inactiveBackground#1a0033
radio.inactiveBorder#4d1a4d
radio.inactiveForeground#bba8ff
radio.inactiveHoverBackground#4d1a4d
sash.hoverBorder#ff0080
scmGraph.foreground1#ff3366
scmGraph.foreground2#ff6600
scmGraph.foreground3#ffff00
scmGraph.foreground4#00ff99
scmGraph.foreground5#ff0080
scmGraph.historyItemBaseRefColor#ff0080
scmGraph.historyItemHoverAdditionsForeground#00ff99
scmGraph.historyItemHoverDefaultLabelBackground#e6e6fa
scmGraph.historyItemHoverDefaultLabelForeground#0d001a
scmGraph.historyItemHoverDeletionsForeground#ff3366
scmGraph.historyItemHoverLabelBackground#00ccff
scmGraph.historyItemHoverLabelForeground#0d001a
scmGraph.historyItemRefColor#cc33ff
scmGraph.historyItemRemoteRefColor#00ff99
scrollbar.shadow#000000
scrollbarSlider.activeBackground#00ff9980
scrollbarSlider.background#7777774D
scrollbarSlider.hoverBackground#77777766
selection.background#9966FF80
sessionsSidebar.background#0d001a
sessionsSidebar.border#1a0033
sessionsSidebarHeader.background#0d001a
sessionsSidebarHeader.foreground#ffffff
settings.checkboxBackground#4d1a4d
settings.checkboxBorder#9966FF
settings.checkboxForeground#ff0080
settings.dropdownBackground#4d1a4d
settings.dropdownBorder#9966FF
settings.dropdownForeground#e6e6fa
settings.dropdownListBorder#ff0080
settings.headerForeground#ff0080
settings.modifiedItemForeground#ff0080
settings.modifiedItemIndicator#ff0080
settings.numberInputBackground#4d1a4d
settings.numberInputBorder#9966FF
settings.numberInputForeground#ffffff
settings.rowHoverBackground#ff008019
settings.sashBorder#4d1a4d
settings.settingsHeaderHoverForeground#ffffff
settings.textInputBackground#4d1a4d
settings.textInputBorder#9966FF
settings.textInputForeground#ffffff
sideBar.background#0d001a
sideBar.border#1a0033
sideBar.dropBackground#0d001abf
sideBar.foreground#e6e6fa
sideBarSectionHeader.background#0d001a
sideBarSectionHeader.border#1a0033
sideBarSectionHeader.foreground#ffffff
sideBarStickyScroll.background#0d001a
sideBarStickyScroll.border#4d1a4d
sideBarStickyScroll.shadow#000000
sideBarTitle.foreground#e6e6fa
simpleFindWidget.sashBorder#4d1a4d
statusBar.background#0d001a
statusBar.border#1a0033
statusBar.debuggingBackground#cc33ff
statusBar.debuggingBorder#1a0033
statusBar.debuggingForeground#ffffff
statusBar.focusBorder#ff0080
statusBar.foreground#e6e6fa
statusBar.noFolderBackground#0d001a
statusBar.noFolderBorder#1a0033
statusBar.noFolderForeground#e6e6fa
statusBarItem.activeBackground#9966FF
statusBarItem.compactHoverBackground#FFFFFF20
statusBarItem.errorBackground#ff3366
statusBarItem.errorForeground#ffffff
statusBarItem.focusBorder#ff0080
statusBarItem.hoverBackground#FFFFFF20
statusBarItem.offlineBackground#4d1a4d
statusBarItem.offlineForeground#bba8ff
statusBarItem.offlineHoverBackground#9966FF
statusBarItem.offlineHoverForeground#ffffff
statusBarItem.prominentBackground#4d1a4d
statusBarItem.prominentForeground#ffffff
statusBarItem.prominentHoverBackground#FFFFFF20
statusBarItem.remoteBackground#00ff99
statusBarItem.remoteForeground#0d001a
statusBarItem.remoteHoverBackground#66ffcc
statusBarItem.remoteHoverForeground#0d001a
statusBarItem.warningBackground#ffff00
statusBarItem.warningForeground#0d001a
symbolIcon.arrayForeground#cc33ff
symbolIcon.booleanForeground#ff6600
symbolIcon.classForeground#ffff00
symbolIcon.colorForeground#ffffff
symbolIcon.constantForeground#cc33ff
symbolIcon.constructorForeground#ff0080
symbolIcon.enumeratorForeground#ffff00
symbolIcon.enumeratorMemberForeground#ffff00
symbolIcon.eventForeground#ffff00
symbolIcon.fieldForeground#00ff99
symbolIcon.fileForeground#ffffff
symbolIcon.folderForeground#ff0080
symbolIcon.functionForeground#ff0080
symbolIcon.interfaceForeground#ffff00
symbolIcon.keyForeground#ffffff
symbolIcon.keywordForeground#ff3366
symbolIcon.methodForeground#ff0080
symbolIcon.moduleForeground#ffff00
symbolIcon.namespaceForeground#ffff00
symbolIcon.nullForeground#cc33ff
symbolIcon.numberForeground#ff6600
symbolIcon.objectForeground#ffffff
symbolIcon.operatorForeground#ff3366
symbolIcon.packageForeground#ffffff
symbolIcon.propertyForeground#00ff99
symbolIcon.referenceForeground#ffffff
symbolIcon.snippetForeground#ff0080
symbolIcon.stringForeground#00ff99
symbolIcon.structForeground#ffff00
symbolIcon.textForeground#ffffff
symbolIcon.typeParameterForeground#00ccff
symbolIcon.unitForeground#ffffff
symbolIcon.variableForeground#ffffff
tab.activeBackground#1a0033
tab.activeBorder#ff0080
tab.activeBorderTop#ff0080
tab.activeForeground#ffffff
tab.activeModifiedBorder#8866cc
tab.border#0d001a
tab.dragAndDropBorder#ff0080
tab.hoverBackground#9966FF
tab.hoverBorder#ff0080
tab.hoverForeground#ffffff
tab.inactiveBackground#0d001a
tab.inactiveForeground#e6e6fa
tab.inactiveModifiedBorder#8866cc
tab.lastPinnedBorder#4d1a4d
tab.selectedBackground#1a0033
tab.selectedBorderTop#ff0080
tab.selectedForeground#ffffff
tab.unfocusedActiveBorder#4d1a4d
tab.unfocusedActiveForeground#e6e6fa
tab.unfocusedActiveModifiedBorder#4d1a4d
tab.unfocusedHoverBackground#9966FF
tab.unfocusedHoverBorder#9966FF
tab.unfocusedHoverForeground#e6e6fa
tab.unfocusedInactiveForeground#9966FF
tab.unfocusedInactiveModifiedBorder#4d1a4d
terminal.ansiBlack#b9a1d1
terminal.ansiBlue#ff0080
terminal.ansiBrightBlack#d5c3ea
terminal.ansiBrightBlue#ff0080
terminal.ansiBrightCyan#00ccff
terminal.ansiBrightGreen#00ff99
terminal.ansiBrightMagenta#cc33ff
terminal.ansiBrightRed#ff3366
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffff00
terminal.ansiCyan#00ccff
terminal.ansiGreen#00ff99
terminal.ansiMagenta#cc33ff
terminal.ansiRed#ff3366
terminal.ansiWhite#e6e6fa
terminal.ansiYellow#ffff00
terminal.background#0d001a
terminal.border#1a0033
terminal.foreground#e6e6fa
terminal.initialHintForeground#bba8ff
terminal.selectionBackground#9966FF80
terminal.selectionForeground#e6e6fa
terminal.tab.activeBorder#ff0080
terminalCommandDecoration.defaultBackground#e6e6fa
terminalCommandDecoration.errorBackground#ff3366
terminalCommandDecoration.successBackground#00ff99
terminalCommandGuide.foreground#4d1a4d
terminalCursor.background#00000000
terminalCursor.foreground#ffffff
terminalOverviewRuler.border#1a0033
terminalStickyScroll.background#0d001a
terminalStickyScroll.border#4d1a4d
terminalStickyScrollHover.background#9966FF15
testing.coverCountBadgeBackground#00ff99
testing.coverCountBadgeForeground#0d001a
testing.coveredMinimapBackground#00ff9966
testing.iconErrored#ff3366
testing.iconFailed#ff3366
testing.iconPassed#00ff99
testing.iconQueued#ffff00
testing.iconSkipped#cc33ff
testing.iconUnset#9966FF
testing.message.error.badgeBackground#ff3366
testing.message.error.badgeBorder#ff3366
testing.message.error.badgeForeground#0d001a
testing.message.error.decorationForeground#ff3366
testing.message.error.lineBackground#ff336666
testing.message.info.decorationForeground#ff0080
testing.message.info.lineBackground#ff008019
testing.runAction#00ff99
testing.uncoveredBranchBackground#ff336640
testing.uncoveredMinimapBackground#ff336666
textBlockQuote.background#4d1a4d
textBlockQuote.border#ff0080
textCodeBlock.background#4d1a4d
textLink.activeForeground#ff0080
textLink.foreground#ff0080
textPreformat.foreground#ffffff
textSeparator.foreground#bba8ff
titleBar.activeBackground#0d001a
titleBar.activeForeground#FF00FF
titleBar.border#1a0033
titleBar.inactiveBackground#0d001a
titleBar.inactiveForeground#FF00FF
toolbar.activeBackground#FFFFFF20
toolbar.hoverBackground#FFFFFF15
toolbar.hoverOutline#00000000
tree.inactiveIndentGuidesStroke#4d1a4d
tree.indentGuidesStroke#9966FF
walkThrough.embeddedEditorBackground#1a0033
welcomePage.buttonBackground#4d1a4d
welcomePage.buttonHoverBackground#9966FF
welcomePage.buttonHoverForeground#0d001a
welcomePage.foreground#e6e6fa
welcomePage.progress.background#ff0080
welcomePage.progress.foreground#ff0080
welcomePage.tileBackground#4d1a4d
welcomePage.tileHoverBackground#9966FF
welcomePage.tileHoverForeground#0d001a
welcomePage.tileShadow#000000
widget.border#9966FF
widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment markup.underline.link, comment string, comment punctuation.definition, comment punctuation, comment text	#b58dff	italic
comment storage.type	#b58dff	—
comment entity.name.type	#44ccdd	—
comment variable, comment variable.other	#44ccdd	—
comment keyword, comment entity.name.tag, entity.name.tag.documentation	#44ccdd	—
comment keyword.codetag.notation	#dd77ff	—
comment.git-status.header.remote	#ff7392	—
comment.git-status.header.local	#ff6cb6	—
comment.other.git-status.head	#bba8ff	—
string.quoted.docstring, string.quoted.docstring punctuation.definition	#b58dff	—
constant	#cc33ff	—
constant.other	#ffffff	—
constant.other.caps	#cc33ff	—
constant.other.placeholder	#ff6600	—
constant.other.property	#cc33ff	—
constant.other.citation.latex	#cc33ff	—
constant.other.color	#cc33ff	—
constant.other.character-class.escape	#cc33ff	—
constant.other.key	#cc33ff	—
constant.other.symbol	#ff6600	—
constant.other.elm	#ff0080	—
constant.numeric	#ff6600	—
constant.language	#cc33ff	—
constant.character.escape	#cc33ff	—
constant.numeric.line-number.find-in-files	#9966FF	—
constant.numeric.line-number.match.find-in-files	#ffff00	—
entity.name.section	#ffff00	—
entity.name.function, entity.name.function.templated, entity.name.function.member.static	#ff0080	—
entity.name.type.class.templated, entity.name.type.class.generic, entity.name.type.namespace	#ffff00	—
entity.name.label	#cc33ff	—
entity.name.function.preprocessor	#ff0080	—
entity.name	#ff0080	—
entity.name.class	#ffff00	—
entity.name.constant	#cc33ff	—
entity.name.namespace	#ffffff	—
entity.other.inherited-class	#ffff00	italic
entity.name.function	#ff0080	—
entity.name.tag, entity.name.tag.js.jsx support.class.component.js.jsx, entity.name.tag support.class.component, source.vue support.class.component	#ff3366	—
source.ansible entity.name.tag	#ff0080	—
entity.name.function.operator	#ff3366	—
meta.brackets entity.name.function.operator, punctuation.separator entity.name.function.operator	#9966ff	—
entity.name.type, entity.name.type.class.reference, entity.name.type.class.value	#ffff00	—
entity.other.attribute-name	#ff0080	italic
entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector-suffix.css, entity.other.attribute-name.parent-selector-suffix.css punctuation.definition.entity.css, entity.other.attribute-name.css, entity.other.animation-name.css	#ffff00	—
entity.other.attribute-name.id.css	#ff6600	—
entity.other.attribute-name.pseudo-class.css, entity.other.pseudo-class.css, entity.other.pseudo-element.css	#ff0080	italic
entity.name.function, support.function	#ff0080	—
entity.other.git-status.hex	#cc33ff	—
entity.other.jinja2.delimiter	#9966FF	—
entity.name.operator.custom-literal	#ffffff	—
entity.name.operator.custom-literal.string	#00ff99	—
entity.name.operator.custom-literal.number	#ff6600	—
entity.name.type.rust	#ffff00	—
entity.name.lifetime.rust	#ff3366	—
invalid	#ff3366	italic underline
invalid.deprecated	#ff6600	italic underline
keyword	#ff3366	—
keyword.control	#ff3366	—
keyword.control.directive	#ff3366	—
keyword.operator, keyword.operator.member, keyword.operator.new	#ff3366	—
keyword.other.substitution	#9966ff	—
keyword.other.template.begin, keyword.other.template.end	#ff3366	—
keyword.operator.heading.restructuredtext, keyword.operator.table.row.restructuredtext keyword.operator.table.data.restructuredtext	#9966ff	—
keyword.other.parenthesis.elm	#9966ff	—
keyword.other.fn.rust, keyword.other.rust, keyword.other.unsafe.rust, keyword.other.where.rust	#ff0080	—
keyword.control.rust, keyword.operator.misc.rust	#ff3366	—
keyword.declaration.class.ruby, keyword.declaration.function.ruby, keyword.declaration.namespace.ruby	#ff3366	—
markup.italic	—	italic
markup.bold	—	bold
markup.heading	#ffff00	—
markup.raw	#ff6600	—
markup.underline	—	underline
markup.underline.link	#ff0080	—
markup.inserted, markup.inserted punctuation.definition.inserted	#00ff99	—
markup.deleted, markup.deleted punctuation.definition.deleted	#ff3366	—
markup.changed, markup.changed punctuation.definition.changed	#ffff00	—
markup.ignored, markup.ignored punctuation.definition.ignored	#9966FF	—
markup.untracked	#9966FF	—
markup.quote	—	italic
meta.brace.round, meta.brace.square, meta.brace.curly, meta.delimiter.comma.js, meta.function-call.without-arguments.js, meta.function-call.method.without-arguments.js	#9966ff	—
meta.function-call.generic.python, support.function.builtin.python	#ff0080	—
meta.function-call.python meta.function-call.arguments.python	#ffffff	—
meta.interpolation	#ff6600	—
meta.instance.constructor	#ff0080	—
meta.attribute-with-value.class string, meta.attribute.class.html string	#ffff00	—
meta.attribute-with-value.id string, meta.attribute.id.html string	#ff6600	—
source.json meta.mapping.key string	#ffffff	—
source.yaml meta.mapping.key string	#ff3366	—
meta.object.member	#ffffff	—
meta.property-list.css variable.other	#ff6600	—
entity.name.constant.preprocessor, meta.preprocessor	#cc33ff	—
meta.diff.git-diff.header	#ffff00	—
meta.type_params.rust	#ffffff	—
meta.attribute.rust, meta.annotation.rust, variable.language.rust, variable.annotation.rust, meta.annotation.rust string, meta.annotation.rust keyword, meta.annotation.rust keyword.operator, meta.attribute.rust string	#00ccff	—
meta.type variable, meta.type variable.other.readwrite	#cc33ff	—
punctuation	#9966FF	—
punctuation.definition.tag, punctuation.definition.tag source, punctuation.definition.group.begin.ruby, punctuation.definition.group.end.ruby, punctuation.definition.group.begin.css, punctuation.definition.group.end.css, punctuation.definition.string.end.html source.css, punctuation.definition.block, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.separator.parameter, punctuation.accessor, punctuation.terminator	#9966FF	—
punctuation.definition.group	#ffffff	—
punctuation.definition.comment	#b58dff	—
punctuation.definition.variable, punctuation.definition.keyword.scss, punctuation.definition.entity.css	#00ccff	—
punctuation.section.embedded, punctuation.section.embedded entity.name.tag, punctuation.section.embedded constant.other, punctuation.section.embedded source, punctuation.section.embedded.begin	#ff6600	—
punctuation.template-string.element.begin, punctuation.template-string.element.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end, string.quoted.template punctuation.definition.string.begin, string.quoted.template punctuation.definition.string.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#ff3366	—
meta.paragraph.markdown meta.dummy.line-break, meta.paragraph.markdown meta.hard-line-break.markdown	—	—
markup.underline.link punctuation	#ff0080	—
meta.brace.round, meta.brace.square, keyword.operator.type.annotation, meta.type storage.modifier.array	#9966ff	—
region.redish	#ff3366	—
region.orangish	#ff6600	—
region.yellowish	#ffff00	—
region.greenish	#00ff99	—
region.bluish	#ff0080	—
region.purplish	#cc33ff	—
region.pinkish	#ff3366	—
region.whitish	#ffffff	—
source	#ffffff	—
source.scss, source.sass	#9966FF	—
source.sass variable.other, source.sass variable.sass, source.scss variable.other, source.scss variable.scss, source.scss variable.sass, source.css variable.other, source.css variable.scss, source.less variable.other, source.less variable.other.less, source.less variable.declaration.less	#ff6600	italic
source.git-show.commit.sha	#cc33ff	—
source.git-show.author, source.git-show.date, source.git-diff.command, source.git-diff.command meta.diff.git-diff.header.from-file, source.git-diff.command meta.diff.git-diff.header.to-file	#9966FF	—
source.git-show meta.diff.git-diff.header.extended.index.from-sha, source.git-show meta.diff.git-diff.header.extended.index.to-sha	#cc33ff	—
source.git-show meta.diff.range.unified	#ff6600	—
source.git-show meta.diff.header.from-file, source.git-show meta.diff.header.to-file	#9966FF	—
storage	#ff3366	—
storage.type	#ff0080	italic
storage.type.extends	#ff3366	normal
storage.type.function.arrow	#ff3366	normal
storage.modifier, storage.type.modifier	#ff3366	italic
storage.class.restructuredtext.ref	#cc33ff	—
storage.modifier.visibility.rust, storage.modifier.lifetime.rust	#ff3366	—
storage.type.rust, storage.modifier.const.rust, storage.modifier.dyn.rust, storage.modifier.mut.rust, storage.modifier.static.rust, keyword.other.rust, keyword.other.where.rust	#ff3366	—
storage.modifier.import.java	#ffffff	—
string	#00ff99	—
string.unquoted.label	#ffffff	—
string source	#ffffff	—
string source punctuation.section.embedded, string punctuation.definition.string source	#9966FF	—
string.other.link.title, string.other.link.description	#ff3366	—
string.other.link.description.title	#ff0080	—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end	#ff3366	—
string.other.ref, string.other.restructuredtext.ref	#ff0080	—
string.other.git-status.help.key	#00ccff	—
string.other.git-status.remote	#ff3366	—
support.constant	#ff0080	—
support.constant.handlebars	#9966FF	—
support.type.vendor-prefix.css	#00ccff	—
support.function	#ff0080	—
support.macro	#ff0080	—
support.function.delimiter.elm	#9966FF	—
support.type, entity.name.type.object.console	#ff0080	italic
support.variable, support.variable.property	#ff0080	—
support.type.property-name	#ffffff	normal
support.class	#ffff00	—
support.constant.core.rust	#cc33ff	—
comment support, comment support.class	#b58dff	—
text	#ffffff	—
text.find-in-files	#ffffff	—
variable, variable.other	#ffffff	—
variable.parameter, parameters variable.function	#ff6600	italic
variable.language, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python	#00ccff	italic
variable.language.arguments	#cc33ff	—
variable.other.class	#ffff00	—
variable.other.constant	#cc33ff	—
variable.other.readwrite	#ffffff	—
variable.other.member	#ffffff	—
variable.other.enummember	#cc33ff	—
variable.other.property, variable.other.property.static, variable.other.event	#ffffff	—
variable.function	#ff0080	—
variable.other.substitution	#ff6600	—
source.ruby variable.other.readwrite.instance.ruby, source.ruby variable.other.readwrite.class.ruby	#cc33ff	—
source.jinja2 variable.other.jinja2.block	#ff0080	—
source.jinja2 variable.other.jinja2	#ff6600	—

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