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#1a1a1a
  • activityBar.foreground#4a9eff
  • activityBar.inactiveForeground#505050
  • activityBarBadge.background#4a9eff
  • activityBarBadge.foreground#ffffff
  • badge.background#4a9eff
  • badge.foreground#ffffff
  • button.background#4a9eff
  • button.foreground#ffffff
  • button.hoverBackground#6db0ff
  • debugToolBar.background#1a1a1a
  • debugToolBar.border#303030
  • editor.background#1a1a1a
  • editor.findMatchBackground#4a9eff40
  • editor.findMatchHighlightBackground#4a9eff20
  • editor.foreground#c0c0c0
  • editor.inactiveSelectionBackground#252525
  • editor.lineHighlightBackground#1f1f1f
  • editor.selectionBackground#2a2a2a
  • editor.wordHighlightBackground#30303080
  • editor.wordHighlightStrongBackground#303030cc
  • editorBracketMatch.background#2a2a2a
  • editorBracketMatch.border#4a9eff
  • editorCursor.foreground#4a9eff
  • editorError.foreground#808080
  • editorGroupHeader.tabsBackground#1a1a1a
  • editorHint.foreground#909090
  • editorIndentGuide.activeBackground#404040
  • editorIndentGuide.background#282828
  • editorInfo.foreground#4a9eff
  • editorLineNumber.activeForeground#808080
  • editorLineNumber.foreground#404040
  • editorSuggestWidget.background#1a1a1a
  • editorSuggestWidget.border#303030
  • editorSuggestWidget.selectedBackground#2a2a2a
  • editorWarning.foreground#a0a0a0
  • editorWhitespace.foreground#303030
  • editorWidget.background#1a1a1a
  • editorWidget.border#303030
  • extensionButton.prominentBackground#4a9eff
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#6db0ff
  • gitDecoration.conflictingResourceForeground#707070
  • gitDecoration.deletedResourceForeground#808080
  • gitDecoration.ignoredResourceForeground#404040
  • gitDecoration.modifiedResourceForeground#4a9eff
  • gitDecoration.untrackedResourceForeground#909090
  • input.background#222222
  • input.border#303030
  • input.foreground#c0c0c0
  • inputOption.activeBackground#2a2a2a
  • inputOption.activeForeground#ffffff
  • list.activeSelectionBackground#2a2a2a
  • list.activeSelectionForeground#ffffff
  • list.hoverBackground#222222
  • list.hoverForeground#e0e0e0
  • list.inactiveSelectionBackground#252525
  • notificationCenter.border#303030
  • notifications.background#1a1a1a
  • notifications.border#303030
  • notificationToast.border#303030
  • panel.background#1a1a1a
  • panel.border#2a2a2a
  • panelTitle.activeBorder#4a9eff
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#606060
  • peekViewEditor.background#1a1a1a
  • peekViewResult.background#1a1a1a
  • peekViewTitle.background#252525
  • pickerGroup.border#303030
  • pickerGroup.foreground#4a9eff
  • scrollbarSlider.activeBackground#505050
  • scrollbarSlider.background#30303080
  • scrollbarSlider.hoverBackground#404040
  • sideBar.background#1a1a1a
  • sideBar.foreground#c0c0c0
  • sideBarSectionHeader.background#1a1a1a
  • sideBarSectionHeader.foreground#4a9eff
  • sideBarTitle.foreground#e0e0e0
  • statusBar.background#1a1a1a
  • statusBar.debuggingBackground#4a9eff
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#808080
  • statusBar.noFolderBackground#1a1a1a
  • tab.activeBackground#1a1a1a
  • tab.activeForeground#ffffff
  • tab.border#1a1a1a
  • tab.inactiveBackground#1a1a1a
  • tab.inactiveForeground#606060
  • terminal.ansiBlack#1a1a1a
  • terminal.ansiBlue#4a9eff
  • terminal.ansiBrightBlack#505050
  • terminal.ansiBrightBlue#6db0ff
  • terminal.ansiBrightCyan#6db0ff
  • terminal.ansiBrightGreen#a0a0a0
  • terminal.ansiBrightMagenta#808080
  • terminal.ansiBrightRed#909090
  • terminal.ansiBrightWhite#e0e0e0
  • terminal.ansiBrightYellow#b0b0b0
  • terminal.ansiCyan#4a9eff
  • terminal.ansiGreen#909090
  • terminal.ansiMagenta#707070
  • terminal.ansiRed#808080
  • terminal.ansiWhite#c0c0c0
  • terminal.ansiYellow#a0a0a0
  • terminal.background#1a1a1a
  • terminal.foreground#c0c0c0
  • titleBar.activeBackground#1a1a1a
  • titleBar.activeForeground#c0c0c0
  • titleBar.inactiveBackground#1a1a1a
  • titleBar.inactiveForeground#505050

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#606060italic
keyword, storage.type, storage.modifier#c0c0c0
keyword.control, keyword.operator#b0b0b0
string, string.quoted#909090
constant.numeric, constant.language#a0a0a0
constant.character.escape#4a9eff
entity.name.function, support.function#4a9eff
entity.name.class, entity.name.type, support.class#d0d0d0
variable, variable.other#c0c0c0
variable.parameter#b0b0b0
entity.name.tag#c0c0c0
entity.other.attribute-name#a0a0a0
support.type.property-name#b0b0b0
markup.heading#4a9effbold
markup.bold#c0c0c0bold
markup.italic#b0b0b0italic
markup.underlineunderline
markup.inline.raw#909090
punctuation.definition.tag#808080
meta.function-call#4a9eff
invalid#707070
Smit Dark Theme by Smit Dudhat - VS Code Theme