Skip to main content
Coding Theme

Color themes

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#0A100A
  • activityBar.foreground#E0D8C8
  • badge.background#D4882A
  • badge.foreground#FFFFFF
  • button.background#5C2D8C
  • button.foreground#FFFFFF
  • dropdown.background#1A221A
  • dropdown.foreground#E0D8C8
  • editor.background#141A14
  • editor.foreground#E0D8C8
  • editor.lineHighlightBackground#1A221A
  • editor.selectionBackground#2A3528
  • editorBracketMatch.background#2A352840
  • editorBracketMatch.border#D4882A
  • editorCursor.foreground#D4882A
  • editorLineNumber.activeForeground#D4882A
  • editorLineNumber.foreground#3D5038
  • input.background#1A221A
  • input.border#2A3828
  • input.foreground#E0D8C8
  • list.activeSelectionBackground#2A3528
  • list.hoverBackground#1E281E
  • panel.background#0F150F
  • sideBar.background#0F150F
  • sideBar.foreground#C8C0B0
  • sideBarTitle.foreground#D4882A
  • statusBar.background#5C2D8C
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#141A14
  • tab.activeForeground#FFFFFF
  • tab.inactiveBackground#0F150F
  • terminal.background#141A14
  • terminal.foreground#E0D8C8
  • titleBar.activeBackground#141A14
  • titleBar.activeForeground#E0D8C8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#3D5038italic
string, string.quoted, string.template, string.interpolated#D4882A
constant.character.escape, string.regexp#E8A840
punctuation.definition.template-expression, punctuation.section.embedded#8B5CC8
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#E8A840
constant.language, support.constant, constant.language.boolean, constant.language.null, constant.language.undefined#E8A840
keyword, keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop#8B5CC8
storage.type, storage.modifier, keyword.control.def, keyword.control.class#8B5CC8
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison#C8C0A8
entity.name.function, meta.function entity.name.function#C87A20
meta.function-call entity.name.function, variable.function, support.function, meta.method-call entity.name.function, entity.name.function.call#C87A20
support.function.builtin, support.function.magic, meta.function-call support.function#C87A20
meta.method-call, variable.function.member#C87A20
entity.name.type, entity.name.class, support.type, support.class, entity.name.type.class#7A4DAA
entity.other.inherited-class#7A4DAAitalic
entity.name.type.interface, entity.name.type.parameter, entity.name.type.enum#9A6DC8
variable, variable.other, variable.other.readwrite#E0D8C8
variable.parameter, variable.parameter.function#C8C0A8
variable.other.property, variable.other.object.property, meta.object-literal.key, support.variable.property#C87A20
variable.language, variable.language.this, variable.language.self, variable.language.special#8B5CC8italic
meta.decorator, entity.name.function.decorator, punctuation.definition.decorator, meta.annotation#7A4DAA
keyword.control.import, keyword.control.export, keyword.control.from, keyword.other.import#8B5CC8
entity.name.import, entity.name.package, support.module#D4882A
entity.name.tag, punctuation.definition.tag#8B5CC8
entity.other.attribute-name#D4882A
support.type.property-name, meta.property-name#C87A20
support.constant.property-value, meta.property-value#D4882A
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#7A4DAA
punctuation, punctuation.definition, punctuation.separator, punctuation.terminator#5A7A55
markup.heading, entity.name.section#8B5CC8bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.fenced_code#D4882A
Beatles theme by sdooodly - VS Code Theme