My Color Code

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#ff0
• activityBar.activeBorder#0f0
• activityBar.activeFocusBorder#000
• activityBar.background#000000
• activityBar.border#000000
• activityBar.dropBorder#0f0
• activityBar.foreground#000000
• activityBar.inactiveForeground#fff
• activityBarBadge.background#a4bd00
• activityBarBadge.foreground#0a0e14
• activityBarTop.activeBackground#f00
• activityBarTop.dropBorder#fff
• activityBarTop.foreground#0f0
• activityBarTop.inactiveForeground#f00
• activityErrorBadge.background#000
• activityErrorBadge.foreground#fff
• activityWarningBadge.background#f00
• activityWarningBadge.foreground#000
• badge.background#a4bd00
• badge.foreground#0a0e14
• breadcrumb.activeSelectionForeground#3f3f3f
• breadcrumb.background#000000
• breadcrumb.focusForeground#a4bd00
• breadcrumb.foreground#a0a8bd
• breadcrumbPicker.background#151515
• button.background#a4bd00
• button.border#ff0
• button.foreground#151515
• button.hoverBackground#869c30
• button.secondaryBackground#f90
• button.secondaryBorder#FFF
• button.secondaryForeground#f00
• button.secondaryHoverBackground#0ff
• button.separator#ff0
• checkbox.background#fff
• checkbox.border#0ff
• checkbox.disabled.background#000
• checkbox.disabled.foreground#fff
• checkbox.foreground#000
• checkbox.selectBackground#0ff
• checkbox.selectBorder#000
• commandCenter.activeBackground#000
• commandCenter.activeBorder#fff
• commandCenter.activeForeground#0ff
• commandCenter.background#fff
• commandCenter.debuggingBackground#fff
• commandCenter.foreground#fff
• debugExceptionWidget.background#0d1016
• debugExceptionWidget.border#01060e
• debugToolBar.background#0d1016
• diffEditor.insertedTextBackground#c2d94c26
• diffEditor.removedTextBackground#f2966826
• dropdown.background#151515
• dropdown.border#333b12
• dropdown.foreground#3d424d
• dropdown.listBackground#ff0
• editor.background#0a0a0a
• editor.compositionBorder#fff
• editor.findMatchBackground#e6b4500d
• editor.findMatchBorder#e6b450
• editor.findMatchForeground#000
• editor.findMatchHighlightBackground#e6b4500d
• editor.findMatchHighlightBorder#e6b45059
• editor.findMatchHighlightForeground#000
• editor.findRangeHighlightBackground#121922
• editor.findRangeHighlightBorder#0a0e1400
• editor.foreground#b3b8c5
• editor.hoverHighlightBackground#0f0
• editor.inactiveLineHighlightBackground#0ff
• editor.inactiveSelectionBackground#a4bd00
• editor.lineHighlightBackground#01060e
• editor.lineHighlightBorder#626262
• editor.placeholder.foreground#0f0
• editor.rangeHighlightBackground#01060e
• editor.selectionBackground#474747
• editor.selectionForeground#474747
• editor.selectionHighlightBackground#262626
• editor.selectionHighlightBorder#1d2936
• editor.wordHighlightBackground#363636
• editor.wordHighlightBorder#f00
• editor.wordHighlightStrongBackground#e6b45033
• editor.wordHighlightStrongBorder#f00
• editor.wordHighlightTextBackground#000
• editor.wordHighlightTextBorder#0ff
• editorBracketMatch.background#3d424d4d
• editorBracketMatch.border#3d424d99
• editorBracketMatch.foreground#000
• editorCodeLens.foreground#626a73
• editorCursor.background#f00
• editorCursor.foreground#bde5f1
• editorError.background#ff000050
• editorError.border#ff000000
• editorError.foreground#ff3333
• editorGroup.border#ffffff
• editorGroupHeader.noTabsBackground#31353B
• editorGroupHeader.tabsBackground#2a7e7b
• editorGroupHeader.tabsBorder#0a0e14
• editorGutter.addedBackground#91b36299
• editorGutter.background#000000
• editorGutter.deletedBackground#d96c7599
• editorGutter.modifiedBackground#6994bf99
• editorHint.foreground#f00
• editorHoverWidget.background#0d1016
• editorHoverWidget.border#000000
• editorIndentGuide.activeBackground#3d424db3
• editorIndentGuide.background#3d424d66
• editorInfo.background#51515170
• editorInfo.border#5d5c5c00
• editorLineNumber.activeForeground#3d424de6
• editorLineNumber.dimmedForeground#FF0
• editorLineNumber.foreground#4d5466
• editorLink.activeForeground#e6b450
• editorMarkerNavigation.background#0d1016
• editorMinimap.inlineChatInserted#000
• editorMultiCursor.primary.background#000
• editorMultiCursor.primary.foreground#0ff
• editorMultiCursor.secondary.background#ff0
• editorMultiCursor.secondary.foreground#ff0
• editorOverviewRuler.addedForeground#91b36299
• editorOverviewRuler.border#01060e
• editorOverviewRuler.deletedForeground#d96c7599
• editorOverviewRuler.errorForeground#ff3333
• editorOverviewRuler.modifiedForeground#6994bf99
• editorOverviewRuler.warningForeground#e6b450
• editorRuler.foreground#3d424d66
• editorSuggestWidget.background#0d1016
• editorSuggestWidget.border#000000
• editorSuggestWidget.highlightForeground#e6b450
• editorSuggestWidget.selectedBackground#01060e
• editorWarning.background#ffff00
• editorWarning.border#ffffff00
• editorWarning.foreground#e6b450
• editorWhitespace.foreground#3d424d99
• editorWidget.background#0d1016
• extensionButton.background#fff
• extensionButton.border#ff0
• extensionButton.foreground#000
• extensionButton.hoverBackground#ff2
• extensionButton.prominentBackground#e6b450
• extensionButton.prominentForeground#0a0e14
• extensionButton.prominentHoverBackground#e1af4b
• extensionButton.separator#000
• extensionIcon.preReleaseForeground#000
• extensionIcon.privateForeground#ff0
• extensionIcon.sponsorForeground#f0f
• extensionIcon.starForeground#0f0
• extensionIcon.verifiedForeground#ff0
• focusBorder#292d36
• foreground#a0a8bd
• gitDecoration.conflictingResourceForeground#ff5300
• gitDecoration.deletedResourceForeground#d96c75b3
• gitDecoration.ignoredResourceForeground#666666
• gitDecoration.modifiedResourceForeground#6994bfb3
• gitDecoration.submoduleResourceForeground#ffee99b3
• gitDecoration.untrackedResourceForeground#6e7035
• input.background#000000
• input.border#191e25
• input.foreground#a0a8bd
• input.placeholderForeground#2e323c
• inputOption.activeBackground#0f0
• inputOption.activeBorder#e6b450
• inputOption.activeForeground#000
• inputOption.hoverBackground#fff
• inputValidation.errorBackground#0a0e14
• inputValidation.errorBorder#fc0404
• inputValidation.infoBackground#0a0e14
• inputValidation.infoBorder#39bae6
• inputValidation.warningBackground#0a0e14
• inputValidation.warningBorder#ffb454
• list.activeSelectionBackground#0a0a0a
• list.activeSelectionForeground#a4bd00
• list.activeSelectionIconForeground#000
• list.deemphasizedForeground#ff0
• list.dropBackground#00f
• list.dropBetweenBackground:#f00
• list.filterMatchBackground#0f0
• list.focusAndSelectionOutline#0ff
• list.focusBackground#2a2a2a
• list.focusForeground#D9D7CE
• list.focusHighlightForeground#00f
• list.focusOutline#000
• list.highlightForeground#FFCC66
• list.hoverBackground#0a0a0a
• list.hoverForeground#D9D7CE
• list.inactiveFocusBackground#f0f
• list.inactiveFocusOutline#fff
• list.inactiveSelectionBackground#343434
• list.inactiveSelectionForeground#D9D7CE
• list.inactiveSelectionIconForeground#fff
• list.invalidItemForeground#2e323c
• list.warningForeground#f00
• listFilterWidget.background#fff
• listFilterWidget.noMatchesOutline#ddd
• listFilterWidget.outline#000
• listFilterWidget.shadow#ff0
• mcpIcon.starForeground#fff
• menu.background#151515
• menu.border#0ff
• menu.foreground#a0a8bd
• menu.selectionBackground#0f0
• menu.selectionForeground#fff
• menu.separatorBackground#000
• menubar.selectionBackground#0f0
• menubar.selectionBorder#000
• menubar.selectionForeground#000
• minimap.chatEditHighlight#ff0
• minimap.errorHighlight#0ff
• minimap.findMatchHighlight#ff0
• minimap.foregroundOpacity#fff9
• minimap.infoHighlight#fdd
• minimap.selectionHighlight#fff
• minimap.selectionOccurrenceHighlight#000
• minimap.warningHighlight#ff0
• minimapGutter.addedBackground#f00
• minimapGutter.deletedBackground#0f0
• minimapGutter.modifiedBackground#0ff
• minimapSlider.activeBackground#fdd
• minimapSlider.background#f0f
• minimapSlider.hoverBackground#0f0
• notificationCenter.border#ff0
• notificationCenterHeader.background#00f
• notificationCenterHeader.foreground#000
• notificationLink.foreground#00f
• notifications.background#393535
• notifications.border#fff
• notifications.foreground#000
• notificationsErrorIcon.foreground#f0f
• notificationsInfoIcon.foreground#000
• notificationsWarningIcon.foreground#f00
• notificationToast.border#ff0
• panel.background#0a0a0a
• panel.border#a4bd00
• panelTitle.activeBorder#a4bd00
• panelTitle.activeForeground#a0a8bd
• panelTitle.inactiveForeground#86898f
• peekView.border#01060e
• peekViewEditor.background#0d1016
• peekViewEditor.matchHighlightBackground#e6b45033
• peekViewResult.background#0d1016
• peekViewResult.fileForeground#3d424d
• peekViewResult.matchHighlightBackground#e6b45033
• peekViewTitle.background#0d1016
• peekViewTitleDescription.foreground#3d424d
• peekViewTitleLabel.foreground#3d424d
• pickerGroup.border#01060e
• pickerGroup.foreground#242831
• profileBadge.background#000
• profileBadge.foreground#fff
• profiles.sashBorder#ff0
• progressBar.background#a4bd00
• scrollbar.background#e7e6e600
• scrollbar.shadow#aeadad
• scrollbarSlider.activeBackground#3f3f3f
• scrollbarSlider.background#939191
• scrollbarSlider.hoverBackground#343434
• search.resultsInfoForeground#f0f
• selection.background#c3c3c3
• settings.headerForeground#b3b1ad
• settings.modifiedItemIndicator#6994bf
• sideBar.background#151515
• sideBar.border#0a0a0a
• sideBar.dropBackground#0f0
• sideBar.foreground#a8aebd
• sideBarActivityBarTop.border#ff0
• sideBarSectionHeader.background#151515
• sideBarSectionHeader.border#fff
• sideBarSectionHeader.foreground#d2d2d2
• sideBarStickyScroll.background#fff
• sideBarStickyScroll.border#f0f
• sideBarStickyScroll.shadow#ff0
• sideBarTitle.background#00f
• sideBarTitle.border#f00
• sideBarTitle.foreground#d2d2d2
• statusBar.background#000000
• statusBar.border#000000
• statusBar.debuggingBackground#f29668
• statusBar.debuggingForeground#0a0e14
• statusBar.foreground#787e8d
• statusBar.noFolderBackground#0d1016
• statusBar.noFolderForeground#000
• statusBarItem.activeBackground#00000050
• statusBarItem.hoverBackground#00000030
• statusBarItem.hoverForeground#000
• statusBarItem.prominentBackground#01060e
• statusBarItem.prominentHoverBackground#00000030
• support.type.property-name.css#0c15b3
• tab.activeBackground#ffffff
• tab.unfocusedActiveBackground#ffffff
• terminal.ansiBlack#01060e
• terminal.ansiBlue#53bdfa
• terminal.ansiBrightBlack#686868
• terminal.ansiBrightBlue#59c2ff
• terminal.ansiBrightCyan#95e6cb
• terminal.ansiBrightGreen#c2d94c
• terminal.ansiBrightMagenta#ffee99
• terminal.ansiBrightRed#f07178
• terminal.ansiBrightWhite#ffffff
• terminal.ansiBrightYellow#ffb454
• terminal.ansiCyan#90e1c6
• terminal.ansiGreen#91b362
• terminal.ansiMagenta#fae994
• terminal.ansiRed#ea6c73
• terminal.ansiWhite#c7c7c7
• terminal.ansiYellow#f9af4f
• terminal.background#0a0a0a
• terminal.foreground#a8aebd
• textBlockQuote.background#0d1016
• textBlockQuote.border#000
• textCodeBlock.background#f00
• textLink.activeForeground#a0a8bd
• textLink.foreground#a4bd00
• textPreformat.background#fff
• textPreformat.border#000
• textPreformat.foreground#a0a8bd
• textSeparator.foreground#fff
• titleBar.activeBackground#000000
• titleBar.activeForeground#a8aebd
• titleBar.border#000000
• titleBar.inactiveBackground#474747
• titleBar.inactiveForeground#c2c2c2
• toolbar.activeBackground#ff0
• toolbar.hoverBackground#fff
• toolbar.hoverOutline#000
• tree.tableColumnsBorder#fff
• walkThrough.embeddedEditorBackground#0d1016
• window.activeBorder#9a9494
• window.inactiveBorder#260606

tokenColors

TextMate scopes and font styles (syntax highlighting rules).