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.activeBorder#7fd7ff
  • activityBar.background#232a3a99
  • activityBar.foreground#e3e8f7
  • dropdown.background#202430
  • dropdown.border#7fd7ff
  • editor.background#181A20CC
  • editor.foreground#e3e8f7
  • editor.lineHighlightBackground#ffffff0d
  • editor.lineHighlightBorder#ffffff22
  • editor.selectionBackground#526de644
  • editor.selectionHighlightBackground#3a5bff22
  • editorBracketMatch.background#3a5bff22
  • editorBracketMatch.border#7fd7ff
  • editorCursor.foreground#ffe066
  • editorLineNumber.activeForeground#ffe066
  • editorLineNumber.foreground#b0b8d0aa
  • minimap.background#181A20cc
  • panel.background#181A20b3
  • panel.border#ffffff22
  • scrollbarSlider.activeBackground#7fd7ff77
  • scrollbarSlider.background#7fd7ff33
  • scrollbarSlider.hoverBackground#7fd7ff55
  • sideBar.background#181A20b3
  • sideBar.foreground#e3e8f7
  • statusBar.background#181A20cc
  • statusBar.foreground#e3e8f7
  • tab.activeBackground#232a3acc
  • tab.activeForeground#e3e8f7
  • tab.border#ffffff22
  • tab.inactiveBackground#181A2099
  • tab.inactiveForeground#b0b8d0aa

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7fffd4ccitalic
string, constant.other.symbol#b2e1ff
keyword, storage.type#ffe066bold
entity.name.function, support.function#7fd7ffbold
variable, variable.parameter#b2e1ff
constant.numeric#ffb2e1
entity.name.type, support.type#e1b2ff
invalid#ffffff
markup.bold#ffe066bold
markup.italic#ffb2e1italic
punctuation#7fd7ff
JTheme by JPui - VS Code Theme