Skip to main content
CodingTheme

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#272935
  • activityBarBadge.background#6de5ff
  • activityBarBadge.foreground#272935
  • editor.background#272935
  • editor.foreground#dadada
  • gitDecoration.addedResourceForeground#6ef8be
  • gitDecoration.modifiedResourceForeground#e9ff81
  • gitDecoration.untrackedResourceForeground#c481ff
  • list.errorForeground#fc7575
  • list.warningForeground#6ef8be
  • sideBar.background#272935
  • sideBar.foreground#dadada
  • sideBarSectionHeader.background#272935
  • sideBarSectionHeader.foreground#6de5ff
  • sideBarTitle.foreground#dadada
  • tab.inactiveBackground#333

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#dadada
strong, markup.boldbold
emphasis, markup.italicitalic
underline, markup.underlineunderline
punctuation.definition.separator.diff#454545
meta.diff.range.unified meta.toc-list.line-number.diff#c481ff
markup.inserted.diff, meta.diff.header.to-file#e9ff81
markup.deleted.diff, meta.diff.header.from-file#00ff00
markup.changed.diff#6de5ff
invalid.illegal#454545
invalid.broken#454545
invalid.deprecated#454545
invalid.unimplemented#454545
token.info-token#6de5ff
token.warn-token#6ef8be
token.error-token#fc7575
token.debug-token#6ef8be
punctuation.accessor#c481ff
punctuation.seperator#c481ff
comment, punctuation.definition.comment#454545italic
string.quoted.docstring#454545italic
variable, support.variable, meta.definition.variable entity.name.function#dadada
function.parameter, meta.function-call.arguments#dadada
meta.preprocessor string, meta.preprocessor entity.name.function#dadada
entity.name.type.namespace#dadada
storage.modifier.package#dadada
storage.modifier.import#dadada
string, meta.structure.dictionary.json string.quoted.double.json#e9ff81
constant.language.boolean#e9ff81
constant.numeric, support.constant#e9ff81
constant.language.null#e9ff81
constant.language.undefined#e9ff81
keyword, modifier, storage.modifier, support.type.object, constant.language#6ef8be
variable.language.this#c481ff
variable.language.special.self#c481ff
storage.type, support.class#FF6B6B
constant.other, support.constant, variable.other.constant, variable.other.global#6ef8be
variable.object.property#6ef8be
constant.character.escape#6ef8be
storage.type.primitive, support.type, entity.name.type, keyword.type, keyword.other.unit#6de5ff
meta.function entity.name.function, keyword.other.get, keyword.other.set#6de5ff
entity.name.function, support.function, meta.function-call, keyword.other.special-method, meta.require, variable.language.super#6de5ff
meta.definition.method entity.name.function#6de5ff
meta.method-call meta.method#6de5ff
entity.name.type.class#c481ff
entity.other.inherited-class#c481ff
support.module, support.node#fc7575italic
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.definition.variable#fc7575
meta.object-literal.key#fc7575
storage.type.annotation#fc7575
variable.other.parsetime.begin, variable.other.parsetime.end#fc7575
entity.name.tag.css#fc7575
entity.other.attribute-name.class#6de5ff
entity.other.attribute-name.id#6de5ff
support.type.property-name.css#dadada
punctuation.definition.entity.css#dadada
text.html meta.tag.sgml.doctype#c481ff
punctuation.definition.tag#dadada
entity.name.tag#fc7575
entity.other.attribute-name#6ef8be
punctuation.section.embedded#fc7575
entity.name.section.group-title.ini#6de5ff
keyword.other.definition.ini#fc7575
constant.language.import-export-all.js, constant.language.import-export-all.jsx#dadada
storage.modifier.async.js, storage.modifier.async.jsx#c481ff
variable.object.property.js, variable.object.property.jsx#dadada
meta.object-literal.key string, support.type.property-name.json#fc7575
entity.name.tag support.class.component#fc7575underline
markup.heading#6de5ff
text.html.markdown meta.link.inline, meta.link.reference, markup.underline.link.image#fc7575
text.html.markdown markup.quote#6de5ff
text.html.markdown beginning.punctuation.definition.list#6ef8be
text.html.markdown markup.inline.raw, text.html.markdown markup.fenced_code.block.markdown#c481ff
markup.italic#fc7575italic
markup.bold#fc7575bold
markup.bold markup.italic, markup.italic markup.bold#fc7575italic bold
keyword.operator.arithmetic.python#dadada
meta.function.python entity.name.function.decorator.python#fc7575
constant.language.python#e9ff81
constant.language.import-export-all.ts, constant.language.import-export-all.tsx#dadada
variable.object.property.ts, variable.object.property.tsx#dadada
text.xml.xsl entity.name.tag.namespace#fc7575underline
entity.name.tag.yaml#fc7575

Shiki preview

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

Loading...

Sick colors by Pablo Varela - VS Code Theme