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#F8F8F6
  • activityBar.foreground#555552
  • badge.background#F0F0EE
  • badge.foreground#555552
  • border.color#E0E0DE
  • button.background#555552
  • button.foreground#F8F8F6
  • button.hoverBackground#3E3E3C
  • contrastActiveBorder#555552
  • descriptionForeground#888886
  • editor.background#F8F8F6
  • editor.foreground#555552
  • errorForeground#ef5350
  • input.background#F0F0EE
  • input.border#E0E0DE
  • input.foreground#555552
  • panel.background#FFFFFF
  • progressBar.background#555552
  • scrollbarSlider.background#E0E0DE
  • scrollbarSlider.hoverBackground#CCCcc8
  • sideBar.background#FFFFFF
  • sideBar.border#E0E0DE
  • sideBar.foreground#555552
  • statusBar.background#555552
  • statusBar.foreground#F8F8F6
  • tab.activeBackground#FFFFFF
  • tab.activeForeground#555552
  • tab.inactiveBackground#F8F8F6
  • tab.inactiveForeground#888886
  • textLink.foreground#555552
  • titleBar.activeBackground#F8F8F6
  • titleBar.activeForeground#555552

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#555552
comment, punctuation.definition.comment#888886italic
keyword, storage.type#555552
string, constant.other.symbol#555552
constant.numeric, constant.language#555552
function, entity.name.function, support.function#555552
variable, variable.other#555552
type, support.type, support.class#555552
tag#555552
attribute.name#555552