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#F6F2EE
  • activityBar.border#E2DAD5
  • activityBar.foreground#BF2270
  • activityBarBadge.background#BF2270
  • activityBarBadge.foreground#FFFFFF
  • badge.background#BF2270
  • badge.foreground#FFFFFF
  • button.background#BF2270
  • button.foreground#FFFFFF
  • button.hoverBackground#E9380C
  • dropdown.background#FFFFFF
  • dropdown.border#D0C5BE
  • dropdown.foreground#331F29
  • editor.background#FFFFFF
  • editor.foreground#39222E
  • editor.lineHighlightBackground#F6F2EECC
  • editor.selectionBackground#F4D7DE66
  • editorBracketMatch.background#F4D7DE55
  • editorBracketMatch.border#BF2270
  • editorCursor.foreground#BF2270
  • editorGroupHeader.tabsBackground#F6F2EE
  • editorIndentGuide.activeBackground#D0C5BE
  • editorIndentGuide.background#E2DAD588
  • editorLineNumber.activeForeground#8E295C
  • editorLineNumber.foreground#796770AA
  • editorWhitespace.foreground#E2DAD566
  • focusBorder#D0C5BE
  • foreground#39222E
  • gitDecoration.deletedResourceForeground#BF2270
  • gitDecoration.modifiedResourceForeground#BA5808
  • gitDecoration.untrackedResourceForeground#2A7E5F
  • input.background#FFFFFF
  • input.border#D0C5BE
  • input.foreground#331F29
  • inputOption.activeBorder#BF2270
  • list.activeSelectionBackground#F4D7DE
  • list.activeSelectionForeground#39222E
  • list.focusOutline#BF2270
  • list.hoverBackground#FDFCFC
  • list.inactiveSelectionBackground#F0EAE5
  • minimap.selectionHighlight#F4D7DEAA
  • panel.background#F6F2EE
  • panel.border#E2DAD5
  • peekView.border#D0C5BE
  • peekViewEditor.background#F7EEF1
  • peekViewTitle.background#F6F2EE
  • scrollbarSlider.activeBackground#BF2270AA
  • scrollbarSlider.background#D0C5BE66
  • scrollbarSlider.hoverBackground#D0C5BE99
  • sideBar.background#FAF7F5
  • sideBar.border#E2DAD5
  • sideBar.foreground#331F29
  • sideBarTitle.foreground#39222E
  • statusBar.background#F6F2EE
  • statusBar.border#E2DAD5
  • statusBar.foreground#7D5E6D
  • tab.activeBackground#FFFFFF
  • tab.activeForeground#39222E
  • tab.border#E2DAD5
  • tab.inactiveBackground#F0EAE5
  • tab.inactiveForeground#E05D06
  • terminal.ansiBlack#39222E
  • terminal.ansiBlue#E05D06
  • terminal.ansiCyan#796770
  • terminal.ansiGreen#8E295C
  • terminal.ansiMagenta#EE2B5B
  • terminal.ansiRed#BF2270
  • terminal.ansiWhite#39222E
  • terminal.ansiYellow#FBA46A
  • terminal.background#FFFFFF
  • terminal.foreground#39222E
  • titleBar.activeBackground#F6F2EE
  • titleBar.activeForeground#39222E
  • titleBar.inactiveBackground#FAF7F5
  • titleBar.inactiveForeground#796770
  • widget.shadow#69495955

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#897970italic
string, constant.other.symbol, string.regexp, string.template#2A7E5F
constant.character.escape#BA5808
constant.numeric#BA5808
constant.language.boolean, constant.language.null, constant.language.undefined#D6630A
constant, entity.name.constant, support.constant#C72929
keyword, storage.type, storage.modifier, storage.type.function#BF2270
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#A01857
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#7A6A62
storage.type.class, storage.type.interface, storage.type.enum#BF2270
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#9B8B82
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#E05D06
support.type.builtin, entity.name.type.primitive#EF6F1F
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#BF4718
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#D03E87
variable.parameter, variable.parameter.function#5B3941
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#B7386F
variable, meta.definition.variable, variable.other.readwrite#3B2129
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#BF2270
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#A99189
entity.other.attribute-name, entity.other.attribute-name.html#E05D06
support.class.component, entity.name.tag.template.value#BA5808
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#2A7E5F
entity.other.attribute-name.class.css, entity.other.attribute-name.class#D6630A
entity.other.attribute-name.id.css, entity.other.attribute-name.id#BF2270
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#E05D06
markup.heading#BF2270bold
markup.boldbold
markup.italicitalic
markup.quote#3B2129
markup.inline.raw, markup.fenced_code#2A7E5F
invalid, invalid.illegal#C22929