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.activeBorder#F5A623
  • activityBar.background#050505
  • activityBar.foreground#F5A623
  • activityBar.inactiveForeground#777777
  • badge.background#F5A623
  • badge.foreground#090909
  • button.background#F5A623
  • button.foreground#090909
  • button.hoverBackground#FFB83D
  • editor.background#050505
  • editor.foreground#D8D8D8
  • editor.inactiveSelectionBackground#28200F
  • editor.lineHighlightBackground#0B0B0B
  • editor.selectionBackground#49320E
  • editorBracketMatch.background#2B210F
  • editorBracketMatch.border#F5A623
  • editorCursor.foreground#F5A623
  • editorIndentGuide.activeBackground#3A3A3A
  • editorIndentGuide.background#1C1C1C
  • editorLineNumber.activeForeground#F5A623
  • editorLineNumber.foreground#555555
  • editorWidget.background#0D0D0D
  • editorWidget.border#2A2A2A
  • focusBorder#F5A623
  • input.background#0B0B0B
  • input.border#3A3A3A
  • input.foreground#D8D8D8
  • list.activeSelectionBackground#2A2112
  • list.activeSelectionForeground#FFFFFF
  • list.hoverBackground#151515
  • panel.background#090909
  • panel.border#202020
  • scrollbarSlider.activeBackground#F5A62388
  • scrollbarSlider.background#44444488
  • scrollbarSlider.hoverBackground#666666AA
  • sideBar.background#090909
  • sideBar.border#1F1F1F
  • sideBar.foreground#C8C8C8
  • statusBar.background#080808
  • statusBar.foreground#BEBEBE
  • statusBarItem.hoverBackground#252015
  • tab.activeBackground#0D0D0D
  • tab.activeForeground#F5A623
  • tab.border#1B1B1B
  • tab.inactiveBackground#080808
  • tab.inactiveForeground#777777
  • terminal.background#050505
  • terminal.foreground#D8D8D8
  • terminalCursor.foreground#F5A623
  • titleBar.activeBackground#080808
  • titleBar.activeForeground#D8D8D8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A6A3Fitalic
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop#C1443Cbold
keyword, storage, storage.type, storage.modifier#F5A623bold
keyword.operator#CD7F32
entity.name.function, support.function, meta.function-call#FFFFFF
meta.decorator, punctuation.decorator, entity.name.function.decorator#6FA88F
variable.parameter, meta.parameter#6FA88F
string, string.quoted#D4AF37
string.regexp, constant.character.escape#D96C4B
constant.numeric#FFB83D
constant.language#A9A05Citalic
entity.name.type, support.type, storage.type.class#F0C468
variable, meta.definition.variable#E8E8E8
variable.other.property, variable.other.object.property#C9BFA8
entity.name.class, entity.name.namespace#FFFFFFbold
support.class, entity.other.inherited-class#E8D9A0
entity.name.tag, entity.other.attribute-name#CD7F32
constant.other.symbol#F5A623
punctuation, meta.brace, meta.delimiter#B8860B
markup.bold#FFFFFFbold
markup.italic#D4AF37italic
markup.heading#F5A623bold
invalid, invalid.illegal#FF6B6B