Skip to main content
Coding Theme

Color themes

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