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.activeBorder#f9826c
  • activityBar.background#fff
  • activityBar.border#e1e4e8
  • activityBar.foreground#2f363d
  • activityBar.inactiveForeground#959da5
  • activityBarBadge.background#ba5908
  • activityBarBadge.foreground#fff
  • badge.background#c4724d
  • badge.foreground#fff
  • breadcrumb.activeSelectionForeground#586069
  • breadcrumb.focusForeground#2f363d
  • breadcrumb.foreground#6a737d
  • breadcrumbPicker.background#fafbfc
  • button.background#212529
  • button.foreground#fff
  • button.hoverBackground#adb5bd
  • checkbox.border#d1d5da
  • debugToolBar.background#fff
  • diffEditor.insertedTextBackground#41a9521a
  • diffEditor.removedTextBackground#f5676726
  • dropdown.background#f8f9fa
  • dropdown.foreground#51575e
  • editor.background#fff
  • editor.foreground#24292e
  • editor.inactiveSelectionBackground#adb5bd60
  • editor.lineHighlightBackground#e9ecee
  • editor.selectionBackground#dae0e7
  • editor.selectionHighlightBackground#dce0e4a4
  • editorCursor.foreground#c96232
  • editorError.foreground#d43b3b
  • editorGroup.border#e1e4e8
  • editorGroupHeader.tabsBackground#f6f8fa
  • editorGroupHeader.tabsBorder#e1e4e8
  • editorGutter.addedBackground#D0E890
  • editorGutter.deletedBackground#fa9595
  • editorGutter.modifiedBackground#c98332
  • editorHint.foreground#212529
  • editorInfo.foreground#212529
  • editorLineNumber.activeForeground#442003
  • editorLineNumber.foreground#1b1f23
  • editorOverviewRuler.addedForeground#D0E890
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.deletedForeground#fa9595
  • editorOverviewRuler.errorForeground#f56767
  • editorOverviewRuler.infoForeground#329af0
  • editorOverviewRuler.modifiedForeground#c98332
  • editorOverviewRuler.warningForeground#df7b39
  • editorSuggestWidget.background#f8f9faff
  • editorWarning.foreground#ba5908
  • editorWidget.background#f6f8fa
  • errorForeground#ee5656
  • extensionButton.prominentBackground#ba5908
  • extensionButton.prominentForeground#fff
  • extensionButton.prominentHoverBackground#ba5908
  • focusBorder#212529
  • foreground#444d56
  • gitDecoration.addedResourceForeground#889b4a
  • gitDecoration.conflictingResourceForeground#d43b3b
  • gitDecoration.deletedResourceForeground#d43b3b
  • gitDecoration.modifiedResourceForeground#ba5908
  • gitDecoration.untrackedResourceForeground#889b4a
  • input.background#f8f9fa
  • input.border#cfd4d9
  • input.foreground#51575e
  • input.placeholderForeground#adb5bd
  • list.activeSelectionBackground#f0873240
  • list.activeSelectionForeground#212529
  • list.errorForeground#d43b3b
  • list.focusBackground#f0973240
  • list.focusForeground#212529
  • list.highlightForeground#ba5908
  • list.hoverBackground#cfd4d9
  • list.inactiveSelectionBackground#adb5bd4d
  • list.inactiveSelectionForeground#212529
  • list.warningForeground#ba5908
  • panel.border#cfd4d9
  • panelTitle.activeBorder#f9826c
  • panelTitle.activeForeground#2f363d
  • panelTitle.inactiveForeground#6a737d
  • peekView.border#cfd4d9
  • peekViewEditor.background#cfd4d955
  • peekViewTitle.background#f8f9faff
  • scrollbar.shadow#2125291a
  • scrollbarSlider.activeBackground#21252926
  • scrollbarSlider.background#21252913
  • scrollbarSlider.hoverBackground#21252926
  • sideBar.background#f6f8fa
  • sideBar.border#e1e4e8
  • sideBar.foreground#212529
  • sideBarSectionHeader.background#f6f8fa
  • sideBarSectionHeader.border#e1e4e8
  • sideBarSectionHeader.foreground#212529
  • sideBarTitle.foreground#212529
  • statusBar.background#fff
  • statusBar.border#e1e4e8
  • statusBar.debuggingBackground#f9826c
  • statusBar.debuggingForeground#fff
  • statusBar.foreground#586069
  • statusBar.noFolderBackground#fff
  • tab.activeBackground#fff
  • tab.activeBorder#fff
  • tab.activeBorderTop#f9826c
  • tab.activeForeground#2f363d
  • tab.border#e1e4e8
  • tab.hoverBackground#fff
  • tab.inactiveBackground#f6f8fa
  • tab.inactiveForeground#6a737d
  • tab.unfocusedActiveBorder#fff
  • tab.unfocusedActiveBorderTop#e1e4e8
  • tab.unfocusedHoverBackground#fff
  • titleBar.activeBackground#fff
  • titleBar.activeForeground#2f363d
  • titleBar.inactiveBackground#f6f8fa
  • titleBar.inactiveForeground#6a737d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, meta.definition.variable.name, support.variable#212529
meta.object-literal.key, meta.object-literal.key entity.name.function#212529
comment, punctuation.comment, punctuation.definition.comment#999988
keyword.operator#212529
punctuation, delimiter, bracket, brace, paren, delimiter.tag, punctuation.tag, tag.html, tag.xml, meta.property-value punctuation.separator.key-value, punctuation.definition.metadata.md, string.link.md, meta.brace#727981
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.js, punctuation.section.embedded.begin.metatag.php, punctuation.section.embedded.end.metatag.php#212529
string, meta.property-value.string, support.constant.property-value.string, meta.structure.dictionary.value.json string.quoted.double.json, meta.structure.dictionary.json string.quoted.double.json, meta.preprocessor string#e44344
constant.numeric, meta.property-value.numeric, support.constant.property-value.numeric, meta.property-value.color, support.constant.property-value.color, constant.language#009999
constant.character, constant.other, entity.name.class, entity.other.inherited-class, entity.other.attribute-name, entity.name, entity.name.function, entity.other.attribute-name, entity.other.attribute-name.html, support.type.property-name, entity.name.tag.table, meta.structure.dictionary.json string.quoted.double.json#212529
keyword, meta.property-value.keyword, support.constant.property-value.keyword, meta.preprocessor.keyword, keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as, support.type#212529bold
storage, storage.type, storage.type.ts, storage.type.var.ts, storage.type.js, storage.type.var.js, storage.type.const.ts, storage.type.let.ts, storage.type.let.js, storage.type.const.js, entity.name.tag#212529bold
meta.ptr, meta.pointer, meta.address, meta.array.cxx
meta.preprocessor#212529
support.class, support.function#212529
support.constant#e24747bold
invalid#e24747
invalid.deprecated#e24747
punctuation.definition.heading.md, entity.name.type.md, beginning.punctuation#212529
markup.heading, entity.name.section#212529bold
markup.raw, markup.inline.raw, markup.fenced, markup.fenced_code#727981italic
markup.link, string.other.link.title, string.other.link.description, meta.link.inline, meta.image.inline#212529
variable.language.makefile, variable.other.makefile#212529
markup.italicitalic
markup.boldbold
entity.other.attribute-name.class.css#212529
entity.name.tag.css#212529bold
meta.property-name.css#212529