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#181F67
  • activityBar.foreground#E4ADFB
  • activityBar.inactiveForeground#E9CFF470
  • editor.background#263092
  • editor.foreground#E4ADFB
  • editor.lineHighlightBackground#3745AD
  • editor.wordHighlightBackground#505aa6
  • editorGroupHeader.tabsBackground#263092
  • editorHoverWidget.background#181F67
  • input.background#263092
  • list.activeSelectionBackground#2D3B9F
  • list.hoverBackground#3745AD
  • list.inactiveSelectionBackground#3745AD
  • minimap.background#2D3B9F
  • minimap.selectionHighlight#2D3B9F
  • minimap.selectionOccurrenceHighlight#2D3B9F
  • sideBar.background#181F67
  • sideBarSectionHeader.background#263092
  • statusBar.background#263092
  • statusBar.foreground#D0D4FB
  • statusBarItem.prominentBackground#263092
  • tab.activeBackground#31409A
  • tab.activeForeground#DDE6EC
  • tab.inactiveBackground#263092
  • tab.inactiveForeground#B4BCEF
  • titleBar.activeBackground#263092

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source.js, source.ts#7BB3F4bold
entity.name.function.js, entity.name.function.ts, entity.name.tag.js, entity.name.tag.ts#DC89FF
string#f0dbb6
constant.numeric#DC89FF
variable#e7ddf0
comment#B6BFFA
variable.parameter#f2c0f9
Mystic Breeze - A Coding Odyssey by cdroma - VS Code Theme