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#c0c0c0
  • activityBar.background#151515
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#808080
  • activityBarBadge.background#c0c0c0
  • activityBarBadge.foreground#101010
  • editor.background#0f0f12
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#1a1a22
  • editor.selectionBackground#303048
  • editorCursor.foreground#d0d0d0
  • editorGroup.border#1c1c1c
  • editorGroup.dropBackground#35353580
  • editorGroupHeader.noTabsBackground#181818
  • editorGroupHeader.tabsBackground#131313
  • editorGroupHeader.tabsBorder#1c1c1c
  • editorSuggestWidget.background#181818
  • editorSuggestWidget.border#1c1c1c
  • editorSuggestWidget.foreground#e8e8e8
  • editorSuggestWidget.highlightForeground#b0b0b0
  • editorSuggestWidget.selectedBackground#353535
  • editorWidget.background#181818
  • editorWidget.border#1c1c1c
  • editorWidget.resizeBorder#b0b0b0
  • list.activeSelectionBackground#353535
  • list.activeSelectionForeground#e8e8e8
  • list.errorForeground#d76b6b
  • list.highlightForeground#b0b0b0
  • list.hoverBackground#1c1c1c
  • list.hoverForeground#e8e8e8
  • list.inactiveSelectionBackground#1c1c1c
  • list.inactiveSelectionForeground#d8d8d8
  • list.warningForeground#d0c090
  • panel.background#181818
  • panel.border#1c1c1c
  • panelTitle.activeBorder#b0b0b0
  • panelTitle.activeForeground#e8e8e8
  • panelTitle.inactiveForeground#b0b0b0
  • sideBar.background#151515
  • sideBar.border#1c1c1c
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#1c1c1c
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#b0b0b0
  • statusBar.background#222222
  • statusBar.border#353535
  • statusBar.debuggingBackground#707070
  • statusBar.debuggingForeground#e8e8e8
  • statusBar.foreground#e8e8e8
  • statusBar.noFolderBackground#1c1c1c
  • statusBarItem.hoverBackground#353535
  • statusBarItem.prominentBackground#353535
  • statusBarItem.remoteBackground#b0b0b0
  • statusBarItem.remoteForeground#131313
  • tab.activeBackground#222222
  • tab.activeBorder#b0b0b0
  • tab.activeBorderTop#b0b0b0
  • tab.activeForeground#e8e8e8
  • tab.border#131313
  • tab.hoverBackground#353535
  • tab.hoverForeground#e8e8e8
  • tab.inactiveBackground#181818
  • tab.inactiveForeground#b0b0b0
  • terminal.ansiBlack#0f0f12
  • terminal.ansiBlue#556880
  • terminal.ansiBrightBlack#656575
  • terminal.ansiBrightBlue#7898c0
  • terminal.ansiBrightCyan#88c0c0
  • terminal.ansiBrightGreen#90b088
  • terminal.ansiBrightMagenta#b088b0
  • terminal.ansiBrightRed#d07585
  • terminal.ansiBrightWhite#f0f0f0
  • terminal.ansiBrightYellow#d0c088
  • terminal.ansiCyan#557580
  • terminal.ansiGreen#657860
  • terminal.ansiMagenta#805570
  • terminal.ansiRed#a55560
  • terminal.ansiWhite#d8d8d8
  • terminal.ansiYellow#b09870
  • terminal.background#131313
  • terminal.foreground#e8e8e8
  • terminal.selectionBackground#353535
  • terminalCursor.background#131313
  • terminalCursor.foreground#b0b0b0
  • titleBar.activeBackground#181818
  • titleBar.activeForeground#e8e8e8
  • titleBar.border#1c1c1c
  • titleBar.inactiveBackground#131313
  • titleBar.inactiveForeground#b0b0b0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.type.property-name.json#9a7286bold
comment, punctuation.definition.comment#707080
string, constant.other.symbol#c0b080