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#F1AE59
  • activityBar.background#F5E8DE
  • activityBar.border#E3CCBC
  • activityBar.foreground#8B3E21
  • activityBar.inactiveForeground#997F74
  • activityBarBadge.background#2DB9AE
  • activityBarBadge.foreground#1D1512
  • commandCenter.activeForeground#B85A32
  • commandCenter.background#F7EDE6
  • commandCenter.border#E3CCBC
  • commandCenter.foreground#593F35
  • commandCenter.inactiveForeground#886E65
  • descriptionForeground#8A6E64
  • editor.background#FFFFFF
  • editor.foreground#4C352D
  • editor.inactiveSelectionBackground#2DB9AE16
  • editor.lineHighlightBackground#B85A3207
  • editor.selectionBackground#2DB9AE24
  • editor.selectionHighlightBackground#F1AE591E
  • editor.wordHighlightBackground#B85A321A
  • editorBracketMatch.background#2DB9AE20
  • editorBracketMatch.border#148C86
  • editorCursor.foreground#148C86
  • editorGroup.border#F7E5DA
  • editorGroupHeader.tabsBackground#FFF1E6
  • editorGroupHeader.tabsBorder#F7E5DA
  • editorIndentGuide.activeBackground#C7AEA1
  • editorIndentGuide.background#EAD8CF
  • editorLineNumber.activeForeground#593F35
  • editorLineNumber.foreground#B59B90
  • errorForeground#C45F4B
  • focusBorder#148C86
  • foreground#4C352D
  • icon.foreground#8A6E64
  • menu.background#FFFFFF
  • menu.border#F0D9CB
  • menu.foreground#4C352D
  • menu.selectionBackground#F1AE5933
  • menu.selectionForeground#2A1309
  • menubar.selectionBackground#2DB9AE3A
  • menubar.selectionForeground#122220
  • panel.background#FFF8F3
  • panel.border#F7E5DA
  • panelInput.border#E3CCBC
  • panelTitle.activeBorder#148C86
  • panelTitle.activeForeground#B85A32
  • panelTitle.inactiveForeground#8A6E64
  • selection.background#2DB9AE24
  • sideBar.background#FFF8F3
  • sideBar.border#F7E5DA
  • sideBar.foreground#4C352D
  • sideBarSectionHeader.background#FFF3EC
  • sideBarSectionHeader.border#F7E5DA
  • sideBarSectionHeader.foreground#8A6E64
  • sideBarTitle.foreground#593F35
  • statusBar.background#243230
  • statusBar.border#2DB9AE99
  • statusBar.debuggingBackground#6B4034
  • statusBar.debuggingForeground#FFF5F0
  • statusBar.foreground#ECF7F4
  • statusBar.noFolderBackground#2F3F3C
  • statusBar.noFolderForeground#B8D4CE
  • statusBarItem.activeBackground#FFFFFF3D
  • statusBarItem.hoverBackground#FFFFFF26
  • statusBarItem.remoteBackground#1A2826
  • statusBarItem.remoteForeground#F1AE59
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#FFFFFF
  • tab.activeBorderTop#F1AE59
  • tab.activeForeground#B85A32
  • tab.border#F7E5DA
  • tab.inactiveBackground#FFF1E6
  • tab.inactiveForeground#A0867B
  • titleBar.activeBackground#F7EDE6
  • titleBar.activeForeground#4C352D
  • titleBar.border#E8D3C4
  • titleBar.inactiveBackground#EFE2D9
  • titleBar.inactiveForeground#7A655C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#9A8075italic
keyword, storage.type, storage.modifier#B85A32bold
string#148C86
entity.name.function, support.function#C88B2F
variable, variable.other.readwrite#4C352D
variable.parameter#A16B45italic
constant.numeric, constant.language#C45F4B
support.type, support.class, entity.name.type, entity.name.class#5E79B3
entity.name.tag#148C86
entity.other.attribute-name#C88B2F
Zimbabwe Theme Collection by George Chakama - VS Code Theme