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.activeBackground#b9b9b9
  • activityBar.background#ececec
  • activityBar.foreground#000
  • breadcrumb.activeSelectionForeground#000
  • breadcrumb.background#ececec
  • breadcrumb.focusForeground#000
  • breadcrumb.foreground#000
  • breadcrumbPicker.background#fff
  • editor.background#fff
  • editor.foreground#000
  • editor.lineHighlightBackground#fffae3
  • editorGutter.background#f0f0f0
  • editorLineNumber.activeForeground#000
  • editorLineNumber.foreground#999
  • list.activeSelectionIconForeground#fff
  • sideBar.background#fff
  • sideBar.foreground#000
  • sideBarSectionHeader.background#e2e6ec
  • sideBarSectionHeader.foreground#0e0e0e
  • sideBarTitle.foreground#2a2a2a
  • statusBar.background#ececec
  • statusBar.debuggingBackground#089ef6
  • statusBar.debuggingForeground#000
  • statusBar.foreground#000
  • statusBar.noFolderBackground#ececec
  • statusBar.noFolderForeground#000
  • tab.activeBackground#fafafa
  • tab.activeBorder#4083c9
  • tab.activeForeground#000
  • tab.hoverBackground#dadada
  • tab.inactiveBackground#f2f2f2
  • titleBar.activeBackground#ececec
  • titleBar.activeForeground#525252
  • titleBar.inactiveBackground#ececec
  • titleBar.inactiveForeground#aaa

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#808080italic
comment.block.preprocessor#808080italic
comment.documentation, comment.block.documentation#808080italic
invalid.illegal#cf5b56
keyword.operator#000
keyword, storage#000080bold
storage.type, support.type#000080bold
constant.language, support.constant, variable.language#000080bold
variable, support.variable#458383
entity.name.type, entity.other.inherited-class, support.class#000
entity.name.exception#cf5b56
entity.name.sectionbold
constant.numeric, constant.character, constant#0000ff
string, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end#008000bold
constant.character.escape#000080bold
string.regexp, constant.other.character-class.range.regexp, constant.other.character-class.set.regexp#008000bold
punctuation.definition.group.regexp#000
keyword.control.anchor.regexp, keyword.operator.or.regexp#000080bold
constant.other.character-class.regexp#0000FFbold
keyword.operator.quantifier.regexp#00f
constant.character.escape.backslash.regexp#000080bold
constant.other.symbol#ab6526
punctuation#000
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#000
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#000
entity.name.tag#000080bold
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#0000ffbold
constant.character.entity, punctuation.definition.entity#0000ffbold
punctuation.definition.comment.html, comment.block.html#808080italic
invalid.deprecated.entity.other.attribute-name.html#cf5b56bold
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#000080bold
meta.property-name, support.type.property-name, support.type.vendored.property-name.css#0000ffbold
meta.property-value, meta.property-value constant.other, support.constant.property-value, support.constant.vendored.property-value.css, support.constant.font-name.css#008000bold
keyword.other.important#000080bold
support.function.url.css, support.function.calc.css, support.function.transform.css#000080bold
variable.parameter.url.css#008000bold
constant.other.unicode-range.css#000080bold
keyword.other.unit.percentage.css#000
keyword.other.unit#008000bold
punctuation.definition.entity.begin.bracket.square.css, punctuation.definition.entity.end.bracket.square.css#000
punctuation.definition.entity.css#000bold
punctuation.definition.keyword.css#000080bold
meta.at-rule.media.header.css#00fbold
variable.parameter.keyframe-list.css#000080bold
entity.other.keyframe-offset.css, entity.other.keyframe-offset.percentage.css#000080bold
markup.changed#000000
markup.deleted#000000
markup.italicitalic
markup.error#660000
markup.inserted#000000
meta.link#4b83cd
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#aa3731
markup.boldbold
markup.traceback#660000
markup.underlineunderline
markup.quote#7a3e9d
markup.list#4b83cd
markup.bold, markup.italic#448c27
markup.inline.raw#ab6526
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file#434343
meta.diff.header.to-file#434343
storage.type.class.jsdoc#808080italic bold underline
punctuation.definition.block.tag.jsdoc#808080bold
entity.name.type.instance.jsdoc#3d3d3dbold italic
variable.other.jsdoc#3d3d3dbold italic
variable.other.property#660e7abold
keyword.operator.new#000080bold
storage.type.function.arrow#000
keyword.operator.type.annotation#000
keyword.operator.type#000
keyword.operator.expression.typeof#000080bold
keyword.operator.comparison#000
meta.decorator#808000
punctuation.decorator#808000
meta.brace.round#000
support.class.component#000080bold
variable.other.readwrite.alias, meta.import#000italic
variable.other.readwrite.alias, meta.block, meta.import#000italic
keyword.operator.expression.instanceof#000080bold
keyword.operator.expression.import#000080bold
support.type.property-name.json, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, punctuation.support.type.property-name.begin.json.comments, punctuation.support.type.property-name.end.json.comments#660E7Abold
punctuation.definition.heading.markdown, entity.name.section.markdown#660E7Abold italic
markup.heading.setext.1.markdown#000
meta.separator.markdown#808080
meta.paragraph.markdown#000
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#000080bold
markup.bold.markdown#000bold
markup.italic.markdown#000italic
punctuation.definition.link.markdown#00funderline
markup.underline.link.markdown, markup.underline.link.image.markdown#008000italic
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, string.other.link.title.markdown, string.other.link.description.markdown#00funderline bold
punctuation.definition.metadata.markdown#008000bold
punctuation.definition.constant.begin.markdown, constant.other.reference.link.markdown, punctuation.definition.constant.end.markdown, punctuation.definition.constant.markdown#000080bold
string.other.link.description.title.markdown#808080italic
punctuation.definition.markdown, markup.fenced_code.block.markdown#808080italic
punctuation.definition.raw.markdown, markup.inline.raw.string.markdown#808080italic
markup.raw.block.markdown#808080italic
punctuation.definition.quote.begin.markdown#008000bold
punctuation.definition.list.begin.markdown#000bold