Skip to main content
Coding Theme

M Tech Themes

Publisher: M TechThemes in package: 23

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

The requested theme was not found on this page; showing the first available theme.

Color themes

VS Code preview

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

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • activityBar.activeBackground#00000000
  • activityBar.activeBorder#A3C5F0
  • activityBar.activeFocusBorder#A3C5F0
  • activityBar.background#2e3440
  • activityBar.border#2e3440
  • activityBar.foreground#ECEFF4
  • activityBar.inactiveForeground#88C0D0
  • activityBarBadge.background#A3C5F0
  • activityBarBadge.foreground#2e3440
  • activityBarTop.activeBorder#A3C5F0
  • activityBarTop.background#3b4252
  • activityBarTop.foreground#ECEFF4
  • activityBarTop.inactiveForeground#88C0D0
  • activityErrorBadge.background#BF616A
  • activityErrorBadge.foreground#ECEFF4
  • activityWarningBadge.background#EBCB8B
  • activityWarningBadge.foreground#2E3440
  • agentSessionReadIndicator.foreground#88C0D0
  • agentSessionSelectedBadge.border#A3C5F0
  • agentSessionSelectedUnfocusedBadge.border#5E81AC
  • agentStatusIndicator.background#88C0D066
  • aiCustomizationManagement.sashBorder#434c5e
  • badge.background#A3C5F0
  • badge.foreground#2e3440
  • banner.background#434c5e
  • banner.foreground#FFFFFF
  • banner.iconForeground#FFFFFF
  • breadcrumb.activeSelectionForeground#FFFFFF
  • breadcrumb.background#3B4252
  • breadcrumb.focusForeground#A3C5F0
  • breadcrumb.foreground#FFFFFF
  • breadcrumbPicker.background#3b4252
  • button.background#5E81AC
  • button.border#434C5E
  • button.foreground#FFFFFF
  • button.hoverBackground#5E81AC
  • button.secondaryBackground#434c5e
  • button.secondaryForeground#FFFFFF
  • button.secondaryHoverBackground#4C566A
  • button.secondaryHoverForeground#2E3440
  • button.separator#3b4252
  • charts.blue#A3C5F0
  • charts.foreground#FFFFFF
  • charts.green#a3be8c
  • charts.lines#434c5e
  • charts.orange#D08770
  • charts.purple#D4AECE
  • charts.red#BF616A
  • charts.yellow#ebcb8b
  • chat.avatarBackground#3b4252
  • chat.avatarForeground#D4AECE
  • chat.checkpointSeparator#434c5e
  • chat.editedFileForeground#ebcb8b
  • chat.inputWorkingBorderColor1#5E81AC
  • chat.inputWorkingBorderColor2#3B5F8B
  • chat.linesAddedForeground#a3be8c
  • chat.linesRemovedForeground#BF616A
  • chat.requestBackground#434c5e
  • chat.requestBorder#ECEFF4
  • chat.requestBubbleBackground#88C0D04D
  • chat.requestBubbleForeground#ECEFF4
  • chat.requestBubbleHoverBackground#88C0D066
  • chat.requestCodeBorder#434c5e
  • chat.slashCommandBackground#00000000
  • chat.slashCommandForeground#ebcb8b
  • chat.thinkingShimmer#88C0D0
  • chatBarTitle.background#3b4252
  • chatBarTitle.foreground#ECEFF4
  • chatManagement.sashBorder#434c5e
  • checkbox.background#434c5e
  • checkbox.border#ECEFF4
  • checkbox.disabled.background#2e3440
  • checkbox.disabled.foreground#666666
  • checkbox.foreground#A3C5F0
  • checkbox.selectBackground#434c5e
  • checkbox.selectBorder#ECEFF4
  • commandCenter.activeBackground#3b4252
  • commandCenter.activeBorder#A3C5F0
  • commandCenter.activeForeground#88C0D0
  • commandCenter.background#2e3440
  • commandCenter.border#3b4252
  • commandCenter.debuggingBackground#2e3440
  • commandCenter.debuggingForeground#ECEFF4
  • commandCenter.foreground#88C0D0
  • commandCenter.inactiveBorder#3b4252
  • commandCenter.inactiveForeground#88C0D0
  • debugConsole.errorForeground#BF616A
  • debugConsole.infoForeground#A3C5F0
  • debugConsole.sourceForeground#FFFFFF
  • debugConsole.warningForeground#D08770
  • debugConsoleInputIcon.foreground#ebcb8b
  • debugExceptionWidget.background#434c5e
  • debugExceptionWidget.border#2e3440
  • debugIcon.breakpointCurrentStackframeForeground#ebcb8b
  • debugIcon.breakpointDisabledForeground#ECEFF4
  • debugIcon.breakpointForeground#BF616A
  • debugIcon.breakpointStackframeForeground#FFFFFF
  • debugIcon.breakpointUnverifiedForeground#D08770
  • debugIcon.continueForeground#FFFFFF
  • debugIcon.disconnectForeground#FFFFFF
  • debugIcon.pauseForeground#FFFFFF
  • debugIcon.restartForeground#a3be8c
  • debugIcon.startForeground#a3be8c
  • debugIcon.stepBackForeground#FFFFFF
  • debugIcon.stepIntoForeground#FFFFFF
  • debugIcon.stepOutForeground#FFFFFF
  • debugIcon.stepOverForeground#FFFFFF
  • debugIcon.stopForeground#BF616A
  • debugTokenExpression.boolean#D08770
  • debugTokenExpression.error#BF616A
  • debugTokenExpression.name#A3C5F0
  • debugTokenExpression.number#D4AECE
  • debugTokenExpression.string#a3be8c
  • debugTokenExpression.value#FFFFFF
  • debugToolBar.background#434c5e
  • debugView.exceptionLabelBackground#ECEFF4
  • debugView.exceptionLabelForeground#2e3440
  • debugView.stateLabelBackground#a3be8c
  • debugView.stateLabelForeground#2e3440
  • debugView.valueChangedHighlight#ebcb8b
  • descriptionForeground#FFFFFF
  • diffEditor.diagonalFill#434c5e
  • diffEditor.insertedLineBackground#88C0D045
  • diffEditor.insertedTextBackground#88C0D050
  • diffEditor.move.border#88C0D080
  • diffEditor.moveActive.border#88C0D0
  • diffEditor.removedLineBackground#BF616A66
  • diffEditor.removedTextBackground#BF616A66
  • diffEditor.unchangedCodeBackground#2e3440
  • diffEditor.unchangedRegionBackground#2e3440
  • diffEditor.unchangedRegionForeground#FFFFFF
  • diffEditor.unchangedRegionShadow#1b1f2b
  • diffEditorGutter.insertedLineBackground#88C0D080
  • diffEditorGutter.removedLineBackground#BF616A80
  • diffEditorOverview.insertedForeground#88C0D0a5
  • diffEditorOverview.removedForeground#BF616Aa5
  • disabledForeground#4C566A
  • dropdown.background#434c5e
  • dropdown.border#ECEFF4
  • dropdown.foreground#FFFFFF
  • dropdown.listBackground#434c5e
  • editor.background#3b4252
  • editor.compositionBorder#A3C5F0
  • editor.findMatchBackground#88c0d04d
  • editor.findMatchBorder#88c0d0
  • editor.findMatchForeground#FFFFFF
  • editor.findMatchHighlightBackground#88c0d040
  • editor.findMatchHighlightBorder#00000000
  • editor.findMatchHighlightForeground#FFFFFF
  • editor.findRangeHighlightBackground#88c0d035
  • editor.findRangeHighlightBorder#00000000
  • editor.focusedStackFrameHighlightBackground#88c0d04d
  • editor.foldBackground#88c0d026
  • editor.foldPlaceholderForeground#D8DEE9
  • editor.foreground#FFFFFF
  • editor.hoverHighlightBackground#88c0d026
  • editor.inactiveLineHighlightBackground#88c0d013
  • editor.inactiveSelectionBackground#5E81AC40
  • editor.inlineValuesBackground#ECEFF4
  • editor.inlineValuesForeground#FFFFFF
  • editor.lineHighlightBackground#88c0d026
  • editor.lineHighlightBorder#00000000
  • editor.linkedEditingBackground#434c5e
  • editor.placeholder.foreground#D8DEE966
  • editor.rangeHighlightBackground#434c5e
  • editor.rangeHighlightBorder#434c5e
  • editor.selectionBackground#88C0D066
  • editor.selectionForeground#FFFFFF
  • editor.selectionHighlightBackground#5E81AC4D
  • editor.selectionHighlightBorder#00000000
  • editor.stackFrameHighlightBackground#ebcb8b4d
  • editor.wordHighlightBackground#88c0d040
  • editor.wordHighlightBorder#00000000
  • editor.wordHighlightStrongBackground#88c0d04d
  • editor.wordHighlightStrongBorder#00000000
  • editorActionList.background#434c5e
  • editorActionList.focusBackground#ECEFF4
  • editorActionList.focusForeground#2E3440
  • editorActionList.foreground#FFFFFF
  • editorBracketHighlight.foreground1#ECEFF4
  • editorBracketHighlight.foreground2#D08770
  • editorBracketHighlight.foreground3#ebcb8b
  • editorBracketHighlight.foreground4#a3be8c
  • editorBracketHighlight.foreground5#A3C5F0
  • editorBracketHighlight.foreground6#D4AECE
  • editorBracketMatch.background#81a1c126
  • editorBracketMatch.border#A3C5F0
  • editorBracketMatch.foreground#88C0D0
  • editorCodeLens.foreground#ECEFF4
  • editorCommentsWidget.rangeActiveBackground#88C0D04D
  • editorCommentsWidget.rangeBackground#88C0D026
  • editorCommentsWidget.resolvedBorder#a3be8c
  • editorCommentsWidget.unresolvedBorder#ebcb8b
  • editorCursor.background#3b4252
  • editorCursor.foreground#FFFFFF
  • editorError.background#00000000
  • editorError.border#00000000
  • editorError.foreground#BF616A
  • editorGhostText.background#00000000
  • editorGhostText.border#00000000
  • editorGhostText.foreground#ECEFF4
  • editorGroup.border#2e3440
  • editorGroup.dropBackground#2e3440bf
  • editorGroup.emptyBackground#2e3440
  • editorGroup.focusedEmptyBorder#3b4252
  • editorGroupHeader.noTabsBackground#3b4252
  • editorGroupHeader.tabsBackground#3b4252
  • editorGroupHeader.tabsBorder#3b4252
  • editorGutter.addedBackground#a3be8c
  • editorGutter.addedSecondaryBackground#a3be8c80
  • editorGutter.background#3b4252
  • editorGutter.commentDraftGlyphForeground#88C0D0
  • editorGutter.commentGlyphForeground#bfbfbf
  • editorGutter.commentUnresolvedGlyphForeground#ebcb8b
  • editorGutter.deletedBackground#BF616A
  • editorGutter.deletedSecondaryBackground#BF616A80
  • editorGutter.foldingControlForeground#FFFFFF
  • editorGutter.itemBackground#3b425200
  • editorGutter.itemGlyphForeground#ECEFF4
  • editorGutter.modifiedBackground#ebcb8b
  • editorGutter.modifiedSecondaryBackground#ebcb8b80
  • editorHint.border#3b4252
  • editorHint.foreground#8fbcbb
  • editorHoverWidget.background#434c5e
  • editorHoverWidget.border#ECEFF4
  • editorHoverWidget.foreground#FFFFFF
  • editorIndentGuide.activeBackground#88C0D0
  • editorIndentGuide.background#ECEFF4
  • editorInfo.background#00000000
  • editorInfo.border#3b4252
  • editorInfo.foreground#A3C5F0
  • editorInlayHint.background#434c5e
  • editorInlayHint.foreground#ECEFF4
  • editorLightBulb.foreground#ebcb8b
  • editorLightBulbAi.foreground#ebcb8b
  • editorLightBulbAutoFix.foreground#a3be8c
  • editorLineNumber.activeForeground#FFFFFF
  • editorLineNumber.foreground#ECEFF4
  • editorLink.activeForeground#A3C5F0
  • editorMarkerNavigation.background#434c5e
  • editorMarkerNavigationError.background#BF616A
  • editorMarkerNavigationInfo.background#A3C5F0
  • editorMarkerNavigationWarning.background#ebcb8b
  • editorMinimap.inlineChatInserted#a3be8c4D
  • editorMinimap.inlineChatRemoved#BF616A4D
  • editorMultiCursor.primary.background#3b4252
  • editorMultiCursor.primary.foreground#FFFFFF
  • editorMultiCursor.secondary.background#3b4252
  • editorMultiCursor.secondary.foreground#D8DEE9
  • editorOverviewRuler.addedForeground#a3be8c
  • editorOverviewRuler.border#3b4252
  • editorOverviewRuler.commentDraftForeground#88C0D080
  • editorOverviewRuler.currentContentForeground#434c5e
  • editorOverviewRuler.deletedForeground#BF616A
  • editorOverviewRuler.errorForeground#BF616A
  • editorOverviewRuler.findMatchForeground#81a1c126
  • editorOverviewRuler.incomingContentForeground#434c5e
  • editorOverviewRuler.infoForeground#A3C5F0
  • editorOverviewRuler.inlineChatInserted#a3be8c80
  • editorOverviewRuler.inlineChatRemoved#BF616A80
  • editorOverviewRuler.modifiedForeground#ebcb8b
  • editorOverviewRuler.rangeHighlightForeground#81a1c126
  • editorOverviewRuler.selectionHighlightForeground#81a1c126
  • editorOverviewRuler.warningForeground#ebcb8b
  • editorOverviewRuler.wordHighlightForeground#81a1c126
  • editorOverviewRuler.wordHighlightStrongForeground#81a1c126
  • editorPane.background#3b4252
  • editorRuler.foreground#ECEFF4
  • editorStickyScroll.background#3b4252
  • editorStickyScroll.border#434c5e
  • editorStickyScroll.shadow#1b1f2b
  • editorStickyScrollGutter.background#3b4252
  • editorStickyScrollHover.background#81a1c10c
  • editorSuggestWidget.background#434c5e
  • editorSuggestWidget.border#ECEFF4
  • editorSuggestWidget.foreground#FFFFFF
  • editorSuggestWidget.highlightForeground#FFFFFF
  • editorSuggestWidget.selectedBackground#ECEFF4
  • editorSuggestWidget.selectedForeground#2E3440
  • editorSuggestWidget.selectedIconForeground#2E3440
  • editorUnnecessaryCode.opacity#1b1f2ba5
  • editorWarning.background#00000000
  • editorWarning.border#00000000
  • editorWarning.foreground#ebcb8b
  • editorWhitespace.foreground#434c5e
  • editorWidget.background#434c5e
  • editorWidget.border#ECEFF4
  • editorWidget.foreground#FFFFFF
  • errorForeground#BF616A
  • extensionBadge.remoteForeground#a3be8c
  • extensionButton.background#A3C5F0
  • extensionButton.foreground#FFFFFF
  • extensionButton.hoverBackground#81a1c1
  • extensionButton.prominentBackground#A3C5F0
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#81a1c1
  • extensionIcon.preReleaseForeground#D4AECE
  • extensionIcon.privateForeground#D08770
  • extensionIcon.sponsorForeground#A3C5F0
  • extensionIcon.starForeground#ebcb8b
  • extensionIcon.verifiedForeground#a3be8c
  • focusBorder#A3C5F0
  • foreground#bfbfbf
  • gauge.background#434C5E
  • gauge.border#4C566A
  • gauge.errorBackground#BF616A
  • gauge.errorForeground#ECEFF4
  • gauge.foreground#A3C5F0
  • gauge.warningBackground#88C0D04D
  • gauge.warningForeground#FFFFFF
  • git.blame.editorDecorationForeground#4C566A
  • gitDecoration.addedResourceForeground#a3be8c
  • gitDecoration.conflictingResourceForeground#D08770
  • gitDecoration.deletedResourceForeground#BF616A
  • gitDecoration.ignoredResourceForeground#ECEFF4
  • gitDecoration.modifiedResourceForeground#ebcb8b
  • gitDecoration.renamedResourceForeground#88c0d0
  • gitDecoration.stageDeletedResourceForeground#BF616A
  • gitDecoration.stageModifiedResourceForeground#ebcb8b
  • gitDecoration.untrackedResourceForeground#8fbcbb
  • icon.foreground#88C0D0
  • inlineChat.background#3b4252
  • inlineChat.border#ECEFF4
  • inlineChat.foreground#FFFFFF
  • inlineChat.regionHighlight#88C0D01A
  • inlineChat.shadow#1b1f2b
  • inlineChatDiff.inserted#a3be8c19
  • inlineChatDiff.removed#BF616A19
  • inlineChatInput.background#434c5e
  • inlineChatInput.border#434c5e
  • inlineChatInput.focusBorder#A3C5F0
  • inlineChatInput.placeholderForeground#D8DEE980
  • inlineEdit.gutterIndicator.background#3b4252
  • inlineEdit.gutterIndicator.primaryBackground#A3C5F033
  • inlineEdit.gutterIndicator.primaryBorder#A3C5F0
  • inlineEdit.gutterIndicator.primaryForeground#A3C5F0
  • inlineEdit.gutterIndicator.secondaryBackground#88C0D033
  • inlineEdit.gutterIndicator.secondaryBorder#88C0D0
  • inlineEdit.gutterIndicator.secondaryForeground#88C0D0
  • inlineEdit.gutterIndicator.successfulBackground#a3be8c33
  • inlineEdit.gutterIndicator.successfulBorder#a3be8c
  • inlineEdit.gutterIndicator.successfulForeground#a3be8c
  • inlineEdit.modifiedBackground#a3be8c19
  • inlineEdit.modifiedBorder#a3be8c80
  • inlineEdit.modifiedChangedLineBackground#a3be8c26
  • inlineEdit.modifiedChangedTextBackground#a3be8c40
  • inlineEdit.originalBackground#BF616A19
  • inlineEdit.originalBorder#BF616A80
  • inlineEdit.originalChangedLineBackground#BF616A26
  • inlineEdit.originalChangedTextBackground#BF616A40
  • inlineEdit.tabWillAcceptModifiedBorder#a3be8c
  • inlineEdit.tabWillAcceptOriginalBorder#D8DEE980
  • input.background#434c5e
  • input.border#ECEFF4
  • input.foreground#FFFFFF
  • input.placeholderForeground#FFFFFF
  • inputOption.activeBackground#A3C5F040
  • inputOption.activeBorder#A3C5F0
  • inputOption.activeForeground#88C0D0
  • inputOption.hoverBackground#A3C5F020
  • inputOption.hoverForeground#2E3440
  • inputValidation.errorBackground#434c5e
  • inputValidation.errorBorder#BF616A
  • inputValidation.errorForeground#BF616A
  • inputValidation.infoBackground#434c5e
  • inputValidation.infoBorder#A3C5F0
  • inputValidation.infoForeground#A3C5F0
  • inputValidation.warningBackground#434c5e
  • inputValidation.warningBorder#ebcb8b
  • inputValidation.warningForeground#ebcb8b
  • interactive.activeCodeBorder#A3C5F0
  • interactive.inactiveCodeBorder#434c5e
  • keybindingLabel.background#ECEFF4
  • keybindingLabel.border#ECEFF4
  • keybindingLabel.bottomBorder#ECEFF4
  • keybindingLabel.foreground#2E3440
  • list.activeSelectionBackground#ECEFF4
  • list.activeSelectionForeground#2E3440
  • list.activeSelectionIconForeground#2E3440
  • list.dropBackground#2e3440bf
  • list.errorForeground#BF616A
  • list.focusAndSelectionOutline#88C0D0
  • list.focusBackground#434c5e
  • list.focusForeground#ECEFF4
  • list.focusOutline#88C0D0
  • list.highlightForeground#88C0D0
  • list.hoverBackground#434C5E
  • list.hoverForeground#ECEFF4
  • list.inactiveFocusBackground#3B4252
  • list.inactiveFocusOutline#4C566A
  • list.inactiveSelectionBackground#434c5e
  • list.inactiveSelectionForeground#D8DEE9
  • list.inactiveSelectionIconForeground#D8DEE9
  • list.invalidItemForeground#BF616A
  • list.warningForeground#EBCB8B
  • listFilterWidget.background#434c5e
  • listFilterWidget.noMatchesOutline#ECEFF4
  • listFilterWidget.outline#A3C5F0
  • listFilterWidget.shadow#1b1f2b
  • markdownAlert.caution.foreground#D06A73
  • markdownAlert.important.foreground#D4AECE
  • markdownAlert.note.foreground#A3C5F0
  • markdownAlert.tip.foreground#a3be8c
  • markdownAlert.warning.foreground#ebcb8b
  • mcpIcon.starForeground#ebcb8b
  • menu.background#434c5e
  • menu.border#ECEFF4
  • menu.foreground#FFFFFF
  • menu.selectionBackground#ECEFF4
  • menu.selectionBorder#00000000
  • menu.selectionForeground#2E3440
  • menu.separatorBackground#ECEFF4
  • menubar.selectionBackground#ECEFF4
  • menubar.selectionBorder#00000000
  • menubar.selectionForeground#2E3440
  • merge.border#ECEFF4
  • merge.commonContentBackground#81a1c119
  • merge.commonHeaderBackground#81a1c126
  • merge.currentContentBackground#BF616A19
  • merge.currentHeaderBackground#BF616A26
  • merge.incomingContentBackground#a3be8c19
  • merge.incomingHeaderBackground#a3be8c26
  • mergeEditor.change.background#81a1c119
  • mergeEditor.change.word.background#81a1c119
  • mergeEditor.conflict.handled.minimapOverViewRuler#a3be8c
  • mergeEditor.conflict.handledFocused.border#a3be8c
  • mergeEditor.conflict.handledUnfocused.border#a3be8c
  • mergeEditor.conflict.unhandled.minimapOverViewRuler#BF616A
  • mergeEditor.conflict.unhandledFocused.border#BF616A
  • mergeEditor.conflict.unhandledUnfocused.border#BF616A
  • minimap.chatEditHighlight#A3C5F04D
  • minimap.errorHighlight#BF616Aa5
  • minimap.findMatchHighlight#8DB4E6a5
  • minimap.infoHighlight#8DB4E6a5
  • minimap.selectionHighlight#A8B1C426
  • minimap.selectionOccurrenceHighlight#8DB4E6a5
  • minimap.warningHighlight#ebcb8ba5
  • minimapGutter.addedBackground#a3be8c
  • minimapGutter.deletedBackground#BF616A
  • minimapGutter.modifiedBackground#ebcb8b
  • multiDiffEditor.background#3b4252
  • multiDiffEditor.border#434c5e
  • multiDiffEditor.headerBackground#434c5e
  • notebook.cellBorderColor#434c5e
  • notebook.cellEditorBackground#2e34407f
  • notebook.cellInsertionIndicator#A3C5F0
  • notebook.cellStatusBarItemHoverBackground#ECEFF4
  • notebook.cellStatusBarItemHoverForeground#2E3440
  • notebook.cellToolbarSeparator#ECEFF4
  • notebook.editorBackground#3b4252
  • notebook.focusedEditorBorder#A3C5F0
  • notebookStatusErrorIcon.foreground#BF616A
  • notebookStatusRunningIcon.foreground#ebcb8b
  • notebookStatusSuccessIcon.foreground#a3be8c
  • notificationCenter.border#ECEFF4
  • notificationCenterHeader.background#434c5e
  • notificationCenterHeader.foreground#FFFFFF
  • notificationLink.foreground#A3C5F0
  • notifications.background#434c5e
  • notifications.border#ECEFF4
  • notifications.foreground#FFFFFF
  • notificationsErrorIcon.foreground#BF616A
  • notificationsInfoIcon.foreground#A3C5F0
  • notificationsWarningIcon.foreground#ebcb8b
  • notificationToast.border#ECEFF4
  • outputView.background#2e3440
  • outputViewStickyScroll.background#2e3440
  • panel.background#2e3440
  • panel.border#434c5e
  • panel.dropBackground#2e3440bf
  • panelStickyScroll.background#2e3440
  • panelStickyScroll.border#434c5e
  • panelStickyScroll.shadow#1b1f2b
  • panelTitle.activeBorder#A3C5F0
  • panelTitle.activeForeground#A3C5F0
  • panelTitle.border#434c5e
  • panelTitle.inactiveForeground#FFFFFF
  • panelTitleBadge.background#A3C5F0
  • panelTitleBadge.foreground#2e3440
  • peekView.border#A3C5F0
  • peekViewEditor.background#434c5e
  • peekViewEditor.matchHighlightBackground#81a1c126
  • peekViewEditorGutter.background#434c5e
  • peekViewEditorStickyScroll.background#434c5e
  • peekViewEditorStickyScrollGutter.background#434c5e
  • peekViewResult.background#2e3440
  • peekViewResult.fileForeground#FFFFFF
  • peekViewResult.lineForeground#FFFFFF
  • peekViewResult.matchHighlightBackground#81a1c126
  • peekViewResult.selectionBackground#ECEFF4
  • peekViewResult.selectionForeground#2E3440
  • peekViewTitle.background#2e3440
  • peekViewTitleDescription.foreground#FFFFFF
  • peekViewTitleLabel.foreground#FFFFFF
  • pickerGroup.border#434c5e
  • pickerGroup.foreground#FFFFFF
  • ports.iconRunningProcessForeground#a3be8c
  • problemsErrorIcon.foreground#BF616A
  • problemsInfoIcon.foreground#A3C5F0
  • problemsWarningIcon.foreground#ebcb8b
  • profileBadge.background#A3C5F0
  • profileBadge.foreground#2E3440
  • profiles.sashBorder#434c5e
  • progressBar.background#A3C5F0
  • quickInput.background#434c5e
  • quickInput.border#ECEFF4
  • quickInput.foreground#ECEFF4
  • quickInputList.focusBackground#ECEFF4
  • quickInputList.focusForeground#2E3440
  • quickInputList.focusHighlightForeground#5E81AC
  • quickInputList.focusIconForeground#2E3440
  • quickInputList.hoverBackground#434C5E
  • quickInputTitle.background#3B4252
  • radio.activeBackground#88C0D0
  • radio.activeBorder#81A1C1
  • radio.activeForeground#2E3440
  • radio.inactiveBackground#3b4252
  • radio.inactiveBorder#4C566A
  • radio.inactiveForeground#D8DEE9
  • radio.inactiveHoverBackground#434c5e
  • sash.hoverBorder#88C0D0
  • scmGraph.foreground1#ECEFF4
  • scmGraph.foreground2#D08770
  • scmGraph.foreground3#EBCB8B
  • scmGraph.foreground4#A3BE8C
  • scmGraph.foreground5#88C0D0
  • scmGraph.historyItemBaseRefColor#88C0D0
  • scmGraph.historyItemHoverAdditionsForeground#A3BE8C
  • scmGraph.historyItemHoverDefaultLabelBackground#ECEFF4
  • scmGraph.historyItemHoverDefaultLabelForeground#2E3440
  • scmGraph.historyItemHoverDeletionsForeground#BF616A
  • scmGraph.historyItemHoverLabelBackground#ECEFF4
  • scmGraph.historyItemHoverLabelForeground#2E3440
  • scmGraph.historyItemRefColor#B48EAD
  • scmGraph.historyItemRemoteRefColor#A3BE8C
  • scrollbar.shadow#1b1f2b
  • scrollbarSlider.activeBackground#88C0D0B3
  • scrollbarSlider.background#D8DEE94D
  • scrollbarSlider.hoverBackground#D8DEE966
  • selection.background#A8B1C426
  • sessionsSidebar.background#2e3440
  • sessionsSidebar.border#3b4252
  • sessionsSidebarHeader.background#3b4252
  • sessionsSidebarHeader.foreground#ECEFF4
  • settings.checkboxBackground#434c5e
  • settings.checkboxBorder#ECEFF4
  • settings.checkboxForeground#A3C5F0
  • settings.dropdownBackground#434c5e
  • settings.dropdownBorder#ECEFF4
  • settings.dropdownForeground#FFFFFF
  • settings.dropdownListBorder#A3C5F0
  • settings.headerForeground#A3C5F0
  • settings.modifiedItemForeground#A3C5F0
  • settings.modifiedItemIndicator#A3C5F0
  • settings.numberInputBackground#434c5e
  • settings.numberInputBorder#ECEFF4
  • settings.numberInputForeground#FFFFFF
  • settings.rowHoverBackground#81a1c10c
  • settings.sashBorder#434c5e
  • settings.settingsHeaderHoverForeground#FFFFFF
  • settings.textInputBackground#434c5e
  • settings.textInputBorder#ECEFF4
  • settings.textInputForeground#FFFFFF
  • sideBar.background#2e3440
  • sideBar.border#3b4252
  • sideBar.dropBackground#2e3440bf
  • sideBar.foreground#FFFFFF
  • sideBarSectionHeader.background#2e3440
  • sideBarSectionHeader.border#3b4252
  • sideBarSectionHeader.foreground#FFFFFF
  • sideBarStickyScroll.background#2e3440
  • sideBarStickyScroll.border#434c5e
  • sideBarStickyScroll.shadow#1b1f2b
  • sideBarTitle.foreground#FFFFFF
  • simpleFindWidget.sashBorder#434c5e
  • statusBar.background#2e3440
  • statusBar.border#3b4252
  • statusBar.debuggingBackground#D4AECE
  • statusBar.debuggingBorder#3b4252
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.focusBorder#A3C5F0
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#2e3440
  • statusBar.noFolderBorder#3b4252
  • statusBar.noFolderForeground#FFFFFF
  • statusBarItem.activeBackground#ECEFF4
  • statusBarItem.activeForeground#2E3440
  • statusBarItem.compactHoverBackground#FFFFFF20
  • statusBarItem.errorBackground#BF616A
  • statusBarItem.errorForeground#FFFFFF
  • statusBarItem.focusBorder#A3C5F0
  • statusBarItem.hoverBackground#FFFFFF20
  • statusBarItem.offlineBackground#434c5e
  • statusBarItem.offlineForeground#D8DEE9
  • statusBarItem.offlineHoverBackground#ECEFF4
  • statusBarItem.offlineHoverForeground#2E3440
  • statusBarItem.prominentBackground#434c5e
  • statusBarItem.prominentForeground#FFFFFF
  • statusBarItem.prominentHoverBackground#FFFFFF20
  • statusBarItem.remoteBackground#a3be8c
  • statusBarItem.remoteForeground#2e3440
  • statusBarItem.remoteHoverBackground#b6d096
  • statusBarItem.remoteHoverForeground#2e3440
  • statusBarItem.warningBackground#ebcb8b
  • statusBarItem.warningForeground#2e3440
  • symbolIcon.arrayForeground#D4AECE
  • symbolIcon.booleanForeground#D08770
  • symbolIcon.classForeground#ebcb8b
  • symbolIcon.colorForeground#FFFFFF
  • symbolIcon.constantForeground#D4AECE
  • symbolIcon.constructorForeground#A3C5F0
  • symbolIcon.enumeratorForeground#ebcb8b
  • symbolIcon.enumeratorMemberForeground#ebcb8b
  • symbolIcon.eventForeground#ebcb8b
  • symbolIcon.fieldForeground#a3be8c
  • symbolIcon.fileForeground#FFFFFF
  • symbolIcon.folderForeground#A3C5F0
  • symbolIcon.functionForeground#A3C5F0
  • symbolIcon.interfaceForeground#ebcb8b
  • symbolIcon.keyForeground#FFFFFF
  • symbolIcon.keywordForeground#ECEFF4
  • symbolIcon.methodForeground#A3C5F0
  • symbolIcon.moduleForeground#ebcb8b
  • symbolIcon.namespaceForeground#ebcb8b
  • symbolIcon.nullForeground#D4AECE
  • symbolIcon.numberForeground#D08770
  • symbolIcon.objectForeground#FFFFFF
  • symbolIcon.operatorForeground#ECEFF4
  • symbolIcon.packageForeground#FFFFFF
  • symbolIcon.propertyForeground#a3be8c
  • symbolIcon.referenceForeground#FFFFFF
  • symbolIcon.snippetForeground#A3C5F0
  • symbolIcon.stringForeground#a3be8c
  • symbolIcon.structForeground#ebcb8b
  • symbolIcon.textForeground#FFFFFF
  • symbolIcon.typeParameterForeground#8fbcbb
  • symbolIcon.unitForeground#FFFFFF
  • symbolIcon.variableForeground#FFFFFF
  • tab.activeBackground#3b4252
  • tab.activeBorder#A3C5F0
  • tab.activeBorderTop#A3C5F0
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#ECEFF4
  • tab.border#2e3440
  • tab.dragAndDropBorder#A3C5F0
  • tab.hoverBackground#ECEFF4
  • tab.hoverBorder#A3C5F0
  • tab.hoverForeground#2E3440
  • tab.inactiveBackground#2e3440
  • tab.inactiveForeground#FFFFFF
  • tab.inactiveModifiedBorder#434c5e
  • tab.lastPinnedBorder#434c5e
  • tab.selectedBackground#3b4252
  • tab.selectedBorderTop#A3C5F0
  • tab.selectedForeground#FFFFFF
  • tab.unfocusedActiveBorder#434c5e
  • tab.unfocusedActiveForeground#FFFFFF
  • tab.unfocusedActiveModifiedBorder#434c5e
  • tab.unfocusedHoverBackground#ECEFF4
  • tab.unfocusedHoverBorder#ECEFF4
  • tab.unfocusedHoverForeground#2E3440
  • tab.unfocusedInactiveForeground#ECEFF4
  • tab.unfocusedInactiveModifiedBorder#434c5e
  • terminal.ansiBlack#7B88A1
  • terminal.ansiBlue#A3C5F0
  • terminal.ansiBrightBlack#ECEFF4
  • terminal.ansiBrightBlue#B8D4F5
  • terminal.ansiBrightCyan#A5D1D0
  • terminal.ansiBrightGreen#B4CF9D
  • terminal.ansiBrightMagenta#E0C4DB
  • terminal.ansiBrightRed#D06A73
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#F0D89C
  • terminal.ansiCyan#8fbcbb
  • terminal.ansiGreen#a3be8c
  • terminal.ansiMagenta#D4AECE
  • terminal.ansiRed#BF616A
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#ebcb8b
  • terminal.background#2e3440
  • terminal.border#434C5E
  • terminal.foreground#FFFFFF
  • terminal.initialHintForeground#D8DEE966
  • terminal.selectionBackground#A8B1C44D
  • terminal.selectionForeground#FFFFFF
  • terminal.tab.activeBorder#A3C5F0
  • terminalCommandDecoration.defaultBackground#FFFFFF
  • terminalCommandDecoration.errorBackground#BF616A
  • terminalCommandDecoration.successBackground#a3be8c
  • terminalCommandGuide.foreground#434c5e
  • terminalCursor.background#00000000
  • terminalCursor.foreground#FFFFFF
  • terminalOverviewRuler.border#3b4252
  • terminalStickyScroll.background#2e3440
  • terminalStickyScroll.border#434c5e
  • terminalStickyScrollHover.background#81a1c10c
  • testing.coverCountBadgeBackground#a3be8c
  • testing.coverCountBadgeForeground#2E3440
  • testing.coveredMinimapBackground#88C0D050
  • testing.iconErrored#BF616A
  • testing.iconFailed#BF616A
  • testing.iconPassed#a3be8c
  • testing.iconQueued#ebcb8b
  • testing.iconSkipped#D4AECE
  • testing.iconUnset#4C566A
  • testing.message.error.badgeBackground#BF616A
  • testing.message.error.badgeBorder#BF616A
  • testing.message.error.badgeForeground#ECEFF4
  • testing.message.error.decorationForeground#BF616A
  • testing.message.error.lineBackground#BF616A19
  • testing.message.info.decorationForeground#A3C5F0
  • testing.message.info.lineBackground#8DB4E619
  • testing.runAction#a3be8c
  • testing.uncoveredBranchBackground#D0877040
  • testing.uncoveredMinimapBackground#BF616A66
  • textBlockQuote.background#434c5e
  • textBlockQuote.border#A3C5F0
  • textCodeBlock.background#434c5e
  • textLink.activeForeground#A3C5F0
  • textLink.foreground#A3C5F0
  • textPreformat.foreground#FFFFFF
  • textSeparator.foreground#ECEFF4
  • titleBar.activeBackground#2e3440
  • titleBar.activeForeground#88C0D0
  • titleBar.border#3b4252
  • titleBar.inactiveBackground#2e3440
  • titleBar.inactiveForeground#88C0D0
  • toolbar.activeBackground#FFFFFF20
  • toolbar.hoverBackground#FFFFFF15
  • toolbar.hoverOutline#00000000
  • tree.inactiveIndentGuidesStroke#434c5e
  • tree.indentGuidesStroke#ECEFF4
  • walkThrough.embeddedEditorBackground#3b4252
  • welcomePage.buttonBackground#434c5e
  • welcomePage.buttonHoverBackground#4C566A
  • welcomePage.buttonHoverForeground#ECEFF4
  • welcomePage.progress.background#A3C5F0
  • welcomePage.progress.foreground#A3C5F0
  • welcomePage.tileBackground#434c5e
  • welcomePage.tileHoverBackground#4C566A
  • welcomePage.tileHoverForeground#ECEFF4
  • welcomePage.tileShadow#1b1f2b
  • widget.border#ECEFF4
  • widget.shadow#1b1f2b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment markup.underline.link, comment string, comment punctuation.definition, comment punctuation, comment text#aed4e0italic
