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#F3F1EC
  • activityBar.border#CBD8D2
  • activityBar.foreground#AE3A29
  • activityBarBadge.background#AE3A29
  • activityBarBadge.foreground#FDFDFC
  • badge.background#AE3A29
  • badge.foreground#FDFDFC
  • button.background#AE3A29
  • button.foreground#FDFDFC
  • button.hoverBackground#AE3A29
  • dropdown.background#FDFDFC
  • dropdown.border#B5C5BE
  • dropdown.foreground#362D26
  • editor.background#FDFDFC
  • editor.foreground#42362E
  • editor.lineHighlightBackground#F3F1ECCC
  • editor.selectionBackground#D9E8E466
  • editorBracketMatch.background#D9E8E455
  • editorBracketMatch.border#AE3A29
  • editorCursor.foreground#AE3A29
  • editorGroupHeader.tabsBackground#F3F1EC
  • editorIndentGuide.activeBackground#B5C5BE
  • editorIndentGuide.background#CBD8D288
  • editorLineNumber.activeForeground#497965
  • editorLineNumber.foreground#547869AA
  • editorWhitespace.foreground#CBD8D266
  • focusBorder#B5C5BE
  • foreground#42362E
  • gitDecoration.deletedResourceForeground#A64030
  • gitDecoration.modifiedResourceForeground#8B6E18
  • gitDecoration.untrackedResourceForeground#3B6855
  • input.background#FDFDFC
  • input.border#B5C5BE
  • input.foreground#362D26
  • inputOption.activeBorder#AE3A29
  • list.activeSelectionBackground#D9E8E4
  • list.activeSelectionForeground#42362E
  • list.focusOutline#AE3A29
  • list.hoverBackground#F6F9F8
  • list.inactiveSelectionBackground#E6EFED
  • minimap.selectionHighlight#D9E8E4AA
  • panel.background#F3F1EC
  • panel.border#CBD8D2
  • peekView.border#B5C5BE
  • peekViewEditor.background#F5F2EA
  • peekViewTitle.background#F3F1EC
  • scrollbarSlider.activeBackground#AE3A29AA
  • scrollbarSlider.background#B5C5BE66
  • scrollbarSlider.hoverBackground#B5C5BE99
  • sideBar.background#F8F6F2
  • sideBar.border#CBD8D2
  • sideBar.foreground#3B322B
  • sideBarTitle.foreground#42362E
  • statusBar.background#F3F1EC
  • statusBar.border#CBD8D2
  • statusBar.foreground#547466
  • tab.activeBackground#FDFDFC
  • tab.activeForeground#42362E
  • tab.border#CBD8D2
  • tab.inactiveBackground#E6EFED
  • tab.inactiveForeground#467C6E
  • terminal.ansiBlack#42362E
  • terminal.ansiBlue#467C6E
  • terminal.ansiCyan#547869
  • terminal.ansiGreen#497965
  • terminal.ansiMagenta#CFB159
  • terminal.ansiRed#AE3A29
  • terminal.ansiWhite#42362E
  • terminal.ansiYellow#F1E6C6
  • terminal.background#FDFDFC
  • terminal.foreground#42362E
  • titleBar.activeBackground#F3F1EC
  • titleBar.activeForeground#42362E
  • titleBar.inactiveBackground#F8F6F2
  • titleBar.inactiveForeground#547869
  • widget.shadow#67574C55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#587468italic
string, constant.other.symbol, string.regexp, string.template#467C6E
constant.character.escape#A68930
constant.numeric#8B6E18
constant.language.boolean, constant.language.null, constant.language.undefined#957823
constant, entity.name.constant, support.constant#7E3125
keyword, storage.type, storage.modifier, storage.type.function#AE3A29
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#8E3729
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#556D63
storage.type.class, storage.type.interface, storage.type.enum#AE3A29
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#6E877C
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#4C766C
support.type.builtin, entity.name.type.primitive#548C7E
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#963A2C
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#B54F40
variable.parameter, variable.parameter.function#5D5046
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#517063
variable, meta.definition.variable, variable.other.readwrite#42362E
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#AE3A29
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#587468
entity.other.attribute-name, entity.other.attribute-name.html#4C766C
support.class.component, entity.name.tag.template.value#8B6E18
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#467C6E
entity.other.attribute-name.class.css, entity.other.attribute-name.class#497965
entity.other.attribute-name.id.css, entity.other.attribute-name.id#AE3A29
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#4C766C
markup.heading#AE3A29bold
markup.boldbold
markup.italicitalic
markup.quote#42362E
markup.inline.raw, markup.fenced_code#467C6E
invalid, invalid.illegal#C22929