Skip to main content
CodingTheme

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.

  • statusBar.background#3b4b51
  • statusBar.debuggingBackground#5d4343
  • statusBar.noFolderBackground#3f274b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment.block, comment.line#6f7b7ditalic
comment.block.documentation#51935b
constant.character.escape, constant.language, constant.language.boolean.yaml, keyword, keyword.operator.new.ts, punctuation.terminator, storage.modifier, storage.type.class, storage.type.function, storage.type.namespace, storage.type.ts, storage.type, support.type.builtin.ts, variable.language.dart, variable.language.super, variable.language.this#dd824d
punctuation.terminator.dart, keyword.control.export, keyword.control.import, storage.type.namespacebold
entity.name.tag.css, entity.name.type.go, entity.name.type.ts, entity.name.type.module.ts, entity.name.type.receiver.go, storage.type, support.class.dart, support.type.primitive, variable.other.object.ts#dbab68
entity.name.tag.css, entity.name.type.module.ts#dbab68italic
entity.name.function, entity.other.attribute-name.class.css, entity.other.attribute-name.id, meta.at-rule.extend.scss, support.function.go#e4c769
entity.name.tag.html, entity.name.tag.script.html.vue, entity.name.tag.style.html.vue, entity.name.tag.template.html.vue, entity.other.attribute-name.class.css#e4c769italic
variable.other.readwrite.ts#c0bbbb
variable.other.field.go, variable.other.property.ts, variable.other.object.property.ts, variable.other.receiver.go, meta.object-literal.key#c3b2b2italic
constant.other.color.rgb-value.hex.css, constant.other.rgb-value.css, storage.type.annotation.dart, storage.type.class.jsdoc#a6ba74italic
markup.quote.markdown, string.interpolated, string.quoted.double, string.quoted.single, string.template, string.unquoted, support.constant.property-value.css#6da228
keyword.operator, keyword.other.unit#88cac8
variable.scss, variable.other.less#56aecb
constant.numeric#419cd5
constant.other.placeholder.go, entity.name.tag.yaml, entity.other.attribute-name.html, keyword.other.definition.ini, markup.heading.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, support.type.property-name.json, support.type.property-name.css, variable.other.description.jsdoc, variable.other.jsdoc, variable.other.source.dart#a973be
markup.bold.markdown#32a6d4bold
markup.italic#4bc8bcitalic
markup.inline.raw.string.markdown#d5b66c
string.other.link.title.markdown#398eddbold
meta.image.inline.markdown, meta.link.inline.markdown#798386italic underline
punctuation.definition.link.description.begin.markdown, punctuation.definition.link.description.end.markdown, punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown, punctuation.definition.metadata.markdown#798386

Shiki preview

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

Loading...

Optimized Dracula Theme by JamesUmmex - VS Code Theme