Skip to main content
Coding 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#F6F6F6
  • activityBar.activeBorder#5281ad
  • activityBar.activeFocusBorder#ffffff
  • activityBar.background#E9E9E9
  • activityBar.border#E9E9E9
  • activityBar.dropBorder#404040
  • activityBar.foreground#000000
  • activityBar.inactiveForeground#1d1d1d
  • activityBarBadge.background#f4f4f4
  • activityBarBadge.foreground#1172cd
  • badge.background#1172cd
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#000000
  • breadcrumb.background#ffffff
  • breadcrumb.focusForeground#000000
  • breadcrumb.foreground#000000
  • breadcrumbPicker.background#e8e8e8
  • button.background#5281ad
  • button.foreground#ffffff
  • button.hoverBackground#669dd8
  • checkbox.background#ffffff
  • checkbox.border#1d1d1d
  • checkbox.foreground#1d1d1d
  • contrastActiveBorder#00000000
  • contrastBorder#00000000
  • debugExceptionWidget.background#c1c1c1
  • debugExceptionWidget.border#b0b0b0
  • debugToolBar.background#f5f5f5
  • descriptionForeground#000000
  • diffEditor.insertedTextBackground#27cc4041
  • diffEditor.removedTextBackground#ff453941
  • dropdown.background#333333
  • dropdown.border#bebebe
  • dropdown.foreground#ffffff
  • dropdown.listBackground#ffffff
  • editor.background#3f5347
  • editor.findMatchBackground#0983fe98
  • editor.findMatchHighlightBackground#0983fe51
  • editor.findRangeHighlightBackground#b3b3b341
  • editor.foldBackground#37383dcb
  • editor.foreground#9ea8ad
  • editor.hoverHighlightBackground#acd5ff27
  • editor.inactiveSelectionBackground#6f6f6f5d
  • editor.lineHighlightBackground#2f3338
  • editor.lineHighlightBorder#2f3338
  • editor.rangeHighlightBackground#656f8367
  • editor.selectionBackground#4f596d
  • editor.selectionHighlightBackground#4f596dcb
  • editor.wordHighlightBackground#656f82be
  • editor.wordHighlightStrongBackground#656f82be
  • editorBracketHighlight.foreground1#fecf00
  • editorBracketHighlight.foreground2#a09836
  • editorBracketHighlight.foreground3#f1f07a
  • editorBracketMatch.background#0063001b
  • editorBracketMatch.border#bfbfbf
  • editorCodeLens.foreground#838d97
  • editorCursor.foreground#ffffff
  • editorError.border#00000000
  • editorError.foreground#cfa7a7
  • editorGroup.border#00000090
  • editorGroup.dropBackground#0064d741
  • editorGroup.emptyBackground#c7c7c7
  • editorGroup.focusedEmptyBorder#00000000
  • editorGroupHeader.noTabsBackground#c7c7c7
  • editorGroupHeader.tabsBackground#cecece
  • editorGroupHeader.tabsBorder#b0b0b0
  • editorGutter.addedBackground#27cc40
  • editorGutter.deletedBackground#ff4539
  • editorGutter.foldingControlForeground#ffffff
  • editorGutter.modifiedBackground#1172cd
  • editorHint.border#00000000
  • editorHint.foreground#1172cd
  • editorHoverWidget.background#cecece
  • editorHoverWidget.border#b0b0b0
  • editorHoverWidget.foreground#000000
  • editorHoverWidget.statusBarBackground#ffffff90
  • editorIndentGuide.activeBackground1#ffffff20
  • editorIndentGuide.background1#ffffff07
  • editorInfo.border#00000000
  • editorInfo.foreground#27cc40
  • editorLineNumber.activeForeground#dbdbdb
  • editorLineNumber.foreground#647a68
  • editorLink.activeForeground#1172cd
  • editorMarkerNavigation.background#ffffff
  • editorMarkerNavigationError.background#d50909
  • editorMarkerNavigationInfo.background#008100
  • editorMarkerNavigationWarning.background#117710
  • editorOverviewRuler.addedForeground#27cc40
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.bracketMatchForeground#656f82be
  • editorOverviewRuler.commonContentForeground#61616167
  • editorOverviewRuler.currentContentForeground#3fc7ad81
  • editorOverviewRuler.deletedForeground#ff4539
  • editorOverviewRuler.errorForeground#ff4539
  • editorOverviewRuler.findMatchForeground#656f82be
  • editorOverviewRuler.incomingContentForeground#40a6fe81
  • editorOverviewRuler.infoForeground#1172cd
  • editorOverviewRuler.modifiedForeground#1172cd
  • editorOverviewRuler.rangeHighlightForeground#656f82be
  • editorOverviewRuler.selectionHighlightForeground#656f82be
  • editorOverviewRuler.warningForeground#ffe609
  • editorOverviewRuler.wordHighlightForeground#656f82be
  • editorOverviewRuler.wordHighlightStrongForeground#656f82be
  • editorPane.background#191919
  • editorRuler.foreground#d4d4d4
  • editorSuggestWidget.background#cecece
  • editorSuggestWidget.border#b0b0b0
  • editorSuggestWidget.foreground#000000
  • editorSuggestWidget.highlightForeground#000000
  • editorSuggestWidget.selectedBackground#3280f2
  • editorUnnecessaryCode.opacity#000000bf
  • editorWarning.border#00000000
  • editorWarning.foreground#ffe609
  • editorWhitespace.foreground#c0c0c0
  • editorWidget.background#cecece
  • editorWidget.border#b0b0b0
  • editorWidget.foreground#000000
  • editorWidget.resizeBorder#b0b0b0
  • errorForeground#ff0000
  • extensionButton.prominentBackground#327d35
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#29632c
  • focusBorder#ffffff
  • foreground#818181
  • gitDecoration.addedResourceForeground#000000bf
  • gitDecoration.conflictingResourceForeground#000000bf
  • gitDecoration.deletedResourceForeground#000000bf
  • gitDecoration.ignoredResourceForeground#000000bf
  • gitDecoration.modifiedResourceForeground#000000bf
  • gitDecoration.submoduleResourceForeground#000000bf
  • gitDecoration.untrackedResourceForeground#000000bf
  • icon.foreground#000000
  • input.background#ffffff
  • input.border#1d1d1d
  • input.foreground#1d1d1d
  • input.placeholderForeground#4b4b4b
  • inputOption.activeBackground#e6e6e6
  • inputOption.activeBorder#1172cd
  • inputValidation.errorBackground#f2dede
  • inputValidation.errorBorder#f52714
  • inputValidation.infoBackground#d6ecf2
  • inputValidation.infoBorder#249beb
  • inputValidation.infoForeground#ffffff
  • inputValidation.warningBackground#f6f5d2
  • inputValidation.warningBorder#d9ba2e
  • list.activeSelectionBackground#468ed1
  • list.activeSelectionForeground#1d1d1d
  • list.dropBackground#ffffffff
  • list.errorForeground#1d1d1d
  • list.focusBackground#1172cd
  • list.focusForeground#000000
  • list.highlightForeground#1d1d1d
  • list.hoverBackground#0000001c
  • list.hoverForeground#000000
  • list.inactiveFocusBackground#1172cd80
  • list.inactiveSelectionBackground#468ed180
  • list.inactiveSelectionForeground#1d1d1d80
  • list.invalidItemForeground#1d1d1d
  • list.warningForeground#1d1d1d
  • merge.commonContentBackground#6161612a
  • merge.commonHeaderBackground#61616167
  • merge.currentContentBackground#3fc7ad34
  • merge.currentHeaderBackground#3fc7ad81
  • merge.incomingContentBackground#4096fe34
  • merge.incomingHeaderBackground#4096fe81
  • minimap.errorHighlight#ff0000
  • minimapSlider.activeBackground#ffffff20
  • minimapSlider.background#ffffff30
  • minimapSlider.hoverBackground#ffffff30
  • notificationCenterHeader.background#bfbfbf
  • notificationLink.foreground#1172cd
  • notifications.background#cecece
  • notifications.border#b0b0b0
  • panel.background#D7D7D7
  • panel.border#c1c1c1
  • panelTitle.activeBorder#c0c0c0
  • panelTitle.activeForeground#000000
  • panelTitle.inactiveForeground#1d1d1d
  • peekView.border#3d3e3e
  • peekViewEditor.background#3c3d45
  • peekViewEditor.matchHighlightBackground#656f82
  • peekViewEditor.matchHighlightBorder#656f82
  • peekViewEditorGutter.background#3c3c45
  • peekViewResult.background#424242
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#ffffffcc
  • peekViewResult.matchHighlightBackground#656f82
  • peekViewResult.selectionBackground#484853
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#333238
  • peekViewTitleDescription.foreground#dfdfdf
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#cccedc
  • pickerGroup.foreground#1172cd
  • progressBar.background#1172cd
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#ffffff80
  • scrollbarSlider.background#ffffff1a
  • scrollbarSlider.hoverBackground#ffffff25
  • selection.background#87a0b7
  • settings.checkboxBackground#3b3b40
  • settings.checkboxBorder#474747
  • settings.checkboxForeground#ffffff
  • settings.dropdownBackground#393a40
  • settings.dropdownBorder#454645
  • settings.dropdownForeground#ffffff
  • settings.dropdownListBorder#454645
  • settings.focusedRowBackground#00000057
  • settings.focusedRowBorder#00000000
  • settings.headerForeground#e7e7e7
  • settings.modifiedItemIndicator#1172cd
  • settings.numberInputBackground#3a3b40
  • settings.numberInputBorder#454645
  • settings.numberInputForeground#ffffff
  • settings.textInputBackground#3b3a42
  • settings.textInputBorder#474746
  • settings.textInputForeground#ffffff
  • sideBar.background#F6F6F6
  • sideBar.border#a7a7a7
  • sideBar.dropBackground#f5f5f5
  • sideBar.foreground#000000
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#a5a5a6
  • sideBarSectionHeader.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#E9E9E9
  • statusBar.border#cecece
  • statusBar.debuggingBackground#dddddd
  • statusBar.debuggingBorder#191717
  • statusBar.debuggingForeground#aaaaaa
  • statusBar.foreground#1d1d1d
  • statusBar.noFolderBackground#dddddd
  • statusBar.noFolderBorder#4c4c4c
  • statusBar.noFolderForeground#aaaaaa
  • statusBarItem.activeBackground#dddddd
  • statusBarItem.hoverBackground#dddddd
  • statusBarItem.prominentBackground#36c04b
  • statusBarItem.prominentHoverBackground#27cc40
  • tab.activeBackground#ffffff
  • tab.activeBorder#00000000
  • tab.activeBorderTop#00000000
  • tab.activeForeground#000000
  • tab.border#b4b3b3
  • tab.inactiveBackground#dddddd
  • tab.inactiveForeground#000000
  • tab.unfocusedActiveBackground#ffffff90
  • tab.unfocusedActiveBorder#00000000
  • tab.unfocusedActiveBorderTop#ffffff
  • tab.unfocusedActiveForeground#00000095
  • tab.unfocusedInactiveBackground#CDCDCD90
  • tab.unfocusedInactiveForeground#0d0d0d90
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0450a4
  • terminal.ansiBrightBlack#636363
  • terminal.ansiBrightBlue#0450a6
  • terminal.ansiBrightCyan#0597bb
  • terminal.ansiBrightGreen#15cf15
  • terminal.ansiBrightMagenta#bb05bb
  • terminal.ansiBrightRed#c73131
  • terminal.ansiBrightWhite#a4a4a4
  • terminal.ansiBrightYellow#b4b900
  • terminal.ansiCyan#0599bd
  • terminal.ansiGreen#01bd01
  • terminal.ansiMagenta#bb04bb
  • terminal.ansiRed#c73133
  • terminal.ansiWhite#565656
  • terminal.ansiYellow#939701
  • terminal.selectionBackground#00000040
  • textBlockQuote.background#00000000
  • textBlockQuote.border#00000000
  • textCodeBlock.background#00000000
  • textLink.activeForeground#1172cd
  • textLink.foreground#1172cd
  • textPreformat.foreground#d6d6d6
  • textSeparator.foreground#d6d6d6
  • titleBar.activeBackground#a1a1a1
  • titleBar.activeForeground#000000
  • titleBar.border#757575
  • titleBar.inactiveBackground#bebebe
  • titleBar.inactiveForeground#1d1d1d
  • tree.indentGuidesStroke#0000005d
  • widget.shadow#1d1d1d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.quoted.docstring.#647a68
