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#1d252b
  • activityBar.foreground#e6eaed
  • activityBarBadge.background#ff4053
  • activityBarBadge.foreground#ffffff
  • debugToolBar.background#e6eaed
  • editor.background#ffffff
  • editor.foreground#6d767d
  • editor.lineHighlightBorder#e6eaed
  • editorCursor.foreground#808487
  • editorGroupHeader.tabsBackground#e6eaed
  • editorIndentGuide.background#e6eaed
  • editorLineNumber.foreground#808487
  • editorWidget.background#e6eaed
  • foreground#1d252b
  • input.border#0099ff30
  • input.foreground#6d767d
  • inputOption.activeBorder#0099ff30
  • list.activeSelectionBackground#0099ff
  • list.activeSelectionForeground#ffffff
  • list.highlightForeground#0099ff
  • list.hoverBackground#0099ff05
  • list.inactiveSelectionBackground#0099ff15
  • scrollbarSlider.background#808487
  • scrollbarSlider.hoverBackground#6d767d
  • sideBar.background#e6eaed
  • statusBar.background#0099ff
  • terminal.ansiBlack#6d767d
  • terminal.ansiBlue#0099ff
  • terminal.ansiCyan#00a5ab
  • terminal.ansiGreen#11ab00
  • terminal.ansiMagenta#ff549b
  • terminal.ansiRed#ff4053
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#bf8c00
  • test
  • titleBar.activeBackground#e6eaed

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#808487italic
keyword.other.phpdoc.php, storage.type.class.jsdoc#808487bold
keyword#ff6200
storage, variable.language.this.ts#ff4053
entity.name.function.ts#0099ff
support.function#0099ffitalic
string#00a5ab
constant.numeric#9854ff
entity.name.type.class.ts, entity.name.type.ts, entity.name.type.class.php, entity.other.inherited-class.php, support.class.php, support.class.exception.php, storage.type.java, entity.name.type.class.java, entity.other.inherited-class.java#bf8c00
support.type.primitive.ts#11ab00
variable.other.property.ts#9854ff
constant.language.boolean.true.ts, constant.language.null.ts, constant.language.php, constant.other.class.php#ff549b
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#11ab00
punctuation.section.scope.begin.php, punctuation.section.scope.end.php#1d252b
entity.name.function.php#0099ff
variable.other.property.php#9854ff
punctuation.definition.block.ts#1d252b
meta.brace.round.ts#1d252b
punctuation.accessor.ts#1d252b
punctuation.terminator.statement.ts#1d252b
punctuation.definition.tag.html,meta.tag.inline.any.html, meta.tag.any.html, entity.name.tag.html, meta.tag.block.any.html#0099ff
entity.other.attribute-name.html#ff6200
string.quoted.double.html#11ab00
constant.character.entity.html#9854ff
punctuation.section.property-list.begin.bracket.curly.scss, punctuation.section.property-list.end.bracket.curly.scss#1d252b
support.constant.property-value.css#bf8c00
entity.name.tag.css, entity.name.tag.wildcard.scss#ff549b
entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector-suffix.css#0099ff
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#ff549bitalic
entity.name.tag.reference.scss#ff4053
keyword.other.important.scss#ff4053bold
entity.name.function.scss, support.function.misc.scss#0099ffitalic
variable.scss#11ab00
support.type.property-name.json#ff4053
string.quoted.double.json#11ab00
storage.type.annotation.java#11ab00