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.background#343939
  • activityBar.foreground#d6dbdb
  • activityBarBadge.background#BE1704
  • activityBarBadge.foreground#ffffff
  • badge.background#BE1704
  • badge.foreground#ffffff
  • button.background#4a6656
  • button.foreground#ffffff
  • dropdown.background#d1d6d6
  • dropdown.border#BE1704
  • dropdown.foreground#343939
  • editor.background#d6dbdb
  • editor.foreground#343939
  • editor.hoverHighlightBackground#BE170422
  • editor.lineHighlightBackground#ced4d4
  • editor.selectionBackground#9bb7a733
  • editor.wordHighlightBackground#34393922
  • editor.wordHighlightStrongBackground#4a665622
  • editorBracketMatch.background#BE170444
  • editorBracketMatch.border#4a6656
  • editorCursor.foreground#222222
  • editorGroup.background#ced4d4
  • editorGroupHeader.tabsBackground#ced4d4
  • editorGutter.addedBackground#59a50b
  • editorGutter.background#d1d6d6
  • editorGutter.deletedBackground#a30e29
  • editorGutter.modifiedBackground#c48405
  • editorIndentGuide.background#bbc3c3
  • editorLineNumber.foreground#a0abab
  • editorLink.activeForeground#BE1704
  • editorOverviewRuler.addedForeground#59a50b
  • editorOverviewRuler.deletedForeground#a30e29
  • editorOverviewRuler.errorForeground#a30e29
  • editorOverviewRuler.findMatchForeground#4a665655
  • editorOverviewRuler.infoForeground#6a1faf
  • editorOverviewRuler.modifiedForeground#c48405
  • editorOverviewRuler.warningForeground#c48405
  • editorRuler.foreground#bbc3c3
  • editorSuggestWidget.foreground#343939
  • editorSuggestWidget.highlightForeground#BE1704
  • editorSuggestWidget.selectedBackground#adb7b7
  • editorWhitespace.foreground#bbc3c3
  • editorWidget.background#c8cfcf
  • editorWidget.border#a0abab
  • extensionButton.prominentBackground#BE1704
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#cf7371
  • focusBorder#BE1704
  • foreground#343939
  • gitDecoration.conflictingResourceForeground#6a1faf
  • gitDecoration.deletedResourceForeground#a30e29
  • gitDecoration.ignoredResourceForeground#778888
  • gitDecoration.modifiedResourceForeground#c48405
  • gitDecoration.untrackedResourceForeground#59a50b
  • input.activeBorder#BE1704
  • input.background#d6dbdb
  • input.border#6b7a7a
  • input.foreground#343939
  • input.placeholderForeground#a0abab
  • inputOption.activeBorder#4a6656
  • list.activeSelectionBackground#4a6656
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#adb7b7
  • list.hoverBackground#dee2e2
  • list.inactiveSelectionBackground#d6dbdb
  • notification.background#adb7b7
  • notification.buttonBackground#BE1704
  • notification.buttonForeground#ffffff
  • notification.errorBackground#e61f44
  • notification.errorForeground#ffffff
  • notification.foreground#343939
  • notification.infoBackground#9d37fc
  • notification.infoForeground#ffffff
  • notification.warningBackground#f7b83d
  • notification.warningForeground#ffffff
  • panel.background#cbd1d1
  • panel.border#b5bebe
  • panelTitle.activeBorder#BE1704
  • panelTitle.activeForeground#475151
  • panelTitle.inactiveForeground#929f9f
  • peekView.border#BE1704
  • peekViewEditor.background#d1d6d6
  • peekViewEditor.matchHighlightBackground#4a665655
  • peekViewEditorGutter.background#c6cdcd
  • peekViewResult.background#c8cfcf
  • peekViewResult.fileForeground#404646
  • peekViewResult.lineForeground#717c7c
  • peekViewResult.matchHighlightBackground#4a665655
  • peekViewResult.selectionBackground#dbe0e0
  • peekViewResult.selectionForeground#404646
  • peekViewTitle.background#d1d6d6
  • peekViewTitleDescription.foreground#2d3131
  • peekViewTitleLabel.foreground#343939
  • progressBar.background#343939
  • scrollbar.shadow#6b7a7a
  • scrollbarSlider.activeBackground#BE1704aa
  • scrollbarSlider.background#34393935
  • scrollbarSlider.hoverBackground#BE170455
  • sideBar.background#c8cfcf
  • sideBar.foreground#343939
  • sideBarSectionHeader.background#adb7b7
  • sideBarSectionHeader.foreground#343939
  • statusBar.background#BE1704
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#4a6656
  • tab.activeForeground#343939
  • tab.border#b5bebe
  • tab.inactiveBackground#cbd1d1
  • tab.inactiveForeground#98a1a1
  • terminal.ansiBlack#e4e7e7
  • terminal.ansiBlue#343939
  • terminal.ansiBrightBlack#ffffff
  • terminal.ansiBrightBlue#656e6e
  • terminal.ansiBrightCyan#dc9997
  • terminal.ansiBrightGreen#dc9997
  • terminal.ansiBrightMagenta#b7c4bd
  • terminal.ansiBrightRed#f03e5f
  • terminal.ansiBrightWhite#656e6e
  • terminal.ansiBrightYellow#b7c4bd
  • terminal.ansiCyan#BE1704
  • terminal.ansiGreen#BE1704
  • terminal.ansiMagenta#4a6656
  • terminal.ansiRed#ba0e2e
  • terminal.ansiWhite#404646
  • terminal.ansiYellow#4a6656
  • terminal.background#d6dbdb
  • terminal.foreground#343939
  • titleBar.activeBackground#b3b9b9
  • titleBar.activeForeground#343939
  • widget.shadow#a0abab55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#343939
comment#9ba5a5
string#3c6767
constant.numeric#2f6868
constant.language#4a6656
constant.character, constant.other#4a6656
variable
keyword#4a6656
storage#4a6656
storage.type#BE1704
entity.name.class#4a6656underline
entity.other.inherited-class#4a6656
entity.name.function#343939
variable.parameter#566262
entity.name.tag#BE1704
entity.other.attribute-name#4a6656
support.function#BE1704
support.constant#4a6656
support.type, support.class#4a6656
support.other.variable
invalid#B0302C
invalid.deprecated#B0302C
meta.structure.dictionary.json string.quoted.double.json#3c6767
meta.diff, meta.diff.header#9ba5a5
markup.deleted#e61f44
markup.inserted#A6E22E
markup.changed#f7b83d
constant.numeric.line-number.find-in-files - match#8FBE00A0
entity.name.filename.find-in-files#E6DB74
keyword.other#738080
meta.property-value, support.constant.property-value, constant.other.color#3c6767
meta.structure.dictionary.json string.quoted.double.json#4a6656
meta.structure.dictionary.value.json string.quoted.double.json#3c6767
meta.property-name support.type.property-namenormal
meta.property-value punctuation.separator.key-value#343939
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#BE1704
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#BE1704normal
variable.other#566262normal
variable.parameter.function.coffee#2f6868
entity.name.section.markdown#4a6656
punctuation.definition.heading.markdown#4a6656
markup.raw.inline.markdown#3c6767
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#4a6656
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#4a6656
punctuation.definition.metadata.markdown#4a6656
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#BE1704
markup.bold.markdown, markup.italic.markdown#BE1704
markup.italic.markdownitalic
markup.bold.markdownbold
markup.raw.block.markdown#664e4d
markup.deleted.git_gutter#e61f44
markup.inserted.git_gutter#50680E
markup.changed.git_gutter#f7b83d
meta.template.expression#343939