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#0b141a
  • activityBar.foreground#6d767d
  • activityBarBadge.background#ba656d
  • activityBarBadge.foreground#ffffff
  • debugToolBar.background#e6eaed
  • editor.background#0b141a
  • editor.foreground#787e82
  • editor.lineHighlightBackground#e6eaed10
  • editorCursor.foreground#ffffff
  • editorGroupHeader.tabsBackground#1d252b
  • editorIndentGuide.background#e6eaed
  • editorLineNumber.foreground#808487
  • editorWidget.background#1d252b
  • foreground#6d767d
  • input.border#4384b030
  • input.foreground#6d767d
  • inputOption.activeBorder#4384b030
  • list.activeSelectionBackground#4384b0
  • list.activeSelectionForeground#ffffff
  • list.highlightForeground#e6eaed
  • list.hoverBackground#4384b005
  • list.inactiveSelectionBackground#4384b015
  • scrollbarSlider.background#808487
  • scrollbarSlider.hoverBackground#6d767d
  • sideBar.background#1d252b
  • statusBar.background#4384b0
  • tab.inactiveBackground#e6eaed10
  • terminal.ansiBlack#6d767d
  • terminal.ansiBlue#4384b0
  • terminal.ansiCyan#35898c
  • terminal.ansiGreen#3f8f36
  • terminal.ansiMagenta#b06886
  • terminal.ansiRed#ba656d
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#947b38
  • test
  • titleBar.activeBackground#1d252b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#61707aitalic
keyword.other.phpdoc.php, storage.type.class.jsdoc#61707abold
keyword#b06d43
storage, variable.language.this.ts#ba656d
entity.name.function.ts#4384b0
support.function#4384b0italic
string#35898c
constant.numeric#8e6fbd
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#947b38
support.type.primitive.ts#3f8f36
variable.other.property.ts#8e6fbd
constant.language.boolean.true.ts, constant.language.null.ts, constant.language.php, constant.other.class.php#b06886
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#3f8f36
punctuation.section.scope.begin.php, punctuation.section.scope.end.php#e6eaed
entity.name.function.php#4384b0
variable.other.property.php#8e6fbd
punctuation.definition.block.ts#e6eaed
meta.brace.round.ts#e6eaed
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#4384b0
entity.other.attribute-name.html#b06d43
string.quoted.double.html#3f8f36
constant.character.entity.html#8e6fbd
punctuation.section.property-list.begin.bracket.curly.scss, punctuation.section.property-list.end.bracket.curly.scss#e6eaed
support.constant.property-value.css#947b38
entity.name.tag.css, entity.name.tag.wildcard.scss#b06886
entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector-suffix.css#4384b0
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#b06886italic
entity.name.tag.reference.scss#ba656d
keyword.other.important.scss#ba656dbold
entity.name.function.scss, support.function.misc.scss#4384b0italic
variable.scss#3f8f36
support.type.property-name.json#ba656d
string.quoted.double.json#3f8f36
storage.type.annotation.java#3f8f36
seabird by bbrakenhoff - VS Code Theme