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#E8E2DA
  • activityBar.foreground#1A2018
  • badge.background#B06A18
  • badge.foreground#FFFFFF
  • button.background#6A3A90
  • button.foreground#FFFFFF
  • dropdown.background#FFFFFF
  • dropdown.foreground#1A2018
  • editor.background#F8F5F0
  • editor.foreground#1A2018
  • editor.lineHighlightBackground#F0ECE5
  • editor.selectionBackground#E8D8C8
  • editorBracketMatch.background#E8D8C840
  • editorBracketMatch.border#6A3A90
  • editorCursor.foreground#B06A18
  • editorLineNumber.activeForeground#B06A18
  • editorLineNumber.foreground#A0A898
  • input.background#FFFFFF
  • input.border#D0C8B8
  • input.foreground#1A2018
  • list.activeSelectionBackground#E8D8C8
  • list.hoverBackground#F0E8E0
  • panel.background#F0EBE5
  • sideBar.background#F0EBE5
  • sideBar.foreground#1A2018
  • sideBarTitle.foreground#6A3A90
  • statusBar.background#6A3A90
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#F8F5F0
  • tab.activeForeground#1A2018
  • tab.inactiveBackground#F0EBE5
  • terminal.background#F8F5F0
  • terminal.foreground#1A2018
  • titleBar.activeBackground#F0EBE5
  • titleBar.activeForeground#1A2018

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8A9080italic
string, string.quoted, string.template, string.interpolated#A06018
constant.character.escape, string.regexp#8A5010
punctuation.definition.template-expression, punctuation.section.embedded#5A2A7A
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#B87820
constant.language, support.constant, constant.language.boolean, constant.language.null, constant.language.undefined#8A5010
keyword, keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop#5A2A7A
storage.type, storage.modifier, keyword.control.def, keyword.control.class#5A2A7A
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison#3A4A38
entity.name.function, meta.function entity.name.function#8A5010
meta.function-call entity.name.function, variable.function, support.function, meta.method-call entity.name.function, entity.name.function.call#8A5010
support.function.builtin, support.function.magic, meta.function-call support.function#8A5010
meta.method-call, variable.function.member#8A5010
entity.name.type, entity.name.class, support.type, support.class, entity.name.type.class#6A3A90
entity.other.inherited-class#6A3A90italic
entity.name.type.interface, entity.name.type.parameter, entity.name.type.enum#5A2A7A
variable, variable.other, variable.other.readwrite#1A2018
variable.parameter, variable.parameter.function#2A3828
variable.other.property, variable.other.object.property, meta.object-literal.key, support.variable.property#8A5010
variable.language, variable.language.this, variable.language.self, variable.language.special#5A2A7Aitalic
meta.decorator, entity.name.function.decorator, punctuation.definition.decorator, meta.annotation#6A3A90
keyword.control.import, keyword.control.export, keyword.control.from, keyword.other.import#5A2A7A
entity.name.import, entity.name.package, support.module#A06018
entity.name.tag, punctuation.definition.tag#5A2A7A
entity.other.attribute-name#A06018
support.type.property-name, meta.property-name#8A5010
support.constant.property-value, meta.property-value#A06018
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#6A3A90
punctuation, punctuation.definition, punctuation.separator, punctuation.terminator#4A5A48
markup.heading, entity.name.section#5A2A7Abold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.fenced_code#A06018