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
Xcode Like Theme by Appgea - VS Code Theme