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#232527
  • activityBar.border#232527
  • badge.background#FF80AB
  • badge.foreground#232527
  • button.background#FF80AB
  • button.foreground#232527
  • button.hoverBackground#FFB3C6
  • dropdown.background#232527
  • dropdown.border#232527
  • dropdown.foreground#FFB3C6
  • editor.background#232527
  • editor.foreground#E0E0E0
  • editor.inactiveSelectionBackground#FF80AB33
  • editor.lineHighlightBackground#2B2D30
  • editor.selectionBackground#FF80AB55
  • editor.selectionHighlightBackground#FF80AB55
  • editorCursor.foreground#FF80AB
  • editorGroup.border#232527
  • editorLineNumber.activeForeground#FF80AB
  • editorLineNumber.foreground#FFB3C6
  • input.background#232527
  • input.border#232527
  • input.foreground#FFB3C6
  • inputOption.activeBorder#FF80AB
  • list.activeSelectionBackground#FF80AB
  • list.highlightForeground#8DEBEEFF
  • list.hoverForeground#8DEBEEFF
  • panel.border#232527
  • pickerGroup.border#FF80AB
  • pickerGroup.foreground#FF80AB
  • scrollbarSlider.activeBackground#FFB3C6
  • scrollbarSlider.background#2B2D30
  • scrollbarSlider.hoverBackground#FF80AB
  • settings.checkboxBackground#232527
  • settings.checkboxBorder#232527
  • settings.checkboxForeground#FF80AB
  • settings.dropdownBackground#232527
  • settings.dropdownBorder#232527
  • settings.dropdownForeground#FFB3C6
  • settings.headerForeground#FF80AB
  • settings.modifiedItemIndicator#FF80AB
  • settings.numberInputBackground#232527
  • settings.numberInputBorder#232527
  • settings.numberInputForeground#FF80AB
  • settings.textInputBackground#232527
  • settings.textInputBorder#232527
  • settings.textInputForeground#FFB3C6
  • sideBar.background#232527
  • sideBar.border#232527
  • statusBar.background#232527
  • statusBar.border#232527
  • statusBar.foreground#9CA0A596
  • statusBarItem.remoteBackground#FFB3C6CE
  • statusBarItem.remoteForeground#D1CBCBA6
  • tab.border#232527
  • terminal.ansiBlack#232527
  • terminal.ansiBlue#A0C4FF
  • terminal.ansiCyan#94E8EE
  • terminal.ansiGreen#B2FF9E
  • terminal.ansiMagenta#FFB3C6
  • terminal.ansiRed#FF6F91
  • terminal.ansiWhite#E0E0E0
  • terminal.ansiYellow#FFF9B1
  • terminal.background#232527
  • terminal.foreground#FFB3C6
  • terminalCursor.foreground#FF80AB
  • titleBar.activeBackground#232527
  • titleBar.border#232527
  • titleBar.inactiveBackground#1E1F22

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#FFB3C6italic
string#A1D694E3
variable#A0C4FF
keyword#FF80ABbold
function#FF6F91
constant.numeric#FFF9B1
storage.type#FF80AB
type#A0C4FF
operator#FF80AB
support.type.property-name.json#A0C4FF
meta.structure.dictionary.json string.quoted.double.json#FF80AAD2
entity.name.tag.html#A0C4FF
entity.other.attribute-name.html#FDEBBA
entity.other.attribute-name#FDEBBA
entity.other.attribute-name.class#FDEBBA
entity.other.attribute-name.id#FDEBBA
entity.other.attribute-name.pseudo-class#FDEBBA
entity.other.attribute-name.pseudo-element#FDEBBA
entity.other.attribute-name.tag#FDEBBA
entity.other.attribute-name.type#FDEBBA
entity.other.attribute-name.unit#FDEBBA
entity.other.attribute-name.vendor#FDEBBA
entity.other.attribute-name.xml#FDEBBA
entity.other.attribute-name.directive#FDEBBA
entity.other.attribute-name.placeholder#FDEBBA
entity.other.attribute-name.section#FDEBBA
entity.other.attribute-name.sub-section#FDEBBA
entity.other.attribute-name.namespace#FDEBBA
entity.other.attribute-name.module#FDEBBA
invalid.illegal#FF6B6Bbold
meta.tag entity.name.tag#A0C4FF
meta.tag.invalid#FF6B6Bbold
punctuation.section.embedded#F09595FF
source.astro#FDEBBA
support.type.property-name.css#A0C4FF
support.type.property-name.css#A0C4FF
support.constant.property-value.css#FF80AB
markup.heading#FF80ABbold
markup.bold#FF80ABbold
markup.italic#94E8EEitalic
markup.inline.raw#FF6F91
markup.quote#FFB3C6italic
markup.list#A0C4FF
markup.link#599491underline