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#2b2d3a
  • activityBar.foreground#9db4c7
  • activityBar.inactiveForeground#5a5d6a
  • activityBarBadge.background#9db4c7
  • activityBarBadge.foreground#2b2d3a
  • badge.background#9db4c7
  • badge.foreground#2b2d3a
  • button.background#9db4c7
  • button.foreground#2b2d3a
  • button.hoverBackground#adc1d4
  • debugToolBar.background#2b2d3a
  • debugToolBar.border#4a4d5a
  • editor.background#2b2d3a
  • editor.findMatchBackground#9db4c760
  • editor.findMatchHighlightBackground#9db4c730
  • editor.foreground#c7cdd8
  • editor.inactiveSelectionBackground#36384540
  • editor.lineHighlightBackground#33354140
  • editor.selectionBackground#3e415060
  • editor.wordHighlightBackground#3e415050
  • editor.wordHighlightStrongBackground#3e415080
  • editorBracketMatch.background#3e415050
  • editorBracketMatch.border#9db4c7
  • editorCursor.foreground#b4a0c7
  • editorError.foreground#d9a7a1
  • editorGroupHeader.tabsBackground#2b2d3a
  • editorHint.foreground#a7c9a3
  • editorIndentGuide.activeBackground#4a4d5a
  • editorIndentGuide.background#363845
  • editorInfo.foreground#9db4c7
  • editorLineNumber.activeForeground#9db4c7
  • editorLineNumber.foreground#4a4d5a
  • editorSuggestWidget.background#2b2d3a
  • editorSuggestWidget.border#4a4d5a
  • editorSuggestWidget.selectedBackground#3e4150
  • editorWarning.foreground#e0c9a3
  • editorWhitespace.foreground#4a4d5a
  • editorWidget.background#2b2d3a
  • editorWidget.border#4a4d5a
  • extensionButton.prominentBackground#9db4c7
  • extensionButton.prominentForeground#2b2d3a
  • extensionButton.prominentHoverBackground#adc1d4
  • gitDecoration.conflictingResourceForeground#b4a0c7
  • gitDecoration.deletedResourceForeground#d9a7a1
  • gitDecoration.ignoredResourceForeground#5a5d6a
  • gitDecoration.modifiedResourceForeground#e0c9a3
  • gitDecoration.untrackedResourceForeground#a7c9a3
  • input.background#363845
  • input.border#4a4d5a
  • input.foreground#c7cdd8
  • inputOption.activeBackground#3e4150
  • inputOption.activeForeground#d4dae5
  • list.activeSelectionBackground#3e4150
  • list.activeSelectionForeground#d4dae5
  • list.hoverBackground#333541
  • list.hoverForeground#d4dae5
  • list.inactiveSelectionBackground#363845
  • notificationCenter.border#4a4d5a
  • notifications.background#2b2d3a
  • notifications.border#4a4d5a
  • notificationToast.border#4a4d5a
  • panel.background#2b2d3a
  • panel.border#363845
  • panelTitle.activeBorder#9db4c7
  • panelTitle.activeForeground#d4dae5
  • panelTitle.inactiveForeground#6a6d7a
  • peekViewEditor.background#2b2d3a
  • peekViewResult.background#2b2d3a
  • peekViewTitle.background#363845
  • pickerGroup.border#4a4d5a
  • pickerGroup.foreground#9db4c7
  • scrollbarSlider.activeBackground#6a6d7a
  • scrollbarSlider.background#4a4d5a60
  • scrollbarSlider.hoverBackground#5a5d6a
  • sideBar.background#2b2d3a
  • sideBar.foreground#c7cdd8
  • sideBarSectionHeader.background#2b2d3a
  • sideBarSectionHeader.foreground#9db4c7
  • sideBarTitle.foreground#d4dae5
  • statusBar.background#2b2d3a
  • statusBar.debuggingBackground#b4a0c7
  • statusBar.debuggingForeground#2b2d3a
  • statusBar.foreground#9db4c7
  • statusBar.noFolderBackground#2b2d3a
  • tab.activeBackground#363845
  • tab.activeForeground#d4dae5
  • tab.border#2b2d3a
  • tab.inactiveBackground#2b2d3a
  • tab.inactiveForeground#6a6d7a
  • terminal.ansiBlack#363845
  • terminal.ansiBlue#9db4c7
  • terminal.ansiBrightBlack#4a4d5a
  • terminal.ansiBrightBlue#adc1d4
  • terminal.ansiBrightCyan#b3d9d4
  • terminal.ansiBrightGreen#b7d9b3
  • terminal.ansiBrightMagenta#c4b0d4
  • terminal.ansiBrightRed#e0b4ae
  • terminal.ansiBrightWhite#e4eaf5
  • terminal.ansiBrightYellow#e9d6b3
  • terminal.ansiCyan#a3c9c7
  • terminal.ansiGreen#a7c9a3
  • terminal.ansiMagenta#b4a0c7
  • terminal.ansiRed#d9a7a1
  • terminal.ansiWhite#d4dae5
  • terminal.ansiYellow#e0c9a3
  • terminal.background#2b2d3a
  • terminal.foreground#c7cdd8
  • titleBar.activeBackground#2b2d3a
  • titleBar.activeForeground#d4dae5
  • titleBar.inactiveBackground#2b2d3a
  • titleBar.inactiveForeground#5a5d6a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7a7d8aitalic
keyword, storage.type, storage.modifier#b4a0c7
keyword.control, keyword.operator#b4a0c7
string, string.quoted#a7c9a3
constant.numeric, constant.language#d9a7a1
constant.character.escape#e0c9a3
entity.name.function, support.function#9db4c7
entity.name.class, entity.name.type, support.class#adc1d4
variable, variable.other#c7cdd8
variable.parameter#c7cdd8
entity.name.tag#b4a0c7
entity.other.attribute-name#a3c9c7
support.type.property-name#9db4c7
markup.heading#9db4c7bold
markup.bold#b4a0c7bold
markup.italic#b4a0c7italic
markup.underlineunderline
markup.inline.raw#a7c9a3
punctuation.definition.tag#7a7d8a
meta.function-call#9db4c7
invalid#d9a7a1