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#E8EEF3
  • activityBar.activeBorder#34495E
  • activityBar.activeFocusBorder#34495E
  • activityBar.background#F9F9F9
  • activityBar.foreground#34495E
  • banner.background#F9F9F9
  • breadcrumb.background#F5FAFF
  • editor.background#F5FAFF
  • editor.foreground#2C3E50
  • list.activeSelectionIconForeground#555555
  • sideBar.background#F9F9F9
  • sideBar.border#EBEEF0
  • sideBar.dropBackground#F9F9F9
  • sideBar.foreground#2C3E50
  • sideBarSectionHeader.background#ECECEC
  • sideBarSectionHeader.border#F2F2F2
  • sideBarTitle.border#AAB2B9
  • tab.activeBackground#F5FAFF
  • tab.activeBorder#34495E
  • tab.hoverBackground#F9F9F9
  • tab.inactiveBackground#F9F9F9
  • titleBar.activeBackground#F9F9F9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6e7677
comment.block.preprocessor#6e7677
comment.documentation, comment.block.documentation#6e7677
invalid.illegal#C0392B
keyword.operator#34495E
keyword, storage#704080
storage.type, support.type#704080
constant.language, support.constant, variable.language#D35400
variable, support.variable#16A085
entity.name.function, support.function#808000
entity.name.type, entity.other.inherited-class, support.class#2980B9
entity.name.exception#C0392B
entity.name.section#2980B9
constant.numeric, constant.character, constant#27AE60
string#2980B9
constant.character.escape#E74C3C
string.regexp#D35400
constant.other.symbol#8E44AD
punctuation#2C3E50
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#7F8C8D
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#2980B9
entity.name.tag#2980B9
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#16A085italic
constant.character.entity, punctuation.definition.entity#D35400
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#8E44AD
meta.property-name, support.type.property-name#16A085
meta.property-value, meta.property-value constant.other, support.constant.property-value#D35400
keyword.other.important#C0392Bbold
markup.changed#27AE60
markup.deleted#C0392B
markup.italic#E67E22italic
markup.error#C0392B
markup.inserted#16A085
meta.link#2980B9
markup.output, markup.raw#2C3E50
markup.prompt#2C3E50
markup.heading#2980B9
markup.bold#8E44ADbold
markup.traceback#C0392B
markup.underlineunderline
markup.quote#27AE60
markup.list#16A085
markup.bold, markup.italic#E67E22
markup.inline.raw#8E44AD
meta.diff.range, meta.diff.index, meta.separator#7F8C8D
meta.diff.header.from-file#7F8C8D
meta.diff.header.to-file#7F8C8D
Mital by AmirJani - VS Code Theme