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.activeBorder#7fbcff
  • activityBar.background#20232b
  • activityBar.foreground#a6d2ff
  • activityBarBadge.background#7fbcff
  • activityBarBadge.foreground#1a1d26
  • breadcrumb.activeSelectionForeground#7fbcff
  • breadcrumb.focusForeground#d4d7dc
  • breadcrumb.foreground#676c77
  • button.background#7fbcff
  • button.foreground#1a1d26
  • button.hoverBackground#91d4ff
  • editor.background#1a1d26
  • editor.foreground#d4d7dc
  • editor.inactiveSelectionBackground#2b2f3a4d
  • editor.lineHighlightBackground#20232b
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#2b2f3a7f
  • editor.wordHighlightBackground#2b2f3a66
  • editorBracketMatch.background#3a3f4b7f
  • editorBracketMatch.border#7fbcff
  • editorCursor.foreground#ffcc66
  • editorIndentGuide.activeBackground#5a6070
  • editorIndentGuide.background#3e4451
  • editorLineNumber.activeForeground#7fbcff
  • editorLineNumber.foreground#3e4451
  • editorWidget.background#20232b
  • editorWidget.foreground#d4d7dc
  • input.background#20232b
  • input.border#2b2f3a7f
  • input.foreground#d4d7dc
  • input.placeholderForeground#676c77
  • list.activeSelectionBackground#2b2f3a7f
  • list.activeSelectionForeground#a6d2ff
  • list.focusBackground#2b2f3a7f
  • list.focusForeground#a6d2ff
  • list.highlightForeground#ffcc66
  • list.hoverBackground#2b2f3a4d
  • list.inactiveSelectionBackground#2b2f3a4d
  • list.inactiveSelectionForeground#d4d7dc
  • menu.background#20232b
  • menu.foreground#c1c7d1
  • menu.selectionBackground#2b2f3a7f
  • menu.selectionForeground#a6d2ff
  • menu.separatorBackground#3e4451
  • notification.background#1a1d26
  • notification.foreground#d4d7dc
  • notificationButton.background#7fbcff
  • notificationButton.foreground#1a1d26
  • notificationButton.hoverBackground#91d4ff
  • peekViewEditor.background#20232b
  • peekViewResult.background#191c24
  • progressBar.background#7fbcff
  • quickInput.background#20232b
  • quickInput.foreground#d4d7dc
  • quickInputList.focusBackground#2b2f3a7f
  • quickInputList.focusForeground#a6d2ff
  • scrollbarSlider.activeBackground#3e4451a6
  • scrollbarSlider.background#3e44514d
  • scrollbarSlider.hoverBackground#3e44517f
  • sideBar.background#191c24
  • sideBar.foreground#c1c7d1
  • sideBarSectionHeader.background#20232b
  • sideBarSectionHeader.foreground#d4d7dc
  • statusBar.background#191c24
  • statusBar.debuggingBackground#ffcc66
  • statusBar.debuggingForeground#1a1d26
  • statusBar.foreground#d4d7dc
  • tab.activeBackground#1a1d26
  • tab.activeBorderTop#7fbcff
  • tab.activeForeground#a6d2ff
  • tab.inactiveBackground#20232b
  • tab.inactiveForeground#676c77
  • terminal.background#1a1d26
  • terminal.foreground#c1c7d1
  • terminalCursor.background#ffcc66
  • terminalCursor.foreground#ffcc66
  • titleBar.activeBackground#191c24
  • titleBar.activeForeground#d4d7dc
  • titleBar.inactiveBackground#16181f
  • titleBar.inactiveForeground#676c77

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#5a6070—
string#ffcc66—
variable#7fbcff—
keyword#c594c5—
function#91d4ff—
type#a6d2ff—
number#ffcc66—