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#222
  • activityBar.border#111
  • activityBar.foreground#ffffec
  • activityBarBadge.background#00a8c6
  • editor.background#2c2c2c
  • editor.foreground#ffffec
  • editor.inactiveSelectionBackground#3a3d41
  • editor.selectionHighlightBackground#add6ff26
  • editorGroupHeader.tabsBackground#333
  • editorIndentGuide.activeBackground#707070
  • editorIndentGuide.background#404040
  • editorLineNumber.foreground#5a5a5a
  • editorSuggestWidget.selectedBackground#222
  • extensionButton.prominentBackground#05ad97
  • extensionButton.prominentForeground#ffffec
  • focusBorder#00a8c6
  • list.dropBackground#383b3d
  • sideBar.background#222
  • sideBar.border#111
  • sideBar.foreground#ffffec
  • sideBarTitle.foreground#a7a79b
  • statusBar.background#222
  • statusBar.border#111
  • statusBar.foreground#a7a79b
  • statusBarItem.hoverBackground#333
  • tab.activeForeground#ffffec
  • tab.border#333
  • tab.inactiveBackground#333
  • textLink.foreground#00a8c6
  • titleBar.activeBackground#222
  • titleBar.border#111

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable.language.this.js#ffffec
beginning.punctuation.definition.list.markdown, constant.language#00a8c6
entity.name.type.instance.jsdoc, punctuation.definition.raw.markdown, markup.inline.raw.string.markdown#ffcf6c
meta.embedded, source.groovy.embedded#D4D4D4
emphasisitalic
strongbold
header#000080
comment#608b4e
constant.numeric#ffcf6c
constant.regexp#646695
entity.name.tag#00a8c6
entity.name.tag.css#ffcf6c
entity.other.attribute-name#ffffec
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.attribute.scss, entity.other.attribute-name.scss#ffcf6c
invalid#f44747
markup.underlineunderline
markup.bold#00a8c6bold
markup.heading#00a8c6bold
markup.italicitalic
markup.inserted#ffcf6c
markup.deleted#ce9178
markup.changed#00a8c6
beginning.punctuation.definition.quote.markdown#608b4e
markup.inline.raw#ce9178
meta.selector#ffcf6c
punctuation.definition.tag#808080
meta.preprocessor#00a8c6
meta.preprocessor.string#ce9178
meta.preprocessor.numeric#ffcf6c
meta.structure.dictionary.key.python#00a8c6
meta.diff.header#00a8c6
storage#00a8c6
storage.type#00a8c6
storage.modifier#00a8c6
string#ce9178
string.tag#ce9178
string.value#ce9178
string.regexp#d16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#00a8c6
meta.template.expression#d4d4d4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#00a8c6
keyword#00a8c6
keyword.control#00a8c6
keyword.operator#d4d4d4
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#00a8c6
keyword.other.unit#ffcf6c
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#00a8c6
support.function.git-rebase#00a8c6
constant.sha.git-rebase#ffcf6c
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language#00a8c6
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
comment#95958aitalic
string#ffcf6c
keyword#00a8c6
keyword.control#00a8c6
storage#00a8c6
storage.type#00a8c6