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.activeBackground#A75FE310
  • activityBar.background#212121
  • activityBar.border#333333
  • activityBar.foreground#A75FE3
  • activityBar.inactiveForeground#FFFFFF50
  • activityBarBadge.background#A75FE3
  • badge.background#A75FE330
  • badge.foreground#A75FE3
  • banner.background#A75FE3
  • banner.foreground#FFFFFF
  • button.background#A75FE3
  • editor.background#212121
  • editor.selectionBackground#A75FE330
  • editorGroup.dropBackground#A75FE310
  • editorHoverWidget.highlightForeground#A75FE3
  • editorLineNumber.activeForeground#A75FE3
  • editorLineNumber.foreground#A75FE340
  • focusBorder#A75FE330
  • foreground#FFFFFF
  • list.activeSelectionBackground#A75FE3
  • list.activeSelectionForeground#FFFFFF
  • list.activeSelectionIconForeground#212121
  • list.dropBackground#A75FE330
  • list.dropBetweenBackground#A75FE330
  • list.filterMatchBackground#A75FE330
  • list.focusHighlightForeground#212121
  • list.highlightForeground#A75FE3
  • list.hoverBackground#A75FE330
  • list.inactiveSelectionBackground#A75FE330
  • merge.currentHeaderBackground#5FE39170
  • merge.incomingHeaderBackground#E3B15F70
  • progressBar.background#A75FE3
  • scrollbarSlider.activeBackground#A75FE3
  • scrollbarSlider.background#A75FE330
  • scrollbarSlider.hoverBackground#A75FE330
  • selection.background#A75FE330
  • sideBar.background#212121
  • sideBar.border#333333
  • sideBarSectionHeader.background#212121
  • sideBarSectionHeader.foreground#A75FE3
  • sideBarTitle.background#212121
  • statusBar.background#212121
  • statusBar.border#333333
  • statusBar.debuggingBackground#5FE391
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#FFFFFF
  • statusBarItem.activeBackground#A75FE3
  • statusBarItem.hoverBackground#A75FE3
  • statusBarItem.hoverForeground#FFFFFF
  • statusBarItem.prominentBackground#A75FE3
  • statusBarItem.prominentForeground#FFFFFF
  • statusBarItem.remoteBackground#212121
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBorderTop#A75FE3
  • tab.activeForeground#A75FE3
  • tab.inactiveBackground#212121
  • tab.inactiveForeground#FFFFFF50
  • textLink.activeForeground#A75FE3
  • textLink.foreground#A75FE3
  • titleBar.activeBackground#212121
  • titleBar.inactiveBackground#333333
  • tree.indentGuidesStroke#333333
  • welcomePage.background#212121
  • welcomePage.tileBackground#FAFAFA
  • welcomePage.tileHoverBackground#333333

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#FFFFFFAA
variable#FFFFFF
variable.other.readwrite#A75FE3bold underline
variable.other.constant#A75FE3underline
variable.other#5FE391
entity.name#A75FE3bold
storage, keyword#A75FE3AA
string#E3B15F
constant.numeric#E3B15F
punctuation, punctuation.definition.begin.bracket, punctuation.definition.end.bracket, meta.brace#FFFFFFAA
meta.tag#FFFFFF
entity.other.attribute-name#A75FE3
punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc#A75FE3
punctuation.definition.bracket.curly.begin.jsdoc, punctuation.definition.bracket.curly.end.jsdoc, entity.name.type.instance.jsdoc#5FE391
keyword.control.import, meta.import#A75FE3bold