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#0F080C
  • activityBar.foreground#E8789A
  • activityBar.inactiveForeground#4A2535
  • activityBarBadge.background#C4507A
  • activityBarBadge.foreground#FFF0F3
  • badge.background#C4507A
  • badge.foreground#FFF0F3
  • button.background#C4507A
  • button.foreground#FFF0F3
  • button.hoverBackground#E8789A
  • dropdown.background#1E1018
  • dropdown.border#2E1A22
  • dropdown.foreground#F2D8E0
  • editor.background#1A0F14
  • editor.foreground#F2D8E0
  • editor.inactiveSelectionBackground#C4507A1A
  • editor.lineHighlightBackground#221218
  • editor.selectionBackground#C4507A33
  • editorCursor.foreground#F4B8C8
  • editorError.foreground#FF3333
  • editorGroupHeader.tabsBackground#140A0F
  • editorInfo.foreground#F4B8C8
  • editorLineNumber.activeForeground#E8789A
  • editorLineNumber.foreground#4A2535
  • editorWarning.foreground#F5C842
  • editorWhitespace.foreground#2A1520
  • focusBorder#E8789A
  • input.background#1E1018
  • input.border#2E1A22
  • input.foreground#F2D8E0
  • input.placeholderForeground#4A2535
  • list.activeSelectionBackground#2E1A22
  • list.activeSelectionForeground#F4B8C8
  • list.hoverBackground#221218
  • list.hoverForeground#F2D8E0
  • list.inactiveSelectionBackground#1E1018
  • notifications.background#1E1018
  • notifications.border#2E1A22
  • notifications.foreground#F2D8E0
  • panel.background#140A0F
  • panel.border#2E1A22
  • panelTitle.activeBorder#E8789A
  • panelTitle.activeForeground#E8789A
  • panelTitle.inactiveForeground#6A3545
  • progressBar.background#E8789A
  • scrollbarSlider.activeBackground#E8789A44
  • scrollbarSlider.background#2E1A2277
  • scrollbarSlider.hoverBackground#C4507A33
  • sideBar.background#140A0F
  • sideBar.foreground#D4A8B8
  • sideBarSectionHeader.background#1E1018
  • sideBarSectionHeader.foreground#C4507A
  • sideBarTitle.foreground#E8789A
  • statusBar.background#1E1018
  • statusBar.foreground#E8789A
  • statusBarItem.hoverBackground#2E1A22
  • tab.activeBackground#1A0F14
  • tab.activeBorderTop#E8789A
  • tab.activeForeground#F4B8C8
  • tab.border#221218
  • tab.inactiveBackground#140A0F
  • tab.inactiveForeground#6A3545
  • terminal.ansiBrightRed#FF5555
  • terminal.ansiBrightYellow#F5DEB3
  • terminal.ansiCyan#F4B8C8
  • terminal.ansiGreen#A8C890
  • terminal.ansiMagenta#E8789A
  • terminal.ansiRed#FF3333
  • terminal.ansiYellow#F5C842
  • terminal.background#1A0F14
  • terminal.foreground#F2D8E0
  • titleBar.activeBackground#0F080C
  • titleBar.activeForeground#F2D8E0
  • titleBar.inactiveBackground#0F080C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4A2535italic
variable, string constant.other.placeholder#F2D8E0
invalid, invalid.illegal#FF3333
markup.deleted, invalid.broken#FF3333
keyword, storage.type, storage.modifier#E8789Abold
keyword.control, punctuation, meta.tag, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template#C4909A
entity.name.tag, meta.tag.sgml#E8789A
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#F5C842
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit#F5DEB3italic
variable.parameter#D4A8B8italic
string, constant.other.symbol, constant.other.key#F4B8C8
entity.other.inherited-class, markup.heading#E8789A
entity.name, support.type, support.class, support.other.namespace.php#C4507Abold
support.type#D4707A
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name#F4B8C8
entity.other.attribute-name#F5C842
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#F5DEB3italic
entity.other.attribute-name.class#F5C842
variable.language#E8789Aitalic
string.regexp#F5C842
constant.character.escape#F4B8C8
*url*, *link*, *uri*underline
markup.inserted#F4B8C8
markup.changed#F5C842
source.json meta.structure.dictionary.json support.type.property-name.json#E8789A
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#F4B8C8
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#F5C842
source.json meta.structure.dictionary.json meta.structure.dictionary.value.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#C4507A
markup.heading, markup.heading entity.name#E8789Abold
markup.italic#F4B8C8italic
markup.bold, markup.bold string#F5C842bold
markup.underline#C4507Aunderline
markup.table#F2D8E0
Aestwave Sakura Bloom Theme by Amelita Dela Torre - VS Code Theme