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 — Digital Aqua

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#7CD5F1
activityBar.activeFocusBorder#ffed72
activityBar.background#161b1e
activityBar.border#161b1e
activityBar.foreground#7CD5F1
activityBar.inactiveForeground#A2E57B
activityBarBadge.background#7CD5F1
activityBarBadge.foreground#273136
activityBarTop.activeBorder#7CD5F1
activityBarTop.background#1d2528
activityBarTop.foreground#7CD5F1
activityBarTop.inactiveForeground#A2E57B
activityErrorBadge.background#ff6d7e
activityErrorBadge.foreground#273136
activityWarningBadge.background#ffb270
activityWarningBadge.foreground#273136
agentSessionReadIndicator.foreground#7cd5f1
agentSessionSelectedBadge.border#ffed72
agentSessionSelectedUnfocusedBadge.border#879295
agentStatusIndicator.background#a2e57b4D
aiCustomizationManagement.sashBorder#545f62
badge.background#7CD5F1
badge.foreground#273136
banner.background#3a4449
banner.foreground#b8c4c3
banner.iconForeground#b8c4c3
breadcrumb.activeSelectionForeground#f2fffc
breadcrumb.background#273136
breadcrumb.focusForeground#b8c4c3
breadcrumb.foreground#aeb9bb
breadcrumbPicker.background#273136
button.background#3a4449
button.border#879295
button.foreground#f2fffc
button.hoverBackground#545f62
button.secondaryBackground#3a4449
button.secondaryForeground#b8c4c3
button.secondaryHoverBackground#545f62
button.secondaryHoverForeground#f2fffc
button.separator#273136
charts.blue#7cd5f1
charts.foreground#f2fffc
charts.green#a2e57b
charts.lines#6b7678
charts.orange#ffb270
charts.purple#baa0f8
charts.red#ff6d7e
charts.yellow#ffed72
chat.avatarBackground#273136
chat.avatarForeground#baa0f8
chat.checkpointSeparator#545f62
chat.editedFileForeground#ffed72
chat.inputWorkingBorderColor1#7CD5F1
chat.inputWorkingBorderColor2#3a7a94
chat.linesAddedForeground#a2e57b
chat.linesRemovedForeground#ff6d7e
chat.requestBackground#7cd5f11F
chat.requestBorder#7cd5f166
chat.requestBubbleBackground#7cd5f133
chat.requestBubbleForeground#f2fffc
chat.requestBubbleHoverBackground#7cd5f14D
chat.requestCodeBorder#7cd5f14D
chat.slashCommandBackground#00000000
chat.slashCommandForeground#ffed72
chat.thinkingShimmer#7cd5f166
chatBarTitle.background#1d2528
chatBarTitle.foreground#aeb9bb
chatManagement.sashBorder#545f62
checkbox.background#3a4449
checkbox.border#545f62
checkbox.disabled.background#1d2528
checkbox.disabled.foreground#666666
checkbox.foreground#ffed72
checkbox.selectBackground#3a4449
checkbox.selectBorder#545f62
commandCenter.activeBackground#273136
commandCenter.activeBorder#7cd5f1
commandCenter.activeForeground#A2E57B
commandCenter.background#1d2528
commandCenter.border#273136
commandCenter.debuggingBackground#1d2528
commandCenter.debuggingForeground#f2fffc
commandCenter.foreground#A2E57B
commandCenter.inactiveBorder#273136
commandCenter.inactiveForeground#A2E57B
debugConsole.errorForeground#ff6d7e
debugConsole.infoForeground#7cd5f1
debugConsole.sourceForeground#f2fffc
debugConsole.warningForeground#ffb270
debugConsoleInputIcon.foreground#ffed72
debugExceptionWidget.background#3a4449
debugExceptionWidget.border#1d2528
debugIcon.breakpointCurrentStackframeForeground#ffed72
debugIcon.breakpointDisabledForeground#b8c4c3
debugIcon.breakpointForeground#ff6d7e
debugIcon.breakpointStackframeForeground#f2fffc
debugIcon.breakpointUnverifiedForeground#ffb270
debugIcon.continueForeground#f2fffc
debugIcon.disconnectForeground#f2fffc
debugIcon.pauseForeground#f2fffc
debugIcon.restartForeground#a2e57b
debugIcon.startForeground#a2e57b
debugIcon.stepBackForeground#f2fffc
debugIcon.stepIntoForeground#f2fffc
debugIcon.stepOutForeground#f2fffc
debugIcon.stepOverForeground#f2fffc
debugIcon.stopForeground#ff6d7e
debugTokenExpression.boolean#ffb270
debugTokenExpression.error#ff6d7e
debugTokenExpression.name#7cd5f1
debugTokenExpression.number#baa0f8
debugTokenExpression.string#ffed72
debugTokenExpression.value#f2fffc
debugToolBar.background#3a4449
debugView.exceptionLabelBackground#ff6d7e
debugView.exceptionLabelForeground#273136
debugView.stateLabelBackground#a2e57b
debugView.stateLabelForeground#273136
debugView.valueChangedHighlight#ffed72
descriptionForeground#aeb9bb
diffEditor.diagonalFill#3a4449
diffEditor.insertedLineBackground#a2e57b48
diffEditor.insertedTextBackground#a2e57b50
diffEditor.move.border#7cd5f14d
diffEditor.moveActive.border#7cd5f180
diffEditor.removedLineBackground#ff6d7e59
diffEditor.removedTextBackground#ff6d7e66
diffEditor.unchangedCodeBackground#1d2528
diffEditor.unchangedRegionBackground#1d2528
diffEditor.unchangedRegionForeground#b8c4c3
diffEditor.unchangedRegionShadow#161b1e
diffEditorGutter.insertedLineBackground#a2e57b80
diffEditorGutter.removedLineBackground#ff6d7e80
diffEditorOverview.insertedForeground#a2e57ba5
diffEditorOverview.removedForeground#ff6d7ea5
disabledForeground#a2adb0
dropdown.background#3a4449
dropdown.border#879295
dropdown.foreground#aeb9bb
dropdown.listBackground#3a4449
editor.background#273136
editor.compositionBorder#7cd5f1
editor.findMatchBackground#a2e57b4d
editor.findMatchBorder#ffed72
editor.findMatchForeground#f2fffc
editor.findMatchHighlightBackground#a2e57b4D
editor.findMatchHighlightBorder#00000000
editor.findMatchHighlightForeground#f2fffc
editor.findRangeHighlightBackground#a2e57b35
editor.findRangeHighlightBorder#00000000
editor.focusedStackFrameHighlightBackground#b8c4c366
editor.foldBackground#f2fffc0c
editor.foldPlaceholderForeground#879295
editor.foreground#f2fffc
editor.hoverHighlightBackground#f2fffc0c
editor.inactiveLineHighlightBackground#7cd5f10d
editor.inactiveSelectionBackground#f2fffc0c
editor.inlineValuesBackground#3f4e53
editor.inlineValuesForeground#b8c4c3
editor.lineHighlightBackground#7cd5f126
editor.lineHighlightBorder#00000000
editor.linkedEditingBackground#3a4449
editor.placeholder.foreground#879295
editor.rangeHighlightBackground#3a4449
editor.rangeHighlightBorder#3a4449
editor.selectionBackground#7cd5f166
editor.selectionForeground#f2fffc
editor.selectionHighlightBackground#7cd5f14d
editor.selectionHighlightBorder#00000000
editor.stackFrameHighlightBackground#b8c4c366
editor.wordHighlightBackground#a2e57b40
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#a2e57b4d
editor.wordHighlightStrongBorder#00000000
editorActionList.background#3a4449
editorActionList.focusBackground#6b7678
editorActionList.focusForeground#f2fffc
editorActionList.foreground#b8c4c3
editorBracketHighlight.foreground1#ff6d7e
editorBracketHighlight.foreground2#ffb270
editorBracketHighlight.foreground3#ffed72
editorBracketHighlight.foreground4#a2e57b
editorBracketHighlight.foreground5#7cd5f1
editorBracketHighlight.foreground6#baa0f8
editorBracketMatch.background#273136
editorBracketMatch.border#6b7678
editorBracketMatch.foreground#7cd5f1
editorCodeLens.foreground#98a3a6
editorCommentsWidget.rangeActiveBackground#7cd5f14d
editorCommentsWidget.rangeBackground#7cd5f126
editorCommentsWidget.resolvedBorder#a2e57b
editorCommentsWidget.unresolvedBorder#ffb270
editorCursor.background#273136
editorCursor.foreground#f2fffc
editorError.background#00000000
editorError.border#00000000
editorError.foreground#ff6d7e
editorGhostText.background#00000000
editorGhostText.border#00000000
editorGhostText.foreground#98a3a6
editorGroup.border#1d2528
editorGroup.dropBackground#1d2528bf
editorGroup.emptyBackground#161b1e
editorGroup.focusedEmptyBorder#1d2528
editorGroupHeader.noTabsBackground#273136
editorGroupHeader.tabsBackground#273136
editorGroupHeader.tabsBorder#273136
editorGutter.addedBackground#a2e57b
editorGutter.addedSecondaryBackground#a2e57b80
editorGutter.background#273136
editorGutter.commentDraftGlyphForeground#7cd5f1
editorGutter.commentGlyphForeground#aeb9bb
editorGutter.commentUnresolvedGlyphForeground#ffb270
editorGutter.deletedBackground#ff6d7e
editorGutter.deletedSecondaryBackground#ff6d7e80
editorGutter.foldingControlForeground#b8c4c3
editorGutter.itemBackground#27313600
editorGutter.itemGlyphForeground#b8c4c3
editorGutter.modifiedBackground#ffb270
editorGutter.modifiedSecondaryBackground#ffb27080
editorHint.border#273136
editorHint.foreground#baa0f8
editorHoverWidget.background#3a4449
editorHoverWidget.border#1d2528
editorHoverWidget.foreground#b8c4c3
editorIndentGuide.activeBackground#6d9298
editorIndentGuide.background#577f88
editorInfo.background#00000000
editorInfo.border#273136
editorInfo.foreground#7cd5f1
editorInlayHint.background#3a4449
editorInlayHint.foreground#aeb9bb
editorLightBulb.foreground#ffed72
editorLightBulbAi.foreground#ffed72
editorLightBulbAutoFix.foreground#a2e57b
editorLineNumber.activeForeground#b8c4c3
editorLineNumber.foreground#9FA4AB
editorLink.activeForeground#7cd5f1
editorMarkerNavigation.background#3a4449
editorMarkerNavigationError.background#ff6d7e
editorMarkerNavigationInfo.background#7cd5f1
editorMarkerNavigationWarning.background#ffb270
editorMinimap.inlineChatInserted#a2e57b4d
editorMinimap.inlineChatRemoved#ff6d7e4D
editorMultiCursor.primary.background#273136
editorMultiCursor.primary.foreground#f2fffc
editorMultiCursor.secondary.background#273136
editorMultiCursor.secondary.foreground#7cd5f1
editorOverviewRuler.addedForeground#a2e57b
editorOverviewRuler.border#273136
editorOverviewRuler.commentDraftForeground#7cd5f180
editorOverviewRuler.currentContentForeground#3a4449
editorOverviewRuler.deletedForeground#ff6d7e
editorOverviewRuler.errorForeground#ff6d7e
editorOverviewRuler.findMatchForeground#f2fffcc0
editorOverviewRuler.incomingContentForeground#3a4449
editorOverviewRuler.infoForeground#7cd5f1
editorOverviewRuler.inlineChatInserted#a2e57b80
editorOverviewRuler.inlineChatRemoved#ff6d7e80
editorOverviewRuler.modifiedForeground#ffb270
editorOverviewRuler.rangeHighlightForeground#f2fffc66
editorOverviewRuler.selectionHighlightForeground#f2fffcc0
editorOverviewRuler.warningForeground#ffb270
editorOverviewRuler.wordHighlightForeground#f2fffc66
editorOverviewRuler.wordHighlightStrongForeground#f2fffc66
editorPane.background#273136
editorRuler.foreground#545f62
editorStickyScroll.background#273136
editorStickyScroll.border#3a4449
editorStickyScroll.shadow#273136
editorStickyScrollGutter.background#273136
editorStickyScrollHover.background#f2fffc0c
editorSuggestWidget.background#3a4449
editorSuggestWidget.border#1d2528
editorSuggestWidget.foreground#b8c4c3
editorSuggestWidget.highlightForeground#f2fffc
editorSuggestWidget.selectedBackground#6b7678
editorSuggestWidget.selectedForeground#f2fffc
editorSuggestWidget.selectedIconForeground#ffed72
editorUnnecessaryCode.opacity#000000a5
editorWarning.background#00000000
editorWarning.border#00000000
editorWarning.foreground#ffb270
editorWhitespace.foreground#9aa4a7
editorWidget.background#3a4449
editorWidget.border#1d2528
editorWidget.foreground#b8c4c3
errorForeground#ff9eab
extensionBadge.remoteForeground#a2e57b
extensionButton.background#3a4449
extensionButton.foreground#b8c4c3
extensionButton.hoverBackground#545f62
extensionButton.prominentBackground#3a4449
extensionButton.prominentForeground#f2fffc
extensionButton.prominentHoverBackground#545f62
extensionIcon.preReleaseForeground#baa0f8
extensionIcon.privateForeground#879295
extensionIcon.sponsorForeground#7cd5f1
extensionIcon.starForeground#ffed72
extensionIcon.verifiedForeground#a2e57b
focusBorder#7cd5f1
foreground#aeb9bb
gauge.background#3a4449
gauge.border#545f62
gauge.errorBackground#ff6d7e
gauge.errorForeground#273136
gauge.foreground#7cd5f1
gauge.warningBackground#ffb270
gauge.warningForeground#273136
git.blame.editorDecorationForeground#879295
gitDecoration.addedResourceForeground#a2e57b
gitDecoration.conflictingResourceForeground#ffb270
gitDecoration.deletedResourceForeground#ff6d7e
gitDecoration.ignoredResourceForeground#9aa4a7
gitDecoration.modifiedResourceForeground#ffed72
gitDecoration.renamedResourceForeground#7CD5F1
gitDecoration.stageDeletedResourceForeground#ff6d7e
gitDecoration.stageModifiedResourceForeground#ffed72
gitDecoration.untrackedResourceForeground#b8c4c3
icon.foreground#A2E57B
inlineChat.background#273136
inlineChat.border#1d2528
inlineChat.foreground#b8c4c3
inlineChat.regionHighlight#7cd5f11A
inlineChat.shadow#161b1e
inlineChatDiff.inserted#a2e57b66
inlineChatDiff.removed#ff6d7e66
inlineChatInput.background#3a4449
inlineChatInput.border#545f62
inlineChatInput.focusBorder#7cd5f1
inlineChatInput.placeholderForeground#879295
inlineEdit.gutterIndicator.background#273136
inlineEdit.gutterIndicator.primaryBackground#7cd5f1
inlineEdit.gutterIndicator.primaryBorder#7cd5f1
inlineEdit.gutterIndicator.primaryForeground#f2fffc
inlineEdit.gutterIndicator.secondaryBackground#baa0f8
inlineEdit.gutterIndicator.secondaryBorder#baa0f8
inlineEdit.gutterIndicator.secondaryForeground#f2fffc
inlineEdit.gutterIndicator.successfulBackground#a2e57b
inlineEdit.gutterIndicator.successfulBorder#a2e57b
inlineEdit.gutterIndicator.successfulForeground#f2fffc
inlineEdit.modifiedBackground#a2e57b1a
inlineEdit.modifiedBorder#a2e57b4d
inlineEdit.modifiedChangedLineBackground#a2e57b26
inlineEdit.modifiedChangedTextBackground#a2e57b33
inlineEdit.originalBackground#ff6d7e1a
inlineEdit.originalBorder#ff6d7e4d
inlineEdit.originalChangedLineBackground#ff6d7e26
inlineEdit.originalChangedTextBackground#ff6d7e33
inlineEdit.tabWillAcceptModifiedBorder#a2e57b80
inlineEdit.tabWillAcceptOriginalBorder#ff6d7e80
input.background#3a4449
input.border#879295
input.foreground#f2fffc
input.placeholderForeground#aeb9bb
inputOption.activeBackground#7CD5F140
inputOption.activeBorder#7CD5F1
inputOption.activeForeground#A2E57B
inputOption.hoverBackground#7CD5F120
inputValidation.errorBackground#3a4449
inputValidation.errorBorder#ff6d7e
inputValidation.errorForeground#ff6d7e
inputValidation.infoBackground#3a4449
inputValidation.infoBorder#7cd5f1
inputValidation.infoForeground#7cd5f1
inputValidation.warningBackground#3a4449
inputValidation.warningBorder#ffb270
inputValidation.warningForeground#ffb270
interactive.activeCodeBorder#6b7678
interactive.inactiveCodeBorder#3a4449
keybindingLabel.background#545f62
keybindingLabel.border#545f62
keybindingLabel.bottomBorder#545f62
keybindingLabel.foreground#b8c4c3
list.activeSelectionBackground#3a4449
list.activeSelectionForeground#ffed72
list.activeSelectionIconForeground#ffed72
list.dropBackground#1d2528bf
list.errorForeground#ff9eab
list.focusAndSelectionOutline#7cd5f1
list.focusBackground#273136
list.focusForeground#f2fffc
list.focusOutline#7cd5f1
list.highlightForeground#f2fffc
list.hoverBackground#3a4449
list.hoverForeground#f2fffc
list.inactiveFocusBackground#273136
list.inactiveFocusOutline#879295
list.inactiveSelectionBackground#b8c4c30c
list.inactiveSelectionForeground#aeb9bb
list.inactiveSelectionIconForeground#aeb9bb
list.invalidItemForeground#ff6d7e
list.warningForeground#ffb270
listFilterWidget.background#273136
listFilterWidget.noMatchesOutline#ff6d7e
listFilterWidget.outline#273136
listFilterWidget.shadow#161b1e
markdownAlert.caution.foreground#ff6d7e
markdownAlert.important.foreground#baa0f8
markdownAlert.note.foreground#7cd5f1
markdownAlert.tip.foreground#a2e57b
markdownAlert.warning.foreground#ffb270
mcpIcon.starForeground#ffed72
menu.background#273136
menu.border#1d2528
menu.foreground#f2fffc
menu.selectionBackground#ffed72
menu.selectionBorder#00000000
menu.selectionForeground#273136
menu.separatorBackground#3a4449
menubar.selectionBackground#3a4449
menubar.selectionBorder#00000000
menubar.selectionForeground#f2fffc
merge.border#273136
merge.commonContentBackground#f2fffc66
merge.commonHeaderBackground#f2fffc66
merge.currentContentBackground#ff6d7e66
merge.currentHeaderBackground#ff6d7e66
merge.incomingContentBackground#a2e57b66
merge.incomingHeaderBackground#a2e57b66
mergeEditor.change.background#f2fffc66
mergeEditor.change.word.background#f2fffc66
mergeEditor.conflict.handled.minimapOverViewRuler#a2e57b
mergeEditor.conflict.handledFocused.border#a2e57b
mergeEditor.conflict.handledUnfocused.border#a2e57b
mergeEditor.conflict.unhandled.minimapOverViewRuler#ff6d7e
mergeEditor.conflict.unhandledFocused.border#ff6d7e
mergeEditor.conflict.unhandledUnfocused.border#ff6d7e
minimap.chatEditHighlight#7cd5f14d
minimap.errorHighlight#ff6d7ea5
minimap.findMatchHighlight#8b9798a5
minimap.infoHighlight#7cd5f1a5
minimap.selectionHighlight#b8c4c366
minimap.selectionOccurrenceHighlight#6b7678a5
minimap.warningHighlight#ffb270a5
minimapGutter.addedBackground#a2e57b
minimapGutter.deletedBackground#ff6d7e
minimapGutter.modifiedBackground#ffed72
multiDiffEditor.background#273136
multiDiffEditor.border#161b1e
multiDiffEditor.headerBackground#3a4449
notebook.cellBorderColor#3a4449
notebook.cellEditorBackground#1d25287f
notebook.cellInsertionIndicator#f2fffc
notebook.cellStatusBarItemHoverBackground#6b7678
notebook.cellToolbarSeparator#3a4449
notebook.editorBackground#273136
notebook.focusedEditorBorder#6b7678
notebookStatusErrorIcon.foreground#ff6d7e
notebookStatusRunningIcon.foreground#f2fffc
notebookStatusSuccessIcon.foreground#a2e57b
notificationCenter.border#1d2528
notificationCenterHeader.background#3a4449
notificationCenterHeader.foreground#aeb9bb
notificationLink.foreground#ffed72
notifications.background#3a4449
notifications.border#1d2528
notifications.foreground#b8c4c3
notificationsErrorIcon.foreground#ff6d7e
notificationsInfoIcon.foreground#7cd5f1
notificationsWarningIcon.foreground#ffb270
notificationToast.border#1d2528
outputView.background#1d2528
outputViewStickyScroll.background#1d2528
panel.background#3a4449
panel.border#161b1e
panel.dropBackground#1d2528bf
panelStickyScroll.background#3a4449
panelStickyScroll.border#545f62
panelStickyScroll.shadow#3a4449
panelTitle.activeBorder#ffed72
panelTitle.activeForeground#ffed72
panelTitle.border#3a4449
panelTitle.inactiveForeground#aeb9bb
panelTitleBadge.background#ffed72
panelTitleBadge.foreground#273136
peekView.border#1d2528
peekViewEditor.background#3a4449
peekViewEditor.matchHighlightBackground#545f62
peekViewEditorGutter.background#3a4449
peekViewEditorStickyScroll.background#3a4449
peekViewEditorStickyScrollGutter.background#3a4449
peekViewResult.background#3a4449
peekViewResult.fileForeground#aeb9bb
peekViewResult.lineForeground#aeb9bb
peekViewResult.matchHighlightBackground#545f62
peekViewResult.selectionBackground#3a4449
peekViewResult.selectionForeground#f2fffc
peekViewTitle.background#1d2528
peekViewTitleDescription.foreground#aeb9bb
peekViewTitleLabel.foreground#f2fffc
pickerGroup.border#273136
pickerGroup.foreground#aeb9bb
ports.iconRunningProcessForeground#a2e57b
problemsErrorIcon.foreground#ff9eab
problemsInfoIcon.foreground#7cd5f1
problemsWarningIcon.foreground#ffb270
profileBadge.background#7CD5F1
profileBadge.foreground#273136
profiles.sashBorder#545f62
progressBar.background#6b7678
quickInput.background#3a4449
quickInput.border#545f62
quickInput.foreground#aeb9bb
quickInputList.focusBackground#273136
quickInputList.focusForeground#f2fffc
quickInputList.focusHighlightForeground#ffed72
quickInputList.focusIconForeground#ffed72
quickInputList.hoverBackground#3a4449
quickInputTitle.background#273136
radio.activeBackground#7CD5F1
radio.activeBorder#7CD5F1
radio.activeForeground#1d2528
radio.inactiveBackground#3a4449
radio.inactiveBorder#545f62
radio.inactiveForeground#aeb9bb
radio.inactiveHoverBackground#4a5558
sash.hoverBorder#6b7678
scmGraph.foreground1#ff6d7e
scmGraph.foreground2#ffb270
scmGraph.foreground3#ffed72
scmGraph.foreground4#a2e57b
scmGraph.foreground5#baa0f8
scmGraph.historyItemBaseRefColor#7cd5f1
scmGraph.historyItemHoverAdditionsForeground#a2e57b
scmGraph.historyItemHoverDefaultLabelBackground#6b7678
scmGraph.historyItemHoverDefaultLabelForeground#273136
scmGraph.historyItemHoverDeletionsForeground#ff6d7e
scmGraph.historyItemHoverLabelBackground#3a4449
scmGraph.historyItemHoverLabelForeground#273136
scmGraph.historyItemRefColor#baa0f8
scmGraph.historyItemRemoteRefColor#a2e57b
scrollbar.shadow#273136
scrollbarSlider.activeBackground#7cd5f180
scrollbarSlider.background#8792954d
scrollbarSlider.hoverBackground#a2adb066
selection.background#b8c4c366
sessionsSidebar.background#1d2528
sessionsSidebar.border#161b1e
sessionsSidebarHeader.background#1d2528
sessionsSidebarHeader.foreground#879295
settings.checkboxBackground#3a4449
settings.checkboxBorder#545f62
settings.checkboxForeground#ffed72
settings.dropdownBackground#3a4449
settings.dropdownBorder#545f62
settings.dropdownForeground#f2fffc
settings.dropdownListBorder#aeb9bb
settings.headerForeground#ffed72
settings.modifiedItemForeground#ffed72
settings.modifiedItemIndicator#ffed72
settings.numberInputBackground#3a4449
settings.numberInputBorder#545f62
settings.numberInputForeground#f2fffc
settings.rowHoverBackground#6b76780c
settings.sashBorder#3a4449
settings.settingsHeaderHoverForeground#f2fffc
settings.textInputBackground#3a4449
settings.textInputBorder#545f62
settings.textInputForeground#f2fffc
sideBar.background#1d2528
sideBar.border#161b1e
sideBar.dropBackground#1d2528bf
sideBar.foreground#aeb9bb
sideBarSectionHeader.background#1d2528
sideBarSectionHeader.border#161b1e
sideBarSectionHeader.foreground#879295
sideBarStickyScroll.background#1d2528
sideBarStickyScroll.border#3a4449
sideBarStickyScroll.shadow#1d2528
sideBarTitle.foreground#909a9d
simpleFindWidget.sashBorder#545f62
statusBar.background#1d2528
statusBar.border#161b1e
statusBar.debuggingBackground#6b7678
statusBar.debuggingBorder#1d2528
statusBar.debuggingForeground#f2fffc
statusBar.focusBorder#3a4449
statusBar.foreground#879295
statusBar.noFolderBackground#1d2528
statusBar.noFolderBorder#161b1e
statusBar.noFolderForeground#879295
statusBarItem.activeBackground#273136
statusBarItem.compactHoverBackground#1d2528
statusBarItem.errorBackground#273136
statusBarItem.errorForeground#ff6d7e
statusBarItem.focusBorder#6b7678
statusBarItem.hoverBackground#1d2528
statusBarItem.hoverForeground#f2fffc
statusBarItem.offlineBackground#3a4449
statusBarItem.offlineForeground#879295
statusBarItem.offlineHoverBackground#3a4449
statusBarItem.offlineHoverForeground#f2fffc
statusBarItem.prominentBackground#3a4449
statusBarItem.prominentForeground#f2fffc
statusBarItem.prominentHoverBackground#3a4449
statusBarItem.prominentHoverForeground#f2fffc
statusBarItem.remoteBackground#1d2528
statusBarItem.remoteForeground#a2e57b
statusBarItem.remoteHoverBackground#a2e57b
statusBarItem.remoteHoverForeground#273136
statusBarItem.warningBackground#273136
statusBarItem.warningForeground#ffb270
symbolIcon.arrayForeground#ff6d7e
symbolIcon.booleanForeground#ff6d7e
symbolIcon.classForeground#7cd5f1
symbolIcon.colorForeground#baa0f8
symbolIcon.constantForeground#baa0f8
symbolIcon.constructorForeground#a2e57b
symbolIcon.enumeratorForeground#ffb270
symbolIcon.enumeratorMemberForeground#ffb270
symbolIcon.eventForeground#ffb270
symbolIcon.fieldForeground#ffb270
symbolIcon.fileForeground#b8c4c3
symbolIcon.folderForeground#b8c4c3
symbolIcon.functionForeground#a2e57b
symbolIcon.interfaceForeground#7cd5f1
symbolIcon.keyForeground#ffb270
symbolIcon.keywordForeground#ff6d7e
symbolIcon.methodForeground#a2e57b
symbolIcon.moduleForeground#7cd5f1
symbolIcon.namespaceForeground#7cd5f1
symbolIcon.nullForeground#baa0f8
symbolIcon.numberForeground#baa0f8
symbolIcon.objectForeground#7cd5f1
symbolIcon.operatorForeground#ff6d7e
symbolIcon.packageForeground#baa0f8
symbolIcon.propertyForeground#ffb270
symbolIcon.referenceForeground#baa0f8
symbolIcon.snippetForeground#a2e57b
symbolIcon.stringForeground#ffed72
symbolIcon.structForeground#ff6d7e
symbolIcon.textForeground#ffed72
symbolIcon.typeParameterForeground#ffb270
symbolIcon.unitForeground#baa0f8
symbolIcon.variableForeground#7cd5f1
tab.activeBackground#273136
tab.activeBorder#ffed72
tab.activeBorderTop#ffed72
tab.activeForeground#ffed72
tab.activeModifiedBorder#879295
tab.border#273136
tab.dragAndDropBorder#7cd5f1
tab.hoverBackground#273136
tab.hoverBorder#545f62
tab.hoverForeground#f2fffc
tab.inactiveBackground#273136
tab.inactiveForeground#aeb9bb
tab.inactiveModifiedBorder#879295
tab.lastPinnedBorder#545f62
tab.selectedBackground#273136
tab.selectedBorderTop#ffed72
tab.selectedForeground#ffed72
tab.unfocusedActiveBorder#aeb9bb
tab.unfocusedActiveForeground#b8c4c3
tab.unfocusedActiveModifiedBorder#3a4449
tab.unfocusedHoverBackground#273136
tab.unfocusedHoverBorder#273136
tab.unfocusedHoverForeground#b8c4c3
tab.unfocusedInactiveForeground#aeb9bb
tab.unfocusedInactiveModifiedBorder#3a4449
terminal.ansiBlack#aeb9bb
terminal.ansiBlue#ffb270
terminal.ansiBrightBlack#c0cbce
terminal.ansiBrightBlue#ffc28a
terminal.ansiBrightCyan#96e0f5
terminal.ansiBrightGreen#b8ec99
terminal.ansiBrightMagenta#cdb6fa
terminal.ansiBrightRed#ff9eab
terminal.ansiBrightWhite#f8fffe
terminal.ansiBrightYellow#fff28e
terminal.ansiCyan#7cd5f1
terminal.ansiGreen#a2e57b
terminal.ansiMagenta#baa0f8
terminal.ansiRed#ff8f9e
terminal.ansiWhite#f2fffc
terminal.ansiYellow#ffed72
terminal.background#3a4449
terminal.border#161b1e
terminal.foreground#f2fffc
terminal.initialHintForeground#879295
terminal.selectionBackground#f2fffc66
terminal.selectionForeground#f2fffc
terminal.tab.activeBorder#ffed72
terminalCommandDecoration.defaultBackground#f2fffc
terminalCommandDecoration.errorBackground#ff6d7e
terminalCommandDecoration.successBackground#a2e57b
terminalCommandGuide.foreground#545f62
terminalCursor.background#00000000
terminalCursor.foreground#f2fffc
terminalOverviewRuler.border#273136
terminalStickyScroll.background#3a4449
terminalStickyScroll.border#545f62
terminalStickyScrollHover.background#f2fffc0c
testing.coverCountBadgeBackground#a2e57b
testing.coverCountBadgeForeground#273136
testing.coveredMinimapBackground#a2e57b66
testing.iconErrored#ff6d7e
testing.iconFailed#ff6d7e
testing.iconPassed#a2e57b
testing.iconQueued#f2fffc
testing.iconSkipped#ffb270
testing.iconUnset#aeb9bb
testing.message.error.badgeBackground#ff6d7e
testing.message.error.badgeBorder#ff6d7e
testing.message.error.badgeForeground#161b1e
testing.message.error.decorationForeground#ff6d7e
testing.message.error.lineBackground#ff6d7e66
testing.message.info.decorationForeground#f2fffc
testing.message.info.lineBackground#f2fffc66
testing.runAction#ffed72
testing.uncoveredBranchBackground#ff6d7e33
testing.uncoveredMinimapBackground#ff6d7e80
textBlockQuote.background#3a4449
textBlockQuote.border#3a4449
textCodeBlock.background#3a4449
textLink.activeForeground#f2fffc
textLink.foreground#ffed72
textPreformat.foreground#f2fffc
textSeparator.foreground#98a3a6
titleBar.activeBackground#1d2528
titleBar.activeForeground#A2E57B
titleBar.border#161b1e
titleBar.inactiveBackground#1d2528
titleBar.inactiveForeground#A2E57B
toolbar.activeBackground#FFFFFF20
toolbar.hoverBackground#FFFFFF15
toolbar.hoverOutline#00000000
tree.inactiveIndentGuidesStroke#273136
tree.indentGuidesStroke#3a4449
walkThrough.embeddedEditorBackground#1d2528
welcomePage.buttonBackground#3a4449
welcomePage.buttonHoverBackground#545f62
welcomePage.buttonHoverForeground#f2fffc
welcomePage.progress.background#6b7678
welcomePage.progress.foreground#aeb9bb
welcomePage.tileBackground#3a4449
welcomePage.tileHoverBackground#545f62
welcomePage.tileHoverForeground#f2fffc
welcomePage.tileShadow#161b1e
widget.border#1d2528
widget.shadow#161b1e

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

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