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#334651
  • activityBar.border#323a40
  • activityBar.foreground#ffffff
  • activityBarBadge.background#ffb29e
  • activityBarBadge.foreground#ffffff
  • editor.background#1d1e20
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#001a2b
  • editor.selection#00324a
  • editor.selectionBorder#00455d
  • editorBracketMatch.background#003d56
  • editorBracketMatch.border#004962
  • editorGroupHeader.tabsBackground#1d1e20
  • editorIndentGuide.background#101112
  • foreground#ffffff
  • sideBar.background#1d1e20
  • sideBar.border#323a40
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#334651
  • sideBarSectionHeader.foreground#ffffff
  • statusBar.background#334651
  • statusBar.border#323a40
  • tab.activeBackground#1d1e20
  • tab.activeForeground#ffffff
  • tab.border#323a40
  • tab.inactiveBackground#1d1e20
  • tab.inactiveForeground#5e5e5e
  • widget.shadow#101112

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
comment, punctuation.definition.comment, string.quoted.docstring, string.quoted.docstring punctuation.definition.string#6f5956italic
keyword, storage.modifier, storage.type#ff9c91
variable, string variable, string punctuation.accessor, string keyword#ffffff
meta.objectliteral punctuation.definition, meta.objectliteral meta.object-literal.key, meta.class variable.object.property#ffb7ac
markup.bold#ffb7acbold
markup.italic#ffb7acitalic
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#e6afff
meta.parameters#b5bd6e
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#ffcbff
source.ts source.pgsql keyword, source.ts keyword.other.DML.sql, source.ts keyword.other.create.sql, source.ts keyword.other.order.sql#00d5ff
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#a6c9d6
source.ts constant.other.table-name.sql#61ffff
entity.name.type.class, meta.decorator, meta.decorator variable, meta.decorator meta.function-call entity.name.function#d7a1f1
support.function, markup.heading#ff9c91
meta.definition.variable, meta.parameters punctuation, meta.parameters punctuation.definition, variable.parameter, markup.heading punctuation#ffaa9f
entity.name.tag, markup.inline punctuation, markup.fenced_code punctuation#00cadd
support.class.component#00ffff
meta.definition entity.name.function, entity.name.function, support.function#b5bd6e
entity.other.attribute-name, meta.tag punctuation.section, meta.tag punctuation.definition, meta.tag keyword.operator.assignment, markup.inline, markup.fenced_code#2fd8eb
meta.embedded string, punctuation.definition.string, string#eca877
meta.link.inline.markdown, meta.link.inline.markdown punctuation.definition.string, meta.image.inline, meta.image.inline punctuation.definition.string#fbb584
string punctuation.definition.template-expression#dd9b6b
variable.language#00d5ff
constant#86d69d
comment, punctuation.definition.comment, string.quoted.docstring, string.quoted.docstring punctuation.definition.string#6b5b50italic
keyword, storage.modifier, storage.type#ffaf66
variable, string variable, string punctuation.accessor, string keyword#ffffff
meta.objectliteral punctuation.definition, meta.objectliteral meta.object-literal.key, meta.class variable.object.property#ffca80
markup.bold#ffca80bold
markup.italic#ffca80italic
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#ff9af1
meta.parameters#77d486
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#ffb6ff
source.ts source.pgsql keyword, source.ts keyword.other.DML.sql, source.ts keyword.other.create.sql, source.ts keyword.other.order.sql#00ceff
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#a1c3d2
source.ts constant.other.table-name.sql#60f9ff
entity.name.type.class, meta.decorator, meta.decorator variable, meta.decorator meta.function-call entity.name.function#f08de3
support.function, markup.heading#ffaf66
meta.definition.variable, meta.parameters punctuation, meta.parameters punctuation.definition, variable.parameter, markup.heading punctuation#ffbc73
entity.name.tag, markup.inline punctuation, markup.fenced_code punctuation#00d0ff
support.class.component#20ffff
meta.definition entity.name.function, entity.name.function, support.function#77d486
entity.other.attribute-name, meta.tag punctuation.section, meta.tag punctuation.definition, meta.tag keyword.operator.assignment, markup.inline, markup.fenced_code#33deff
meta.embedded string, punctuation.definition.string, string#d2c076
meta.link.inline.markdown, meta.link.inline.markdown punctuation.definition.string, meta.image.inline, meta.image.inline punctuation.definition.string#e1ce83
string punctuation.definition.template-expression#c4b369
variable.language#00ceff
constant#2fe8d6
comment, punctuation.definition.comment, string.quoted.docstring, string.quoted.docstring punctuation.definition.string#655e4eitalic
keyword, storage.modifier, storage.type#e6c352
variable, string variable, string punctuation.accessor, string keyword#ffffff
meta.objectliteral punctuation.definition, meta.objectliteral meta.object-literal.key, meta.class variable.object.property#ffdf6c
markup.bold#ffdf6cbold
markup.italic#ffdf6citalic
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#ff91cb
meta.parameters#00e1b1
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#fface7
source.ts source.pgsql keyword, source.ts keyword.other.DML.sql, source.ts keyword.other.create.sql, source.ts keyword.other.order.sql#43bdff
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#9cb6cb
source.ts constant.other.table-name.sql#79e7ff
entity.name.type.class, meta.decorator, meta.decorator variable, meta.decorator meta.function-call entity.name.function#f083bd
support.function, markup.heading#e6c352
meta.definition.variable, meta.parameters punctuation, meta.parameters punctuation.definition, variable.parameter, markup.heading punctuation#f6d15f
entity.name.tag, markup.inline punctuation, markup.fenced_code punctuation#57ccff
support.class.component#76ffff
meta.definition entity.name.function, entity.name.function, support.function#00e1b1
entity.other.attribute-name, meta.tag punctuation.section, meta.tag punctuation.definition, meta.tag keyword.operator.assignment, markup.inline, markup.fenced_code#69daff
meta.embedded string, punctuation.definition.string, string#b8cf85
meta.link.inline.markdown, meta.link.inline.markdown punctuation.definition.string, meta.image.inline, meta.image.inline punctuation.definition.string#c6dd92
string punctuation.definition.template-expression#abc178
variable.language#43bdff
constant#33f0ff
comment, punctuation.definition.comment, string.quoted.docstring, string.quoted.docstring punctuation.definition.string#5b6151italic
keyword, storage.modifier, storage.type#aed461
variable, string variable, string punctuation.accessor, string keyword#ffffff
meta.objectliteral punctuation.definition, meta.objectliteral meta.object-literal.key, meta.class variable.object.property#caf07b
markup.bold#caf07bbold
markup.italic#caf07bitalic
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#ffa270
meta.parameters#00e2eb
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#ffbd8a
source.ts source.pgsql keyword, source.ts keyword.other.DML.sql, source.ts keyword.other.create.sql, source.ts keyword.other.order.sql#ef9de9
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#d0afcc
source.ts constant.other.table-name.sql#ffc6ff
entity.name.type.class, meta.decorator, meta.decorator variable, meta.decorator meta.function-call entity.name.function#f09564
support.function, markup.heading#aed461
meta.definition.variable, meta.parameters punctuation, meta.parameters punctuation.definition, variable.parameter, markup.heading punctuation#bce26e
entity.name.tag, markup.inline punctuation, markup.fenced_code punctuation#c9b8ff
support.class.component#ffeeff
meta.definition entity.name.function, entity.name.function, support.function#00e2eb
entity.other.attribute-name, meta.tag punctuation.section, meta.tag punctuation.definition, meta.tag keyword.operator.assignment, markup.inline, markup.fenced_code#d7c5ff
meta.embedded string, punctuation.definition.string, string#8cd7a0
meta.link.inline.markdown, meta.link.inline.markdown punctuation.definition.string, meta.image.inline, meta.image.inline punctuation.definition.string#9ae5ad
string punctuation.definition.template-expression#7fc993
variable.language#ef9de9
constant#33e9ff
comment, punctuation.definition.comment, string.quoted.docstring, string.quoted.docstring punctuation.definition.string#566457italic
keyword, storage.modifier, storage.type#64de8c
variable, string variable, string punctuation.accessor, string keyword#ffffff
meta.objectliteral punctuation.definition, meta.objectliteral meta.object-literal.key, meta.class variable.object.property#81fba7
markup.bold#81fba7bold
markup.italic#81fba7italic
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#ffb759
meta.parameters#00deff
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#ffd373
source.ts source.pgsql keyword, source.ts keyword.other.DML.sql, source.ts keyword.other.create.sql, source.ts keyword.other.order.sql#ff98dd
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#d8aec8
source.ts constant.other.table-name.sql#ffc2ff
entity.name.type.class, meta.decorator, meta.decorator variable, meta.decorator meta.function-call entity.name.function#f0aa4c
support.function, markup.heading#64de8c
meta.definition.variable, meta.parameters punctuation, meta.parameters punctuation.definition, variable.parameter, markup.heading punctuation#73ec99
entity.name.tag, markup.inline punctuation, markup.fenced_code punctuation#ffa2ff
support.class.component#ffd5ff
meta.definition entity.name.function, entity.name.function, support.function#00deff
entity.other.attribute-name, meta.tag punctuation.section, meta.tag punctuation.definition, meta.tag keyword.operator.assignment, markup.inline, markup.fenced_code#ffb0ff
meta.embedded string, punctuation.definition.string, string#62ddc6
meta.link.inline.markdown, meta.link.inline.markdown punctuation.definition.string, meta.image.inline, meta.image.inline punctuation.definition.string#72ecd4
string punctuation.definition.template-expression#53cfb8
variable.language#ff98dd
constant#69daff
comment, punctuation.definition.comment, string.quoted.docstring, string.quoted.docstring punctuation.definition.string#526861italic
keyword, storage.modifier, storage.type#00e2c5
variable, string variable, string punctuation.accessor, string keyword#ffffff
meta.objectliteral punctuation.definition, meta.objectliteral meta.object-literal.key, meta.class variable.object.property#48ffe1
markup.bold#48ffe1bold
markup.italic#48ffe1italic
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#d8c852
meta.parameters#46d4ff
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#f6e46d
source.ts source.pgsql keyword, source.ts keyword.other.DML.sql, source.ts keyword.other.create.sql, source.ts keyword.other.order.sql#ff96b0
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#cdaeb4
source.ts constant.other.table-name.sql#ffc0d9
entity.name.type.class, meta.decorator, meta.decorator variable, meta.decorator meta.function-call entity.name.function#c9bb45
support.function, markup.heading#00e2c5
meta.definition.variable, meta.parameters punctuation, meta.parameters punctuation.definition, variable.parameter, markup.heading punctuation#30f1d2
entity.name.tag, markup.inline punctuation, markup.fenced_code punctuation#ffa1ce
support.class.component#ffdbff
meta.definition entity.name.function, entity.name.function, support.function#46d4ff
entity.other.attribute-name, meta.tag punctuation.section, meta.tag punctuation.definition, meta.tag keyword.operator.assignment, markup.inline, markup.fenced_code#ffafdc
meta.embedded string, punctuation.definition.string, string#42e0f2
meta.link.inline.markdown, meta.link.inline.markdown punctuation.definition.string, meta.image.inline, meta.image.inline punctuation.definition.string#56eeff
string punctuation.definition.template-expression#28d2e4
variable.language#ff96b0
constant#d7cbff
comment, punctuation.definition.comment, string.quoted.docstring, string.quoted.docstring punctuation.definition.string#526972italic
keyword, storage.modifier, storage.type#00e1fd
variable, string variable, string punctuation.accessor, string keyword#ffffff
meta.objectliteral punctuation.definition, meta.objectliteral meta.object-literal.key, meta.class variable.object.property#4dfeff
markup.bold#4dfeffbold
markup.italic#4dfeffitalic
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#8ada76
meta.parameters#cac4ff
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#a6f790
source.ts source.pgsql keyword, source.ts keyword.other.DML.sql, source.ts keyword.other.create.sql, source.ts keyword.other.order.sql#ffa971
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#dbb59f
source.ts constant.other.table-name.sql#ffd298
entity.name.type.class, meta.decorator, meta.decorator variable, meta.decorator meta.function-call entity.name.function#7ccc69
support.function, markup.heading#00e1fd
meta.definition.variable, meta.parameters punctuation, meta.parameters punctuation.definition, variable.parameter, markup.heading punctuation#33f0ff
entity.name.tag, markup.inline punctuation, markup.fenced_code punctuation#ffb29e
support.class.component#ffffb1
meta.definition entity.name.function, entity.name.function, support.function#cac4ff
entity.other.attribute-name, meta.tag punctuation.section, meta.tag punctuation.definition, meta.tag keyword.operator.assignment, markup.inline, markup.fenced_code#ffc0ac
meta.embedded string, punctuation.definition.string, string#48dbff
meta.link.inline.markdown, meta.link.inline.markdown punctuation.definition.string, meta.image.inline, meta.image.inline punctuation.definition.string#5be9ff
string punctuation.definition.template-expression#30cdf1
variable.language#ffa971
constant#ffc0fe

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Mojojo by Christophe Eymard - VS Code Theme