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#49363e
  • activityBar.border#382f33
  • activityBar.foreground#ffffff
  • activityBarBadge.background#46cca5
  • activityBarBadge.foreground#ffffff
  • editor.background#1c1b1b
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#350017
  • editor.selection#570033
  • editor.selectionBorder#6d0645
  • editorBracketMatch.background#65003e
  • editorBracketMatch.border#720f4a
  • editorGroupHeader.tabsBackground#1c1b1b
  • editorIndentGuide.background#131011
  • foreground#ffffff
  • sideBar.background#1c1b1b
  • sideBar.border#382f33
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#49363e
  • sideBarSectionHeader.foreground#ffffff
  • statusBar.background#49363e
  • statusBar.border#382f33
  • tab.activeBackground#1c1b1b
  • tab.activeForeground#ffffff
  • tab.border#382f33
  • tab.inactiveBackground#1c1b1b
  • tab.inactiveForeground#5e5e5e
  • widget.shadow#131011

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.quoted.docstring, string.quoted.docstring punctuation.definition.string#6d5962italic
keyword, storage.modifier, storage.type#ff96c9
variable, string variable, string punctuation.accessor, string keyword#ffffff
meta.objectliteral punctuation.definition, meta.objectliteral meta.object-literal.key, meta.class variable.object.property#ffb2e5
markup.bold#ffb2e5bold
markup.italic#ffb2e5italic
meta.type.annotation, entity.name.type, meta.return.type, meta.type.parameters, entity.other.inherited-class, support.type, storage.type.postgres, markup.list beginning.punctuation#00d4ff
meta.parameters#ebaa67
meta.indexer.declaration variable.parameter, meta.object.type punctuation.definition, meta.type.annotation variable.object.property, punctuation.definition.typeparameters, meta.type.annotation keyword, meta.type.annotation meta.brace, meta.type.annotation punctuation, meta.type.parameters punctuation, meta.type.parameters meta.brace, markup.quote#4cf0ff
source.ts source.pgsql keyword, source.ts keyword.other.DML.sql, source.ts keyword.other.create.sql, source.ts keyword.other.order.sql#8bd392
source.ts keyword.other.DDL.create.II.sql, source.ts keyword.other.sql, source.ts keyword.other.alias.sql, source.ts support.function.expression.sql, source.ts constant.other.database-name.sql#b3c8b3
source.ts constant.other.table-name.sql#b4febb
entity.name.type.class, meta.decorator, meta.decorator variable, meta.decorator meta.function-call entity.name.function#00c6f1
support.function, markup.heading#ff96c9
meta.definition.variable, meta.parameters punctuation, meta.parameters punctuation.definition, variable.parameter, markup.heading punctuation#ffa4d7
entity.name.tag, markup.inline punctuation, markup.fenced_code punctuation#46cca5
support.class.component#00ffff
meta.definition entity.name.function, entity.name.function, support.function#ebaa67
entity.other.attribute-name, meta.tag punctuation.section, meta.tag punctuation.definition, meta.tag keyword.operator.assignment, markup.inline, markup.fenced_code#56dab3
meta.embedded string, punctuation.definition.string, string#fb989f
meta.link.inline.markdown, meta.link.inline.markdown punctuation.definition.string, meta.image.inline, meta.image.inline punctuation.definition.string#ffa5ac
string punctuation.definition.template-expression#ec8a92
variable.language#8bd392
constant#c5cb71