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#5C00A710
  • activityBar.background#FFFFFF
  • activityBar.border#EEEEEE
  • activityBar.foreground#5C00A7
  • activityBar.inactiveForeground#21212150
  • activityBarBadge.background#5C00A7
  • badge.background#5C00A730
  • badge.foreground#5C00A7
  • banner.background#5C00A7
  • banner.foreground#FFFFFF
  • button.background#5C00A7
  • editor.background#FFFFFF
  • editor.selectionBackground#5C00A730
  • editorGroup.dropBackground#5C00A710
  • editorHoverWidget.highlightForeground#5C00A7
  • editorLineNumber.activeForeground#5C00A7
  • editorLineNumber.foreground#5C00A740
  • focusBorder#5C00A730
  • foreground#212121
  • list.activeSelectionBackground#5C00A7
  • list.activeSelectionForeground#FFFFFF
  • list.activeSelectionIconForeground#FFFFFF
  • list.dropBackground#5C00A730
  • list.dropBetweenBackground#5C00A730
  • list.filterMatchBackground#5C00A730
  • list.focusHighlightForeground#FFFFFF
  • list.highlightForeground#5C00A7
  • list.hoverBackground#5C00A730
  • list.inactiveSelectionBackground#5C00A730
  • merge.currentHeaderBackground#00A63F70
  • merge.incomingHeaderBackground#A6670070
  • progressBar.background#5C00A7
  • scrollbarSlider.activeBackground#5C00A7
  • scrollbarSlider.background#5C00A730
  • scrollbarSlider.hoverBackground#5C00A730
  • selection.background#5C00A730
  • sideBar.background#FFFFFF
  • sideBar.border#EEEEEE
  • sideBarSectionHeader.background#FFFFFF
  • sideBarSectionHeader.foreground#5C00A7
  • sideBarTitle.background#FFFFFF
  • statusBar.background#FFFFFF
  • statusBar.border#EEEEEE
  • statusBar.debuggingBackground#00A63F
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#212121
  • statusBarItem.activeBackground#5C00A7
  • statusBarItem.hoverBackground#5C00A7
  • statusBarItem.hoverForeground#FFFFFF
  • statusBarItem.prominentBackground#5C00A7
  • statusBarItem.prominentForeground#FFFFFF
  • statusBarItem.remoteBackground#FFFFFF
  • statusBarItem.remoteForeground#212121
  • tab.activeBorderTop#5C00A7
  • tab.activeForeground#5C00A7
  • tab.inactiveBackground#FFFFFF
  • tab.inactiveForeground#21212150
  • textLink.activeForeground#5C00A7
  • textLink.foreground#5C00A7
  • 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#5C00A7bold underline
variable.other.constant#5C00A7underline
variable.other#00A63F
entity.name#5C00A7bold
storage, keyword#5C00A7AA
string#A66700
constant.numeric#A66700
punctuation, punctuation.definition.begin.bracket, punctuation.definition.end.bracket, meta.brace#212121AA
meta.tag#212121
entity.other.attribute-name#5C00A7
punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc#5C00A7
punctuation.definition.bracket.curly.begin.jsdoc, punctuation.definition.bracket.curly.end.jsdoc, entity.name.type.instance.jsdoc#00A63F
keyword.control.import, meta.import#5C00A7bold
Niveus Theme by 佐伯楽 - VS Code Theme