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#1E2430
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#8A8A8A
  • activityBarBadge.background#F2994A
  • activityBarBadge.foreground#000000
  • button.background#F2994A
  • button.foreground#000000
  • button.hoverBackground#E68A3A
  • editor.background#242C3B
  • editor.foreground#D4D4D4
  • editorGroupHeader.tabsBackground#1E2430
  • focusBorder#F2994A80
  • input.background#2C354B
  • input.border#3C4670
  • list.activeSelectionBackground#F2994A
  • list.activeSelectionForeground#000000
  • list.hoverBackground#2C354B
  • panel.background#242C3B
  • panel.border#2C354B
  • selection.background#FFFFFF20
  • sideBar.background#1E2430
  • sideBar.border#2C354B
  • sideBarSectionHeader.background#242C3B
  • statusBar.background#1E2430
  • statusBar.foreground#A0A0A0
  • tab.activeBackground#242C3B
  • tab.activeForeground#FFFFFF
  • tab.border#2C354B
  • tab.inactiveBackground#1E2430
  • tab.inactiveForeground#8A8A8A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A737Ditalic
string, punctuation.definition.string.end.html, punctuation.definition.string.begin.html#F2994A
constant.numeric, constant.language.boolean#D48CF8
keyword, storage.type, storage.modifier#C792EA
entity.name.function, support.function#82AAFF
variable.parameter#E0E0E0italic
entity.name.tag, punctuation.definition.tag#82AAFF
entity.other.attribute-name#C792EA
variable.language.this#F07178
entity.name.class, entity.name.type#FFCB6B
keyword.operator#89DDFF