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#5f829930
  • input.foreground#6d767d
  • inputOption.activeBorder#5f829930
  • list.activeSelectionBackground#5f8299
  • list.activeSelectionForeground#ffffff
  • list.highlightForeground#e6eaed
  • list.hoverBackground#5f829905
  • list.inactiveSelectionBackground#5f829915
  • scrollbarSlider.background#808487
  • scrollbarSlider.hoverBackground#6d767d
  • sideBar.background#1d252b
  • statusBar.background#5f8299
  • tab.inactiveBackground#e6eaed10
  • terminal.ansiBlack#6d767d
  • terminal.ansiBlue#5f8299
  • terminal.ansiCyan#548587
  • terminal.ansiGreen#5b8a55
  • terminal.ansiMagenta#997383
  • terminal.ansiRed#ba656d
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#8a7c55
  • 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#9e7276
storage, variable.language.this.ts#9c7760
entity.name.function.ts#5f8299
support.function#5f8299italic
string#548587
constant.numeric#86779e
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#8a7c55
support.type.primitive.ts#5b8a55
variable.other.property.ts#86779e
constant.language.boolean.true.ts, constant.language.null.ts, constant.language.php, constant.other.class.php#997383
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#5b8a55
punctuation.section.scope.begin.php, punctuation.section.scope.end.php#e6eaed
entity.name.function.php#5f8299
variable.other.property.php#86779e
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#5f8299
entity.other.attribute-name.html#9e7276
string.quoted.double.html#5b8a55
constant.character.entity.html#86779e
punctuation.section.property-list.begin.bracket.curly.scss, punctuation.section.property-list.end.bracket.curly.scss#e6eaed
support.constant.property-value.css#8a7c55
entity.name.tag.css, entity.name.tag.wildcard.scss#997383
entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector-suffix.css#5f8299
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#997383italic
entity.name.tag.reference.scss#9c7760
keyword.other.important.scss#9c7760bold
entity.name.function.scss, support.function.misc.scss#5f8299italic
variable.scss#5b8a55
support.type.property-name.json#9c7760
string.quoted.double.json#5b8a55
storage.type.annotation.java#5b8a55
seabird by bbrakenhoff - VS Code Theme