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.activeBorder#6A4DD8
  • activityBar.background#F4F4F8
  • activityBar.foreground#2A2C3A
  • activityBarBadge.background#6A4DD8
  • activityBarBadge.foreground#FFFFFF
  • badge.background#6A4DD8
  • badge.foreground#FFFFFF
  • button.background#6A4DD8
  • button.foreground#FFFFFF
  • button.hoverBackground#7C5CFF
  • button.secondaryBackground#E8E8F0
  • button.secondaryForeground#2A2C3A
  • editor.background#FBFBFD
  • editor.findMatchBackground#F5A62355
  • editor.foreground#2A2C3A
  • editor.lineHighlightBackground#F0F0F6
  • editor.selectionBackground#6A4DD826
  • editorBracketMatch.border#6A4DD8
  • editorCursor.foreground#0CA9A0
  • editorGroupHeader.tabsBackground#F4F4F8
  • editorIndentGuide.activeBackground1#C4C6D4
  • editorIndentGuide.background1#E8E8F0
  • editorLineNumber.activeForeground#6A4DD8
  • editorLineNumber.foreground#C4C6D4
  • editorSuggestWidget.selectedBackground#6A4DD814
  • editorWidget.background#FFFFFF
  • editorWidget.border#E2E2EC
  • focusBorder#6A4DD8
  • foreground#2A2C3A
  • gitDecoration.deletedResourceForeground#C81E45
  • gitDecoration.modifiedResourceForeground#C77F1A
  • gitDecoration.untrackedResourceForeground#1E9E6A
  • input.background#FFFFFF
  • input.border#D8D8E4
  • list.activeSelectionBackground#6A4DD818
  • list.activeSelectionForeground#1A1B28
  • list.highlightForeground#0CA9A0
  • list.hoverBackground#ECECF2
  • panel.background#F4F4F8
  • panelTitle.activeBorder#6A4DD8
  • panelTitle.activeForeground#6A4DD8
  • progressBar.background#0CA9A0
  • scrollbarSlider.background#6A4DD822
  • scrollbarSlider.hoverBackground#6A4DD844
  • sideBar.background#F4F4F8
  • sideBar.foreground#5A5C6E
  • sideBarSectionHeader.background#F4F4F8
  • sideBarTitle.foreground#6A4DD8
  • statusBar.background#F4F4F8
  • statusBar.foreground#5A5C6E
  • tab.activeBackground#FBFBFD
  • tab.activeBorderTop#6A4DD8
  • tab.activeForeground#1A1B28
  • tab.inactiveBackground#F4F4F8
  • tab.inactiveForeground#8A8C9A
  • terminal.ansiBlue#2D6FD8
  • terminal.ansiCyan#0CA9A0
  • terminal.ansiGreen#1E9E6A
  • terminal.ansiMagenta#6A4DD8
  • terminal.ansiRed#C81E45
  • terminal.ansiYellow#C77F1A
  • terminal.background#F4F4F8
  • terminal.foreground#2A2C3A
  • textLink.foreground#0CA9A0
  • titleBar.activeBackground#F4F4F8
  • titleBar.activeForeground#2A2C3A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9698A8italic
string, string.quoted#1E9E6A
constant.numeric, constant.language#C77F1A
keyword, storage.type, storage.modifier#6A4DD8
keyword.operator#0CA9A0
entity.name.function, support.function#2D6FD8
entity.name.type, entity.name.class, support.type#0CA9A0
variable.parameter#A8651Aitalic
entity.name.tag#C81E45
entity.other.attribute-name#C77F1Aitalic
support.type.property-name, meta.object-literal.key#2D6FD8
markup.heading#6A4DD8bold
invalid#C81E45