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.activeBackground#282626
  • activityBar.activeBorder#D30033
  • activityBar.background#191818
  • activityBar.border#4C2A00
  • activityBarBadge.background#D30033
  • activityBarBadge.foreground#D3C4C4
  • breadcrumb.background#191818
  • button.background#4C2A00
  • button.foreground#E2D0B9
  • button.secondaryBackground#392813
  • button.secondaryForeground#9A9696
  • editor.background#191818
  • editorGroupHeader.tabsBackground#282626
  • editorLineNumber.activeForeground#D3C4C4
  • editorLineNumber.foreground#413E3E
  • focusBorder#4c2a0020
  • foreground#9A9696
  • list.activeSelectionBackground#4C2A00
  • list.hoverBackground#282626
  • list.inactiveSelectionBackground#392813
  • panel.border#4C2A00
  • panelTitle.activeBorder#D30033
  • panelTitle.activeForeground#E2D0B9
  • sideBar.background#282626
  • sideBar.border#282626
  • sideBarSectionHeader.background#191818
  • sideBarSectionHeader.border#282626
  • sideBarTitle.foreground#9A9696
  • statusBar.background#4C2A00
  • tab.activeBorderTop#D30033
  • tab.inactiveBackground#282626
  • tab.inactiveForeground#817C7C
  • titleBar.activeBackground#282626

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.operator.type.annotation.js, meta.object-literal.key.js, meta.template.expression.js, punctuation.definition.binding-pattern.object.js, punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.separator.dictionary.key-value.json, punctuation.separator.dictionary.pair.json, punctuation.definition.block.js, variable.other.readwrite.alias.js, variable.object.property.js, variable.other.constant.js, variable.parameter.js, variable.other.object.js#c792e9
variable.other.object.property.js, variable.other.property.js#B8AEF5
punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, support.type.property-name.json, entity.name.tag.yaml#c792e9
punctuation.definition.string.begin.json, punctuation.definition.string.end.json, string.quoted.double.json, string.quoted.double.yaml#F0A800
constant.language.json, constant.numeric.json, constant.numeric.integer.yaml, entity.other.attribute-name.js#60D800
punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js, support.class.component.js#C0D8F0
keyword.operator.assignment.js, keyword.operator.comparison.js, keyword.operator.ternary.js, storage.type.js, storage.type.type.js, storage.type.function.arrow.js#C0D8F0bold
string.quoted.double.js, string.quoted.single.js, string.template.js, string.unquoted.plain.out.yaml#D8A878
keyword.control.import.js, keyword.control.from.js#D87800
meta.definition.function.js, punctuation.definition.parameters.begin.js, punctuation.definition.parameters.end.js#F0A800
#D8A878
#7848D8
keyword.control.export.js, keyword.control.default.js, keyword.operator.arithmetic.js, keyword.control.flow.js, storage.modifier.async.js, storage.type.function.js, support.type.object.module.js#4FAD33
#D30033
constant.language.boolean.yaml, entity.name.type.alias.js, entity.name.type.js, new.expr.js#6090F0italic
meta.var.expr.js, source.js#6090F0
keyword.control.conditional.js, keyword.operator.ternary.js, meta.array.literal.js, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js#FF5370
keyword.operator.new.js#FF5370bold
constant.numeric, variable.other.readwrite#E2D0B9
comment#E9C79255italic
text.html.markdown#F0A800
markup.heading.markdown#c792e9
meta.link.inline.markdown#6090F0
markup.fenced_code.block.markdown#E2D0B9
Colors of BJJ by Leandro Cunha - VS Code Theme