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.

  • contrastBorder#444
  • debugExceptionWidget.border#666
  • debugToolBar.background#444
  • debugToolBar.border#666
  • editor.background#202020
  • editor.findMatchBackground#00000000
  • editor.findMatchBorder#ff5555
  • editor.findMatchHighlightBackground#00000000
  • editor.findMatchHighlightBorder#00ff00
  • editor.findRangeHighlightBackground#00000080
  • editor.foreground#c2c2c5
  • editor.inactiveSelectionBackground#404040
  • editor.lineHighlightBackground#2d2d2d
  • editor.selectionBackground#606060
  • editor.selectionHighlightBackground#00000000
  • editor.selectionHighlightBorder#88888888
  • editor.wordHighlightBackground#00000000
  • editor.wordHighlightBorder#88BB77
  • editor.wordHighlightStrongBackground#00000000
  • editor.wordHighlightStrongBorder#5aa
  • editorCursor.foreground#FFFFFF
  • editorGroupHeader.border#666
  • editorGroupHeader.noTabsBackground#202020
  • editorGroupHeader.tabsBackground#323233
  • editorGroupHeader.tabsBorder#666
  • editorHoverWidget.border#999
  • editorWhitespace.foreground#808080
  • editorWidget.border#666
  • editorWidget.resizeBorder#888
  • input.background#222
  • input.border#666
  • keybindingLabel.background#222
  • keybindingLabel.border#555
  • keybindingLabel.bottomBorder#555
  • menu.selectionBackground#2c698b
  • minimap.selectionOccurrenceHighlight#6b6
  • minimapSlider.activeBackground#2c698b88
  • minimapSlider.background#88888855
  • minimapSlider.hoverBackground#88888888
  • notificationCenter.border#666
  • notifications.border#666
  • notificationToast.border#666
  • selection.background#777
  • tab.activeBackground#202020
  • tab.activeBorder#202020
  • tab.activeBorderTop#666
  • tab.border#666
  • tab.inactiveBackground#323233
  • tree.indentGuidesStroke#666

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#808080italic
constant#BB9977
entity#cccbold
keyword#7E8AA2
storage#7E8AA2
string#388B77
support#FAF4C6
variable#bbb
invalid.deprecated#A2807Eitalic underline
invalid.illegal#F8F8F8
text source
text.html.ruby source
entity.other.inherited-class#9B5C2Eitalic
string source#DAEFA3
string constant#44AA77
string.regexp#7E8AA2
string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#44AA77
string variable#bbb
support.function#ccc
support.constant#ccc
meta.preprocessor.c#7E8AA2
meta.preprocessor.c keyword#44AA77
meta.tag.sgml.doctype, meta.tag.sgml.doctype entity, meta.tag.sgml.doctype string, meta.tag.preprocessor.xml, meta.tag.preprocessor.xml entity, meta.tag.preprocessor.xml string#44AA77
declaration.tag, declaration.tag entity, meta.tag, meta.tag entity#7E8AA2
declaration.tag.inline, declaration.tag.inline entity, source entity.name.tag, source entity.other.attribute-name, meta.tag.inline, meta.tag.inline entity#7E8AA2
meta.selector.css entity.name.tag#7E8AA2
meta.selector.css entity.other.attribute-name.tag.pseudo-class#bbb
meta.selector.css entity.other.attribute-name.id#7E8AA2
meta.selector.css entity.other.attribute-name.class#7E8AA2
support.type.property-name.css#bbb
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#63BE78
meta.preprocessor.at-rule keyword.control.at-rule#44AA77
meta.property-value support.constant.named-color.css, meta.property-value constant#90B080
meta.constructor.argument.css#8F9D6A
meta.diff, meta.diff.header, meta.separator#bbbitalic
markup.deleted#bbb
markup.changed#bbb
markup.inserted#bbb
markup.list#FAF4C6
markup.heading#bbb
Mustang Obsidian BN edition by Bognaum - VS Code Theme