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#A7006710
  • activityBar.background#FFFFFF
  • activityBar.border#EEEEEE
  • activityBar.foreground#A70067
  • activityBar.inactiveForeground#21212150
  • activityBarBadge.background#A70067
  • badge.background#A7006730
  • badge.foreground#A70067
  • banner.background#A70067
  • banner.foreground#FFFFFF
  • button.background#A70067
  • editor.background#FFFFFF
  • editor.selectionBackground#A7006730
  • editorGroup.dropBackground#A7006710
  • editorHoverWidget.highlightForeground#A70067
  • editorLineNumber.activeForeground#A70067
  • editorLineNumber.foreground#A7006740
  • focusBorder#A7006730
  • foreground#212121
  • list.activeSelectionBackground#A70067
  • list.activeSelectionForeground#FFFFFF
  • list.activeSelectionIconForeground#FFFFFF
  • list.dropBackground#A7006730
  • list.dropBetweenBackground#A7006730
  • list.filterMatchBackground#A7006730
  • list.focusHighlightForeground#FFFFFF
  • list.highlightForeground#A70067
  • list.hoverBackground#A7006730
  • list.inactiveSelectionBackground#A7006730
  • merge.currentHeaderBackground#009CA670
  • merge.incomingHeaderBackground#A68F0070
  • progressBar.background#A70067
  • scrollbarSlider.activeBackground#A70067
  • scrollbarSlider.background#A7006730
  • scrollbarSlider.hoverBackground#A7006730
  • selection.background#A7006730
  • sideBar.background#FFFFFF
  • sideBar.border#EEEEEE
  • sideBarSectionHeader.background#FFFFFF
  • sideBarSectionHeader.foreground#A70067
  • sideBarTitle.background#FFFFFF
  • statusBar.background#FFFFFF
  • statusBar.border#EEEEEE
  • statusBar.debuggingBackground#009CA6
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#212121
  • statusBarItem.activeBackground#A70067
  • statusBarItem.hoverBackground#A70067
  • statusBarItem.hoverForeground#FFFFFF
  • statusBarItem.prominentBackground#A70067
  • statusBarItem.prominentForeground#FFFFFF
  • statusBarItem.remoteBackground#FFFFFF
  • statusBarItem.remoteForeground#212121
  • tab.activeBorderTop#A70067
  • tab.activeForeground#A70067
  • tab.inactiveBackground#FFFFFF
  • tab.inactiveForeground#21212150
  • textLink.activeForeground#A70067
  • textLink.foreground#A70067
  • titleBar.activeBackground#FFFFFF
  • titleBar.inactiveBackground#EEEEEE
  • tree.indentGuidesStroke#EEEEEE
  • welcomePage.background#FFFFFF
  • welcomePage.tileBackground#FAFAFA
  • welcomePage.tileHoverBackground#EEEEEE

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#212121AA
variable#212121
variable.other.readwrite#A70067bold underline
variable.other.constant#A70067underline
variable.other#009CA6
entity.name#A70067bold
storage, keyword#A70067AA
string#A68F00
constant.numeric#A68F00
punctuation, punctuation.definition.begin.bracket, punctuation.definition.end.bracket, meta.brace#212121AA
meta.tag#212121
entity.other.attribute-name#A70067
punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc#A70067
punctuation.definition.bracket.curly.begin.jsdoc, punctuation.definition.bracket.curly.end.jsdoc, entity.name.type.instance.jsdoc#009CA6
keyword.control.import, meta.import#A70067bold