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#7a7a7a
  • activityBar.border#36353560
  • activityBar.foreground#f0f0f0
  • activityBarBadge.background#166ba3
  • activityBarBadge.foreground#333333
  • badge.background#CCD7DA30
  • badge.foreground#90A4AE
  • button.background#80CBC440
  • debugToolBar.background#FAFAFA
  • dropdown.background#FAFAFA
  • dropdown.border#00000010
  • editor.background#fcfcfc
  • editor.foreground#161616
  • editor.inactiveSelectionBackground#E5EBF1
  • editor.lineHighlightBackground#CCD7DA50
  • editor.selectionBackground#80cbc3a9
  • editor.selectionHighlightBackground#80cbc328
  • editorBracketMatch.background#FAFAFA
  • editorBracketMatch.border#27272750
  • editorCursor.foreground#0a0a0ab9
  • editorError.foreground#c7322f70
  • editorGroup.border#00000020
  • editorGroupHeader.tabsBackground#FAFAFA
  • editorGutter.addedBackground#91B85960
  • editorGutter.deletedBackground#E5393560
  • editorGutter.modifiedBackground#6182B860
  • editorHoverWidget.background#FAFAFA
  • editorHoverWidget.border#00000010
  • editorIndentGuide.activeBackground#B0BEC5
  • editorIndentGuide.background#B0BEC570
  • editorInfo.foreground#6182B870
  • editorLineNumber.activeForeground#2aa0db
  • editorLineNumber.foreground#272727
  • editorLink.activeForeground#737a7e
  • editorMarkerNavigation.background#90A4AE05
  • editorOverviewRuler.border#FAFAFA
  • editorOverviewRuler.errorForeground#c7322f70
  • editorOverviewRuler.infoForeground#6182B840
  • editorOverviewRuler.warningForeground#26b16048
  • editorRuler.foreground#4c5458
  • editorSuggestWidget.background#F3F3F3
  • editorSuggestWidget.border#00000010
  • editorSuggestWidget.foreground#90A4AE
  • editorSuggestWidget.highlightForeground#7661b1
  • editorSuggestWidget.selectedBackground#CCD7DA50
  • editorWarning.foreground#26b16048
  • editorWhitespace.foreground#90A4AE40
  • editorWidget.background#FAFAFA
  • editorWidget.border#000000
  • editorWidget.resizeBorder#80CBC4
  • focusBorder#FAFAFA00
  • input.background#cfcfcf94
  • input.border#00000010
  • input.foreground#0e0e0e
  • input.placeholderForeground#494949
  • inputValidation.errorBorder#e5383579
  • inputValidation.infoBorder#538be46c
  • inputValidation.warningBorder#ffb52c73
  • list.activeSelectionBackground#E8E8E8
  • list.activeSelectionForeground#708180
  • list.focusBackground#90A4AE20
  • list.focusForeground#90A4AE
  • list.highlightForeground#5f5f5f
  • list.hoverBackground#E8E8E8
  • list.hoverForeground#61696d
  • list.inactiveSelectionBackground#CCD7DA50
  • list.inactiveSelectionForeground#414242a9
  • notificationLink.foreground#80CBC4
  • notifications.background#FAFAFA
  • notifications.foreground#90A4AE
  • panel.background#FAFAFA
  • panel.border#CBCBCB60
  • panel.dropBackground#90A4AE
  • panelTitle.activeBorder#80CBC4
  • panelTitle.activeForeground#000000
  • panelTitle.inactiveForeground#90A4AE
  • peekView.border#00000020
  • peekViewEditor.background#90A4AE05
  • peekViewEditor.matchHighlightBackground#80CBC440
  • peekViewEditorGutter.background#90A4AE05
  • peekViewResult.background#90A4AE05
  • peekViewResult.matchHighlightBackground#80CBC440
  • peekViewTitle.background#90A4AE05
  • peekViewTitleDescription.foreground#2a2b2c60
  • pickerGroup.foreground#80CBC4
  • progressBar.background#838d92cc
  • scrollbar.shadow#b9b5b5b7
  • scrollbarSlider.activeBackground#7e7f80b7
  • scrollbarSlider.background#70707031
  • scrollbarSlider.hoverBackground#7e7f80b7
  • selection.background#cf9b9b79
  • settings.checkboxBackground#FAFAFA
  • settings.checkboxForeground#90A4AE
  • settings.dropdownBackground#FAFAFA
  • settings.dropdownForeground#637077
  • settings.headerForeground#80CBC4
  • settings.modifiedItemIndicator#80CBC4
  • settings.numberInputBackground#FAFAFA
  • settings.numberInputBorder#CECECE
  • settings.numberInputForeground#353535
  • settings.textInputBackground#FAFAFA
  • settings.textInputBorder#CECECE
  • settings.textInputForeground#1d1d1d
  • sideBar.background#FAFAFA
  • sideBar.border#CBCBCB60
  • sideBar.foreground#627883
  • sideBarSectionHeader.background#FAFAFA
  • sideBarSectionHeader.border#CBCBCB60
  • sideBarTitle.foreground#6F6F6F
  • statusBar.background#FAFAFA
  • statusBar.border#CBCBCB60
  • statusBar.debuggingBackground#4b85f1
  • statusBar.debuggingForeground#ebf0e1
  • statusBar.foreground#6e6e6e
  • statusBar.noFolderBackground#CECECE
  • statusBarItem.hoverBackground#59aedfb7
  • tab.activeBorder#80CBC4
  • tab.activeForeground#313131
  • tab.activeModifiedBorder#627883
  • tab.border#FAFAFA
  • tab.inactiveBackground#FAFAFA
  • tab.inactiveForeground#627883
  • tab.unfocusedActiveBorder#90A4AE
  • tab.unfocusedActiveForeground#535353
  • textLink.activeForeground#a4a6a7c0
  • textLink.foreground#be6579
  • widget.shadow#00000020

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
comment, punctuation.definition.comment, string.quoted.docstring#008000
variable, string constant.other.placeholder#0d3142
constant.other.php#d89c2c
constant.other.color#FAFAFA
invalid, invalid.illegal#cd3131
invalid.deprecated#673fd3
keyword, storage.type, storage.modifier#46c9ce
keyword.control#1b1ebb
keyword.operator#252222
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#4a397a
constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#242daa
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#800000
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#878f1c
source.cpp meta.block variable.other#800000
variable.other.constant#800000
support.other.variable, string.other.link#800000
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other#a02b29
variable.parameter.function.language.special, variable.parameter#b43230
string, constant.other.key, entity.other.inherited-class, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#591785
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#b37f1f
support.type#555f70
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#525e72
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#dd3330
variable.language#dd3330
entity.name.method.js#6182B8
meta.class-method.js entity.name.function.js, variable.function.constructor#344664
entity.other.attribute-name#7C4DFF
entity.other.attribute-name.class#b37f1f
source.sass keyword.control#6182B8
markup.inserted#5977b8
markup.deleted#E53935
markup.changed#7C4DFF
string.regexp#39ADB5
constant.character.escape#39ADB5
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#6182B8
source.js constant.other.object.key.js string.unquoted.label.js#E53935
source.json meta.structure.dictionary.json support.type.property-name.json#7C4DFF
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#b37f1f
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#F76D47
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#E53935
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#a76e62
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#6182B8
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF5370
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#7C4DFF
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#91B859
text.html.markdown, punctuation.definition.list_item.markdown#90A4AE
string.other.link.title.markdown#6182B8
string.other.link.description.title.markdown#7C4DFF
constant.other.reference.link.markdown#b37f1f
markup.raw.block#7C4DFF
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#90A4AE90
variable.language.fenced.markdown#E7EAEC
meta.separator#a0a2a3bold
text.html.markdown markup.inline.raw.markdown#7C4DFF
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#E7EAEC
text.html.markdown meta.dummy.line-break
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#55b3c0
markup.quote punctuation.definition.blockquote.markdown#E7EAEC
markup.italic#FF5370italic
markup.heading#800000bold
markup.bold, markup.bold string#FF5370bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#FF5370bold
markup.underline#F76D47underline
markup.strikestrike
markup.quoteitalic
string.other.link.title.markdown#6182B8
string.other.link.description.title.markdown#7C4DFF
constant.other.reference.link.markdown#b37f1f
markup.raw.block#7C4DFF
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#90A4AE90
variable.language.fenced.markdown#E7EAEC
meta.separator#E7EAECbold
markup.table#90A4AE