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#232a2e
  • button.background#56b6c2
  • button.foreground#000000
  • chat.avatarBackground#232a2e
  • chat.avatarForeground#d3c6aa
  • chat.slashCommandBackground#2d353b
  • chat.slashCommandForeground#7fbbb3
  • editor.background#2D353B
  • editor.foreground#d3c6aa
  • editorGroupHeader.tabsBackground#1e2326
  • input.background#232a2e
  • input.border#404040
  • input.foreground#d3c6aa
  • input.placeholderForeground#859289
  • inputOption.activeBackground#56b6c2
  • inputOption.activeForeground#d3c6aa
  • inputValidation.errorBackground#e67e80
  • inputValidation.errorBorder#e67e80
  • inputValidation.errorForeground#ffffff
  • inputValidation.infoBackground#7fbbb3
  • inputValidation.infoBorder#7fbbb3
  • inputValidation.infoForeground#000000
  • inputValidation.warningBackground#dbbc7f
  • inputValidation.warningBorder#dbbc7f
  • inputValidation.warningForeground#000000
  • panel.background#232a2e
  • panel.border#404040
  • sideBar.background#232a2e
  • sideBar.border#404040
  • statusBar.background#1e2326
  • tab.activeBackground#232a2e
  • tab.inactiveBackground#1e2326
  • titleBar.activeBackground#1e2326

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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