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#007ACC
  • activityBarBadge.background#e6562b
  • debugExceptionWidget.border#AB395B
  • diffEditor.insertedTextBackground#31958A55
  • diffEditor.removedTextBackground#892F4688
  • editor.background#d8d8d8
  • editor.findMatchBackground#FFFF00
  • editor.findMatchBorder#3bfdea
  • editor.findMatchHighlightBackground#eeee44
  • editor.findMatchHighlightBorder#00000030
  • editor.foreground#302f2f
  • editor.inactiveSelectionBackground#E5EBF1
  • editor.lineHighlightBackground#99D099
  • editor.selectionBackground#FFFF00
  • editor.selectionHighlightBackground#caca58
  • editorCursor.foreground#ff0000
  • editorGroup.border#6da2c5
  • editorGroupHeader.tabsBackground#ECECEC
  • editorIndentGuide.activeBackground#747272
  • editorIndentGuide.background#c7c7c7
  • editorLineNumber.foreground#A0A0A0
  • editorLink.activeForeground#007ACC
  • editorSuggestWidget.background#F3F3F3
  • editorSuggestWidget.highlightForeground#f511d6
  • editorWhitespace.foreground#A0A0A5
  • extensionButton.prominentBackground#5f8b3b
  • extensionButton.prominentHoverBackground#57ad11
  • focusBorder#007ACC
  • input.placeholderForeground#767676
  • list.activeSelectionBackground#007ACC
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#a8aab8
  • list.highlightForeground#f511d6
  • list.hoverBackground#E8E8E8
  • list.inactiveSelectionBackground#CCCEDB
  • notebook.cellBorderColor#E8E8E8
  • panel.background#ECECEC
  • peekViewEditor.background#B6DEB6
  • peekViewEditor.matchHighlightBackground#eeee33
  • peekViewResult.background#B6DEB6
  • peekViewResult.matchHighlightBackground#eeee44
  • pickerGroup.border#596F99
  • pickerGroup.foreground#596F99
  • settings.numberInputBorder#CECECE
  • settings.textInputBorder#CECECE
  • sideBarSectionHeader.background#0000
  • sideBarSectionHeader.border#61616130
  • sideBarTitle.foreground#6F6F6F
  • statusBar.background#007ACC
  • statusBarItem.errorBackground#c72e0f
  • statusBarItem.prominentBackground#0063a5
  • statusBarItem.prominentHoverBackground#0063a5dd
  • statusBarItem.remoteBackground#198bd8
  • statusBarItem.remoteForeground#FFF
  • tab.lastPinnedBorder#61616130
  • terminal.ansiBlack#111111
  • terminal.ansiBlue#5597ef
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#80baff
  • terminal.ansiBrightCyan#6ae4e4
  • terminal.ansiBrightGreen#b8f171
  • terminal.ansiBrightMagenta#d778ff
  • terminal.ansiBrightRed#ff7882
  • terminal.ansiBrightWhite#f1f1f1
  • terminal.ansiBrightYellow#ffe580
  • terminal.ansiCyan#00b1b1
  • terminal.ansiGreen#097e00
  • terminal.ansiMagenta#ebbbff
  • terminal.ansiRed#ff9da4
  • terminal.ansiWhite#cccccc
  • terminal.ansiYellow#ffeead
  • terminal.background#33423c
  • terminal.foreground#CCCCCC
  • window.activeBorder#007ACC
  • window.inactiveBorder#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.type, entity.name, entity.name.type, entity.name.type.class, entity.name.namespace, entity.name.scope-resolution, entity.name.class, support.class, entity.other.inherited-class, meta.use.php, meta.embedded, meta.use.php, source.groovy.embedded, meta.embedded.assembly, support.other.namespace.php, support.orther.namespace.use.php, source.java storage.modifier.import, source.java storage.type#ee0000
