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.

  • actionBar.toggledBackground#383a49
  • activityBar.background#202020
  • activityBarBadge.background#007ACC
  • checkbox.border#6B6B6B
  • editor.background#000000
  • editor.foreground#c8c8c8
  • editor.inactiveSelectionBackground#3A3D41
  • editor.selectionHighlightBackground#ADD6FF26
  • editorGroupHeader.tabsBackground#252526
  • editorIndentGuide.activeBackground1#707070
  • editorIndentGuide.background1#404040
  • input.placeholderForeground#A6A6A6
  • list.activeSelectionIconForeground#FFF
  • list.dropBackground#383B3D
  • menu.background#252526
  • menu.border#454545
  • menu.foreground#CCCCCC
  • menu.selectionBackground#0078d4
  • menu.separatorBackground#454545
  • ports.iconRunningProcessForeground#369432
  • sideBar.background#121212
  • sideBarSectionHeader.background#0000
  • sideBarSectionHeader.border#ccc3
  • sideBarTitle.foreground#BBBBBB
  • statusBar.background#0c6cb1
  • statusBarItem.remoteBackground#16825D
  • statusBarItem.remoteForeground#FFF
  • tab.activeBackground#000000
  • tab.border#000000
  • tab.inactiveBackground#2c2c2c00
  • tab.lastPinnedBorder#ccc3
  • tab.selectedBackground#222222
  • tab.selectedForeground#ffffffa0
  • terminal.inactiveSelectionBackground#3A3D41
  • titleBar.activeBackground#323233
  • titleBar.inactiveBackground#3c3c3c
  • widget.border#303031

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#D4D4D4—
emphasis—italic
strong—bold
header#000080—
comment#787878—
constant.language#f05aaa—
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#ff783d—
constant.regexp#646695—
entity.name.tag#f05aaa—
entity.name.tag.css, entity.name.tag.less#e6c84c—
entity.other.attribute-name#e6c84c—
entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent.less, source.css entity.other.attribute-name.pseudo-class, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#e6c84c—
entity.other.attribute-name.pseudo-element.css#00be6e—
invalid#f44747—
markup.underline—underline
markup.bold#aa78ffbold
markup.heading#f05aaabold
markup.italic#aa78ffitalic
markup.strikethrough—strikethrough
markup.inserted#b5cea8—
markup.deleted#ce9178—
markup.changed#f05aaa—
punctuation.definition.quote.begin.markdown#00be6e—
punctuation.definition.list.begin.markdown#e6c84c—
fenced_code.block.language#ff783d—
markup.underline.link, markup.fenced_code, markup.inline.raw#00be6e—
punctuation.definition.tag#787878—
meta.tag.metadata.doctype.html entity.name.tag.html, meta.tag.structure.html entity.name.tag.html, meta.tag.structure.head entity.name.tag.html, meta.tag.structure.body entity.name.tag.html, meta.tag.structure.svg entity.name.tag.html, meta.tag.structure.math entity.name.tag.html, meta.tag.object.img entity.name.tag.html, meta.tag.object.picture entity.name.tag.html, meta.tag.object.video entity.name.tag.html, meta.tag.object.source entity.name.tag.html, meta.tag.object.track entity.name.tag.html, meta.tag.object.audio entity.name.tag.html, meta.tag.object.iframe entity.name.tag.html, meta.tag.object.canvas entity.name.tag.html, meta.tag.metadata.script entity.name.tag.html, meta.tag.metadata.noscript entity.name.tag.html, meta.tag.metadata.style entity.name.tag.html, meta.tag.metadata.link entity.name.tag.html, meta.tag.inline.a entity.name.tag.html, meta.element.structure.svg.html entity.name.tag.html#00be6e—
meta.tag.structure.button entity.name.tag.html, meta.tag.structure.form entity.name.tag.html, meta.tag.structure.label entity.name.tag.html, meta.tag.structure.textarea entity.name.tag.html, meta.tag.structure.input entity.name.tag.html, meta.tag.structure.select entity.name.tag.html, meta.tag.structure.option entity.name.tag.html, meta.tag.structure.optgroup entity.name.tag.html, meta.tag.structure.progress entity.name.tag.html, meta.tag.structure.output entity.name.tag.html, meta.tag.structure.meter entity.name.tag.html, meta.tag.structure.fieldset entity.name.tag.html, meta.tag.structure.legend entity.name.tag.html, meta.tag.structure.datalist entity.name.tag.html#ff783d—
meta.tag.structure.slot entity.name.tag.html, meta.tag.structure.template entity.name.tag.html, meta.tag.structure.nav entity.name.tag.html, meta.tag.structure.menu entity.name.tag.html, meta.tag.structure.dialog entity.name.tag.html, meta.tag.structure.details entity.name.tag.html, meta.tag.structure.summary entity.name.tag.html#1e78ff—
meta.tag.structure.main entity.name.tag.html, meta.tag.structure.header entity.name.tag.html, meta.tag.structure.footer entity.name.tag.html, meta.tag.structure.aside entity.name.tag.html, meta.tag.structure.section entity.name.tag.html, meta.tag.structure.search entity.name.tag.html#aa78ff—
invalid.deprecated#f03c46—
meta.preprocessor, entity.name.function.preprocessor#f05aaa—
meta.preprocessor.string#ce9178—
meta.preprocessor.numeric#b5cea8—
meta.structure.dictionary.key.python#9cdcfe—
meta.diff.header#f05aaa—
storage#f05aaa—
storage.type#f03c46—
storage.modifier, keyword.operator.noexcept#f05aaa—
string, meta.embedded.assembly#00cbf5—
string.tag#ce9178—
string.value#ce9178—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#f05aaa—
meta.template.expression#d4d4d4—
support.type.vendored.property-name, support.type.property-name, source.coffee.embedded#00cbf5—
support.type.property-name.json#c8c8c8—
_string.quoted.single.css, _string.quoted.double.css#00be6e—
source.css variable#aa78ff—
keyword#f05aaa—
keyword.control#f05aaa—
keyword.operator#00be6e—
keyword.operator.accessor#c8c8c8—
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#00be6e—
keyword.other.unit#00be6e—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#f05aaa—
support.function.git-rebase#9cdcfe—
constant.sha.git-rebase#b5cea8—
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4—
variable.language#f05aaa—
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#e6c84c—
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#e6c84c—
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#e6c84c—
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator#00be6e—
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#c8c8c8—
variable.parameter#aa78ff—
support.variable#1e78ff—
variable.other.constant, variable.other.enummember#c8c8c8—
meta.object-literal.key#9CDCFE—
source.css keyword.control, punctuation.definition.constant.css#00be6e—
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.rgb-value, support.constant.color#f05aaa—
constant.other.color.rgb-value#ff783d—
string.regexp, keyword.control.anchor.regexp#00cbf5—
string.regexp keyword.operator#f05aaa—
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp#e6c84c—
constant.other.character-class.set.regexp, constant.character.regexp, constant.other.option, punctuation.definition.character-class.regexp#00be6e—
constant.character.escape.backslash.regexp#aa78ff—
constant.other.character-class.regexp#c8c8c8—
constant.character, constant.other.option#e6c84c—
constant.character.escape#e6c84c—
entity.name.label#C8C8C8—