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#2e2121
  • activityBar.foreground#d39797
  • activityBarBadge.background#eba1a1
  • badge.background#644444
  • badge.foreground#d8a59c
  • button.background#a14231
  • checkbox.background#6e3126
  • descriptionForeground#e66565
  • dropdown.background#5a3832
  • dropdown.listBackground#412d2a
  • editor.background#1b1010
  • editor.findMatchBackground#ffaaaa48
  • editor.findMatchHighlightBackground#ffa3a31a
  • editor.foreground#d8b1b1
  • editor.selectionBackground#dfb9b927
  • editorGroup.dropBackground#ffffff15
  • editorGroupHeader.tabsBackground#130b0b
  • errorForeground#e91e1e
  • focusBorder#2e0c0b
  • foreground#eb9f91
  • icon.foreground#e998a6
  • input.background#352424
  • list.activeSelectionBackground#422e2e
  • list.activeSelectionForeground#ffc2c2
  • list.hoverBackground#e79b9b0a
  • list.inactiveSelectionBackground#3b2929
  • list.inactiveSelectionForeground#f0b8b8
  • progressBar.background#a14231
  • scrollbarSlider.activeBackground#4d2b2b
  • scrollbarSlider.background#311c1c
  • scrollbarSlider.hoverBackground#3b2222
  • selection.background#830000
  • sideBar.background#241a1a
  • sideBarSectionHeader.background#312424
  • sideBarTitle.foreground#e9d0d0
  • statusBar.background#3d2c2c
  • statusBar.foreground#dddddd
  • tab.activeBackground#2c1b1b
  • tab.activeBorderTop#a54d4d
  • tab.activeForeground#caafaf
  • tab.inactiveBackground#1b1010
  • tab.inactiveForeground#857371
  • tab.unfocusedActiveBorderTop#816239
  • tab.unfocusedActiveForeground#8a7975
  • tab.unfocusedInactiveForeground#615553
  • textLink.activeForeground#ffdb8f
  • textLink.foreground#ecc061
  • textPreformat.foreground#eb9f91
  • textSeparator.foreground#a8908c
  • titleBar.activeBackground#3d2c2c
  • titleBar.activeForeground#b68787
  • titleBar.border#2e212136
  • titleBar.inactiveBackground#2e2121
  • titleBar.inactiveForeground#755f5f
  • widget.shadow#200301
  • window.activeBorder#eba1a1
  • window.inactiveBorder#9c6b6b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#b86464italic
variable, string constant.other.placeholder, variable.other.constant.ts#eed29f
constant.other.color, constant.other.color.rgb-value.hex.css#aca0a0
invalid, invalid.illegal#be3c93
keyword, storage.type, storage.modifier#c0a0a0
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, 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#f09a9a
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#c79a07
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#ec6262
meta.block variable.other#e4815a
variable.other.property.ts#ebab92
support.other.variable, string.other.link#e660da
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#F78C6C
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#FFA66B
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#ddaa71
support.type#f3acd0
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#cf9c72
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF5370
variable.language#fc3859italic
entity.name.method.js#ff82b6italic
meta.class-method.js entity.name.function.js, variable.function.constructor#9fff82
meta.object-literal.key.ts#fd8585
entity.other.attribute-name#d8b7bf
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFCB6Bitalic
entity.other.attribute-name.class#FFCB6B
source.sass keyword.control, entity.other.attribute-name.id.css#e774de
keyword.other.important.css#e23d3d
markup.inserted#cdd18f
markup.deleted#ff2448
markup.changed#c078f0
string.regexp#ff89e1
constant.character.escape#ff89ba
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#ffb482italic
source.js constant.other.object.key.js string.unquoted.label.js#FF5370italic
source.json meta.structure.dictionary.json support.type.property-name.json#f59c85
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#d6ba5f
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#F78C6C
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#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 support.type.property-name.json#C17E70
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#ff9582
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#f071d0
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#f5d98d
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#b6e88d
markup.italic#f0685fitalic
markup.bold, markup.bold string#ff333dbold
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#ff7b00bold
markup.underline#F78C6Cunderline
text.html.markdown, punctuation.definition.list_item.markdown#c9a9a9
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#fa9006
meta.separator#7e7e7ebold
markup.quoteitalic
markup.quote punctuation.definition.blockquote.markdown#b7d89c
string.other.link.description.markdown, string.other.link.title.markdown#eb9f2e
markup.underline.link.markdown, markup.underline.link.image.markdown#c76fad
markup.raw.block#e792ea
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#d3c618