function, entity.name.function, entity.name.function.call, entity.name.function.templated, variable.function, support.function, support.method, keyword.other.special-method#0000ee
meta.function entity.name.function
emphasisitalic
variable.other.constant, constant.other.property, entity.name.constant#eeeded
variable.language.arguments#1c1cb8
strongbold
meta.diff.header#000080
constant.language#0000ff
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#098658
constant.regexp#811f3f
entity.name.tag#800000
entity.name.selector#800000
entity.other.attribute-name#ff0000
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#800000
invalid#cd3131
markup.underlineunderline
markup.underline.link#a9dc76
markup.inserted, markup.inserted punctuation.definition.inserted#a9dc76
string.other.ref, string.other.restructuredtext.ref#a9dc76
markup.quote#22aa44
markup.bold, markup.italic#22aa44
markup.bold#000080bold
markup.heading#800000bold
markup.italicitalic
markup.inserted#098658
markup.deleted#c70a0a
markup.changed#0451a5
punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown#0451a5
markup.inline.raw#800000
punctuation.definition.tag#800000
meta.preprocessor, entity.name.function.preprocessor#0000ff
meta.preprocessor.string#880f0f
meta.preprocessor.numeric#098658
meta.structure.dictionary.key.python#0451a5
storage, storage.type, storage.modifier, storage.modifier.package, storage.modifier.import#ba68c8
keyword, keyword.control#0066CC
storage.modifier, keyword.operator.noexcept#ff00ff
constant.numeric, constant.language, support.constant, constant.character, constant.escape#E7553E
string.comment.buffered.block.pug, string.quoted.pug, string.interpolated.pug, string.unquoted.plain.in.yaml, string.unquoted.plain.out.yaml, string.unquoted.block.yaml, string.quoted.single.yaml, string.quoted.double.xml, string.quoted.single.xml, string.unquoted.cdata.xml, string.quoted.double.html, string.quoted.single.html, string.unquoted.html, string.quoted.single.handlebars, string.quoted.double.handlebars#0000ff
string.regexp#811f3f
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#0000ff
meta.template.expression#a13636
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#0451a5
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#ff0000
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#E53935
support.type.property-name.json#0451a5
keyword.operator#333333
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#0000ff
keyword.other.unit#098658
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#800000
support.function.git-rebase#0451a5
constant.sha.git-rebase#098658
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#000000
variable.language#0000ff
support.type, entity.name, entity.name.type, entity.name.type.class, entity.name.namespace, entity.name.scope-resolution, entity.name.class, support.class, entity.other.inherited-class, meta.use.php, meta.embedded, meta.use.php, source.groovy.embedded, meta.embedded.assembly, support.other.namespace.php, support.orther.namespace.use.php, source.java storage.modifier.import, source.java storage.type#ee0000
function, entity.name.function, entity.name.function.call, entity.name.function.templated, variable.function, support.function, support.method, keyword.other.special-method#0000ee
meta.function entity.name.function
emphasisitalic
variable.other.constant, constant.other.property, entity.name.constant#eeeded
variable.language.arguments#1c1cb8
strongbold
meta.diff.header#000080
constant.language#0000ff
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#098658
constant.regexp#811f3f
entity.name.tag#800000
entity.name.selector#800000
entity.other.attribute-name#ff0000
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#800000
invalid#cd3131
markup.underlineunderline
markup.underline.link#a9dc76
markup.inserted, markup.inserted punctuation.definition.inserted#a9dc76
string.other.ref, string.other.restructuredtext.ref#a9dc76
markup.quote#22aa44
markup.bold, markup.italic#22aa44
markup.bold#000080bold
markup.heading#800000bold
markup.italicitalic
markup.inserted#098658
markup.deleted#c70a0a
markup.changed#0451a5
punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown#0451a5
markup.inline.raw#800000
punctuation.definition.tag#800000
meta.preprocessor, entity.name.function.preprocessor#0000ff
meta.preprocessor.string#880f0f
meta.preprocessor.numeric#098658
meta.structure.dictionary.key.python#0451a5
storage, storage.type, storage.modifier, storage.modifier.package, storage.modifier.import#ba68c8
keyword, keyword.control#0066CC
storage.modifier, keyword.operator.noexcept#ff00ff
constant.numeric, constant.language, support.constant, constant.character, constant.escape#E7553E
string.comment.buffered.block.pug, string.quoted.pug, string.interpolated.pug, string.unquoted.plain.in.yaml, string.unquoted.plain.out.yaml, string.unquoted.block.yaml, string.quoted.single.yaml, string.quoted.double.xml, string.quoted.single.xml, string.unquoted.cdata.xml, string.quoted.double.html, string.quoted.single.html, string.unquoted.html, string.quoted.single.handlebars, string.quoted.double.handlebars#0000ff
string.regexp#811f3f
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#0000ff
meta.template.expression#a13636
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#0451a5
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#ff0000
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#E53935
support.type.property-name.json#0451a5
keyword.operator#333333
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#0000ff
keyword.other.unit#098658
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#800000
support.function.git-rebase#0451a5
constant.sha.git-rebase#098658
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#000000
variable.language#0000ff
comment#979797italic
keyword.other.unit, keyword.other, keyword.operator.new, keyword.other.unsafe.rust#ba68c8
function#0000ff
string#a31515
variable#008080
constant, constant.other#d39e0c
number#098658
keyword#0087a1