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.activeBackground#24292e
  • activityBar.activeBorder#fff
  • activityBar.background#24292e
  • activityBar.foreground#fafbfc
  • activityBarBadge.background#ff929299
  • editor.background#F8FAFC
  • editor.foreground#24292e
  • editor.lineHighlightBackground#cae0fc
  • editor.selectionBackground#b8f0bb
  • editor.selectionHighlightBackground#e1ffed
  • editor.selectionHighlightBorder#448C27
  • editor.wordHighlightStrongBackground#b8f0bb
  • editorBracketMatch.background#f1f8ff
  • editorBracketMatch.border#c8e1ff
  • editorGutter.addedBackground#448C27
  • editorGutter.background#F8FAFC
  • editorGutter.deletedBackground#ff0000
  • editorGutter.foldingControlForeground#004ea7
  • editorGutter.modifiedBackground#3A76C4
  • editorLineNumber.activeForeground#ff0000
  • editorLineNumber.foreground#24292e41
  • sideBar.background#fafbfc
  • sideBar.border#e1e4e8
  • sideBar.foreground#586069
  • sideBarSectionHeader.background#F1F2F3
  • sideBarSectionHeader.border#e1e4e8
  • sideBarSectionHeader.foreground#24292e
  • sideBarTitle.foreground#24292e
  • statusBar.background#24292e
  • tab.activeBackground#ffffff
  • tab.activeBorder#AA3731
  • tab.activeForeground#000
  • tab.border#e1e4e8
  • tab.inactiveBackground#fafbfc
  • tab.inactiveForeground#586069
  • tab.lastPinnedBorder#24292e
  • titleBar.activeBackground#24292e1a
  • titleBar.inactiveBackground#24292e1a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#333333
meta.type.annotation#747474
variable.other.constant, variable.other.object, punctuation, meta.brace, meta.function-call, variable.object, constant.language, meta.method.declaration, meta.field.declaration, meta.jsx.children, variable.parameter#333333
storage.type.function, storage.type.class, variable.language.this, meta.var.expr, keyword, entity.other.inherited-class#4B83CD
keyword.operator.type.annotation#AA3731bold
variable.object.property#AA3731bold
storage.modifier.async, storage.modifier#7A3E9D
keyword.control.flow, keyword.control.export, entity.name.function punctuation.definition.block, string.template punctuation.definition.template-expression#5600f7
string.template#AB6526
string.quoted.single, string.quoted.double#AB6526
meta.function, meta.definition.method, meta.class#4A525Abold
meta.decorator, meta.decorator punctuation, meta.decorator meta.brace, meta.decorator string.quoted.single, meta.decorator string.quoted.double, meta.decorator meta.function-call, keyword.control.import, meta.import, meta.import string, meta.import string.quoted.single, meta.import string.quoted.double, meta.import keyword, meta.import punctuation, meta.import variable.other.readwrite, punctuation.decorator, punctuation.decorator entity, comment, punctuation.definition.comment.html#d1d1d1
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#d1d1d1
meta.tag, entity.name.tag#D73A49
punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#4c00ff
text.html.derivative#12642a
meta.ng-binding.event#64124f
expression.ng string.quoted.double, expression.ng string.quoted.single, meta.tag.custom.start string.quoted.double, meta.tag.custom.start string.quoted.double.single#000
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#1240d4
meta.ng-binding.property#0b70ec
support.type.property-name.json#084ea3
string.quoted.double.json#666666
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#7A3E9D
meta.property-name, support.type.property-name#AB6526
meta.property-value, meta.property-value constant.other, support.constant.property-value#448C27
keyword.other.importantbold
markup.changed#000000
markup.deleted#000000
markup.italicitalic
markup.error#660000
markup.inserted#000000
meta.link#4B83CD
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#AA3731
markup.boldbold
markup.traceback#660000
markup.underlineunderline
markup.quote#7A3E9D
markup.list#4B83CD
markup.bold, markup.italic#448C27
markup.inline.raw#AB6526
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file#434343
meta.diff.header.to-file#434343
ez.theme by EZ Syntax - VS Code Theme