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.

  • activityBarBadge.background#007ACC
  • editor.background#1E1E1E
  • editor.foreground#D4D4D4
  • editor.inactiveSelectionBackground#3A3D41
  • editor.selectionHighlightBackground#ADD6FF26
  • editorIndentGuide.activeBackground#707070
  • editorIndentGuide.background#404040
  • editorWhitespace.foreground#204852
  • input.placeholderForeground#A6A6A6
  • list.dropBackground#383B3D
  • menu.background#252526
  • menu.foreground#CCCCCC
  • settings.numberInputBackground#292929
  • settings.textInputBackground#292929
  • sideBarTitle.foreground#BBBBBB
  • statusBarItem.remoteBackground#16825D
  • statusBarItem.remoteForeground#FFF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
debugging-head.hlo#808080
graph-boundaries.hlo#297022bold
primitive-type.hlo#569cd6
name.hlo#9cdcfe
keyword.hlo#c586c0
number.hlo#a1cd8a
open.instruction.hlo#dcd68bbold
paren.open.instruction.hlobold underline
close.instruction.hlo#dcd68bbold underline
string#D69D85

Shiki preview

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

Loading...

HLO HighLighter - Coding Theme