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 — Tokyo Night

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#7aa2f7
activityBar.activeFocusBorder#7aa2f7
activityBar.background#1a1b66
activityBar.border#1a1b66
activityBar.foreground#F1F5F9
activityBar.inactiveForeground#E0E7FF
activityBarBadge.background#7aa2f7
activityBarBadge.foreground#1a1b66
activityBarTop.activeBorder#7aa2f7
activityBarTop.background#24283b
activityBarTop.foreground#F1F5F9
activityBarTop.inactiveForeground#E0E7FF
activityErrorBadge.background#f7768e
activityErrorBadge.foreground#1a1b26
activityWarningBadge.background#e0af68
activityWarningBadge.foreground#1a1b26
agentSessionReadIndicator.foreground#9ece6a
agentSessionSelectedBadge.border#bb9af7
agentSessionSelectedUnfocusedBadge.border#bb9af766
agentStatusIndicator.background#bb9af740
aiCustomizationManagement.sashBorder#414868
badge.background#7aa2f7
badge.foreground#1a1b66
banner.background#414868
banner.foreground#c5cfe5
banner.iconForeground#c5cfe5
breadcrumb.activeSelectionForeground#c0caf5
breadcrumb.background#24283b
breadcrumb.focusForeground#7aa2f7
breadcrumb.foreground#b5c0e0
breadcrumbPicker.background#24283b
button.background#7aa2f7
button.border#2b3260
button.foreground#1a1b66
button.hoverBackground#6183d0
button.secondaryBackground#414868
button.secondaryForeground#c5cfe5
button.secondaryHoverBackground#414868
button.secondaryHoverForeground#c0caf5
button.separator#24283b
charts.blue#7aa2f7
charts.foreground#c0caf5
charts.green#9ece6a
charts.lines#414868
charts.orange#ff9e64
charts.purple#bb9af7
charts.red#f7768e
charts.yellow#e0af68
chat.avatarBackground#24283b
chat.avatarForeground#bb9af7
chat.checkpointSeparator#414868
chat.editedFileForeground#e0af68
chat.inputWorkingBorderColor1#7aa2f7
chat.inputWorkingBorderColor2#5a82d0
chat.linesAddedForeground#9ece6a
chat.linesRemovedForeground#f7768e
chat.requestBackground#7aa2f71F
chat.requestBorder#7aa2f766
chat.requestBubbleBackground#7aa2f733
chat.requestBubbleForeground#c0caf5
chat.requestBubbleHoverBackground#7aa2f74D
chat.requestCodeBorder#7aa2f766
chat.slashCommandBackground#00000000
chat.slashCommandForeground#e0af68
chat.thinkingShimmer#bb9af766
chatBarTitle.background#24283b
chatBarTitle.foreground#c5cfe5
chatManagement.sashBorder#414868
checkbox.background#414868
checkbox.border#7080a8
checkbox.disabled.background#1a1b66
checkbox.disabled.foreground#565f89
checkbox.foreground#7aa2f7
checkbox.selectBackground#414868
checkbox.selectBorder#7080a8
commandCenter.activeBackground#24283b
commandCenter.activeBorder#7aa2f7
commandCenter.activeForeground#E0E7FF
commandCenter.background#1a1b66
commandCenter.border#24283b
commandCenter.debuggingBackground#1a1b66
commandCenter.debuggingForeground#ff9e64
commandCenter.foreground#E0E7FF
commandCenter.inactiveBorder#24283b
commandCenter.inactiveForeground#E0E7FF
debugConsole.errorForeground#f7768e
debugConsole.infoForeground#7aa2f7
debugConsole.sourceForeground#c0caf5
debugConsole.warningForeground#ff9e64
debugConsoleInputIcon.foreground#e0af68
debugExceptionWidget.background#414868
debugExceptionWidget.border#1a1b66
debugIcon.breakpointCurrentStackframeForeground#e0af68
debugIcon.breakpointDisabledForeground#7080a8
debugIcon.breakpointForeground#f7768e
debugIcon.breakpointStackframeForeground#c0caf5
debugIcon.breakpointUnverifiedForeground#ff9e64
debugIcon.continueForeground#c0caf5
debugIcon.disconnectForeground#c0caf5
debugIcon.pauseForeground#c0caf5
debugIcon.restartForeground#9ece6a
debugIcon.startForeground#9ece6a
debugIcon.stepBackForeground#c0caf5
debugIcon.stepIntoForeground#c0caf5
debugIcon.stepOutForeground#c0caf5
debugIcon.stepOverForeground#c0caf5
debugIcon.stopForeground#f7768e
debugTokenExpression.boolean#ff9e64
debugTokenExpression.error#f7768e
debugTokenExpression.name#7aa2f7
debugTokenExpression.number#bb9af7
debugTokenExpression.string#9ece6a
debugTokenExpression.value#c0caf5
debugToolBar.background#414868
debugView.exceptionLabelBackground#f7768e
debugView.exceptionLabelForeground#1a1b66
debugView.stateLabelBackground#9ece6a
debugView.stateLabelForeground#1a1b66
debugView.valueChangedHighlight#e0af68
descriptionForeground#b5c0e0
diffEditor.diagonalFill#414868
diffEditor.insertedLineBackground#9ece6a48
diffEditor.insertedTextBackground#9ece6a50
diffEditor.move.border#7aa2f766
diffEditor.moveActive.border#7aa2f7
diffEditor.removedLineBackground#f7768e48
diffEditor.removedTextBackground#f7768e50
diffEditor.unchangedCodeBackground#1a1b66
diffEditor.unchangedRegionBackground#1a1b66
diffEditor.unchangedRegionForeground#c5cfe5
diffEditor.unchangedRegionShadow#16161e
diffEditorGutter.insertedLineBackground#9ece6a80
diffEditorGutter.removedLineBackground#f7768e80
diffEditorOverview.insertedForeground#9ece6aa5
diffEditorOverview.removedForeground#f7768ea5
disabledForeground#a2aed4
dropdown.background#414868
dropdown.border#8e9cc4
dropdown.foreground#c5cfe5
dropdown.listBackground#414868
editor.background#24283b
editor.compositionBorder#7aa2f7
editor.findMatchBackground#9ece6a66
editor.findMatchBorder#e0af68
editor.findMatchForeground#c0caf5
editor.findMatchHighlightBackground#9ece6a33
editor.findMatchHighlightBorder#00000000
editor.findMatchHighlightForeground#c5cfe5
editor.findRangeHighlightBackground#9ece6a35
editor.findRangeHighlightBorder#00000000
editor.focusedStackFrameHighlightBackground#7aa2f766
editor.foldBackground#3d59a10c
editor.foldPlaceholderForeground#7080a8
editor.foreground#c0caf5
editor.hoverHighlightBackground#3d59a10c
editor.inactiveLineHighlightBackground#3d59a113
editor.inactiveSelectionBackground#3d59a133
editor.inlineValuesBackground#7080a833
editor.inlineValuesForeground#c5cfe5
editor.lineHighlightBackground#3d59a126
editor.lineHighlightBorder#00000000
editor.linkedEditingBackground#41486840
editor.placeholder.foreground#a2aed4
editor.rangeHighlightBackground#41486840
editor.rangeHighlightBorder#00000000
editor.selectionBackground#7aa2f766
editor.selectionForeground#c0caf5
editor.selectionHighlightBackground#3d59a166
editor.selectionHighlightBorder#00000000
editor.stackFrameHighlightBackground#e0af6866
editor.wordHighlightBackground#9ece6a40
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#9ece6a4D
editor.wordHighlightStrongBorder#00000000
editorActionList.background#414868
editorActionList.focusBackground#3d59a1
editorActionList.focusForeground#c0caf5
editorActionList.foreground#c0caf5
editorBracketHighlight.foreground1#f7768e
editorBracketHighlight.foreground2#ff9e64
editorBracketHighlight.foreground3#e0af68
editorBracketHighlight.foreground4#9ece6a
editorBracketHighlight.foreground5#7aa2f7
editorBracketHighlight.foreground6#bb9af7
editorBracketMatch.background#3d59a166
editorBracketMatch.border#7aa2f7
editorBracketMatch.foreground#7aa2f7
editorCodeLens.foreground#a2aed4
editorCommentsWidget.rangeActiveBackground#3d59a166
editorCommentsWidget.rangeBackground#3d59a133
editorCommentsWidget.resolvedBorder#9ece6a
editorCommentsWidget.unresolvedBorder#e0af68
editorCursor.background#24283b
editorCursor.foreground#c0caf5
editorError.background#00000000
editorError.border#00000000
editorError.foreground#f7768e
editorGhostText.background#00000000
editorGhostText.border#00000000
editorGhostText.foreground#a2aed4
editorGroup.border#1a1b66
editorGroup.dropBackground#1a1b26bf
editorGroup.emptyBackground#1a1b66
editorGroup.focusedEmptyBorder#24283b
editorGroupHeader.noTabsBackground#24283b
editorGroupHeader.tabsBackground#24283b
editorGroupHeader.tabsBorder#24283b
editorGutter.addedBackground#9ece6a
editorGutter.addedSecondaryBackground#9ece6a80
editorGutter.background#24283b
editorGutter.commentDraftGlyphForeground#e0af68
editorGutter.commentGlyphForeground#b5c0e0
editorGutter.commentUnresolvedGlyphForeground#e0af68
editorGutter.deletedBackground#f7768e
editorGutter.deletedSecondaryBackground#f7768e80
editorGutter.foldingControlForeground#c5cfe5
editorGutter.itemBackground#24283b00
editorGutter.itemGlyphForeground#c5cfe5
editorGutter.modifiedBackground#e0af68
editorGutter.modifiedSecondaryBackground#e0af6880
editorHint.border#24283b
editorHint.foreground#7dcfff
editorHoverWidget.background#414868
editorHoverWidget.border#7080a8
editorHoverWidget.foreground#c5cfe5
editorIndentGuide.activeBackground#7aa2f7
editorIndentGuide.background#5a6391
editorInfo.background#00000000
editorInfo.border#24283b
editorInfo.foreground#7aa2f7
editorInlayHint.background#414868
editorInlayHint.foreground#7080a8
editorLightBulb.foreground#e0af68
editorLightBulbAi.foreground#e0af68
editorLightBulbAutoFix.foreground#9ece6a
editorLineNumber.activeForeground#c5cfe5
editorLineNumber.foreground#7080a8
editorLink.activeForeground#7aa2f7
editorMarkerNavigation.background#414868
editorMarkerNavigationError.background#f7768e
editorMarkerNavigationInfo.background#7aa2f7
editorMarkerNavigationWarning.background#e0af68
editorMinimap.inlineChatInserted#9ece6a66
editorMinimap.inlineChatRemoved#f7768e66
editorMultiCursor.primary.background#24283b
editorMultiCursor.primary.foreground#7aa2f7
editorMultiCursor.secondary.background#24283b
editorMultiCursor.secondary.foreground#bb9af7
editorOverviewRuler.addedForeground#9ece6a
editorOverviewRuler.border#24283b
editorOverviewRuler.commentDraftForeground#e0af6866
editorOverviewRuler.currentContentForeground#414868
editorOverviewRuler.deletedForeground#f7768e
editorOverviewRuler.errorForeground#f7768e
editorOverviewRuler.findMatchForeground#3d59a166
editorOverviewRuler.incomingContentForeground#414868
editorOverviewRuler.infoForeground#7aa2f7
editorOverviewRuler.inlineChatInserted#9ece6a66
editorOverviewRuler.inlineChatRemoved#f7768e66
editorOverviewRuler.modifiedForeground#e0af68
editorOverviewRuler.rangeHighlightForeground#3d59a166
editorOverviewRuler.selectionHighlightForeground#3d59a166
editorOverviewRuler.warningForeground#e0af68
editorOverviewRuler.wordHighlightForeground#3d59a166
editorOverviewRuler.wordHighlightStrongForeground#3d59a166
editorPane.background#24283b
editorRuler.foreground#5a6391
editorStickyScroll.background#24283b
editorStickyScroll.border#414868
editorStickyScroll.shadow#16161e
editorStickyScrollGutter.background#24283b
editorStickyScrollHover.background#3d59a10c
editorSuggestWidget.background#414868
editorSuggestWidget.border#7080a8
editorSuggestWidget.foreground#c5cfe5
editorSuggestWidget.highlightForeground#c0caf5
editorSuggestWidget.selectedBackground#3d59a1
editorSuggestWidget.selectedForeground#c0caf5
editorSuggestWidget.selectedIconForeground#7aa2f7
editorUnnecessaryCode.opacity#16161ea5
editorWarning.background#00000000
editorWarning.border#00000000
editorWarning.foreground#e0af68
editorWhitespace.foreground#a2aed4
editorWidget.background#414868
editorWidget.border#7080a8
editorWidget.foreground#c5cfe5
errorForeground#ff89a0
extensionBadge.remoteForeground#9ece6a
extensionButton.background#7aa2f7
extensionButton.foreground#1a1b66
extensionButton.hoverBackground#6183d0
extensionButton.prominentBackground#7aa2f7
extensionButton.prominentForeground#1a1b66
extensionButton.prominentHoverBackground#6183d0
extensionIcon.preReleaseForeground#bb9af7
extensionIcon.privateForeground#7080a8
extensionIcon.sponsorForeground#7aa2f7
extensionIcon.starForeground#e0af68
extensionIcon.verifiedForeground#9ece6a
focusBorder#6b76a1
foreground#c8d3f5
gauge.background#414868
gauge.border#7080a8
gauge.errorBackground#f7768e
gauge.errorForeground#1a1b26
gauge.foreground#7aa2f7
gauge.warningBackground#e0af68
gauge.warningForeground#1a1b26
git.blame.editorDecorationForeground#a2aed4
gitDecoration.addedResourceForeground#9ece6a
gitDecoration.conflictingResourceForeground#ff9e64
gitDecoration.deletedResourceForeground#f7768e
gitDecoration.ignoredResourceForeground#a2aed4
gitDecoration.modifiedResourceForeground#e0af68
gitDecoration.renamedResourceForeground#7dcfff
gitDecoration.stageDeletedResourceForeground#f7768e
gitDecoration.stageModifiedResourceForeground#e0af68
gitDecoration.untrackedResourceForeground#7dcfff
icon.foreground#E0E7FF
inlineChat.background#24283b
inlineChat.border#7080a8
inlineChat.foreground#c5cfe5
inlineChat.regionHighlight#7aa2f71A
inlineChat.shadow#16161e
inlineChatDiff.inserted#9ece6a66
inlineChatDiff.removed#f7768e66
inlineChatInput.background#414868
inlineChatInput.border#7080a8
inlineChatInput.focusBorder#7aa2f7
inlineChatInput.placeholderForeground#b7c4ee
inlineEdit.gutterIndicator.background#24283b
inlineEdit.gutterIndicator.primaryBackground#7aa2f733
inlineEdit.gutterIndicator.primaryBorder#7aa2f7
inlineEdit.gutterIndicator.primaryForeground#7aa2f7
inlineEdit.gutterIndicator.secondaryBackground#ff9e6433
inlineEdit.gutterIndicator.secondaryBorder#ff9e64
inlineEdit.gutterIndicator.secondaryForeground#ff9e64
inlineEdit.gutterIndicator.successfulBackground#9ece6a33
inlineEdit.gutterIndicator.successfulBorder#9ece6a
inlineEdit.gutterIndicator.successfulForeground#9ece6a
inlineEdit.modifiedBackground#9ece6a26
inlineEdit.modifiedBorder#9ece6a66
inlineEdit.modifiedChangedLineBackground#9ece6a33
inlineEdit.modifiedChangedTextBackground#9ece6a40
inlineEdit.originalBackground#ff9e6426
inlineEdit.originalBorder#ff9e6466
inlineEdit.originalChangedLineBackground#ff9e6426
inlineEdit.originalChangedTextBackground#ff9e6440
inlineEdit.tabWillAcceptModifiedBorder#9ece6a
inlineEdit.tabWillAcceptOriginalBorder#7aa2f7
input.background#414868
input.border#8e9cc4
input.foreground#c0caf5
input.placeholderForeground#b7c4ee
inputOption.activeBackground#7AA2F740
inputOption.activeBorder#7aa2f7
inputOption.activeForeground#E0E7FF
inputOption.hoverBackground#7AA2F720
inputValidation.errorBackground#414868
inputValidation.errorBorder#f7768e
inputValidation.errorForeground#f7768e
inputValidation.infoBackground#414868
inputValidation.infoBorder#7aa2f7
inputValidation.infoForeground#7aa2f7
inputValidation.warningBackground#414868
inputValidation.warningBorder#e0af68
inputValidation.warningForeground#e0af68
interactive.activeCodeBorder#7aa2f7
interactive.inactiveCodeBorder#414868
keybindingLabel.background#7080a8
keybindingLabel.border#7080a8
keybindingLabel.bottomBorder#7080a8
keybindingLabel.foreground#c5cfe5
list.activeSelectionBackground#364a82
list.activeSelectionForeground#c0caf5
list.activeSelectionIconForeground#c0caf5
list.dropBackground#1a1b26bf
list.errorForeground#ffaabf
list.focusAndSelectionOutline#7aa2f7
list.focusBackground#3d59a1
list.focusForeground#c0caf5
list.focusOutline#7aa2f7
list.highlightForeground#7aa2f7
list.hoverBackground#364a82
list.hoverForeground#c0caf5
list.inactiveFocusBackground#3d59a1
list.inactiveFocusOutline#a0aed7
list.inactiveSelectionBackground#3d59a1
list.inactiveSelectionForeground#c9d3f7
list.inactiveSelectionIconForeground#c9d3f7
list.invalidItemForeground#f7768e
list.warningForeground#e0af68
listFilterWidget.background#414868
listFilterWidget.noMatchesOutline#f7768e
listFilterWidget.outline#7aa2f7
listFilterWidget.shadow#16161e
markdownAlert.caution.foreground#f7768e
markdownAlert.important.foreground#bb9af7
markdownAlert.note.foreground#7aa2f7
markdownAlert.tip.foreground#9ece6a
markdownAlert.warning.foreground#e0af68
mcpIcon.starForeground#e0af68
menu.background#414868
menu.border#7080a8
menu.foreground#c5cfe5
menu.selectionBackground#7aa2f7
menu.selectionBorder#00000000
menu.selectionForeground#1a1b66
menu.separatorBackground#7080a8
menubar.selectionBackground#7aa2f7
menubar.selectionBorder#00000000
menubar.selectionForeground#1a1b66
merge.border#7080a8
merge.commonContentBackground#3d59a166
merge.commonHeaderBackground#3d59a166
merge.currentContentBackground#f7768e66
merge.currentHeaderBackground#f7768e66
merge.incomingContentBackground#9ece6a66
merge.incomingHeaderBackground#9ece6a66
mergeEditor.change.background#3d59a166
mergeEditor.change.word.background#3d59a166
mergeEditor.conflict.handled.minimapOverViewRuler#9ece6a
mergeEditor.conflict.handledFocused.border#9ece6a
mergeEditor.conflict.handledUnfocused.border#9ece6a
mergeEditor.conflict.unhandled.minimapOverViewRuler#f7768e
mergeEditor.conflict.unhandledFocused.border#f7768e
mergeEditor.conflict.unhandledUnfocused.border#f7768e
minimap.chatEditHighlight#bb9af766
minimap.errorHighlight#f7768ea5
minimap.findMatchHighlight#7aa2f7a5
minimap.infoHighlight#7aa2f7a5
minimap.selectionHighlight#364a8266
minimap.selectionOccurrenceHighlight#7aa2f7a5
minimap.warningHighlight#e0af68a5
minimapGutter.addedBackground#9ece6a
minimapGutter.deletedBackground#f7768e
minimapGutter.modifiedBackground#e0af68
multiDiffEditor.background#24283b
multiDiffEditor.border#414868
multiDiffEditor.headerBackground#414868
notebook.cellBorderColor#414868
notebook.cellEditorBackground#1a1b267f
notebook.cellInsertionIndicator#7aa2f7
notebook.cellStatusBarItemHoverBackground#3d59a1
notebook.cellToolbarSeparator#7080a8
notebook.editorBackground#24283b
notebook.focusedEditorBorder#7aa2f7
notebookStatusErrorIcon.foreground#f7768e
notebookStatusRunningIcon.foreground#e0af68
notebookStatusSuccessIcon.foreground#9ece6a
notificationCenter.border#7080a8
notificationCenterHeader.background#414868
notificationCenterHeader.foreground#c5cfe5
notificationLink.foreground#7aa2f7
notifications.background#414868
notifications.border#7080a8
notifications.foreground#c5cfe5
notificationsErrorIcon.foreground#f7768e
notificationsInfoIcon.foreground#7aa2f7
notificationsWarningIcon.foreground#e0af68
notificationToast.border#7080a8
outputView.background#1a1b66
outputViewStickyScroll.background#1a1b66
panel.background#1a1b66
panel.border#414868
panel.dropBackground#1a1b26bf
panelStickyScroll.background#1a1b26
panelStickyScroll.border#414868
panelStickyScroll.shadow#16161e
panelTitle.activeBorder#7aa2f7
panelTitle.activeForeground#7aa2f7
panelTitle.border#414868
panelTitle.inactiveForeground#b5c0e0
panelTitleBadge.background#7aa2f7
panelTitleBadge.foreground#1a1b66
peekView.border#7aa2f7
peekViewEditor.background#414868
peekViewEditor.matchHighlightBackground#3d59a166
peekViewEditorGutter.background#414868
peekViewEditorStickyScroll.background#414868
peekViewEditorStickyScrollGutter.background#414868
peekViewResult.background#1a1b66
peekViewResult.fileForeground#c5cfe5
peekViewResult.lineForeground#b5c0e0
peekViewResult.matchHighlightBackground#3d59a166
peekViewResult.selectionBackground#364a82
peekViewResult.selectionForeground#c0caf5
peekViewTitle.background#1a1b66
peekViewTitleDescription.foreground#b5c0e0
peekViewTitleLabel.foreground#c0caf5
pickerGroup.border#414868
pickerGroup.foreground#b7c4ee
ports.iconRunningProcessForeground#9ece6a
problemsErrorIcon.foreground#ff89a0
problemsInfoIcon.foreground#7aa2f7
problemsWarningIcon.foreground#e0af68
profileBadge.background#7aa2f7
profileBadge.foreground#1a1b26
profiles.sashBorder#414868
progressBar.background#7aa2f7
quickInput.background#414868
quickInput.border#7080a8
quickInput.foreground#c5cfe5
quickInputList.focusBackground#3d59a1
quickInputList.focusForeground#c0caf5
quickInputList.focusHighlightForeground#c0caf5
quickInputList.focusIconForeground#7aa2f7
quickInputList.hoverBackground#364a82
quickInputTitle.background#24283b
radio.activeBackground#7aa2f733
radio.activeBorder#7aa2f7
radio.activeForeground#c0caf5
radio.inactiveBackground#24283b
radio.inactiveBorder#414868
radio.inactiveForeground#a9b1d6
radio.inactiveHoverBackground#414868
sash.hoverBorder#7aa2f7
scmGraph.foreground1#7aa2f7
scmGraph.foreground2#bb9af7
scmGraph.foreground3#9ece6a
scmGraph.foreground4#ff9e64
scmGraph.foreground5#f7768e
scmGraph.historyItemBaseRefColor#7aa2f7
scmGraph.historyItemHoverAdditionsForeground#9ece6a
scmGraph.historyItemHoverDefaultLabelBackground#c5cfe5
scmGraph.historyItemHoverDefaultLabelForeground#1a1b26
scmGraph.historyItemHoverDeletionsForeground#f7768e
scmGraph.historyItemHoverLabelBackground#bb9af7
scmGraph.historyItemHoverLabelForeground#1a1b26
scmGraph.historyItemRefColor#bb9af7
scmGraph.historyItemRemoteRefColor#9ece6a
scrollbar.shadow#16161e
scrollbarSlider.activeBackground#7aa2f780
scrollbarSlider.background#414a664D
scrollbarSlider.hoverBackground#545c7b66
selection.background#364a8266
sessionsSidebar.background#1a1b66
sessionsSidebar.border#24283b
sessionsSidebarHeader.background#1a1b66
sessionsSidebarHeader.foreground#c0caf5
settings.checkboxBackground#414868
settings.checkboxBorder#7080a8
settings.checkboxForeground#7aa2f7
settings.dropdownBackground#414868
settings.dropdownBorder#7080a8
settings.dropdownForeground#c5cfe5
settings.dropdownListBorder#7aa2f7
settings.headerForeground#7aa2f7
settings.modifiedItemForeground#7aa2f7
settings.modifiedItemIndicator#7aa2f7
settings.numberInputBackground#414868
settings.numberInputBorder#7080a8
settings.numberInputForeground#c0caf5
settings.rowHoverBackground#3d59a10c
settings.sashBorder#414868
settings.settingsHeaderHoverForeground#c0caf5
settings.textInputBackground#414868
settings.textInputBorder#7080a8
settings.textInputForeground#c0caf5
sideBar.background#1a1b66
sideBar.border#24283b
sideBar.dropBackground#1a1b26bf
sideBar.foreground#c5cfe5
sideBarSectionHeader.background#1a1b66
sideBarSectionHeader.border#24283b
sideBarSectionHeader.foreground#c0caf5
sideBarStickyScroll.background#1a1b26
sideBarStickyScroll.border#414868
sideBarStickyScroll.shadow#16161e
sideBarTitle.foreground#b5c0e0
simpleFindWidget.sashBorder#414868
statusBar.background#1a1b66
statusBar.border#24283b
statusBar.debuggingBackground#bb9af7
statusBar.debuggingBorder#24283b
statusBar.debuggingForeground#1a1b66
statusBar.focusBorder#7aa2f7
statusBar.foreground#c5cfe5
statusBar.noFolderBackground#1a1b66
statusBar.noFolderBorder#24283b
statusBar.noFolderForeground#c5cfe5
statusBarItem.activeBackground#3d59a1
statusBarItem.compactHoverBackground#3d59a1
statusBarItem.errorBackground#f7768e
statusBarItem.errorForeground#1a1b66
statusBarItem.focusBorder#7aa2f7
statusBarItem.hoverBackground#3d59a1
statusBarItem.hoverForeground#c0caf5
statusBarItem.offlineBackground#414868
statusBarItem.offlineForeground#c5cfe5
statusBarItem.offlineHoverBackground#3d59a1
statusBarItem.offlineHoverForeground#c0caf5
statusBarItem.prominentBackground#414868
statusBarItem.prominentForeground#c0caf5
statusBarItem.prominentHoverBackground#7080a8
statusBarItem.prominentHoverForeground#1a1b66
statusBarItem.remoteBackground#9ece6a
statusBarItem.remoteForeground#1a1b66
statusBarItem.remoteHoverBackground#73daca
statusBarItem.remoteHoverForeground#1a1b66
statusBarItem.warningBackground#e0af68
statusBarItem.warningForeground#1a1b66
symbolIcon.arrayForeground#bb9af7
symbolIcon.booleanForeground#ff9e64
symbolIcon.classForeground#e0af68
symbolIcon.colorForeground#c0caf5
symbolIcon.constantForeground#bb9af7
symbolIcon.constructorForeground#7aa2f7
symbolIcon.enumeratorForeground#e0af68
symbolIcon.enumeratorMemberForeground#e0af68
symbolIcon.eventForeground#e0af68
symbolIcon.fieldForeground#9ece6a
symbolIcon.fileForeground#c0caf5
symbolIcon.folderForeground#7aa2f7
symbolIcon.functionForeground#7aa2f7
symbolIcon.interfaceForeground#e0af68
symbolIcon.keyForeground#c0caf5
symbolIcon.keywordForeground#f7768e
symbolIcon.methodForeground#7aa2f7
symbolIcon.moduleForeground#e0af68
symbolIcon.namespaceForeground#e0af68
symbolIcon.nullForeground#bb9af7
symbolIcon.numberForeground#ff9e64
symbolIcon.objectForeground#c0caf5
symbolIcon.operatorForeground#f7768e
symbolIcon.packageForeground#c0caf5
symbolIcon.propertyForeground#9ece6a
symbolIcon.referenceForeground#c0caf5
symbolIcon.snippetForeground#7aa2f7
symbolIcon.stringForeground#9ece6a
symbolIcon.structForeground#e0af68
symbolIcon.textForeground#c0caf5
symbolIcon.typeParameterForeground#7dcfff
symbolIcon.unitForeground#c0caf5
symbolIcon.variableForeground#c0caf5
tab.activeBackground#24283b
tab.activeBorder#7aa2f7
tab.activeBorderTop#7aa2f7
tab.activeForeground#c0caf5
tab.activeModifiedBorder#6b76a1
tab.border#1a1b66
tab.dragAndDropBorder#7aa2f7
tab.hoverBackground#3d59a1
tab.hoverBorder#7aa2f7
tab.hoverForeground#c0caf5
tab.inactiveBackground#1a1b66
tab.inactiveForeground#b5c0e0
tab.inactiveModifiedBorder#6b76a1
tab.lastPinnedBorder#414868
tab.selectedBackground#24283b
tab.selectedBorderTop#7aa2f7
tab.selectedForeground#c0caf5
tab.unfocusedActiveBorder#414868
tab.unfocusedActiveForeground#c5cfe5
tab.unfocusedActiveModifiedBorder#414868
tab.unfocusedHoverBackground#364a82
tab.unfocusedHoverBorder#7080a8
tab.unfocusedHoverForeground#c5cfe5
tab.unfocusedInactiveForeground#7080a8
tab.unfocusedInactiveModifiedBorder#414868
terminal.ansiBlack#9aa7d4
terminal.ansiBlue#7aa2f7
terminal.ansiBrightBlack#bcc8ef
terminal.ansiBrightBlue#96b6f9
terminal.ansiBrightCyan#9ad8ff
terminal.ansiBrightGreen#b4e08a
terminal.ansiBrightMagenta#ceaff9
terminal.ansiBrightRed#ff8fa3
terminal.ansiBrightWhite#c0caf5
terminal.ansiBrightYellow#ecc47e
terminal.ansiCyan#7dcfff
terminal.ansiGreen#9ece6a
terminal.ansiMagenta#bb9af7
terminal.ansiRed#f7768e
terminal.ansiWhite#c5cfe5
terminal.ansiYellow#e0af68
terminal.background#1a1b66
terminal.border#414868
terminal.foreground#c5cfe5
terminal.initialHintForeground#a2aed4
terminal.selectionBackground#364a8266
terminal.selectionForeground#c5cfe5
terminal.tab.activeBorder#7aa2f7
terminalCommandDecoration.defaultBackground#c5cfe5
terminalCommandDecoration.errorBackground#f7768e
terminalCommandDecoration.successBackground#9ece6a
terminalCommandGuide.foreground#5a6391
terminalCursor.background#00000000
terminalCursor.foreground#c0caf5
terminalOverviewRuler.border#414868
terminalStickyScroll.background#1a1b26
terminalStickyScroll.border#414868
terminalStickyScrollHover.background#364a82
testing.coverCountBadgeBackground#3b4261
testing.coverCountBadgeForeground#c0caf5
testing.coveredMinimapBackground#9ece6a4D
testing.iconErrored#f7768e
testing.iconFailed#f7768e
testing.iconPassed#9ece6a
testing.iconQueued#e0af68
testing.iconSkipped#bb9af7
testing.iconUnset#7080a8
testing.message.error.badgeBackground#f7768e
testing.message.error.badgeBorder#f7768e
testing.message.error.badgeForeground#1a1b26
testing.message.error.decorationForeground#f7768e
testing.message.error.lineBackground#f7768e66
testing.message.info.decorationForeground#7aa2f7
testing.message.info.lineBackground#7aa2f766
testing.runAction#9ece6a
testing.uncoveredBranchBackground#f7768e1A
testing.uncoveredMinimapBackground#f7768e4D
textBlockQuote.background#414868
textBlockQuote.border#7aa2f7
textCodeBlock.background#414868
textLink.activeForeground#7aa2f7
textLink.foreground#7aa2f7
textPreformat.foreground#c0caf5
textSeparator.foreground#a2aed4
titleBar.activeBackground#1a1b66
titleBar.activeForeground#E0E7FF
titleBar.border#24283b
titleBar.inactiveBackground#1a1b66
titleBar.inactiveForeground#E0E7FF
toolbar.activeBackground#FFFFFF20
toolbar.hoverBackground#FFFFFF15
toolbar.hoverOutline#00000000
tree.inactiveIndentGuidesStroke#414868
tree.indentGuidesStroke#7080a8
walkThrough.embeddedEditorBackground#24283b
welcomePage.buttonBackground#414868
welcomePage.buttonHoverBackground#4f5d82
welcomePage.buttonHoverForeground#edf2ff
welcomePage.progress.background#7aa2f7
welcomePage.progress.foreground#7aa2f7
welcomePage.tileBackground#414868
welcomePage.tileHoverBackground#4f5d82
welcomePage.tileHoverForeground#edf2ff
welcomePage.tileShadow#16161e
widget.border#7080a8
widget.shadow#16161e

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	#afb6d2	italic
comment storage.type	#afb6d2	—
comment entity.name.type	#8ec0d8	—
comment variable, comment variable.other	#8ec0d8	—
comment keyword, comment entity.name.tag, entity.name.tag.documentation	#8ec0d8	—
comment keyword.codetag.notation	#afb6d2	—
comment.git-status.header.remote	#f99daf	—
comment.git-status.header.local	#a0bff9	—
comment.other.git-status.head	#b5bbd2	—
string.quoted.docstring, string.quoted.docstring punctuation.definition	#afb6d2	—
constant	#bb9af7	—
constant.other	#c0caf5	—
constant.other.caps	#bb9af7	—
constant.other.placeholder	#ff9e64	—
constant.other.property	#bb9af7	—
constant.other.citation.latex	#bb9af7	—
constant.other.color	#bb9af7	—
constant.other.character-class.escape	#bb9af7	—
constant.other.key	#bb9af7	—
constant.other.symbol	#ff9e64	—
constant.other.elm	#7aa2f7	—
constant.numeric	#ff9e64	—
constant.language	#bb9af7	—
constant.character.escape	#bb9af7	—
constant.numeric.line-number.find-in-files	#8A95BE	—
constant.numeric.line-number.match.find-in-files	#e0af68	—
entity.name.section	#e0af68	—
entity.name.function, entity.name.function.templated, entity.name.function.member.static	#7aa2f7	—
entity.name.type.class.templated, entity.name.type.class.generic, entity.name.type.namespace	#e0af68	—
entity.name.label	#bb9af7	—
entity.name.function.preprocessor	#7aa2f7	—
entity.name	#7aa2f7	—
entity.name.class	#e0af68	—
entity.name.constant	#bb9af7	—
entity.name.namespace	#c0caf5	—
entity.other.inherited-class	#e0af68	italic
entity.name.function	#7aa2f7	—
entity.name.tag, entity.name.tag.js.jsx support.class.component.js.jsx, entity.name.tag support.class.component, source.vue support.class.component	#f7768e	—
source.ansible entity.name.tag	#7aa2f7	—
entity.name.function.operator	#f7768e	—
meta.brackets entity.name.function.operator, punctuation.separator entity.name.function.operator	#8A95BE	—
entity.name.type, entity.name.type.class.reference, entity.name.type.class.value	#e0af68	—
entity.other.attribute-name	#7aa2f7	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	#e0af68	—
entity.other.attribute-name.id.css	#ff9e64	—
entity.other.attribute-name.pseudo-class.css, entity.other.pseudo-class.css, entity.other.pseudo-element.css	#7aa2f7	italic
entity.name.function, support.function	#7aa2f7	—
entity.other.git-status.hex	#bb9af7	—
entity.other.jinja2.delimiter	#8A95BE	—
entity.name.operator.custom-literal	#c0caf5	—
entity.name.operator.custom-literal.string	#9ece6a	—
entity.name.operator.custom-literal.number	#ff9e64	—
entity.name.type.rust	#e0af68	—
entity.name.lifetime.rust	#f7768e	—
invalid	#f7768e	italic underline
invalid.deprecated	#ff9e64	italic underline
keyword	#f7768e	—
keyword.control	#f7768e	—
keyword.control.directive	#f7768e	—
keyword.operator, keyword.operator.member, keyword.operator.new	#f7768e	—
keyword.other.substitution	#8A95BE	—
keyword.other.template.begin, keyword.other.template.end	#f7768e	—
keyword.operator.heading.restructuredtext, keyword.operator.table.row.restructuredtext keyword.operator.table.data.restructuredtext	#8A95BE	—
keyword.other.parenthesis.elm	#8A95BE	—
keyword.other.fn.rust, keyword.other.rust, keyword.other.unsafe.rust, keyword.other.where.rust	#7aa2f7	—
keyword.control.rust, keyword.operator.misc.rust	#f7768e	—
keyword.declaration.class.ruby, keyword.declaration.function.ruby, keyword.declaration.namespace.ruby	#f7768e	—
markup.italic	—	italic
markup.bold	—	bold
markup.heading	#e0af68	—
markup.raw	#ff9e64	—
markup.underline	—	underline
markup.underline.link	#7aa2f7	—
markup.inserted, markup.inserted punctuation.definition.inserted	#9ece6a	—
markup.deleted, markup.deleted punctuation.definition.deleted	#f7768e	—
markup.changed, markup.changed punctuation.definition.changed	#e0af68	—
markup.ignored, markup.ignored punctuation.definition.ignored	#8A95BE	—
markup.untracked	#8A95BE	—
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	#8A95BE	—
meta.function-call.generic.python, support.function.builtin.python	#7aa2f7	—
meta.function-call.python meta.function-call.arguments.python	#c0caf5	—
meta.interpolation	#ff9e64	—
meta.instance.constructor	#7aa2f7	—
meta.attribute-with-value.class string, meta.attribute.class.html string	#e0af68	—
meta.attribute-with-value.id string, meta.attribute.id.html string	#ff9e64	—
source.json meta.mapping.key string	#c0caf5	—
source.yaml meta.mapping.key string	#f7768e	—
meta.object.member	#c0caf5	—
meta.property-list.css variable.other	#ff9e64	—
entity.name.constant.preprocessor, meta.preprocessor	#bb9af7	—
meta.diff.git-diff.header	#e0af68	—
meta.type_params.rust	#c0caf5	—
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	#7dcfff	—
meta.type variable, meta.type variable.other.readwrite	#bb9af7	—
punctuation	#8A95BE	—
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	#8A95BE	—
punctuation.definition.group	#c0caf5	—
punctuation.definition.comment	#afb6d2	—
punctuation.definition.variable, punctuation.definition.keyword.scss, punctuation.definition.entity.css	#7dcfff	—
punctuation.section.embedded, punctuation.section.embedded entity.name.tag, punctuation.section.embedded constant.other, punctuation.section.embedded source, punctuation.section.embedded.begin	#ff9e64	—
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	#f7768e	—
meta.paragraph.markdown meta.dummy.line-break, meta.paragraph.markdown meta.hard-line-break.markdown	—	—
markup.underline.link punctuation	#7aa2f7	—
meta.brace.round, meta.brace.square, keyword.operator.type.annotation, meta.type storage.modifier.array	#8A95BE	—
region.redish	#f7768e	—
region.orangish	#ff9e64	—
region.yellowish	#e0af68	—
region.greenish	#9ece6a	—
region.bluish	#7aa2f7	—
region.purplish	#bb9af7	—
region.pinkish	#f7768e	—
region.whitish	#c0caf5	—
source	#c0caf5	—
source.scss, source.sass	#8A95BE	—
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	#ff9e64	italic
source.git-show.commit.sha	#bb9af7	—
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	#8A95BE	—
source.git-show meta.diff.git-diff.header.extended.index.from-sha, source.git-show meta.diff.git-diff.header.extended.index.to-sha	#bb9af7	—
source.git-show meta.diff.range.unified	#ff9e64	—
source.git-show meta.diff.header.from-file, source.git-show meta.diff.header.to-file	#8A95BE	—
storage	#f7768e	—
storage.type	#7aa2f7	italic
storage.type.extends	#f7768e	normal
storage.type.function.arrow	#f7768e	normal
storage.modifier, storage.type.modifier	#f7768e	italic
storage.class.restructuredtext.ref	#bb9af7	—
storage.modifier.visibility.rust, storage.modifier.lifetime.rust	#f7768e	—
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	#f7768e	—
storage.modifier.import.java	#c0caf5	—
string	#9ece6a	—
string.unquoted.label	#c0caf5	—
string source	#c0caf5	—
string source punctuation.section.embedded, string punctuation.definition.string source	#8A95BE	—
string.other.link.title, string.other.link.description	#f7768e	—
string.other.link.description.title	#7aa2f7	—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end	#f7768e	—
string.other.ref, string.other.restructuredtext.ref	#7aa2f7	—
string.other.git-status.help.key	#7dcfff	—
string.other.git-status.remote	#f7768e	—
support.constant	#7aa2f7	—
support.constant.handlebars	#8A95BE	—
support.type.vendor-prefix.css	#7dcfff	—
support.function	#7aa2f7	—
support.macro	#7aa2f7	—
support.function.delimiter.elm	#8A95BE	—
support.type, entity.name.type.object.console	#7aa2f7	italic
support.variable, support.variable.property	#7aa2f7	—
support.type.property-name	#c0caf5	normal
support.class	#e0af68	—
support.constant.core.rust	#bb9af7	—
comment support, comment support.class	#afb6d2	—
text	#c0caf5	—
text.find-in-files	#c0caf5	—
variable, variable.other	#c0caf5	—
variable.parameter, parameters variable.function	#ff9e64	italic
variable.language, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python	#7dcfff	italic
variable.language.arguments	#bb9af7	—
variable.other.class	#e0af68	—
variable.other.constant	#bb9af7	—
variable.other.readwrite	#c0caf5	—
variable.other.member	#c0caf5	—
variable.other.enummember	#bb9af7	—
variable.other.property, variable.other.property.static, variable.other.event	#c0caf5	—
variable.function	#7aa2f7	—
variable.other.substitution	#ff9e64	—
source.ruby variable.other.readwrite.instance.ruby, source.ruby variable.other.readwrite.class.ruby	#bb9af7	—
source.jinja2 variable.other.jinja2.block	#7aa2f7	—
source.jinja2 variable.other.jinja2	#ff9e64	—

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