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