Skip to main content
Coding Theme

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#262626
  • activityBar.foreground#ffffff
  • activityBarBadge.background#e76f52
  • activityBarBadge.foreground#ffffff
  • button.background#4a4d5285
  • button.foreground#ffffff
  • dropdown.background#262626
  • dropdown.foreground#bebebeff
  • dropdown.listBackground#262626
  • editor.background#303030
  • editor.foreground#bebebe
  • editor.inactiveSelectionBackground#363636a2
  • editor.lineHighlightBackground#5858582c
  • editor.selectionBackground#5858582c
  • editor.selectionHighlightBackground#5858582c
  • editor.selectionHighlightBorder#e76f52
  • editorCursor.foreground#e76f52
  • editorGroupHeader.tabsBackground#303030
  • editorIndentGuide.background#ffffff25
  • editorLineNumber.activeForeground#e76f52
  • editorLineNumber.foreground#505050
  • editorWhitespace.foreground#ffffff25
  • editorWidget.background#2B2B2B
  • editorWidget.border#454545
  • extensionButton.prominentBackground#e76f52
  • extensionButton.prominentForeground#fff
  • extensionButton.prominentHoverBackground#ff552b
  • input.background#262626
  • input.foreground#bebebeff
  • input.placeholderForeground#bababa
  • inputOption.activeBorder#ffffff
  • list.activeSelectionBackground#3d3d3d7a
  • list.activeSelectionForeground#e76f52
  • list.focusBackground#42434685
  • list.hoverBackground#42434685
  • list.inactiveSelectionBackground#3d3d3d7a
  • list.inactiveSelectionForeground#e76f52
  • scrollbarSlider.background#7070707a
  • scrollbarSlider.hoverBackground#6161617a
  • sideBar.background#2B2B2B
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#262626
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#ffffff
  • statusBar.background#262626
  • statusBar.foreground#bebebe
  • tab.activeBackground#303030
  • tab.activeForeground#e76f52
  • tab.border#30303000
  • tab.inactiveBackground#262626
  • tab.inactiveForeground#ffffff
  • terminal.background#2B2B2B
  • terminalCursor.foreground#e76f52

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
settings#bebebeff
meta.embedded, source.groovy.embedded#bebebeff
emphasisitalic
strongbold
header#000080
comment#666666italic
constant.language#738290
constant.numeric#738290
constant.regexp#646695
entity.name.tag#867f93
entity.name.tag.css#876868ff
entity.other.attribute-name#738290
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#876868ff
invalid#f44747
markup.underlineunderline
markup.bold#867f93bold
markup.heading#867f93bold
markup.italicitalic
markup.inserted#657675
markup.deleted#ce9178
markup.changed#867f93
beginning.punctuation.definition.quote.markdown#608b4e
beginning.punctuation.definition.list.markdown#657675
markup.inline.raw#ce9178
meta.selector#876868ff
meta.preprocessor#867f93
meta.preprocessor.string#ce9178
meta.preprocessor.numeric#738290
meta.structure.dictionary.key.python#738290
meta.diff.header#867f93
storage, storage.type, storage.modifier#867f93
string#876868
string.tag#876868
string.value#876868
string.regexp#d16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#738290
meta.template.expression#bebebeff
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#738290
keyword, keyword.control, keyword.operator#867f93ff
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#968ea3
keyword.other.unit#738290
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#867f93
support.function.git-rebase#738290
constant.sha.git-rebase#f44747
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language#738290
punctuation.definition.tag, entity.name.tag.block.any.html, entity.name.tag.other.html, entity.name.tag.inline.any.html, entity.name.tag.structure.any.html, entity.name.tag.html, meta.tag.metadata.style.html, meta.tag.structure.any.html#867f93ff
meta.tag.structure.any.html, meta.tag.inline.any.html#bebebe
text.html.basic#bebebe
constant.language.boolean.false, constant.language.boolean.true#738290
meta.brace.round, punctuation.definition.block#bebebe
support.function.console.js#867f93
keyword.operator.logical#d4d4d4ff
comment.unused.elixir#738290
variable.other.constant.elixir#867f93ff
keyword.operator.other.elixir#d4d4d4ff
constant.other.symbol.elixir#867f93ff
punctuation.definition.constant.elixir#867f93ff
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6