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#eeeeee
  • activityBar.foreground#000000
  • activityBarBadge.background#007acc
  • editor.background#ffffff
  • editor.foreground#000000
  • editor.inactiveSelectionBackground#e5ebf1
  • editor.lineHighlightBackground#f2f2f2
  • editor.selectionHighlightBackground#add6ff80
  • editorBracketMatch.background#0064ff66
  • editorBracketMatch.border#00000000
  • editorIndentGuide.activeBackground#cccccc
  • editorIndentGuide.background#f2f2f2
  • editorSuggestWidget.background#f3f3f3
  • input.placeholderForeground#767676
  • list.hoverBackground#e8e8e8
  • searchEditor.textInputBorder#cecece
  • settings.numberInputBorder#cecece
  • settings.textInputBorder#cecece
  • sideBarTitle.foreground#6f6f6f
  • statusBar.background#eeeeee
  • statusBar.debuggingBackground#eeeeee
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#eeeeee
  • statusBarItem.remoteBackground#16825d
  • statusBarItem.remoteForeground#ffffff
  • titleBar.activeBackground#ffffff
  • titleBar.inactiveBackground#cccccc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, source#586e75—
comment, punctuation.definition.comment#839496aaitalic
comment.block.preprocessor#839496
comment.documentation, comment.block.documentation, comment.block.documentation punctuation.definition.comment , meta.property-value, meta.property-value constant.other, support.constant.property-value#657b83—
invalid.illegal, entity.name.exception, markup.error, markup.traceback#660000—
keyword.operator, keyword, storage, storage.type, support.type, constant.language, support.constant, variable.language, constant.character.escape, markup.heading#073642bold
variable, support.variable, meta.function-call.arguments#586e75
entity.name.function, support.function, meta.function-call#073642italic
entity.name.type, entity.name.namespace, entity.name.scope-resolution, entity.other.inherited-class, support.class#073642bold italic
entity.name.section, keyword.other.important, markup.bold—bold
constant.numeric, constant.character, constant.language.symbol, constant#073642
string#657b83e0—
string source, text source, meta.embedded.line variable, string.regexp, constant.other.symbol, punctuation, entity.name.tag, constant.character.entity, punctuation.definition.entity, meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css, meta.property-name, support.type.property-name, meta.link, markup.output, markup.raw, markup.prompt, markup.quote, markup.list#073642—
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html, meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.js, punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js#839496—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#8190A0italic
markup.changed, markup.deleted, markup.inserted#000000—
markup.italic—italic
markup.underline—underline
markup.italic#657b83italic
markup.bold#657b83bold
markup.inline.raw#657b83
meta.diff.range, meta.diff.index, meta.separator, meta.diff.header.from-file, meta.diff.header.to-file#434343—
meta.jsx.children.js#333333ff—
token.info-token#316bcd—
token.warn-token#cd9731—
token.error-token#cd3131—
token.debug-token#800080—