comment storage.type#aed4e0
comment entity.name.type#b5d5d4
comment variable, comment variable.other#b5d5d4
comment keyword, comment entity.name.tag, entity.name.tag.documentation#b5d5d4
comment keyword.codetag.notation#e2c8dd
comment.git-status.header.remote#d0d1d3
comment.git-status.header.local#c0d5f3
comment.other.git-status.head#d5d5d5
string.quoted.docstring, string.quoted.docstring punctuation.definition#aed4e0
constant#D4AECE
constant.other#FFFFFF
constant.other.caps#D4AECE
constant.other.placeholder#D08770
constant.other.property#D4AECE
constant.other.citation.latex#D4AECE
constant.other.color#D4AECE
constant.other.character-class.escape#D4AECE
constant.other.key#D4AECE
constant.other.symbol#D08770
constant.other.elm#A3C5F0
constant.numeric#D08770
constant.language#D4AECE
constant.character.escape#D4AECE
constant.numeric.line-number.find-in-files#b1b3b7
constant.numeric.line-number.match.find-in-files#ebcb8b
entity.name.section#ebcb8b
entity.name.function, entity.name.function.templated, entity.name.function.member.static#A3C5F0
entity.name.type.class.templated, entity.name.type.class.generic, entity.name.type.namespace#ebcb8b
entity.name.label#D4AECE
entity.name.function.preprocessor#A3C5F0
entity.name#A3C5F0
entity.name.class#ebcb8b
entity.name.constant#D4AECE
entity.name.namespace#FFFFFF
entity.other.inherited-class#ebcb8bitalic
entity.name.function#A3C5F0
entity.name.tag, entity.name.tag.js.jsx support.class.component.js.jsx, entity.name.tag support.class.component, source.vue support.class.component#b1b3b7
source.ansible entity.name.tag#A3C5F0
entity.name.function.operator#ECEFF4
meta.brackets entity.name.function.operator, punctuation.separator entity.name.function.operator#ECEFF4
entity.name.type, entity.name.type.class.reference, entity.name.type.class.value#ebcb8b
entity.other.attribute-name#A3C5F0italic
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#ebcb8b
entity.other.attribute-name.id.css#D08770
entity.other.attribute-name.pseudo-class.css, entity.other.pseudo-class.css, entity.other.pseudo-element.css#A3C5F0italic
entity.name.function, support.function#A3C5F0
entity.other.git-status.hex#D4AECE
entity.other.jinja2.delimiter#ECEFF4
entity.name.operator.custom-literal#FFFFFF
entity.name.operator.custom-literal.string#88C0D0
entity.name.operator.custom-literal.number#D08770
entity.name.type.rust#ebcb8b
entity.name.lifetime.rust#ECEFF4
invalid#D4717Aitalic underline
invalid.deprecated#D08770italic underline
keyword#ECEFF4
keyword.control#ECEFF4
keyword.control.directive#ECEFF4
keyword.operator, keyword.operator.member, keyword.operator.new#ECEFF4
keyword.other.substitution#ECEFF4
keyword.other.template.begin, keyword.other.template.end#ECEFF4
keyword.operator.heading.restructuredtext, keyword.operator.table.row.restructuredtext keyword.operator.table.data.restructuredtext#ECEFF4
keyword.other.parenthesis.elm#ECEFF4
keyword.other.fn.rust, keyword.other.rust, keyword.other.unsafe.rust, keyword.other.where.rust#A3C5F0
keyword.control.rust, keyword.operator.misc.rust#ECEFF4
keyword.declaration.class.ruby, keyword.declaration.function.ruby, keyword.declaration.namespace.ruby#ECEFF4
markup.italicitalic
markup.boldbold
markup.heading#ebcb8b
markup.raw#D08770
markup.underlineunderline
markup.underline.link#A3C5F0
markup.inserted, markup.inserted punctuation.definition.inserted#88C0D0
markup.deleted, markup.deleted punctuation.definition.deleted#BF616A
markup.changed, markup.changed punctuation.definition.changed#ebcb8b
markup.ignored, markup.ignored punctuation.definition.ignored#ECEFF4
markup.untracked#ECEFF4
markup.quoteitalic
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#ECEFF4
meta.function-call.generic.python, support.function.builtin.python#A3C5F0
meta.function-call.python meta.function-call.arguments.python#FFFFFF
meta.interpolation#D08770
meta.instance.constructor#A3C5F0
meta.attribute-with-value.class string, meta.attribute.class.html string#ebcb8b
meta.attribute-with-value.id string, meta.attribute.id.html string#D08770
source.json meta.mapping.key string#FFFFFF
source.yaml meta.mapping.key string#ECEFF4
meta.object.member#FFFFFF
meta.property-list.css variable.other#D08770
entity.name.constant.preprocessor, meta.preprocessor#D4AECE
meta.diff.git-diff.header#ebcb8b
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#8fbcbb
meta.type variable, meta.type variable.other.readwrite#D4AECE
punctuation#ECEFF4
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#ECEFF4
punctuation.definition.group#FFFFFF
punctuation.definition.comment#c5d0db
punctuation.definition.variable, punctuation.definition.keyword.scss, punctuation.definition.entity.css#8fbcbb
punctuation.section.embedded, punctuation.section.embedded entity.name.tag, punctuation.section.embedded constant.other, punctuation.section.embedded source, punctuation.section.embedded.begin#D08770
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#ECEFF4
meta.paragraph.markdown meta.dummy.line-break, meta.paragraph.markdown meta.hard-line-break.markdown
markup.underline.link punctuation#A3C5F0
meta.brace.round, meta.brace.square, keyword.operator.type.annotation, meta.type storage.modifier.array#ECEFF4
region.redish#BF616A
region.orangish#D08770
region.yellowish#ebcb8b
region.greenish#a3be8c
region.bluish#A3C5F0
region.purplish#D4AECE
region.pinkish#D4AECE
region.whitish#FFFFFF
source#FFFFFF
source.scss, source.sass#ECEFF4
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#D08770italic
source.git-show.commit.sha#D4AECE
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#ECEFF4
source.git-show meta.diff.git-diff.header.extended.index.from-sha, source.git-show meta.diff.git-diff.header.extended.index.to-sha#D4AECE
source.git-show meta.diff.range.unified#D08770
source.git-show meta.diff.header.from-file, source.git-show meta.diff.header.to-file#ECEFF4
storage#ECEFF4
storage.type#A3C5F0italic
storage.type.extends#ECEFF4normal
storage.type.function.arrow#ECEFF4normal
storage.modifier, storage.type.modifier#ECEFF4italic
storage.class.restructuredtext.ref#D4AECE
storage.modifier.visibility.rust, storage.modifier.lifetime.rust#ECEFF4
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#ECEFF4
storage.modifier.import.java#FFFFFF
string#88C0D0
string.unquoted.label#FFFFFF
string source#FFFFFF
string source punctuation.section.embedded, string punctuation.definition.string source#ECEFF4
string.other.link.title, string.other.link.description#ECEFF4
string.other.link.description.title#A3C5F0
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ECEFF4
string.other.ref, string.other.restructuredtext.ref#A3C5F0
string.other.git-status.help.key#8fbcbb
string.other.git-status.remote#ECEFF4
support.constant#A3C5F0
support.constant.handlebars#ECEFF4
support.type.vendor-prefix.css#8fbcbb
support.function#A3C5F0
support.macro#A3C5F0
support.function.delimiter.elm#ECEFF4
support.type, entity.name.type.object.console#A3C5F0italic
support.variable, support.variable.property#A3C5F0
support.type.property-name#FFFFFFnormal
support.class#ebcb8b
support.constant.core.rust#D4AECE
comment support, comment support.class#aed4e0
text#FFFFFF
text.find-in-files#FFFFFF
variable, variable.other#FFFFFF
variable.parameter, parameters variable.function#D08770italic
variable.language, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#8fbcbbitalic
variable.language.arguments#D4AECE
variable.other.class#ebcb8b
variable.other.constant#D4AECE
variable.other.readwrite#FFFFFF
variable.other.member#FFFFFF
variable.other.enummember#D4AECE
variable.other.property, variable.other.property.static, variable.other.event#FFFFFF
variable.function#A3C5F0
variable.other.substitution#D08770
source.ruby variable.other.readwrite.instance.ruby, source.ruby variable.other.readwrite.class.ruby#D4AECE
source.jinja2 variable.other.jinja2.block#A3C5F0
source.jinja2 variable.other.jinja2#D08770

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...