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#888888
  • activityBar.background#f5f5f5
  • activityBar.foreground#444444
  • activityBarBadge.background#666666
  • activityBarBadge.foreground#ffffff
  • button.background#666666
  • button.foreground#ffffff
  • dropdown.background#f5f5f5
  • editor.background#ffffff
  • editor.foreground#2d2d2d
  • editor.lineHighlightBackground#f5f5f5
  • editor.selectionBackground#d0d0d0
  • editor.wordHighlightBackground#e8e8e8
  • editorBracketMatch.background#e0e0e0
  • editorBracketMatch.border#888888
  • editorCursor.foreground#444444
  • editorLineNumber.activeForeground#888888
  • editorLineNumber.foreground#cccccc
  • focusBorder#aaaaaa
  • input.background#f5f5f5
  • input.border#dddddd
  • input.foreground#2d2d2d
  • list.activeSelectionBackground#e8e8e8
  • list.activeSelectionForeground#222222
  • list.hoverBackground#f0f0f0
  • scrollbarSlider.background#cccccc
  • scrollbarSlider.hoverBackground#aaaaaa
  • sideBar.background#f9f9f9
  • sideBar.foreground#444444
  • sideBarTitle.foreground#222222
  • statusBar.background#e8e8e8
  • statusBar.foreground#444444
  • tab.activeBackground#ffffff
  • tab.activeBorderTop#888888
  • tab.activeForeground#222222
  • tab.inactiveBackground#f0f0f0
  • tab.inactiveForeground#999999
  • terminal.ansiBlue#4a7fc1
  • terminal.ansiCyan#4a9c9c
  • terminal.ansiGreen#4a9c59
  • terminal.ansiMagenta#9c4a7f
  • terminal.ansiRed#c14a4a
  • terminal.ansiYellow#c9a227
  • terminal.background#ffffff
  • terminal.foreground#2d2d2d
  • titleBar.activeBackground#f5f5f5
  • titleBar.activeForeground#222222

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage.type, storage.modifier#555555bold
string#4a9c59
constant.numeric#c9a227
entity.name.function, support.function#4a7fc1bold
variable#2d2d2d
variable.parameter#777777
comment#bbbbbbitalic
entity.name.type, entity.name.class#4a9c9cbold
keyword.operator#888888
entity.name.tag#555555bold
entity.other.attribute-name#4a7fc1
constant.language, support.constant#c9a227
support.type, entity.name.type#4a9c9c
keyword.control.import, keyword.control.from#555555bold italic
Vanilla Light by luisdaniel - VS Code Theme