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#181818
  • activityBarBadge.background#181818
  • activityBarBadge.foreground#fff
  • badge.background#181818
  • banner.background#181818
  • breadcrumb.background#181818
  • commandCenter.background#181818
  • debugToolBar.background#181818
  • editor.background#181818
  • editor.findMatchBackground#fff4
  • editor.findMatchHighlightBackground#fff2
  • editor.foldBackground#18181888
  • editor.foreground#cacaca
  • editor.hoverHighlightBackground#18181888
  • editor.inactiveSelectionBackground#fff2
  • editor.lineHighlightBackground#ffffff11
  • editor.lineHighlightBorder#fff2
  • editor.selectionBackground#fff4
  • editorCursor.foreground#eeeeee
  • editorGutter.background#181818
  • editorIndentGuide.background1#fff2
  • editorLineNumber.activeForeground#c2c2c2
  • editorLineNumber.foreground#5d5e5d
  • editorLink.activeForeground#de91d7
  • editorPane.background#181818
  • editorWidget.background#181818
  • focusBorder#fff4
  • foreground#fff8
  • gitDecoration.conflictingResourceForeground#ebc88d
  • gitDecoration.deletedResourceForeground#c97b89
  • gitDecoration.modifiedResourceForeground#84bff9
  • gitDecoration.untrackedResourceForeground#a7cb7b
  • input.background#fff2
  • list.activeSelectionBackground#181818
  • list.activeSelectionForeground#fff
  • list.focusAndSelectionOutline#181818
  • list.focusBackground#181818
  • list.focusForeground#fff
  • list.focusHighlightForeground#fff
  • list.focusOutline#181818
  • list.highlightForeground#fff
  • list.hoverBackground#181818
  • list.hoverForeground#fff
  • list.inactiveSelectionBackground#181818
  • list.inactiveSelectionForeground#fff
  • listFilterWidget.background#181818
  • menu.background#181818
  • panel.background#181818
  • scrollbar.shadow#181818
  • selection.background#fff2
  • sideBar.background#181818
  • sideBarSectionHeader.background#181818
  • sideBarTitle.foreground#fff8
  • statusBar.background#181818
  • statusBar.foreground#fff8
  • statusBarItem.errorBackground#f43f5e
  • tab.hoverBackground#181818
  • terminal.background#181818
  • textLink.activeForeground#fff8
  • textLink.foreground#fff
  • titleBar.activeBackground#181818
  • titleBar.activeForeground#fff
  • titleBar.inactiveBackground#181818

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.operator#cacaca
storage.type.ts, keyword, keyword.other, keyword.control, storage.type, storage.modifier#7ecbc7
string#de91d7
support.type.property-name.json#7ecbc7
string variable, string meta.interpolation#cacaca
comment#898989
constant#ebc88d
variable.language.this#c97b89
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#84bff9
meta.method-call entity.name.function#ebc88d
meta.function-call entity.name.function, meta.function-call support.function, meta.function.call entity.name.function#ebc88d
constant.enum, constant.other#af9cff
variable.other.property, entity.name.goto-label, entity.name.variable.parameter, meta.tag.attributes#af9cff
entity.name.function, support.function, support.function.constructor, entity.name.function meta.function-call meta.method-call#eeeeeebold
meta.tag entity.name.tag.html, entity.name.tag.template.html#7ecbc7
entity.other.attribute-name.html#af9cff
meta.tag.other.unrecognized.html entity.name.tag.html#84bff9
text.html keyword#af9cff
Lambda Studio Themes by Lambda Studio - VS Code Theme