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#24292e
  • editor.background#ffffff
  • editor.foreground#24292e
  • editor.lineHighlightBackground#fffbdd
  • editorBracketMatch.background#f1f8ff
  • editorBracketMatch.border#c8e1ff
  • editorIndentGuide.background#eeeeee
  • editorLineNumber.foreground#cccccc
  • focusBorder#fafbfc
  • notification.background#54a3ff
  • sideBar.background#fafbfc
  • sideBar.border#dddddd
  • sideBar.foreground#586069
  • sideBarSectionHeader.background#fafbfc
  • sideBarSectionHeader.foreground#24292e
  • sideBarTitle.foreground#24292e
  • statusBar.background#fafbfc
  • statusBar.border#dddddd
  • statusBar.debuggingBackground#fafbfc
  • statusBar.debuggingForeground#24292e
  • statusBar.foreground#24292e
  • statusBar.noFolderBackground#fafbfc
  • statusBar.noFolderForeground#24292e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#24292eff
emphasisitalic
strongbold
comment#6a737d
string#032f62
constant.numeric, constant.language.null, variable.language.this, support.type.primitive, support.function, support.variable.dom, support.variable.property, support.variable.property, meta.property-name, meta.property-value, support.constant.handlebars#005cc5
keyword, storage.modifier, storage.type, variable.parameter#d73a49
entity.name.type, entity.other.inherited-class, meta.function-call, entity.other.attribute-name, entity.name.function.shell#6f42c1
entity.name.tag#22863a
token.info-token#316bcd
token.warn-token#cd9731
token.error-token#cd3131
token.debug-token#800080
variable#24292e
variable.language.php, punctuation.definition.variable.php#24292e
support.class#005cc5
storage#d73a49
variable.language.this.php#24292ebold
inspired-by-github by Ahmad Samiei - VS Code Theme