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—