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#2d1b2d
  • button.background#ff6b4a
  • button.foreground#000000
  • editor.background#1d111d
  • editor.foreground#ffeaa7
  • editorGroupHeader.tabsBackground#1a0f1a
  • panel.background#2d1b2d
  • panel.border#ff6b4a
  • sideBar.background#2d1b2d
  • sideBar.border#ff6b4a
  • statusBar.background#1a0f1a
  • tab.activeBackground#2d1b2d
  • tab.inactiveBackground#1a0f1a
  • titleBar.activeBackground#1a0f1a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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