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#7aa2f7
  • activityBar.background#13131b
  • activityBar.border#1b1d2b
  • activityBar.foreground#9ca3c4
  • activityBar.inactiveForeground#464b63
  • activityBarBadge.background#3d59a1
  • activityBarBadge.foreground#e9ecff
  • badge.background#7e83b230
  • badge.foreground#acb0d0
  • commandCenter.activeForeground#7aa2f7
  • commandCenter.background#14151f
  • commandCenter.border#252842
  • commandCenter.foreground#a9b1d6
  • commandCenter.inactiveForeground#4f5369
  • descriptionForeground#515670
  • disabledForeground#545c7e
  • editor.background#1a1b26
  • editor.foreground#a9b1d6
  • editor.lineHighlightBackground#1e202e
  • editorCursor.foreground#c0caf5
  • editorGroup.border#101018
  • editorGroupHeader.tabsBackground#16161e
  • editorGroupHeader.tabsBorder#101018
  • editorLineNumber.activeForeground#7aa2f7
  • editorLineNumber.foreground#363b54
  • errorForeground#515670
  • focusBorder#545c7e33
  • foreground#787c99
  • icon.foreground#787c99
  • menu.background#1a1b26
  • menu.border#252842
  • menu.foreground#a9b1d6
  • menu.selectionBackground#3d59a144
  • menu.selectionForeground#c0caf5
  • menubar.selectionBackground#3d59a133
  • menubar.selectionForeground#c0caf5
  • panel.background#16161e
  • panel.border#101018
  • panelInput.border#2a2e45
  • panelTitle.activeBorder#7aa2f7
  • panelTitle.activeForeground#7aa2f7
  • panelTitle.inactiveForeground#565a73
  • sash.hoverBorder#29355a
  • scrollbar.shadow#00000033
  • settings.headerForeground#6183bb
  • sideBar.background#16161e
  • sideBar.border#101018
  • sideBar.foreground#9ca3c4
  • sideBarSectionHeader.background#16161e
  • sideBarSectionHeader.border#101018
  • sideBarSectionHeader.foreground#a9b1d6
  • sideBarTitle.foreground#c0caf5
  • statusBar.background#0f1118
  • statusBar.border#3d59a166
  • statusBar.debuggingBackground#38304A
  • statusBar.debuggingForeground#e0d8f5
  • statusBar.foreground#a9b1d6
  • statusBar.noFolderBackground#12141d
  • statusBar.noFolderForeground#6a6f8c
  • statusBarItem.activeBackground#3d59a144
  • statusBarItem.hoverBackground#3d59a12E
  • statusBarItem.remoteBackground#1f2335
  • statusBarItem.remoteForeground#bb9af7
  • tab.activeBackground#1f2335
  • tab.activeBorder#1f2335
  • tab.activeBorderTop#7aa2f7
  • tab.activeForeground#c0caf5
  • tab.border#101018
  • tab.inactiveBackground#16161e
  • tab.inactiveForeground#5c6080
  • titleBar.activeBackground#14151f
  • titleBar.activeForeground#a9b1d6
  • titleBar.border#101018
  • titleBar.inactiveBackground#101119
  • titleBar.inactiveForeground#545868
  • widget.shadow#ffffff00
  • window.activeBorder#0d0f17
  • window.inactiveBorder#0d0f17

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#51597ditalic
constant.language, constant.numeric#ff9e64
string#9ece6a
keyword, storage.type#bb9af7
entity.name.function, variable.function#7aa2f7
variable, support.variable#c0caf5
variable.parameter#e0af68