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#252525
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#aaaaaa
  • activityBarBadge.background#ffffff
  • activityBarBadge.foreground#000000
  • badge.background#ffffff
  • badge.foreground#1c1c1c
  • button.background#ffffff
  • button.foreground#1c1c1c
  • button.hoverBackground#e0e0e0
  • debugToolBar.background#2d2d2d
  • debugToolBar.border#555555
  • editor.background#1a1a1a
  • editor.findMatchBackground#666600
  • editor.findMatchHighlightBackground#66660055
  • editor.foreground#ffffff
  • editor.inactiveSelectionBackground#404040
  • editor.lineHighlightBackground#282828
  • editor.selectionBackground#505050
  • editor.wordHighlightBackground#50505055
  • editor.wordHighlightStrongBackground#50505099
  • editorBracketMatch.background#505050
  • editorBracketMatch.border#d0d0d0
  • editorCursor.foreground#ffffff
  • editorError.foreground#ff8080
  • editorGroupHeader.tabsBackground#262626
  • editorHint.foreground#a8e6a0
  • editorIndentGuide.activeBackground#606060
  • editorIndentGuide.background#3d3d3d
  • editorInfo.foreground#9ed0ff
  • editorLineNumber.activeForeground#d0d0d0
  • editorLineNumber.foreground#707070
  • editorSuggestWidget.background#2d2d2d
  • editorSuggestWidget.border#555555
  • editorSuggestWidget.selectedBackground#404040
  • editorWarning.foreground#f5e096
  • editorWhitespace.foreground#505050
  • editorWidget.background#2d2d2d
  • editorWidget.border#555555
  • extensionButton.prominentBackground#ffffff
  • extensionButton.prominentForeground#1c1c1c
  • extensionButton.prominentHoverBackground#e0e0e0
  • gitDecoration.conflictingResourceForeground#e6b3ff
  • gitDecoration.deletedResourceForeground#ff8080
  • gitDecoration.ignoredResourceForeground#808080
  • gitDecoration.modifiedResourceForeground#f5e096
  • gitDecoration.untrackedResourceForeground#a8e6a0
  • input.background#2d2d2d
  • input.border#555555
  • input.foreground#f5f5f5
  • inputOption.activeBackground#404040
  • inputOption.activeForeground#ffffff
  • list.activeSelectionBackground#404040
  • list.activeSelectionForeground#ffffff
  • list.hoverBackground#3a3a3a
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#353535
  • notificationCenter.border#555555
  • notifications.background#2d2d2d
  • notifications.border#555555
  • notificationToast.border#555555
  • panel.background#1c1c1c
  • panel.border#404040
  • panelTitle.activeBorder#ffffff
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#999999
  • peekViewEditor.background#232323
  • peekViewResult.background#232323
  • peekViewTitle.background#2d2d2d
  • pickerGroup.border#555555
  • pickerGroup.foreground#ffffff
  • scrollbarSlider.activeBackground#808080
  • scrollbarSlider.background#50505080
  • scrollbarSlider.hoverBackground#606060
  • sideBar.background#202020
  • sideBar.foreground#f0f0f0
  • sideBarSectionHeader.background#2d2d2d
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#ffffff
  • statusBar.background#2a2a2a
  • statusBar.debuggingBackground#ff6b6b
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#e8e8e8
  • statusBar.noFolderBackground#2a2a2a
  • tab.activeBackground#1c1c1c
  • tab.activeForeground#ffffff
  • tab.border#262626
  • tab.inactiveBackground#262626
  • tab.inactiveForeground#999999
  • terminal.ansiBlack#3d3d3d
  • terminal.ansiBlue#9ed0ff
  • terminal.ansiBrightBlack#707070
  • terminal.ansiBrightBlue#c0e0ff
  • terminal.ansiBrightCyan#c0ffff
  • terminal.ansiBrightGreen#c8ffc0
  • terminal.ansiBrightMagenta#ffd9ff
  • terminal.ansiBrightRed#ffb3b3
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffffb3
  • terminal.ansiCyan#a0e6e6
  • terminal.ansiGreen#a8e6a0
  • terminal.ansiMagenta#e6b3ff
  • terminal.ansiRed#ff8080
  • terminal.ansiWhite#f5f5f5
  • terminal.ansiYellow#f5e096
  • terminal.background#1c1c1c
  • terminal.foreground#ffffff
  • titleBar.activeBackground#262626
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#262626
  • titleBar.inactiveForeground#999999

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#b0b0b0italic
keyword, storage.type, storage.modifier#ffcc66bold
keyword.control, keyword.operator#ffcc66bold
string, string.quoted#99ff99—
constant.numeric, constant.language#ff99ff—
constant.character.escape#66ffcc—
entity.name.function, support.function#66ccffbold
entity.name.class, entity.name.type, support.class#ffff66bold
variable, variable.other#ffffff—
variable.parameter#ffffcc—
entity.name.tag#ff9999bold
entity.other.attribute-name#99ccff—
support.type.property-name#99ddff—
markup.heading#ffffffbold
markup.bold#ffff99bold
markup.italic#ff99ffitalic
markup.underline—underline
markup.inline.raw#99ff99—
punctuation.definition.tag#cccccc—
meta.function-call#66ccffbold
invalid#ff6666bold