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#FAFAFA
  • activityBar.foreground#37474F
  • activityBarBadge.background#2196F3
  • activityBarBadge.foreground#FFFFFF
  • dropdown.background#FFFFFF
  • dropdown.foreground#37474F
  • editor.background#FAFAFA
  • editor.findMatchBackground#FFA00040
  • editor.findMatchHighlightBackground#FFA00020
  • editor.foreground#37474F
  • editor.lineHighlightBackground#E3F2FD
  • editor.selectionBackground#2196F340
  • editorGroupHeader.tabsBackground#F5F5F5
  • input.background#FFFFFF
  • input.foreground#37474F
  • input.placeholderForeground#78909C
  • list.activeSelectionBackground#2196F3
  • list.activeSelectionForeground#FFFFFF
  • list.hoverBackground#EEEEEE
  • list.hoverForeground#37474F
  • sideBar.background#F5F5F5
  • sideBar.foreground#37474F
  • sideBarSectionHeader.background#EEEEEE
  • sideBarSectionHeader.foreground#37474F
  • sideBarTitle.foreground#37474F
  • statusBar.background#2196F3
  • statusBar.debuggingBackground#FFA000
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#FAFAFA
  • tab.activeBackground#FFFFFF
  • tab.activeForeground#37474F
  • tab.inactiveBackground#F5F5F5
  • tab.inactiveForeground#78909C
  • titleBar.activeBackground#FAFAFA
  • titleBar.activeForeground#37474F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9E9E9E
string, string.quoted#C2185B
constant.numeric, constant.language, constant.character, constant.other#00796B
keyword, storage.type, storage.modifier#1976D2
entity.name.function, support.function#6F42C1
variable, support.variable#37474F
entity.name.type, support.type, support.class#0097A7
🎨 Zenix Theme Studio by amankirmara - VS Code Theme