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#13151A
  • activityBarBadge.background#61AFEF
  • contrastBorder#1B2025
  • editor.background#272c33
  • editor.foreground#D3D7DC
  • editorGroupHeader.tabsBackground#1D2127
  • errorForeground#DF6C75
  • focusBorder#14171B
  • foreground#D3D7DC
  • input.background#272c33
  • list.activeSelectionBackground#272c33
  • list.hoverBackground#272c33
  • list.inactiveSelectionBackground#272c33
  • sideBar.background#1D2127
  • sideBarSectionHeader.background#272c33
  • sideBarTitle.foreground#D3D7DC
  • statusBar.background#13151A
  • statusBar.debuggingBackground#DF6C75
  • statusBar.foreground#D3D7DC
  • tab.activeBackground#242930
  • tab.inactiveBackground#303740
  • titleBar.activeBackground#13151A
  • titleBar.inactiveBackground#0e0f13
  • widget.shadow#1B2025

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.variable, variable#D3D7DC
entity.name.function, support.type.property-name, meta.type, entity.other, markup.heading, beginning.punctuation#e4c07a
storage.modifier, keyword, storage.type.class, meta.tag, support.type.property-name.css#61AFEF
storage, entity.name, variable.other.object.cs, support.class#98C379
comment, keyword.operator, markup.inline.raw, variable.scss#DF6C75
keyword.control, constant.language, meta.link, support.function, entity.name.goto-label#C577DD
string, constant#5DB8C4