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#f0f0f0
  • activityBar.foreground#121417
  • activityBarBadge.background#5e8de9
  • activityBarBadge.foreground#ffffff
  • badge.background#5e8de9
  • badge.foreground#ffffff
  • button.background#5e8de9
  • button.foreground#ffffff
  • button.hoverBackground#6c96eb
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#ffffff
  • dropdown.border#dbdbdc
  • editor.background#ffffff
  • editor.lineHighlightBackground#ffffd6
  • editor.selectionBackground#afc4da
  • editorCursor.foreground#000000
  • editorGroup.border#dbdbdc
  • editorGroup.emptyBackground#eaeaeb
  • editorGroupHeader.tabsBackground#f0f0f0
  • editorHoverWidget.background#eaeaeb
  • editorHoverWidget.border#dbdbdc
  • editorIndentGuide.background#d3d4d5
  • editorLineNumber.activeForeground#dddddd
  • editorLineNumber.foreground#dddddd
  • editorSuggestWidget.background#eaeaeb
  • editorSuggestWidget.border#dbdbdc
  • editorSuggestWidget.selectedBackground#ffffff
  • editorWhitespace.foreground#d3d4d5
  • editorWidget.background#eaeaeb
  • extensionButton.prominentBackground#5e8de9
  • extensionButton.prominentHoverBackground#4cc263
  • focusBorder#5e8de9
  • foreground#474747
  • input.background#ffffff
  • input.border#dbdbdc
  • list.activeSelectionBackground#dbdbdc
  • list.activeSelectionForeground#232324
  • list.focusBackground#dbdbdc
  • list.highlightForeground#121417
  • list.hoverBackground#dbdbdc66
  • list.inactiveSelectionBackground#e4e4e4
  • list.inactiveSelectionForeground#232324
  • peekView.border#5e8de9
  • peekViewEditor.background#ffffff
  • peekViewResult.background#eaeaeb
  • peekViewResult.selectionBackground#dbdbdc
  • peekViewTitle.background#ffffff
  • pickerGroup.border#5e8de9
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566680
  • scrollbarSlider.hoverBackground#5a637580
  • sideBar.background#f0f0f0
  • sideBar.border#e0e0e0
  • sideBar.foreground#474747
  • sideBarSectionHeader.background#eaeaea
  • statusBar.background#f0f0f0
  • statusBar.border#e0e0e0
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#424243
  • statusBar.noFolderBackground#eaeaeb
  • statusBarItem.hoverBackground#dbdbdc
  • tab.activeBackground#ffffff
  • tab.activeBorder#ffffff
  • tab.border#e0e0e0
  • tab.inactiveBackground#f0f0f0
  • tab.inactiveForeground#a5a5a5
  • titleBar.activeBackground#eaeaeb
  • titleBar.activeForeground#424243
  • titleBar.inactiveBackground#eaeaeb
  • titleBar.inactiveForeground#424243

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#999988italic
string#d14
string.regexp#d14
string.other.link#888
constant#099
constant.numeric#d14
constant.language#606aa1
constant.character#606aa1
constant.character.escape#0184BC
constant.other#606aa1
constant.other.symbol#990073
variable#008080
variable.parameter#606aa1
keyword#222bold
keyword.operator#222
keyword.other.special-method#0086B3
keyword.other.unit#445588
storage#222
storage.type#222
entity.name.variable#008080
entity.name.class, entity.name.type.class#606aa1underline
entity.other.inherited-class#606aa1underline
entity.name.function#900
entity.name.tag#008080
entity.other.attribute-name#458bold
support.constant#458
support.function#458
support.type#458
support.class#008080
invalid.illegal#f87070
invalid.deprecated#f8f830
meta.function-call.generic#900
meta.object-literal.key#008080
source.css support.type.property-name#333bold
source.css constant.numeric, source.css constant.other, source.css support.constant#099