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#E35FB010
  • activityBar.background#212121
  • activityBar.border#333333
  • activityBar.foreground#E35FB0
  • activityBar.inactiveForeground#FFFFFF50
  • activityBarBadge.background#E35FB0
  • badge.background#E35FB030
  • badge.foreground#E35FB0
  • banner.background#E35FB0
  • banner.foreground#FFFFFF
  • button.background#E35FB0
  • editor.background#212121
  • editor.selectionBackground#E35FB030
  • editorGroup.dropBackground#E35FB010
  • editorHoverWidget.highlightForeground#E35FB0
  • editorLineNumber.activeForeground#E35FB0
  • editorLineNumber.foreground#E35FB040
  • focusBorder#E35FB030
  • foreground#FFFFFF
  • list.activeSelectionBackground#E35FB0
  • list.activeSelectionForeground#FFFFFF
  • list.activeSelectionIconForeground#212121
  • list.dropBackground#E35FB030
  • list.dropBetweenBackground#E35FB030
  • list.filterMatchBackground#E35FB030
  • list.focusHighlightForeground#212121
  • list.highlightForeground#E35FB0
  • list.hoverBackground#E35FB030
  • list.inactiveSelectionBackground#E35FB030
  • merge.currentHeaderBackground#5FDBE370
  • merge.incomingHeaderBackground#E3D05F70
  • progressBar.background#E35FB0
  • scrollbarSlider.activeBackground#E35FB0
  • scrollbarSlider.background#E35FB030
  • scrollbarSlider.hoverBackground#E35FB030
  • selection.background#E35FB030
  • sideBar.background#212121
  • sideBar.border#333333
  • sideBarSectionHeader.background#212121
  • sideBarSectionHeader.foreground#E35FB0
  • sideBarTitle.background#212121
  • statusBar.background#212121
  • statusBar.border#333333
  • statusBar.debuggingBackground#5FDBE3
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#FFFFFF
  • statusBarItem.activeBackground#E35FB0
  • statusBarItem.hoverBackground#E35FB0
  • statusBarItem.hoverForeground#FFFFFF
  • statusBarItem.prominentBackground#E35FB0
  • statusBarItem.prominentForeground#FFFFFF
  • statusBarItem.remoteBackground#212121
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBorderTop#E35FB0
  • tab.activeForeground#E35FB0
  • tab.inactiveBackground#212121
  • tab.inactiveForeground#FFFFFF50
  • textLink.activeForeground#E35FB0
  • textLink.foreground#E35FB0
  • 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#E35FB0bold underline
variable.other.constant#E35FB0underline
variable.other#5FDBE3
entity.name#E35FB0bold
storage, keyword#E35FB0AA
string#E3D05F
constant.numeric#E3D05F
punctuation, punctuation.definition.begin.bracket, punctuation.definition.end.bracket, meta.brace#FFFFFFAA
meta.tag#FFFFFF
entity.other.attribute-name#E35FB0
punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc#E35FB0
punctuation.definition.bracket.curly.begin.jsdoc, punctuation.definition.bracket.curly.end.jsdoc, entity.name.type.instance.jsdoc#5FDBE3
keyword.control.import, meta.import#E35FB0bold