Skip to main content
Coding Theme

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#1A1A2E
  • activityBar.border#382A4C
  • activityBar.foreground#c3bfbf
  • activityBarBadge.background#A93279
  • activityBarBadge.foreground#F8C8DC
  • breadcrumb.background#1E1B2C
  • breadcrumb.focusForeground#F8C8DC
  • breadcrumb.foreground#C1A9D1
  • dropdown.background#2C213E
  • dropdown.border#A93279
  • dropdown.foreground#F5CED1
  • editor.background#25203A
  • editor.foreground#fbedee
  • editorGroup.border#382A4C
  • editorGroupHeader.tabsBackground#1E1B2C
  • focusBorder#A93279
  • input.background#2C213E
  • input.border#A93279
  • input.foreground#F5CED1
  • panel.border#382A4C
  • quickInput.background#2C213E
  • quickInput.foreground#F5CED1
  • quickInputList.focusBackground#A93279AA
  • scrollbar.shadow#00000099
  • scrollbarSlider.activeBackground#F5CED1AA
  • scrollbarSlider.background#A9327977
  • scrollbarSlider.hoverBackground#A93279BB
  • sideBar.background#1E1B2C
  • sideBar.border#382A4C
  • sideBar.foreground#C1A9D1
  • sideBarSectionHeader.background#2C213E
  • sideBarSectionHeader.foreground#f9e8ef
  • sideBarTitle.foreground#f9e8ef
  • statusBar.background#2C213E
  • statusBar.border#382A4C
  • statusBar.foreground#F5CED1
  • tab.activeBackground#443659
  • tab.activeBorder#f9e8ef
  • tab.activeBorderTop#F5CED1
  • tab.activeForeground#f9e8ef
  • tab.border#382A4C
  • tab.hoverBackground#443659
  • tab.hoverForeground#f9e8ef
  • tab.inactiveBackground#2C213E
  • tab.inactiveForeground#C1A9D1
  • terminal.ansiBrightMagenta#FF80AB
  • terminal.background#1E1B2C
  • terminal.foreground#F5CED1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A6D18Aitalic
variable, string constant.other.placeholder#eb9f9f
keyword, storage, storage.type, storage.modifier#E67DA3bold
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#bbe6f2
string, constant.other.symbol, constant.other.key, entity.other.inherited-class#F8C8DC
constant.numeric, constant.language, constant.character, constant.escape, variable.parameter#F78C6C
keyword.operator, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#89DDFF
entity.name.tag, meta.tag, markup.deleted.git_gutter#E67DA3
entity.name.class, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#FFCB6B
entity.other.attribute-name#C792EA
markup.heading, markup.heading entity.name#C3E88Dbold
markup.bold, markup.bold string#f07178bold
markup.italic#f07178italic
Moonlit Cherry Blossoms by Makennza - VS Code Theme