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.

  • activityBarBadge.background#007ACC
  • editor.background#1E1E1E
  • editor.foreground#D4D4D4
  • editor.inactiveSelectionBackground#3A3D41
  • editor.selectionHighlightBackground#ADD6FF26
  • editorIndentGuide.activeBackground#707070
  • editorIndentGuide.background#404040
  • input.placeholderForeground#A6A6A6
  • list.activeSelectionIconForeground#FFF
  • list.dropBackground#383B3D
  • menu.background#303031
  • menu.foreground#CCCCCC
  • ports.iconRunningProcessForeground#369432
  • sideBarSectionHeader.background#0000
  • sideBarSectionHeader.border#ccc3
  • sideBarTitle.foreground#BBBBBB
  • statusBarItem.remoteBackground#16825D
  • statusBarItem.remoteForeground#FFF
  • tab.lastPinnedBorder#ccc3
  • terminal.inactiveSelectionBackground#3A3D41

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.function.c#f2d578
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#D4D4D4
emphasisitalic
strongbold
header#FF50FCitalic bold
comment#00ff28e7
constant.language#ff50fc
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#e0ac49
constant.regexp#646695
entity.name.tag#ff50fc
entity.name.tag.css#d7ba7d
entity.other.attribute-name#9cdcfe
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#d7ba7d
invalid#f44747
markup.underlineunderline
markup.bold#ff50fcbold
markup.heading#ff50fcbold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#e0ac49
markup.deleted#5fad56
markup.changed#ff50fc
punctuation.definition.quote.begin.markdown#00ff28e7
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#5fad56
punctuation.definition.tag#808080
meta.preprocessor, entity.name.function.preprocessor#ff50fc
meta.preprocessor.string#5fad56
meta.preprocessor.numeric#e0ac49
meta.structure.dictionary.key.python#9cdcfe
meta.diff.header#ff50fc
storage#ff50fc
storage.type#ff50fc
storage.modifier, keyword.operator.noexcept#ff50fc
string, meta.embedded.assembly#5fad56
string.tag#5fad56
string.value#5fad56
string.regexp#d16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#ff50fc
meta.template.expression#d4d4d4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#9cdcfe
keyword#ff50fc
keyword.control#ff50fc
keyword.operator#d4d4d4
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#ff50fc
keyword.other.unit#e0ac49
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#569cd6
support.function.git-rebase#9cdcfe
constant.sha.git-rebase#e0ac49
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language#569cd6