meta.preprocessor, keyword.control.import#ffffff
string#7cb2c2
meta.template.expression, keyword.operator.assignment#ffdd00
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#15dfb3
constant.numeric#23acca
constant.language#00d0ff
constant.character#54b593
variable#a2b4af
variable.other.property#78a499
keyword#d16a87
keyword.operator, keyword.operator.arithmetic, storage.type.function.arrow#d16a87
storage#ffffff
support.type.property-name#c9e4a7
entity.name.type.class#3db061underline
entity.other.inherited-class#2d884a
entity.name.function#64b131
entity.name.function.method#ffffff
variable.parameter#9da7ac
variable.language#ffffff
entity.name.tag#ffffff
entity.other.attribute-name#d16a87
support.function#ffc516
support.constant#27aaec
support.type, support.class#38b76b
support.other.variable#2bc1e2
invalid
token.info-token#3773ec
token.warn-token#e6a626
token.error-token#f11b1b
token.debug-token#820f82
markup.heading#2d884abold
markup.heading.1.html#2d884a
markup.heading.2.html#3c8e51
markup.heading.3.html#4b9458
markup.heading.4.html#5a9a5f
markup.heading.5.html#6aa066
markup.heading.6.html#597f64
markup.boldbold
markup.italicitalic
markup.underlineunderline
markup.quote#7cb2c2
markup.inline.raw#ffffff
markup.underline.link#4da4fb
markup.list#9da7ac