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.background#282A36
  • editor.background#282A36
  • editor.findMatchBackground#FF79C6
  • editor.findMatchHighlightBackground#FF79C680
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#44475A80
  • editor.selectionBackground#44475A
  • editorGutter.background#282A36
  • editorLineNumber.activeForeground#F8F8F2
  • editorLineNumber.foreground#6272A4
  • list.activeSelectionBackground#FF79C6
  • list.activeSelectionForeground#282A36
  • list.hoverBackground#44475A
  • list.inactiveSelectionBackground#44475A
  • sideBar.background#282A36
  • sideBarTitle.foreground#F8F8F2
  • statusBar.background#44475A
  • statusBar.foreground#F8F8F2
  • tab.activeBackground#282A36
  • tab.activeForeground#F8F8F2
  • tab.inactiveBackground#282A36
  • tab.inactiveForeground#6272A4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword#FF79C6
keyword.control#FF79C6
storage#FF79C6
string#F1FA8C
string.quoted#F1FA8C
comment#6272A4italic
comment.line#6272A4
comment.block#6272A4
constant.numeric#BD93F9
constant.language#8BE9FD
variable#F8F8F2
variable.other#F8F8F2
entity.name.function#50FA7B
entity.name.class#8BE9FD
entity.name.type#8BE9FD
support.function#50FA7B
support.type#8BE9FD