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.underline—underline
markup.inline.raw#909090—
punctuation.definition.tag#808080—
meta.function-call#4a9eff—
invalid#707070—