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#002FA710
  • activityBar.background#FFFFFF
  • activityBar.border#EEEEEE
  • activityBar.foreground#002FA7
  • activityBar.inactiveForeground#21212150
  • activityBarBadge.background#002FA7
  • badge.background#002FA730
  • badge.foreground#002FA7
  • banner.background#002FA7
  • banner.foreground#FFFFFF
  • button.background#002FA7
  • editor.background#FFFFFF
  • editor.selectionBackground#002FA730
  • editorGroup.dropBackground#002FA710
  • editorHoverWidget.highlightForeground#002FA7
  • editorLineNumber.activeForeground#002FA7
  • editorLineNumber.foreground#002FA740
  • focusBorder#002FA730
  • foreground#212121
  • list.activeSelectionBackground#002FA7
  • list.activeSelectionForeground#FFFFFF
  • list.activeSelectionIconForeground#FFFFFF
  • list.dropBackground#002FA730
  • list.dropBetweenBackground#002FA730
  • list.filterMatchBackground#002FA730
  • list.focusHighlightForeground#FFFFFF
  • list.highlightForeground#002FA7
  • list.hoverBackground#002FA730
  • list.inactiveSelectionBackground#002FA730
  • merge.currentHeaderBackground#65A60070
  • merge.incomingHeaderBackground#A61E0070
  • progressBar.background#002FA7
  • scrollbarSlider.activeBackground#002FA7
  • scrollbarSlider.background#002FA730
  • scrollbarSlider.hoverBackground#002FA730
  • selection.background#002FA730
  • sideBar.background#FFFFFF
  • sideBar.border#EEEEEE
  • sideBarSectionHeader.background#FFFFFF
  • sideBarSectionHeader.foreground#002FA7
  • sideBarTitle.background#FFFFFF
  • statusBar.background#FFFFFF
  • statusBar.border#EEEEEE
  • statusBar.debuggingBackground#65A600
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#212121
  • statusBarItem.activeBackground#002FA7
  • statusBarItem.hoverBackground#002FA7
  • statusBarItem.hoverForeground#FFFFFF
  • statusBarItem.prominentBackground#002FA7
  • statusBarItem.prominentForeground#FFFFFF
  • statusBarItem.remoteBackground#FFFFFF
  • statusBarItem.remoteForeground#212121
  • tab.activeBorderTop#002FA7
  • tab.activeForeground#002FA7
  • tab.inactiveBackground#FFFFFF
  • tab.inactiveForeground#21212150
  • textLink.activeForeground#002FA7
  • textLink.foreground#002FA7
  • 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#002FA7bold underline
variable.other.constant#002FA7underline
variable.other#65A600
entity.name#002FA7bold
storage, keyword#002FA7AA
string#A61E00
constant.numeric#A61E00
punctuation, punctuation.definition.begin.bracket, punctuation.definition.end.bracket, meta.brace#212121AA
meta.tag#212121
entity.other.attribute-name#002FA7
punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc#002FA7
punctuation.definition.bracket.curly.begin.jsdoc, punctuation.definition.bracket.curly.end.jsdoc, entity.name.type.instance.jsdoc#65A600
keyword.control.import, meta.import#002FA7bold
Niveus Theme by 佐伯楽 - VS Code Theme