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