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#f7f7f7
  • activityBar.border#e0e0e0
  • activityBar.foreground#333333
  • activityBarBadge.background#007acc
  • badge.background#007acc
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#007acc
  • breadcrumb.background#f7f7f7
  • breadcrumb.focusForeground#333333
  • breadcrumb.foreground#666666
  • button.background#007acc
  • button.foreground#ffffff
  • button.hoverBackground#005499
  • dropdown.background#ffffff
  • dropdown.border#cccccc
  • editor.background#ffffff
  • editor.foreground#333333
  • editorGroupHeader.tabsBackground#f7f7f7
  • input.background#ffffff
  • input.border#cccccc
  • inputOption.activeBorder#007acc
  • list.activeSelectionBackground#2160d8
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#ffffff
  • list.deemphasizedForeground#8c8c8c
  • list.dropBackground#d3d3d3
  • list.errorForeground#e51400
  • list.filterMatchBackground#ffeb3b50
  • list.filterMatchBorder#ffeb3b
  • list.focusAndSelectionOutline#2160d8
  • list.focusBackground#d3d3d3
  • list.focusHighlightForeground#2160d8
  • list.highlightForeground#2160d8
  • list.hoverBackground#e8e8e8
  • list.inactiveSelectionBackground#d3d3d3
  • list.inactiveSelectionIconForeground#424242
  • list.warningForeground#e9a700
  • menu.background#ffffff
  • menu.border#cccccc
  • menu.foreground#333333
  • menu.selectionBackground#0066cc
  • menu.selectionForeground#ffffff
  • panel.background#f7f7f7
  • panel.border#e0e0e0
  • panelTitle.activeForeground#333333
  • progressBar.background#007acc
  • sideBar.background#ebeef3
  • sideBar.border#d4d4d4
  • sideBar.foreground#222222
  • sideBarSectionHeader.background#ebeef3
  • sideBarSectionHeader.border#d4d4d4
  • sideBarSectionHeader.foreground#666666
  • sideBarTitle.foreground#222222
  • statusBar.background#f7f7f7
  • statusBar.border#e0e0e0
  • statusBar.foreground#333333
  • tab.activeBackground#ffffff
  • tab.activeBorder#007acc
  • tab.border#e0e0e0
  • tab.inactiveBackground#f0f0f0
  • titleBar.activeBackground#f7f7f7
  • titleBar.activeForeground#333333
  • titleBar.border#e0e0e0
  • tree.indentGuidesStroke#bfbfbf
  • tree.tableColumnsBorder#d4d4d4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5d6c79italic
keyword, storage.type, storage.modifier#ad3da4
string#d12f1b
constant.numeric#272ad8
constant.language#ad3da4
constant.character, constant.other#272ad8
variable#333333
entity.name.function, meta.function-call, support.function#4b21b0
entity.name.class, entity.name.type.class#3f6e75
variable.other.class#333333
entity.name.type#3f6e75
entity.other.inherited-class#3f6e75
variable.parameter#333333
entity.name.tag#ad3da4
entity.other.attribute-name#836c28
support.function#4b21b0
support.constant#ad3da4
support.type, support.class#3f6e75