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#13A70010
  • activityBar.background#FFFFFF
  • activityBar.border#EEEEEE
  • activityBar.foreground#13A700
  • activityBar.inactiveForeground#21212150
  • activityBarBadge.background#13A700
  • badge.background#13A70030
  • badge.foreground#13A700
  • banner.background#13A700
  • banner.foreground#FFFFFF
  • button.background#13A700
  • editor.background#FFFFFF
  • editor.selectionBackground#13A70030
  • editorGroup.dropBackground#13A70010
  • editorHoverWidget.highlightForeground#13A700
  • editorLineNumber.activeForeground#13A700
  • editorLineNumber.foreground#13A70040
  • focusBorder#13A70030
  • foreground#212121
  • list.activeSelectionBackground#13A700
  • list.activeSelectionForeground#FFFFFF
  • list.activeSelectionIconForeground#FFFFFF
  • list.dropBackground#13A70030
  • list.dropBetweenBackground#13A70030
  • list.filterMatchBackground#13A70030
  • list.focusHighlightForeground#FFFFFF
  • list.highlightForeground#13A700
  • list.hoverBackground#13A70030
  • list.inactiveSelectionBackground#13A70030
  • merge.currentHeaderBackground#A6400070
  • merge.incomingHeaderBackground#0F00A670
  • progressBar.background#13A700
  • scrollbarSlider.activeBackground#13A700
  • scrollbarSlider.background#13A70030
  • scrollbarSlider.hoverBackground#13A70030
  • selection.background#13A70030
  • sideBar.background#FFFFFF
  • sideBar.border#EEEEEE
  • sideBarSectionHeader.background#FFFFFF
  • sideBarSectionHeader.foreground#13A700
  • sideBarTitle.background#FFFFFF
  • statusBar.background#FFFFFF
  • statusBar.border#EEEEEE
  • statusBar.debuggingBackground#A64000
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#212121
  • statusBarItem.activeBackground#13A700
  • statusBarItem.hoverBackground#13A700
  • statusBarItem.hoverForeground#FFFFFF
  • statusBarItem.prominentBackground#13A700
  • statusBarItem.prominentForeground#FFFFFF
  • statusBarItem.remoteBackground#FFFFFF
  • statusBarItem.remoteForeground#212121
  • tab.activeBorderTop#13A700
  • tab.activeForeground#13A700
  • tab.inactiveBackground#FFFFFF
  • tab.inactiveForeground#21212150
  • textLink.activeForeground#13A700
  • textLink.foreground#13A700
  • 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#13A700bold underline
variable.other.constant#13A700underline
variable.other#A64000
entity.name#13A700bold
storage, keyword#13A700AA
string#0F00A6
constant.numeric#0F00A6
punctuation, punctuation.definition.begin.bracket, punctuation.definition.end.bracket, meta.brace#212121AA
meta.tag#212121
entity.other.attribute-name#13A700
punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc#13A700
punctuation.definition.bracket.curly.begin.jsdoc, punctuation.definition.bracket.curly.end.jsdoc, entity.name.type.instance.jsdoc#A64000
keyword.control.import, meta.import#13A700bold
Niveus Theme by 佐伯楽 - VS Code Theme