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#E2E5EC
  • activityBar.foreground#141820
  • badge.background#A01830
  • badge.foreground#FFFFFF
  • button.background#2868C8
  • button.foreground#FFFFFF
  • dropdown.background#FFFFFF
  • dropdown.foreground#141820
  • editor.background#F5F7FA
  • editor.foreground#141820
  • editor.lineHighlightBackground#ECEEF2
  • editor.selectionBackground#D0E0F8
  • editorBracketMatch.background#D0E0F840
  • editorBracketMatch.border#2868C8
  • editorCursor.foreground#A01830
  • editorLineNumber.activeForeground#A01830
  • editorLineNumber.foreground#A0A8B8
  • input.background#FFFFFF
  • input.border#C8D0E0
  • input.foreground#141820
  • list.activeSelectionBackground#D0E0F8
  • list.hoverBackground#E8ECF2
  • panel.background#ECEEF5
  • sideBar.background#ECEEF5
  • sideBar.foreground#141820
  • sideBarTitle.foreground#2868C8
  • statusBar.background#A01830
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#F5F7FA
  • tab.activeForeground#141820
  • tab.inactiveBackground#ECEEF5
  • terminal.background#F5F7FA
  • terminal.foreground#141820
  • titleBar.activeBackground#ECEEF5
  • titleBar.activeForeground#141820

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8890A0italic
string, string.quoted, string.template, string.interpolated#A01830
constant.character.escape, string.regexp#801028
punctuation.definition.template-expression, punctuation.section.embedded#2868C8
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#7080A0
constant.language, support.constant, constant.language.boolean, constant.language.null, constant.language.undefined#7080A0
keyword, keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop#2868C8
storage.type, storage.modifier, keyword.control.def, keyword.control.class#2868C8
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison#2A3040
entity.name.function, meta.function entity.name.function#C02040
meta.function-call entity.name.function, variable.function, support.function, meta.method-call entity.name.function, entity.name.function.call#C02040
support.function.builtin, support.function.magic, meta.function-call support.function#C02040
meta.method-call, variable.function.member#C02040
entity.name.type, entity.name.class, support.type, support.class, entity.name.type.class#2060B0
entity.other.inherited-class#2060B0italic
entity.name.type.interface, entity.name.type.parameter, entity.name.type.enum#2868C8
variable, variable.other, variable.other.readwrite#141820
variable.parameter, variable.parameter.function#2A3040
variable.other.property, variable.other.object.property, meta.object-literal.key, support.variable.property#C02040
variable.language, variable.language.this, variable.language.self, variable.language.special#2868C8italic
meta.decorator, entity.name.function.decorator, punctuation.definition.decorator, meta.annotation#2060B0
keyword.control.import, keyword.control.export, keyword.control.from, keyword.other.import#2868C8
entity.name.import, entity.name.package, support.module#A01830
entity.name.tag, punctuation.definition.tag#2868C8
entity.other.attribute-name#A01830
support.type.property-name, meta.property-name#C02040
support.constant.property-value, meta.property-value#A01830
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#2060B0
punctuation, punctuation.definition, punctuation.separator, punctuation.terminator#4A5060
markup.heading, entity.name.section#2868C8bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.fenced_code#A01830