Skip to main content
CodingTheme

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#181818
  • activityBar.foreground#569CD6
  • editor.background#1E1E1E
  • editor.foreground#D4D4D4
  • editor.lineHighlightBackground#2A2A2A
  • editor.selectionBackground#264F78
  • editor.selectionHighlightBackground#264F7850
  • editorCursor.foreground#569CD6
  • editorIndentGuide.activeBackground#404040
  • editorIndentGuide.background#2A2A2A
  • editorLineNumber.activeForeground#569CD6
  • editorLineNumber.foreground#6E6E6E
  • focusBorder#569CD650
  • list.activeSelectionBackground#37373D
  • list.hoverBackground#2A2A2A
  • panel.background#1C1C1C
  • sideBar.background#1C1C1C
  • sideBar.foreground#9B9B9B
  • statusBar.background#181818
  • statusBar.foreground#569CD6
  • tab.activeBackground#1E1E1E
  • tab.inactiveBackground#181818
  • titleBar.activeBackground#181818
  • titleBar.activeForeground#9B9B9B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage.type, storage.modifier#569CD6bold
entity.name.function, support.function, meta.function-call#DCDCAAbold
entity.name.type.class, entity.other.inherited-class, support.class#4EC9B0bold
variable, variable.other#9CDCFE
constant, variable.other.constant#4FC1FF
string#CE9178
comment#6A9955italic
entity.name.type, support.type#4EC9B0

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...