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#d1814f
  • 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#4e9bcf30
  • input.foreground#6d767d
  • inputOption.activeBorder#4e9bcf30
  • list.activeSelectionBackground#4e9bcf
  • list.activeSelectionForeground#ffffff
  • list.highlightForeground#4e9bcf
  • list.hoverBackground#4e9bcf05
  • list.inactiveSelectionBackground#4e9bcf15
  • scrollbarSlider.background#808487
  • scrollbarSlider.hoverBackground#6d767d
  • sideBar.background#e6eaed
  • statusBar.background#4e9bcf
  • terminal.ansiBlack#6d767d
  • terminal.ansiBlue#4e9bcf
  • terminal.ansiCyan#3fa2a6
  • terminal.ansiGreen#4aa840
  • terminal.ansiMagenta#cf7a9d
  • terminal.ansiRed#db7681
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ad9142
  • 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#db7681
entity.name.function.ts#4e9bcf
support.function#4e9bcfitalic
string#3fa2a6
constant.numeric#a783de
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#ad9142
storage, variable.language.this.ts#d1814f
support.type.primitive.ts#4aa840
variable.other.property.ts#a783de
constant.language.boolean.true.ts, constant.language.null.ts, constant.language.php, constant.other.class.php#cf7a9d
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#4aa840
punctuation.section.scope.begin.php, punctuation.section.scope.end.php#1d252b
entity.name.function.php#4e9bcf
variable.other.property.php#a783de
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#4e9bcf
entity.other.attribute-name.html#db7681
string.quoted.double.html#4aa840
constant.character.entity.html#a783de
punctuation.section.property-list.begin.bracket.curly.scss, punctuation.section.property-list.end.bracket.curly.scss#1d252b
support.constant.property-value.css#ad9142
entity.name.tag.css, entity.name.tag.wildcard.scss#cf7a9d
entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector-suffix.css#4e9bcf
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#cf7a9ditalic
entity.name.tag.reference.scss#d1814f
keyword.other.important.scss#d1814fbold
entity.name.function.scss, support.function.misc.scss#4e9bcfitalic
variable.scss#4aa840
support.type.property-name.json#d1814f
string.quoted.double.json#4aa840
storage.type.annotation.java#4aa840