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#ececec
  • activityBar.border#e0e0e0
  • activityBar.dropBackground#a0a0a0
  • activityBar.foreground#555
  • activityBarBadge.background#39f
  • activityBarBadge.foreground#fff
  • dropdown.background#f0f0f0
  • dropdown.border#f0f0f0
  • editor.background#FFF
  • editor.findMatchBackground#41ff0d32
  • editor.findMatchHighlightBackground#fff30d73
  • editor.foreground#000
  • editor.lineHighlightBackground#ffff0037
  • editor.selectionBackground#d1ecff
  • editorBracketMatch.background#2cff0272
  • editorBracketMatch.border#ffffff00
  • editorCursor.foreground#000000
  • editorError.foreground#00000088
  • editorGroup.border#ccc
  • editorGroupHeader.tabsBackground#f0f0f0
  • editorInfo.foreground#00000088
  • editorLineNumber.foreground#b4b4b4
  • editorOverviewRuler.border#fff
  • editorWarning.foreground#00000088
  • editorWhitespace.foreground#eeeeee
  • gitDecoration.ignoredResourceForeground#a0a0a0
  • list.activeSelectionBackground#39f
  • list.activeSelectionForeground#fff
  • list.hoverBackground#e0e0e0
  • list.hoverForeground#000
  • list.inactiveSelectionBackground#dfe8f0
  • list.inactiveSelectionForeground#000
  • panel.background#f0f0f0
  • panel.border#eee
  • panelTitle.activeForeground#555
  • panelTitle.inactiveForeground#AAA
  • sideBar.background#f0f0f0
  • sideBar.border#f0f0f0
  • sideBarSectionHeader.background#f0f0f0
  • sideBarSectionHeader.foreground#000
  • statusBar.background#333
  • statusBar.foreground#ccc
  • statusBar.noFolderBackground#333
  • statusBarItem.prominentBackground#39f
  • tab.activeBackground#fff
  • tab.inactiveBackground#F0F0F0
  • widget.shadow#ccc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#000000
source#000000
comment#8C96A1
keyword, storage#4295D4
keyword.other.name-of-parameter.objc#DE1BD4
entity.name.function#000000
variable.parameter#7d25f0italic
entity.name#2171C2 bold
entity.other.inherited-class#2171C2bold italic
support#881BC2
constant.numeric#003CFF
variable#000000
constant#3AABA3
variable.other.constant#003CFF
constant.language#003CFF
string#31AB13
support.function#CD61FF
support.type#0B51A6
string.quoted.double.html#2E9E44
invalid#EB1717
constant.character.escaped, constant.character.escape, string source, string source.ruby#000000
markup.inserted#147A31
markup.deleted#BA1818
meta.diff.header, meta.separator.diff, meta.diff.index, meta.diff.range
meta.selector.css, entity.other.attribute-name.pseudo-class.css, entity.name.tag.wildcard.css, entity.other.attribute-name.id.css, entity.other.attribute-name.class.css#DD26E3
support.type.property-name.css#8960D1
keyword.other.unit.css, constant.other.rgb-value.css, constant.numeric.css#2AA38B
support.constant.font-name.css, constant.other.color.rgb-value.css#2AA38B
meta.tag.preprocessor.xml#68685B
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#888888
string.quoted.docinfo.doctype.DTDitalic
meta.tag, declaration.tag#8960D1
entity.name.tag#8960D1
entity.other.attribute-name#2B99FF italic
markup.heading#0C07FF
markup.quote#000000italic
markup.list#B90690
Smoothy 7 by michael gieson - VS Code Theme