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#a73b39
  • activityBarBadge.foreground#ffffff
  • badge.background#a73b39
  • badge.foreground#ffffff
  • button.background#4a6656
  • button.foreground#ffffff
  • dropdown.background#d1d6d6
  • dropdown.border#a73b39
  • dropdown.foreground#343939
  • editor.background#d6dbdb
  • editor.foreground#343939
  • editor.hoverHighlightBackground#a73b3922
  • editor.lineHighlightBackground#ced4d4
  • editor.selectionBackground#9bb7a733
  • editor.wordHighlightBackground#34393922
  • editor.wordHighlightStrongBackground#4a665622
  • editorBracketMatch.background#a73b3944
  • 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#a73b39
  • 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#a73b39
  • editorSuggestWidget.selectedBackground#adb7b7
  • editorWhitespace.foreground#bbc3c3
  • editorWidget.background#c8cfcf
  • editorWidget.border#a0abab
  • extensionButton.prominentBackground#a73b39
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#cf7371
  • focusBorder#a73b39
  • foreground#343939
  • gitDecoration.conflictingResourceForeground#6a1faf
  • gitDecoration.deletedResourceForeground#a30e29
  • gitDecoration.ignoredResourceForeground#778888
  • gitDecoration.modifiedResourceForeground#c48405
  • gitDecoration.untrackedResourceForeground#59a50b
  • input.activeBorder#a73b39
  • 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#a73b39
  • 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#a73b39
  • panelTitle.activeForeground#475151
  • panelTitle.inactiveForeground#929f9f
  • peekView.border#a73b39
  • 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#a73b39aa
  • scrollbarSlider.background#34393935
  • scrollbarSlider.hoverBackground#a73b3955
  • sideBar.background#c8cfcf
  • sideBar.foreground#343939
  • sideBarSectionHeader.background#adb7b7
  • sideBarSectionHeader.foreground#343939
  • statusBar.background#a73b39
  • 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#a73b39
  • terminal.ansiGreen#a73b39
  • 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#a73b39
entity.name.class#4a6656underline
entity.other.inherited-class#4a6656
entity.name.function#343939
variable.parameter#566262
entity.name.tag#a73b39
entity.other.attribute-name#4a6656
support.function#a73b39
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#a73b39
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#a73b39normal
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#a73b39
markup.bold.markdown, markup.italic.markdown#a73b39
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