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
Dark Pastels by Pand - VS Code Theme