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#0A0E14
  • activityBar.foreground#E8E8F0
  • badge.background#C82040
  • badge.foreground#FFFFFF
  • button.background#3888E8
  • button.foreground#FFFFFF
  • dropdown.background#1A2028
  • dropdown.foreground#E8E8F0
  • editor.background#141820
  • editor.foreground#E8E8F0
  • editor.lineHighlightBackground#1A2028
  • editor.selectionBackground#282E3A
  • editorBracketMatch.background#282E3A40
  • editorBracketMatch.border#3888E8
  • editorCursor.foreground#C82040
  • editorLineNumber.activeForeground#C0C0D0
  • editorLineNumber.foreground#404858
  • input.background#1A2028
  • input.border#303848
  • input.foreground#E8E8F0
  • list.activeSelectionBackground#282E3A
  • list.hoverBackground#1E2430
  • panel.background#0F1318
  • sideBar.background#0F1318
  • sideBar.foreground#C8C8D8
  • sideBarTitle.foreground#3888E8
  • statusBar.background#C82040
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#141820
  • tab.activeForeground#FFFFFF
  • tab.inactiveBackground#0F1318
  • terminal.background#141820
  • terminal.foreground#E8E8F0
  • titleBar.activeBackground#141820
  • titleBar.activeForeground#E8E8F0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#404858italic
string, string.quoted, string.template, string.interpolated#C82040
constant.character.escape, string.regexp#E84060
punctuation.definition.template-expression, punctuation.section.embedded#3888E8
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#C0C0D0
constant.language, support.constant, constant.language.boolean, constant.language.null, constant.language.undefined#C0C0D0
keyword, keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop#3888E8
storage.type, storage.modifier, keyword.control.def, keyword.control.class#3888E8
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison#C8C8D8
entity.name.function, meta.function entity.name.function#E84060
meta.function-call entity.name.function, variable.function, support.function, meta.method-call entity.name.function, entity.name.function.call#E84060
support.function.builtin, support.function.magic, meta.function-call support.function#E84060
meta.method-call, variable.function.member#E84060
entity.name.type, entity.name.class, support.type, support.class, entity.name.type.class#58A8F0
entity.other.inherited-class#58A8F0italic
entity.name.type.interface, entity.name.type.parameter, entity.name.type.enum#4898E0
variable, variable.other, variable.other.readwrite#E8E8F0
variable.parameter, variable.parameter.function#C8C8D8
variable.other.property, variable.other.object.property, meta.object-literal.key, support.variable.property#E84060
variable.language, variable.language.this, variable.language.self, variable.language.special#3888E8italic
meta.decorator, entity.name.function.decorator, punctuation.definition.decorator, meta.annotation#58A8F0
keyword.control.import, keyword.control.export, keyword.control.from, keyword.other.import#3888E8
entity.name.import, entity.name.package, support.module#C82040
entity.name.tag, punctuation.definition.tag#3888E8
entity.other.attribute-name#C82040
support.type.property-name, meta.property-name#E84060
support.constant.property-value, meta.property-value#C82040
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#58A8F0
punctuation, punctuation.definition, punctuation.separator, punctuation.terminator#606878
markup.heading, entity.name.section#3888E8bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.fenced_code#C82040