Skip to main content
Coding Theme

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#34394D
  • activityBar.foreground#FAFAFD
  • editor.background#34394D
  • editor.foreground#FAFAFD
  • editor.inactiveSelectionBackground#6a70a0f6
  • editor.lineHighlightBackground#5A607E
  • editor.selectionBackground#4e59ad
  • editorCursor.foreground#ffffff
  • editorGroupHeader.tabsBackground#34394D
  • list.activeSelectionBackground#8897d3
  • list.focusOutline#00000000
  • list.hoverBackground#434f81
  • menu.background#34394D
  • menu.border#f7f7f7
  • menu.foreground#eeeeee
  • menu.selectionBackground#6c7ece
  • menu.selectionForeground#FFFFFF
  • sideBar.background#34394D
  • sideBar.foreground#FAFAFD
  • sideBarSectionHeader.background#5f6ca7
  • statusBar.background#34394D
  • statusBar.foreground#FAFAFD
  • statusBarItem.remoteBackground#434f81
  • tab.activeBackground#434f81
  • tab.activeForeground#FAFAFD
  • tab.hoverBackground#616a8f
  • tab.inactiveBackground#2f3448
  • tab.inactiveForeground#cccccc
  • titleBar.activeBackground#4f5777
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#34394D
  • titleBar.inactiveForeground#AAAAAA
  • tree.indentGuidesStroke#ffffff
  • tree.tableColumnsBorder#00000000
  • tree.tableOddRowsBackground#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#B0B6D1italic
string#fff8ce
keyword#cfa4fabold
storage.type#fa76c8
variable#ff8099
function#b0c0ff
entity.name.tag, support.class.component#ffc3c3
entity.name.tag#7a7cff
meta.tag.attributes, entity.other.attribute-name#D0A3FF
meta.jsx.children, meta.tag.jsx > entity.other.attribute-name#3131b9
constant#6ab0d6
constant.numeric#5c74ff
keyword.operator#dfdfdf
Blackout by Aria Naderi - VS Code Theme