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#0b1220
  • breadcrumb.background#191a2d
  • breadcrumb.foreground#f8f8f2
  • button.background#ff6b6b
  • button.foreground#000000
  • chat.avatarBackground#272131
  • chat.avatarForeground#f8f8f2
  • chat.slashCommandBackground#272131
  • chat.slashCommandForeground#f8f8f2
  • chatCodeBlock.background#0b1220
  • editor.background#0b1220
  • editor.foreground#f8f8f2
  • editorGroupHeader.tabsBackground#121d34
  • editorHoverWidget.background#191a2d
  • editorSuggestWidget.background#191a2d
  • input.background#272131
  • input.border#121d34
  • input.foreground#f8f8f2
  • inputOption.activeBorder#ff6b6b
  • inputValidation.errorBackground#ff6b6b
  • inputValidation.errorBorder#ff6b6b
  • list.hoverBackground#191a2d
  • panel.background#0b1220
  • panel.border#121d34
  • quickInput.background#191a2d
  • sideBar.background#0b1220
  • sideBar.border#121d34
  • statusBar.background#121d34
  • tab.activeBackground#080d17
  • tab.inactiveBackground#121d34
  • titleBar.activeBackground#0c121f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#f8f8f2
keyword.other.unit#7bed9f
punctuation.section.parens#a8a8a3
punctuation.section.parens.begin, punctuation.section.parens.end#a8a8a3
punctuation.definition.parameters#a8a8a3
variable.css, variable.argument.css#6c5ce7
support.type.custom-property.css, variable.other.custom-property.css#6c5ce7
comment, punctuation.definition.comment#7aa2f7italic
string, string.quoted, string.template#7bed9f
string.quoted.single, string.quoted.double#7bed9f
string.template, string.interpolated#7bed9f
constant.numeric, constant.numeric.integer, constant.numeric.float#ffcc66
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#7bed9f
constant.character, constant.other#7bed9f
keyword, keyword.control, keyword.operator.new, keyword.other#ff6b6b
keyword.control.flow, keyword.control.conditional, keyword.control.loop#ff6b6b
keyword.control.import, keyword.control.export, keyword.control.from#ff6b6b
storage, storage.type, storage.modifier#ff6b6b
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison#ff6b6b
keyword.operator.logical, keyword.operator.assignment#ff6b6b
entity.name.function, meta.function-call, support.function#4ecdc4
entity.name.method, meta.method-call#4ecdc4
support.function.builtin, support.function.magic#4ecdc4
variable, variable.other, variable.parameter#f8f8f2
variable.language, variable.language.this, variable.language.super#f8f8f2
meta.definition.variable, meta.object-literal.key#f8f8f2
entity.name.type, entity.name.class, support.type, support.class#4ecdc4
entity.other.inherited-class, meta.type.annotation#4ecdc4
meta.property-name, support.type.property-name, variable.other.property#f8f8f2
meta.object.member, meta.field.declaration#f8f8f2
entity.name.tag, meta.tag#ff6b6b
entity.other.attribute-name, meta.attribute#7bed9f
punctuation.definition.tag#a8a8a3
support.type.property-name.css, meta.property-name.css#f8f8f2
support.constant.property-value.css, meta.property-value.css#7bed9f
support.constant.color.w3c-standard-color-name.css#7bed9f
constant.numeric.css#7bed9f
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#f8f8f2
entity.name.tag.css, entity.other.attribute-name.pseudo-class.css#ff6b6b
punctuation.section.property-list.begin.css, punctuation.section.property-list.end.css#f8f8f2
punctuation.separator.key-value.css, punctuation.terminator.rule.css#ff6b6b
string.quoted.double.css, string.quoted.single.css#7bed9f
entity.other.attribute-name.class.css#4ecdc4
support.type.property-name.json, meta.structure.dictionary.key.json#f8f8f2
meta.structure.dictionary.value.json#a8a8a3
punctuation.definition.parameters, punctuation.definition.arguments#a8a8a3
punctuation.section.parens, punctuation.section.parens.begin, punctuation.section.parens.end#a8a8a3
meta.group.braces.round, meta.brace.round#a8a8a3
punctuation.definition.group.begin, punctuation.definition.group.end#a8a8a3
punctuation.section.brackets#a8a8a3
punctuation.section.braces, meta.brace#f8f8f2
punctuation.separator, punctuation.terminator#ff6b6b
support.constant, support.variable#7bed9f
support.module, support.namespace#4ecdc4
markup.heading, entity.name.section#4ecdc4bold
markup.bold#ff6b6bbold
markup.italic#7bed9fitalic
markup.raw, markup.inline.raw#7bed9f
keyword.other.unit, keyword.other.unit.css#7bed9f
punctuation.section.parens, punctuation.section.parens.begin, punctuation.section.parens.end, punctuation.definition.parameters, punctuation.definition.arguments, meta.group.braces.round, meta.brace.round#a8a8a3
constant.other.color.rgb-value.hex.css, constant.other.rgb-value.css, constant.other.color.css, punctuation.definition.constant.css#6c5ce7
punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css, punctuation.section.function.css, meta.property-value.css punctuation#a8a8a3
Rainbow Spectrum by eight84 - VS Code Theme