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#fff
  • activityBar.foreground#0008
  • activityBarBadge.background#fff
  • activityBarBadge.foreground#0008
  • badge.background#fff
  • banner.background#fff
  • breadcrumb.background#fff
  • button.background#000
  • button.foreground#fff
  • button.hoverBackground#000b
  • commandCenter.background#fff
  • debugToolBar.background#fff
  • editor.background#fff
  • editor.findMatchBackground#0008
  • editor.findMatchHighlightBackground#0002
  • editor.foldBackground#ffffff88
  • editor.foreground#0008
  • editor.hoverHighlightBackground#ffffff88
  • editor.inactiveSelectionBackground#8882
  • editor.lineHighlightBackground#8881
  • editor.lineHighlightBorder#8882
  • editor.selectionBackground#8888
  • editorCursor.foreground#111111
  • editorGutter.background#fff
  • editorIndentGuide.background1#0002
  • editorLineNumber.activeForeground#0008
  • editorLineNumber.foreground#0002
  • editorLink.activeForeground#ca8a0488
  • editorPane.background#fff
  • editorWidget.background#fff
  • focusBorder#0008
  • foreground#0008
  • gitDecoration.conflictingResourceForeground#ca8a04
  • gitDecoration.deletedResourceForeground#be185d
  • gitDecoration.modifiedResourceForeground#6d28d9
  • gitDecoration.untrackedResourceForeground#a7cb7b
  • input.background#0001
  • list.activeSelectionBackground#fff
  • list.activeSelectionForeground#000
  • list.focusAndSelectionOutline#fff
  • list.focusBackground#fff
  • list.focusForeground#000
  • list.focusHighlightForeground#000
  • list.focusOutline#fff
  • list.highlightForeground#000
  • list.hoverBackground#fff
  • list.hoverForeground#000
  • list.inactiveSelectionBackground#fff
  • list.inactiveSelectionForeground#000
  • listFilterWidget.background#fff
  • menu.background#fff
  • panel.background#fff
  • scrollbar.shadow#fff
  • selection.background#0002
  • sideBar.background#fff
  • sideBarSectionHeader.background#fff
  • sideBarTitle.foreground#0008
  • statusBar.background#fff
  • statusBar.foreground#0008
  • statusBarItem.errorBackground#f43f5e
  • tab.hoverBackground#fff
  • terminal.background#fff
  • textLink.activeForeground#0008
  • textLink.foreground#000
  • titleBar.activeBackground#fff
  • titleBar.activeForeground#000
  • titleBar.inactiveBackground#fff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.operator#353535
storage.type.ts, keyword, keyword.other, keyword.control, storage.type, storage.modifier#be185d
string#111111
support.type.property-name.json#6d28d9
string variable, string meta.interpolation#353535
comment#0008
constant#111111
variable.language.this#be185d
entity.other.alias, source.php support.class, entity.name.type, meta.function-call support.class, keyword.other.type, entity.other.inherited-class, entity.name.tag support.class.component#6d28d9
meta.method-call entity.name.function, entity.name.tag#ca8a04
meta.function-call entity.name.function, meta.function-call support.function, meta.function.call entity.name.function#ca8a04
constant.enum, constant.other#111111
variable.other.property, entity.name.goto-label, entity.name.variable.parameter#111111
entity.name.function, support.function, support.function.constructor, entity.name.function meta.function-call meta.method-call#111111bold
meta.tag entity.name.tag.html, entity.name.tag.template.html#be185d
entity.other.attribute-name.html#6d28d9
meta.tag.other.unrecognized.html entity.name.tag.html#ca8a04
text.html keyword#6d28d9