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#A7940010
  • activityBar.background#FFFFFF
  • activityBar.border#EEEEEE
  • activityBar.foreground#A79400
  • activityBar.inactiveForeground#21212150
  • activityBarBadge.background#A79400
  • badge.background#A7940030
  • badge.foreground#A79400
  • banner.background#A79400
  • banner.foreground#FFFFFF
  • button.background#A79400
  • editor.background#FFFFFF
  • editor.selectionBackground#A7940030
  • editorGroup.dropBackground#A7940010
  • editorHoverWidget.highlightForeground#A79400
  • editorLineNumber.activeForeground#A79400
  • editorLineNumber.foreground#A7940040
  • focusBorder#A7940030
  • foreground#212121
  • list.activeSelectionBackground#A79400
  • list.activeSelectionForeground#FFFFFF
  • list.activeSelectionIconForeground#FFFFFF
  • list.dropBackground#A7940030
  • list.dropBetweenBackground#A7940030
  • list.filterMatchBackground#A7940030
  • list.focusHighlightForeground#FFFFFF
  • list.highlightForeground#A79400
  • list.hoverBackground#A7940030
  • list.inactiveSelectionBackground#A7940030
  • merge.currentHeaderBackground#A6005570
  • merge.incomingHeaderBackground#0092A670
  • progressBar.background#A79400
  • scrollbarSlider.activeBackground#A79400
  • scrollbarSlider.background#A7940030
  • scrollbarSlider.hoverBackground#A7940030
  • selection.background#A7940030
  • sideBar.background#FFFFFF
  • sideBar.border#EEEEEE
  • sideBarSectionHeader.background#FFFFFF
  • sideBarSectionHeader.foreground#A79400
  • sideBarTitle.background#FFFFFF
  • statusBar.background#FFFFFF
  • statusBar.border#EEEEEE
  • statusBar.debuggingBackground#A60055
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#212121
  • statusBarItem.activeBackground#A79400
  • statusBarItem.hoverBackground#A79400
  • statusBarItem.hoverForeground#FFFFFF
  • statusBarItem.prominentBackground#A79400
  • statusBarItem.prominentForeground#FFFFFF
  • statusBarItem.remoteBackground#FFFFFF
  • statusBarItem.remoteForeground#212121
  • tab.activeBorderTop#A79400
  • tab.activeForeground#A79400
  • tab.inactiveBackground#FFFFFF
  • tab.inactiveForeground#21212150
  • textLink.activeForeground#A79400
  • textLink.foreground#A79400
  • 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#A79400bold underline
variable.other.constant#A79400underline
variable.other#A60055
entity.name#A79400bold
storage, keyword#A79400AA
string#0092A6
constant.numeric#0092A6
punctuation, punctuation.definition.begin.bracket, punctuation.definition.end.bracket, meta.brace#212121AA
meta.tag#212121
entity.other.attribute-name#A79400
punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc#A79400
punctuation.definition.bracket.curly.begin.jsdoc, punctuation.definition.bracket.curly.end.jsdoc, entity.name.type.instance.jsdoc#A60055
keyword.control.import, meta.import#A79400bold