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#0a0a0a
  • activityBarBadge.background#c7586a
  • badge.background#e76d82
  • button.background#c7586a
  • button.foreground#e6e2e2
  • dropdown.background#0a0a0a
  • editor.background#0a0a0a
  • editor.foreground#eeffff
  • editorGroupHeader.tabsBackground#0a0a0a
  • editorGroupHeader.tabsBorder#0a0a0a
  • editorWidget.background#0a0a0a
  • icon.foreground#e76d82
  • input.background#0a0a0a
  • list.activeSelectionBackground#151515
  • menu.background#0a0a0a
  • menu.border#c7586a
  • menu.separatorBackground#c7586a
  • minimap.background#0a0a0a
  • panel.background#171616
  • scrollbarSlider.activeBackground#151515
  • scrollbarSlider.background#151515
  • scrollbarSlider.hoverBackground#151515
  • selection.background#e76d816c
  • sideBar.background#0a0a0a
  • sideBar.border#151515
  • sideBarSectionHeader.background#151515
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#c7586a
  • tab.activeBackground#151515
  • tab.activeBorder#e76d82
  • tab.border#c80c2b00
  • tab.inactiveBackground#0a0a0a
  • titleBar.activeBackground#0a0a0a
  • widget.shadow#e76d816c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#e089addaitalic
storage.type, keyword.control.flow#f55a74
variable.other.object#eab2cb
variable.other.constant, variable.other.readwrite, variable.parameter, meta.function-call#e8e7e7
string#8af164
keyword.operator, punctuation.terminator.statement, punctuation.separator.comma, punctuation.accessor, storage.type.function.arrow#aaedea
entity.name.function#8da3fc
constant.numeric#d1abf3
keyword.control.conditional, keyword.control.switch, keyword.control.loop.js#ec9d70
meta.object-literal.key#ec9d70
variable.other.object.property, variable.other.property#de8888
keyword.control.export, meta.export.default, keyword.control.import, meta.import#f1689d
meta.brace.round, punctuation.definition.block, punctuation.definition.parameters#d29fee
punctuation.definition.tag#f26e6e
entity.name.tag#d29fee
entity.other.attribute-name, meta.function#8da3fc
punctuation.separator.key-value, punctuation.terminator.rule#aaedea
text.html.derivative#e8e7e7
meta.property-name#eab2cb
variable.argument, variable.css#f1ea82
punctuation.section.function.begin.bracket.round, punctuation.section.function.end.bracket.round, punctuation.section.property-list#f3a489
entity.other.attribute-name.class#f1689d
entity.other.attribute-name.id#f34e64
entity.name.tag.css#69f0c8
entity.other.attribute-name.pseudo-class#ec9d70
keyword.other.unit#ec9d70
support.constant.property-value, keyword.other.important, support.constant.font-name#f279bf
constant.other.color.rgb-value.hex#a4ca8f
Dark Flamingo by Dark Flamingo - VS Code Theme