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#E8C0CC
  • activityBar.foreground#8B2045
  • activityBar.inactiveForeground#C4909A
  • activityBarBadge.background#C4507A
  • activityBarBadge.foreground#FFF5F7
  • badge.background#C4507A
  • badge.foreground#FFF5F7
  • button.background#C4507A
  • button.foreground#FFF5F7
  • button.hoverBackground#E8789A
  • dropdown.background#F5E0E8
  • dropdown.border#D4A8B8
  • dropdown.foreground#3D1A24
  • editor.background#FFF5F7
  • editor.foreground#3D1A24
  • editor.inactiveSelectionBackground#E8789A1A
  • editor.lineHighlightBackground#F9E8ED
  • editor.selectionBackground#E8789A33
  • editorCursor.foreground#C4507A
  • editorError.foreground#CC1111
  • editorGroupHeader.tabsBackground#F5E0E8
  • editorInfo.foreground#C4507A
  • editorLineNumber.activeForeground#C4507A
  • editorLineNumber.foreground#D4A8B8
  • editorWarning.foreground#B8860B
  • editorWhitespace.foreground#F0D0DA
  • focusBorder#C4507A
  • input.background#F5E0E8
  • input.border#D4A8B8
  • input.foreground#3D1A24
  • input.placeholderForeground#C4A0B0
  • list.activeSelectionBackground#E8C8D2
  • list.activeSelectionForeground#8B2045
  • list.hoverBackground#F5E0E8
  • list.hoverForeground#3D1A24
  • list.inactiveSelectionBackground#F0D8DF
  • notifications.background#F5E0E8
  • notifications.border#D4A8B8
  • notifications.foreground#3D1A24
  • panel.background#F0D8DF
  • panel.border#D4A8B8
  • panelTitle.activeBorder#C4507A
  • panelTitle.activeForeground#C4507A
  • panelTitle.inactiveForeground#C4909A
  • progressBar.background#C4507A
  • scrollbarSlider.activeBackground#C4507A55
  • scrollbarSlider.background#D4A8B877
  • scrollbarSlider.hoverBackground#C4507A33
  • sideBar.background#F0D8DF
  • sideBar.foreground#3D1A24
  • sideBarSectionHeader.background#E8C8D2
  • sideBarSectionHeader.foreground#8B2045
  • sideBarTitle.foreground#C4507A
  • statusBar.background#E8C8D2
  • statusBar.foreground#8B2045
  • statusBarItem.hoverBackground#D4A8B8
  • tab.activeBackground#FFF5F7
  • tab.activeBorderTop#C4507A
  • tab.activeForeground#C4507A
  • tab.border#F0D0DA
  • tab.inactiveBackground#F5E0E8
  • tab.inactiveForeground#C4909A
  • terminal.ansiCyan#8B6090
  • terminal.ansiGreen#5A8A5A
  • terminal.ansiMagenta#C4507A
  • terminal.ansiRed#CC1111
  • terminal.ansiYellow#B8860B
  • terminal.background#FFF5F7
  • terminal.foreground#3D1A24
  • titleBar.activeBackground#E8C0CC
  • titleBar.activeForeground#3D1A24
  • titleBar.inactiveBackground#E8C0CC

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#C4A0B0italic
variable, string constant.other.placeholder#3D1A24—
invalid, invalid.illegal#CC1111—
markup.deleted, invalid.broken#CC1111—
keyword, storage.type, storage.modifier#C4507Abold
keyword.control, punctuation, meta.tag, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template#B08090—
entity.name.tag, meta.tag.sgml#C4507A—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#8B6914—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit#8B6914italic
variable.parameter#A06070italic
string, constant.other.symbol, constant.other.key#8B2045—
entity.other.inherited-class, markup.heading#C4507A—
entity.name, support.type, support.class, support.other.namespace.php#8B2045bold
support.type#A03060—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name#A06070—
entity.other.attribute-name#8B6914—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#8B6914italic
variable.language#C4507Aitalic
string.regexp#8B6914—
constant.character.escape#C4507A—
*url*, *link*, *uri*—underline
markup.inserted#C4507A—
markup.changed#8B6914—
source.json meta.structure.dictionary.json support.type.property-name.json#C4507A—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8B2045—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8B6914—
markup.heading, markup.heading entity.name#C4507Abold
markup.italic#8B2045italic
markup.bold, markup.bold string#8B6914bold
markup.underline#C4507Aunderline
markup.table#3D1A24—
Aestwave Sakura Bloom Theme by Amelita Dela Torre - VS Code Theme