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#6EE35F10
  • activityBar.background#212121
  • activityBar.border#333333
  • activityBar.foreground#6EE35F
  • activityBar.inactiveForeground#FFFFFF50
  • activityBarBadge.background#6EE35F
  • badge.background#6EE35F30
  • badge.foreground#6EE35F
  • banner.background#6EE35F
  • banner.foreground#FFFFFF
  • button.background#6EE35F
  • editor.background#212121
  • editor.selectionBackground#6EE35F30
  • editorGroup.dropBackground#6EE35F10
  • editorHoverWidget.highlightForeground#6EE35F
  • editorLineNumber.activeForeground#6EE35F
  • editorLineNumber.foreground#6EE35F40
  • focusBorder#6EE35F30
  • foreground#FFFFFF
  • list.activeSelectionBackground#6EE35F
  • list.activeSelectionForeground#FFFFFF
  • list.activeSelectionIconForeground#212121
  • list.dropBackground#6EE35F30
  • list.dropBetweenBackground#6EE35F30
  • list.filterMatchBackground#6EE35F30
  • list.focusHighlightForeground#212121
  • list.highlightForeground#6EE35F
  • list.hoverBackground#6EE35F30
  • list.inactiveSelectionBackground#6EE35F30
  • merge.currentHeaderBackground#E3925F70
  • merge.incomingHeaderBackground#6B5FE370
  • progressBar.background#6EE35F
  • scrollbarSlider.activeBackground#6EE35F
  • scrollbarSlider.background#6EE35F30
  • scrollbarSlider.hoverBackground#6EE35F30
  • selection.background#6EE35F30
  • sideBar.background#212121
  • sideBar.border#333333
  • sideBarSectionHeader.background#212121
  • sideBarSectionHeader.foreground#6EE35F
  • sideBarTitle.background#212121
  • statusBar.background#212121
  • statusBar.border#333333
  • statusBar.debuggingBackground#E3925F
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#FFFFFF
  • statusBarItem.activeBackground#6EE35F
  • statusBarItem.hoverBackground#6EE35F
  • statusBarItem.hoverForeground#FFFFFF
  • statusBarItem.prominentBackground#6EE35F
  • statusBarItem.prominentForeground#FFFFFF
  • statusBarItem.remoteBackground#212121
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBorderTop#6EE35F
  • tab.activeForeground#6EE35F
  • tab.inactiveBackground#212121
  • tab.inactiveForeground#FFFFFF50
  • textLink.activeForeground#6EE35F
  • textLink.foreground#6EE35F
  • 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#6EE35Fbold underline
variable.other.constant#6EE35Funderline
variable.other#E3925F
entity.name#6EE35Fbold
storage, keyword#6EE35FAA
string#6B5FE3
constant.numeric#6B5FE3
punctuation, punctuation.definition.begin.bracket, punctuation.definition.end.bracket, meta.brace#FFFFFFAA
meta.tag#FFFFFF
entity.other.attribute-name#6EE35F
punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc#6EE35F
punctuation.definition.bracket.curly.begin.jsdoc, punctuation.definition.bracket.curly.end.jsdoc, entity.name.type.instance.jsdoc#E3925F
keyword.control.import, meta.import#6EE35Fbold
Niveus Theme by 佐伯楽 - VS Code Theme