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#2E3E35
  • activityBar.foreground#FF8C42
  • activityBarBadge.background#FF8C42
  • activityBarBadge.foreground#1E2A24
  • editor.background#1E2A24
  • editor.foreground#E8E3E3
  • editor.lineHighlightBackground#243229
  • editor.selectionBackground#6A8F74
  • editorCursor.foreground#FF8C42
  • editorIndentGuide.activeBackground1#6A8F74
  • editorIndentGuide.background1#3A4F41
  • editorWhitespace.foreground#3A4F41
  • sideBar.background#243229
  • sideBar.foreground#B9C2B9
  • sideBarSectionHeader.background#2E3E35
  • statusBar.background#243229
  • statusBar.foreground#B9C2B9
  • statusBarItem.hoverBackground#6A8F74
  • titleBar.activeBackground#2E3E35
  • titleBar.activeForeground#E8E3E3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#808080italic
keyword#FF8C42bold
storage.type#FF8C42bold
string#8FA88F
variable, variable.language#e4e3e8
function, entity.name.function#FFD67E
punctuation#B9C2B9
entity.name.tag, support.class.component.html#FFAA55bold
entity.other.attribute-name#A0C3C3italic
meta.tag#FF8C42
text.html.basic#E8E3E3
meta.tag.inline.any, meta.tag.inline.any entity.other.attribute-name, meta.tag.inline.any string.quoted.double.html#FFFFFF
entity.other.inline#FFFFFF