Skip to main content
Coding Theme

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#282a50
  • contrastActiveBorder#00ff00
  • editor.background#282a36
  • editor.foreground#f8f8f2
  • editor.lineHighlightBackground#55475a50
  • editor.selectionBackground#55475a
  • editorBracketMatch.background#000000
  • editorBracketMatch.border#ff8000
  • editorCursor.foreground#ffff00
  • editorLineNumber.activeForeground#ffff00
  • minimap.background#333333
  • sideBar.background#282a36
  • titleBar.activeBackground#282a88

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#ff79c6
comment#6272a4italic
source#00cc99
constant.language#50fa7b
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.decimal, constant.numeric.scss, constant.numeric.css, constant.numeric.less, constant.numeric.json, constant.numeric.color.rgb-value, constant.language.boolean, constant.language.null, constant.language.undefined, variable.other.constant#bd93f9
constant.regexp#ff79c6
variable#f8f8f2
variable.language.this#8be9fd
variable.parameter#ffb86citalic
keyword, punctuation.definition.keyword#f4a460
keyword.operator.new#abcdefunderline
keyword.operator#ccff66
keyword.control#7cff00
meta.diff, meta.diff.header#6272a4
markup.underlineunderline
markup.bold#ffb86cbold
markup.heading#bd93f9bold
markup.italic#f1fa8citalic
markup.inserted#50fa7b
markup.deleted#ff5555
markup.changed#ffb86c
invalid#ff3300bold
invalid.deprecated#f8f8f2
entity.name.filename#f1fa8c
markup.error#ff5555
beginning.punctuation.definition.quote.markdown, beginning.punctuation.definition.list.markdown#8be9fd
markup.inline.raw#50fa7b
markup.underline.link.markdown, markup.underline.link.image.markdown#8be9fd
string.other.link.description.markdown, string.other.link.title.markdown#ff79c6
markup.quote.markdown#6272a4
meta.separator.markdown#6272a4
punctuation.definition.markdown#50fa7b
fenced_code.block.language#ffb86c
meta.selector#f8f8f2
meta.preprocessor#8be9fd
meta.preprocessor.string#ffb86c
meta.preprocessor.numeric#bd93f9
storage#ff79c6
storage.type.class, storage.type.function, storage.type.interface, storage.type.type#ff79c6
storage.type, storage.type.class.jsdoc#8be9fditalic
storage.modifier#ff79c6
string#a7b2be
string.tag#f1fa8c
string.value#f1fa8c
string.regexp#ff5555
support.function#8be9fd
support.constant#8be9fd
support.constant.property#bd93f9
support.type, support.class#8be9fditalic
support.variable.object#bd93f9
meta.method.declaration storage.type#ff79c6
source meta.var.expr storage.type#8be9fd
entity.name.function#50fa7b
entity.other.inherited-class#50fa7bitalic underline
meta.decorator, meta.decorator variable.other.readwrite#f8f8f2italic
support.constant.property-value, support.constant.color, support.constant.font-name, support.constant.media-type, support.constant.media#f8f8f2
constant.numeric.color.hex-value, constant.other.color.rgb-value, constant.other.rgb-value#f1fa8c
variable.css, variable.scss, variable.stylus, variable.other.less#ffb86c
meta.property-list.css, support.type.vendored.property-name, support.type.property-name#8be9fd
entity.name.tag.css#ff79c6
entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#50fa7bitalic
entity.other.attribute-name.id.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss, entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css#50fa7b
entity.other.attribute-name#50fa7b
entity.name.tag#ff79c6
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#ff79c6
string.template meta.template.expression#f8f8f2
storage.type.function.arrow#ff79c6
meta.object-binding-pattern-variable variable.object.property#ffb86citalic
meta.object-binding-pattern-variable punctuation.destructuring#ff79c6
meta.import variable.other.readwrite#ffb86citalic
meta.import variable.other.readwrite.alias#f8f8f2
constant.language.import-export-all#bd93f9
meta.object-literal.key string.quoted#f8f8f2
support.type.property-name.json
punctuation.separator.dictionary.key-value.json#ff79c6
meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json#f1fa8c
constant.language.json#bd93f9
punctuation.section.embedded.begin.metatag.php, punctuation.section.embedded.end.metatag.php#f8f8f2
meta.structure.dictionary.key.python#8be9fd
variable.other.readwrite.instance#ffb86c
string.quoted.double.shell variable#bd93f9
meta.type.annotation meta.type.parameters entity.name.type, meta.type.parameters entity.name.type, meta.indexer.mappedtype.declaration entity.name.type, meta.return.type meta.type.parameters entity.name.type#ffb86c
entity.name.type, meta.type.annotation entity.name.type, meta.return.type entity.name.type#8be9fditalic
entity.name.tag.yaml#8be9fd
punctuation.definition.block.sequence.item.yaml, punctuation.separator.key-value.mapping.yaml, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, support.other.chomping-indicator.yaml#ff79c6
constant.other.timestamp.yaml#ffb86c
variable.other.alias.yaml#50fa7bitalic underline
atheme by Sarat Maharjan - VS Code Theme