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#242D38
  • editor.background#242b34
  • editor.foreground#f8f8f2
  • editor.lineHighlightBackground#242b34
  • editor.selectionBackground#7790B6
  • editorCursor.foreground#f8f8f2
  • editorGroupHeader.tabsBackground#212934
  • editorLineNumber.foreground#99A9B3
  • editorWhitespace.foreground#60737B
  • editorWidget.background#2c3643
  • input.background#242D38
  • input.border#37404E
  • list.activeSelectionBackground#49515B
  • list.focusBackground#215D8C
  • list.inactiveSelectionBackground#49515B
  • sideBar.background#2c3643
  • sideBar.border#222a34
  • statusBar.background#3b444f
  • tab.activeBackground#475261
  • tab.inactiveBackground#242D38
  • titleBar.activeBackground#242D38

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#f8f8f2ff—
comment#99A9B3italic
string#16C98D—
constant.numeric, constant.other#FFC83F—
constant.language#FFC83F—
unused.comment#99A9B3—
constant.character#FA5E5B—
variable#FA5E5B—
keyword#89BDE4—
keyword.operator#89BDE4—
storage#FF708Eitalic
storage.type#FF708Eitalic
storage.type.c#FF708E
entity.name.type.class, meta.class.instance.constructor#FFC83F—
tab.activeBackground#2c3643—
activityBar.background#242D38—
activityBar.background#242D38—
sideBar.background#2c3643—
input.background#242D38—
input.border#37404E—
list.focusBackground#215D8C—
tab.inactiveBackground#242D38—
editorGroupHeader.tabsBackground#212934—
titleBar.activeBackground#242D38—
statusBar.background#3b444f—
entity.other.inherited-class#16C98D—
entity.name.function#288AD6
variable.parameter#FA5E5B—
variable.other#FA5E5B—
entity.name.tag#FA5E5B underline
entity.other.attribute-name#FFC83Fitalic
entity.other.attribute-name.id.html #288AD6bold
support.function#288AD6
support.constant#FA5E5B
support.type, support.class#FFC83Fitalic
support.other.variable#000000—
support.variable.property.dom.js#FA5E5B—
var.this,variable.language.this.js,variable.language.this.ts,variable.language.this.jsx,variable.language.this.tsx#89BDE4—
invalid#F8F8F0—
support.function#0fd8b9—
invalid.deprecated#F8F8F0—
token.info-token#6796e6—
token.warn-token#cd9731—
token.error-token#f44747—
token.debug-token#b267e6—
entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#16c98dbold
beginning.punctuation.definition.quote.markdown#99A9B3—
markup.quote.markdown meta.paragraph.markdown#99A9B3italic
markup.bold.markdown—bold
markup.italic.markdown—italic
beginning.punctuation.definition.list.markdown#fa5e5b—
string.other.link.title.markdown, string.other.link.description.markdown, string.other.link.description.title.markdown#16c98d—
markup.underline.link.markdown, markup.underline.link.image.markdown#8abee5—
duan-vscode-chester-atom by duan-vscode-chester-atom - VS Code Theme