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.

  • activityBarBadge.background#007acc
  • editor.background#1d1f21
  • editor.foreground#dddddd
  • editor.lineHighlightBackground#1073cf2d
  • editor.lineHighlightBorder#9fced11f
  • editor.selectionBackground#0050a0
  • editorCursor.foreground#c5c8c6
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#303030
  • statusBar.debuggingBackground#511f1f
  • statusBar.noFolderBackground#303030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#767676
variable, string constant.other.placeholder#dddddd
constant.other.color#d89333
keyword, storage.type, storage.modifier#6c9ef8
keyword.operator#dddddd
keyword.other.unit#6c9ef8
keyword.other#6c9ef8
keyword.control, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, keyword.other.template, keyword.other.substitution#6c9ef8
punctuation.section.embedded#767676
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#6c9ef8
entity.name.function, variable.function, keyword.other.special-method#b77fdb
meta.function-call#dddddd
support.function#b77fdb
meta.block variable.other#dddddd
support.other.variable, string.other.link#f07178
constant.language, support.constant, constant.character, constant.escape, variable.parameter#d89333
constant.numeric#85a300
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#d89333
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#dddddd
support.type#b2ccd6
meta.selector.css entity.name.tag.css, meta.property-list.css, meta.selector.css entity.other.attribute-name.class.css, meta.selector.css entity.other.attribute-name.id.css, meta.selector.css meta.attribute-selector.css entity.other.attribute-name.attribute.css, meta.selector.css meta.attribute-selector.css string.unquoted.attribute-value.css#6c9ef8
punctuation.definition.entity.css entity.other.attribute-name.pseudo-element.css, punctuation.separator.list.comma.css#dddddd
punctuation.definition.string.begin.css, punctuation.definition.string.end.css#d89333
meta.selector.css entity.other.attribute-name.pseudo-class.css, meta.selector.css entity.other.attribute-name.pseudo-element.css#dddddd
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#b77fdb
keyword.control.at-rule#b77fdb
support.type.property-name.media.css#dddddd
meta.property-value.css, meta.property-value.scss, entity.name.function.scss#dddddd
meta.property-value.css support.function#fd657e
keyword.other.important.css#ec0909
meta.property-value.css support.constant, meta.property-value.css variable.parameter.misc.css, meta.property-value.css constant.other.color.rgb-value.css#d89333
meta.property-value.css constant.numeric.css, meta.property-value.css constant.numeric.css keyword.other.unit.css, meta.at-rule constant.numeric.css keyword.other.unit.css#85a300
meta.property-value.css support.constant.color.w3c-standard-color-name.css#6c9ef8
punctuation.separator.key-value.css, punctuation.terminator.rule.css, punctuation.section.property-list.css#dddddd
punctuation.definition.keyword.css#b77fdb
punctuation.definition.entity.css entity.other.attribute-name.pseudo-element.css#ec0909
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ff5370
variable.language#dddddd
entity.name.method.js#6c9ef8italic
meta.class-method.js entity.name.function.js, variable.function.constructor#6c9ef8
entity.other.attribute-name#85a300
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#d89333italic
entity.other.attribute-name.class.css, support.constant.media.css, entity.name.tag.css#85a300
source.sass keyword.control#6c9ef8
keyword.operator.logical.and.media.css, keyword.operator.logical.scss#6c9ef8
variable.parameter.keyframe-list.css, entity.other.attribute-name.pseudo-element.css#dddddd
variable.parameter.tailwind.tailwind#d89333
punctuation.terminator.apply.tailwind#dddddd
markup.inserted#c3e88d
markup.deleted#ff5370
markup.changed#c792ea
string.regexp#89ddff
constant.character.escape#70c1e0
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#6cf87fitalic
source.js constant.other.object.key.js string.unquoted.label.js#ff5370italic
source.json meta.structure.dictionary.json support.type.property-name.json#c792ea
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ffcb6b
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f78c6c
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff5370
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c17e70
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#82aaff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f07178
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c792ea
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c3e88d
text.html.markdown, punctuation.definition.list_item.markdown#dddddd
text.html.markdown markup.inline.raw.markdown, markup.inline.raw.string.markdown#999999
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737e
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#d89333
markup.italic#f07178italic
markup.bold, markup.bold string#f07178bold
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.underline#d89333underline
markup.quote punctuation.definition.blockquote.markdown#65737e
markup.quoteitalic
string.other.link.title.markdown#82aaff
string.other.link.description.title.markdown#c792ea
constant.other.reference.link.markdown#ffcb6b
markup.raw.block#c792ea
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

Shiki preview

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

Loading...

Brackets Dark Pro by Dan Alcaide - VS Code Theme