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#F0F5F8
  • activityBar.foreground#122027
  • activityBar.inactiveForeground#12202760
  • activityBarBadge.background#5A9EC3
  • activityBarBadge.foreground#F0F5F8
  • editor.background#F0F5F8
  • editor.foreground#122027
  • editor.lineHighlightBackground#F2F6F9
  • editor.selectionBackground#5A9EC380
  • editorCursor.foreground#5A9EC3
  • editorIndentGuide.activeBackground#5A9EC360
  • editorIndentGuide.background#365F7520
  • editorWhitespace.foreground#365F7540
  • sideBar.background#F2F6F9
  • sideBar.foreground#122027
  • sideBarSectionHeader.background#F0F5F8
  • statusBar.background#5A9EC3
  • statusBar.foreground#F0F5F8
  • statusBar.noFolderBackground#5A9EC3
  • tab.activeBackground#F0F5F8
  • tab.activeForeground#122027
  • tab.inactiveBackground#D8DDDF
  • tab.inactiveForeground#12202780
  • terminal.background#F0F5F8
  • terminal.foreground#122027
  • titleBar.activeBackground#F0F5F8
  • titleBar.activeForeground#122027

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#365F75
string#5A6AC3
string.regexp#9EC35A
constant.numeric#C37F5A
constant.language#C37F5Aitalic
keyword#5A9EC3bold
storage#5A9EC3
storage.type#C37F5Aitalic
entity.name.function#C35A9E
entity.name.class#B35AC3bold
entity.name.type#C37F5A
variable#122027
variable.parameter#5AC3B3italic
variable.other.property#C35A6A
punctuation#122027B0
Themixir! Elixir Themes for VS Code (and Cursor, and Antigravity, and all the folks) by Lorenzo-SF - VS Code Theme