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#2b2d30
  • activityBarBadge.background#007acc
  • breadcrumb.background#2b2d30
  • editor.background#1e1f22
  • editor.foreground#bcbec4
  • menu.background#2b2d30
  • sideBar.background#2b2d30
  • sideBarTitle.foreground#bbbbbb
  • terminal.background#1e1f22
  • terminal.foreground#BCBEC4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source.css variable.parameter.url#5C92FF
source, punctuation.definition, punctuation.separator, punctuation.attribute-shorthand, punctuation.terminator, punctuation.accessor, punctuation.section, keyword.operator, entity.other.attribute-name, text.html.derivative, meta.class, storage.type.function.arrow, meta.brace, variable.other.object, variable.other.constant, entity.name.command, meta.argument, source.ignore, source.yaml string.unquoted.plain, text.html.markdown, source.diff, source.editorconfig, source.shell string.quoted, source.shell punctuation.definition.string, source.shell constant.language, comment.block.documentation entity.name.type, variable.other.readwrite, entity.name.type.module, source.css support.type.property-name, source.css variable.language.expanded-namespace, source.css keyword.other.unit.percentage, source.css meta.property-list, source.css support.type.vendored.property-name, source.yaml constant.language, source.yaml keyword.control.flow.block-scalar, source.yaml storage.modifier.chomping-indicator, text.pug variable.parameter.function, text.pug constant.name.attribute.tag, text.xml, text.xml variable.language.documentroot, meta.interface meta.type.parameters punctuation.definition, text.html.derivative meta.attribute.directive.vue entity.other.attribute-name.html#BCBEC4
entity.name.tag, meta.template-tag entity.name.tag.template, punctuation.definition.tag, punctuation.definition.tag.begin, meta.selector.css constant.other.unicode-range, source.css meta.function.url, source.css support.function.misc, source.css entity.other.attribute-name, source.css entity.other.attribute-name.id, source.css entity.other.attribute-name.id punctuation.definition.entity, source.css entity.other.attribute-name.pseudo-element, source.css entity.other.attribute-name, source.css support.constant.language-range, source.css entity.name.function, source.css meta.at-rule.use variable, source.css keyword.operator, source.css meta.at-rule.each, source.css entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity, text.xml meta.tag.sgml.doctype, punctuation.definition.tag.begin.html source.js-ignored-vscode, invalid.illegal.character-not-allowed-here.html, meta.tag.structure entity.name.tag, meta.element.structure entity.name.tag, source.css entity.name.tag, source.css meta.property-value variable#D5B778
meta.tag.custom entity.name.tag, meta.tag.other.unrecognized entity.name.tag, entity.name.tag support.class.component, entity.name.tag, source.vue text.html.derivative meta.tag.structure.slot entity.name.tag.html#2FBAA3
#BABABA
constant.language, keyword.other, storage.type, keyword.control, keyword.operator.expression, keyword.operator.new, storage.modifier, source.editorconfig entity.name.section.group-title, markup.heading.markdown punctuation.definition.heading.markdown, constant.other.reference.link.markdown, text.html.markdown punctuation.definition.constant, variable.language, source.css punctuation.definition.keyword, source.css keyword.other, source.yaml entity.name.tag, constant.character.escape, text.pug meta.tag.sgml.doctype, support.type.primitive, support.type.builtin#CF8E6D
string.quoted, string.quoted punctuation.definition, punctuation.definition.string.template, string.template, meta.attribute.directive punctuation.definition.string, text.html.markdown punctuation.definition.string, text.html.markdown string.other.link.description.title.markdown, markup.fenced_code.block.markdown, markup.fenced_code.block.markdown punctuation.definition.markdown, markup.inline.raw.string.markdown, markup.inline.raw.string.markdown punctuation.definition.raw.markdown, markup.raw.block.markdown, markup.quote.markdown, markup.quote.markdown punctuation.definition, markup.quote.markdown markup.heading.markdown, markup.quote.markdown markup.heading.markdown punctuation.definition.heading.markdown, markup.quote.markdown string.other.link.title.markdown, markup.quote.markdown markup.underline.link.markdown, source.editorconfig string, source.editorconfig constant.language, comment.block.documentation, comment.block.documentation punctuation.definition.comment, comment.block.documentation punctuation.definition.block, comment.block.documentation storage.type, meta.property-value.css, string.unquoted.html, punctuation.separator.key-value.html, source.css support.constant.property-value, source.css keyword.other.unit, source.yaml comment.line.number-sign, source.yaml comment.line punctuation.definition.comment, string.regexp constant.other.character-class.set, string.regexp constant.other.character-class.set constant.other.character-class.range, meta.interface meta.type.parameters punctuation.definition.string, meta.type.declaration meta.type.parameters punctuation.definition.string, text.pug text.block.pipe, text.pug#6AAB73
comment.block, comment.line, comment.line punctuation.definition.comment, comment.block punctuation.definition.comment, text.pug comment.unbuffered.block, text.pug string.comment.buffered.block#7A7E85
source.json support.type.property-name.json, variable.other.property, variable.other.constant.property, meta.object-literal.key, variable.other.readwrite.alias, support.variable.property, variable.object.property, variable.other.object.property, source.editorconfig keyword.other, markup.heading.markdown, punctuation.definition.list_item.markdown, meta.function-call support.class, meta.definition.property entity.name.function, meta.objectliteral meta.object.member variable.other.readwrite, text.pug entity.other.attribute-name.class, text.html.derivative variable.other.readwrite, meta.import variable.other.readwrite.alias#C77DBB
meta.function-call support.class.promise, meta.function-call entity.name.function, meta.definition.method entity.name.function, punctuation.definition.link.markdown, markup.underline.link.markdown, string.other.link.title.markdown, string.other.link.description.markdown, text.html.markdown punctuation.definition.link.description, markup.underline, entity.name.function, constant.character.entity.numeric.hexadecimal.html, constant.character.entity.numeric.hexadecimal.html punctuation.definition.entity.html, constant.character.entity.named.Alpha.html, constant.character.entity.named.Alpha.html punctuation.definition.entity.html, constant.other.color.rgb-value.hex.css, punctuation.definition.constant.css, text.xml constant.character.entity, text.xml constant.character.entity punctuation.definition.constant, constant.character.entity.named, constant.character.entity.named punctuation.definition.entity.html#56A8F5
punctuation.decorator, meta.decorator meta.function-call entity.name.function#B3AE60
source.css keyword.control.at-rule.mixin, source.css keyword.control.at-rule.mixin punctuation.definition.keyword#D0D0FF
source.css comment.block, source.css comment.block punctuation.definition.comment#BC9455italic
source.yaml entity.name.type.anchor, source.yaml variable.other.alias#E8BF6A
string.regexp constant.other.character-class#B2AE60
string.regexp constant.other.character-class.set constant.character.escape.backslash#CF8E6D
string.regexp#6AAB73
constant.numeric, string.regexp keyword.operator.quantifier.regexp, string.regexp punctuation.definition.string#2AACB8
text.pug attribute_value punctuation.definition.string, text.pug args.mixin punctuation.definition.string, text.pug attribute_value string.quoted, text.pug args.mixin string.quoted, text.pug string.interpolated variable.other.readwrite, text.pug meta.control.flow variable.other.readwrite, text.pug meta.control.flow keyword.operator#9762C6
text.pug variable.control.import.include#8585FF
text.pug constant.language.name.coffeescript.filter#FF0000
text.html.markdown markup.inline.raw.markdown#C792EA
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E
markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#C77DBB
markdown.heading, markup.heading | markup.heading entity.name#C3E88D
punctuation.definition.bold, punctuation.definition.italic#CF8E6D
markup.table.markdown#BCBEC4
meta.separator.markdown, punctuation.definition.table.markdown, punctuation.separator.table.markdown#CF8E6D
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#f07178bold
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#EEFFFF
variable.language.fenced.markdown#65737E
meta.separator#65737Ebold
markup.table#EEFFFF
source.go keyword#CF8E6D
source.go entity.name.package, source.go entity.alias.import#AFBF7E
source.go support.function#56A8F5
source.go support.function.builtin#CC7832