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.underlineunderline
markup.inline.raw#99ff99
punctuation.definition.tag#cccccc
meta.function-call#66ccffbold
invalid#ff6666bold
Smit Dark Theme by Smit Dudhat - VS Code Theme