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#010409
  • activityBar.foreground#C9D1D9
  • editor.background#0D1117
  • editor.foreground#C9D1D9
  • editor.lineHighlightBackground#161B22
  • editor.selectionBackground#264F78
  • editor.selectionHighlightBackground#264F7880
  • editorCursor.foreground#58A6FF
  • editorIndentGuide.activeBackground#30363D
  • editorIndentGuide.background#21262D
  • editorLineNumber.activeForeground#C9D1D9
  • editorLineNumber.foreground#8B949E
  • focusBorder#58A6FF50
  • list.activeSelectionBackground#21262D
  • list.hoverBackground#21262D
  • panel.background#010409
  • sideBar.background#010409
  • sideBar.foreground#8B949E
  • statusBar.background#010409
  • statusBar.foreground#8B949E
  • tab.activeBackground#0D1117
  • tab.inactiveBackground#010409
  • titleBar.activeBackground#010409
  • titleBar.activeForeground#8B949E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage.type, storage.modifier#FF7B72bold
entity.name.function, support.function, meta.function-call#D2A8FF
entity.name.type.class, entity.other.inherited-class, support.class#FFA657
variable, variable.other#C9D1D9
variable.other.property, variable.other.object.property#79C0FF
constant, variable.other.constant#79C0FF
string#A5D6FF
comment#8B949Eitalic

Shiki preview

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

Loading...