Skip to main content
Coding Theme

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#141414
  • activityBar.border#000000
  • activityBarBadge.background#FF453A
  • breadcrumb.background#1E1E1E
  • breadcrumb.foreground#DDDCDD
  • button.background#5B585B
  • button.foreground#DBDADB
  • editor.background#292A2F
  • editor.findMatchBackground#FFFA53
  • editor.findMatchHighlightBackground#545557
  • editor.foreground#ffffff
  • editor.inactiveSelectionBackground#6E6E6E
  • editor.lineHighlightBackground#2F3238
  • editor.selectionBackground#656F81
  • editorGroupHeader.tabsBackground#1E1E1E
  • editorGroupHeader.tabsBorder#4C4A4D
  • editorLineNumber.activeForeground#CFD0D1
  • editorLineNumber.foreground#6D6D71
  • input.background#2F2B2F
  • input.border#4E4B4E
  • list.activeSelectionBackground#2059C9
  • list.inactiveSelectionBackground#464646
  • peekView.border#3E3F43
  • peekViewEditor.background#292A2F
  • peekViewResult.selectionBackground#2059C9
  • searchEditor.findMatchBackground#ff0000
  • sideBar.background#383838
  • sideBar.border#000000
  • sideBar.foreground#ffffff
  • sideBarTitle.foreground#ffffff
  • statusBar.background#423F42
  • tab.activeBackground#395171
  • tab.activeForeground#ffffff
  • tab.border#4C4A4D
  • tab.inactiveBackground#1E1E1E
  • tab.inactiveForeground#DDDCDD
  • titleBar.activeBackground#262626

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#828B97
variable, string constant.other.placeholder#D9D9D9
keyword, storage.type, storage.modifier#C0A6C3
keyword.operator, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#96C4BE
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#EB606B
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.block-level#86B5ED
support.other.variable, string.other.link#F2777A
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit#F2A05F
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#9AC596
entity.name.class, entity.name.type.class, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter#F3C973
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#EC5F67
variable.language#EC5F67italic
entity.name.method.js#D8DEE9
meta.method.js entity.name.function.js, variable.function.constructor#D8DEE9
entity.other.attribute-name#C0A6C3
markup.inserted#9AC596
markup.deleted#EC5F67
markup.changed#C0A6C3
string.regexp#88DDFC
constant.character.escape#88DDFC
*url*, *link*, *uri*underline
constant.numeric.line-number.find-in-files - match#AB7967
entity.name.filename.find-in-files#9AC596
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#86B5EDitalic
source.js constant.other.object.key.js string.unquoted.label.js#EC5F67italic
xOcean by Chris Cass - VS Code Theme