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.background#000000
  • activityBar.foreground#00ff00
  • activityBar.inactiveForeground#808080
  • activityBarBadge.background#00ff00
  • activityBarBadge.foreground#000000
  • badge.background#00ff00
  • badge.foreground#000000
  • button.background#00ff00
  • button.foreground#000000
  • button.hoverBackground#44ff44
  • debugToolBar.background#0a0a0a
  • debugToolBar.border#00ff00
  • editor.background#000000
  • editor.findMatchBackground#ffff0066
  • editor.findMatchHighlightBackground#ffff0033
  • editor.foreground#ffffff
  • editor.inactiveSelectionBackground#ffffff22
  • editor.lineHighlightBackground#1a1a1a
  • editor.selectionBackground#00ff0044
  • editor.wordHighlightBackground#00ff0033
  • editor.wordHighlightStrongBackground#00ff0066
  • editorBracketMatch.background#00ff0033
  • editorBracketMatch.border#00ff00
  • editorCursor.foreground#00ff00
  • editorError.foreground#ff0000
  • editorGroupHeader.tabsBackground#000000
  • editorHint.foreground#00ff00
  • editorIndentGuide.activeBackground#505050
  • editorIndentGuide.background#303030
  • editorInfo.foreground#00ffff
  • editorLineNumber.activeForeground#00ff00
  • editorLineNumber.foreground#606060
  • editorSuggestWidget.background#0a0a0a
  • editorSuggestWidget.border#00ff00
  • editorSuggestWidget.selectedBackground#00ff0033
  • editorWarning.foreground#ffff00
  • editorWhitespace.foreground#404040
  • editorWidget.background#0a0a0a
  • editorWidget.border#303030
  • extensionButton.prominentBackground#00ff00
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#44ff44
  • gitDecoration.conflictingResourceForeground#ff00ff
  • gitDecoration.deletedResourceForeground#ff0000
  • gitDecoration.ignoredResourceForeground#808080
  • gitDecoration.modifiedResourceForeground#ffff00
  • gitDecoration.untrackedResourceForeground#00ff00
  • input.background#0a0a0a
  • input.border#00ff00
  • input.foreground#ffffff
  • inputOption.activeBackground#00ff0033
  • inputOption.activeForeground#ffffff
  • list.activeSelectionBackground#00ff0033
  • list.activeSelectionForeground#ffffff
  • list.hoverBackground#ffffff22
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#00ff0022
  • notificationCenter.border#303030
  • notifications.background#0a0a0a
  • notifications.border#00ff00
  • notificationToast.border#00ff00
  • panel.background#000000
  • panel.border#303030
  • panelTitle.activeBorder#00ff00
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#808080
  • peekViewEditor.background#0a0a0a
  • peekViewResult.background#0a0a0a
  • peekViewTitle.background#1a1a1a
  • pickerGroup.border#303030
  • pickerGroup.foreground#00ff00
  • scrollbarSlider.activeBackground#808080
  • scrollbarSlider.background#30303080
  • scrollbarSlider.hoverBackground#505050
  • sideBar.background#0a0a0a
  • sideBar.foreground#e0e0e0
  • sideBarSectionHeader.background#1a1a1a
  • sideBarSectionHeader.foreground#00ff00
  • sideBarTitle.foreground#ffffff
  • statusBar.background#000000
  • statusBar.debuggingBackground#ff0000
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#00ff00
  • statusBar.noFolderBackground#000000
  • tab.activeBackground#0a0a0a
  • tab.activeForeground#ffffff
  • tab.border#000000
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#808080
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0000ff
  • terminal.ansiBrightBlack#808080
  • terminal.ansiBrightBlue#4444ff
  • terminal.ansiBrightCyan#44ffff
  • terminal.ansiBrightGreen#44ff44
  • terminal.ansiBrightMagenta#ff44ff
  • terminal.ansiBrightRed#ff4444
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffff44
  • terminal.ansiCyan#00ffff
  • terminal.ansiGreen#00ff00
  • terminal.ansiMagenta#ff00ff
  • terminal.ansiRed#ff0000
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffff00
  • terminal.background#000000
  • terminal.foreground#ffffff
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#808080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#808080italic
keyword, storage.type, storage.modifier#ff00ffbold
keyword.control, keyword.operator#ff00ffbold
string, string.quoted#ffff00
constant.numeric, constant.language#00ffff
constant.character.escape#00ffff
entity.name.function, support.function#00ff00bold
entity.name.class, entity.name.type, support.class#00ffffbold
variable, variable.other#ffffff
variable.parameter#ffffff
entity.name.tag#ff0000bold
entity.other.attribute-name#00ff00
support.type.property-name#00ffff
markup.heading#00ff00bold
markup.bold#ffff00bold
markup.italic#00ffffitalic
markup.underlineunderline
markup.inline.raw#ffff00
punctuation.definition.tag#808080
meta.function-call#00ff00
invalid#ff0000bold