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#F1F0EE
  • activityBar.border#D9D7D3
  • activityBar.foreground#C11524
  • activityBarBadge.background#C11524
  • activityBarBadge.foreground#FFFFFF
  • badge.background#C11524
  • badge.foreground#FFFFFF
  • button.background#C11524
  • button.foreground#FFFFFF
  • button.hoverBackground#3F835B
  • dropdown.background#FFFFFF
  • dropdown.border#BAC9C1
  • dropdown.foreground#24382C
  • editor.background#FFFFFF
  • editor.foreground#2A4636
  • editor.lineHighlightBackground#F1F0EECC
  • editor.selectionBackground#E6E0D166
  • editorBracketMatch.background#E6E0D155
  • editorBracketMatch.border#C11524
  • editorCursor.foreground#C11524
  • editorGroupHeader.tabsBackground#F1F0EE
  • editorIndentGuide.activeBackground#BAC9C1
  • editorIndentGuide.background#D9D7D388
  • editorLineNumber.activeForeground#3E7455
  • editorLineNumber.foreground#746E63AA
  • editorWhitespace.foreground#D9D7D366
  • focusBorder#BAC9C1
  • foreground#2A4636
  • gitDecoration.deletedResourceForeground#DA1B2B
  • gitDecoration.modifiedResourceForeground#8C6908
  • gitDecoration.untrackedResourceForeground#396A4E
  • input.background#FFFFFF
  • input.border#BAC9C1
  • input.foreground#24382C
  • inputOption.activeBorder#C11524
  • list.activeSelectionBackground#E6E0D1
  • list.activeSelectionForeground#2A4636
  • list.focusOutline#C11524
  • list.hoverBackground#FAFAF9
  • list.inactiveSelectionBackground#EEE9DD
  • minimap.selectionHighlight#E6E0D1AA
  • panel.background#F1F0EE
  • panel.border#D9D7D3
  • peekView.border#BAC9C1
  • peekViewEditor.background#EFEEEB
  • peekViewTitle.background#F1F0EE
  • scrollbarSlider.activeBackground#C11524AA
  • scrollbarSlider.background#BAC9C166
  • scrollbarSlider.hoverBackground#BAC9C199
  • sideBar.background#F6F5F4
  • sideBar.border#D9D7D3
  • sideBar.foreground#24382C
  • sideBarTitle.foreground#2A4636
  • statusBar.background#F1F0EE
  • statusBar.border#D9D7D3
  • statusBar.foreground#736D5E
  • tab.activeBackground#FFFFFF
  • tab.activeForeground#2A4636
  • tab.border#D9D7D3
  • tab.inactiveBackground#EEE9DD
  • tab.inactiveForeground#96782C
  • terminal.ansiBlack#2A4636
  • terminal.ansiBlue#96782C
  • terminal.ansiCyan#746E63
  • terminal.ansiGreen#3E7455
  • terminal.ansiMagenta#C49A31
  • terminal.ansiRed#C11524
  • terminal.ansiWhite#2A4636
  • terminal.ansiYellow#EADCB8
  • terminal.background#FFFFFF
  • terminal.foreground#2A4636
  • titleBar.activeBackground#F1F0EE
  • titleBar.activeForeground#2A4636
  • titleBar.inactiveBackground#F6F5F4
  • titleBar.inactiveForeground#746E63
  • widget.shadow#455E5055

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#7F786Citalic
string, constant.other.symbol, string.regexp, string.template#396A4E
constant.character.escape#917630
constant.numeric#8C6908
constant.language.boolean, constant.language.null, constant.language.undefined#8E7229
constant, entity.name.constant, support.constant#A8242F
keyword, storage.type, storage.modifier, storage.type.function#C11524
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#A11722
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#6D685F
storage.type.class, storage.type.interface, storage.type.enum#C11524
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#8C877D
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#407255
support.type.builtin, entity.name.type.primitive#548367
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#6A5110
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#D61F2E
variable.parameter, variable.parameter.function#3C4941
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#88723A
variable, meta.definition.variable, variable.other.readwrite#1D2B23
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#C11524
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#9B968C
entity.other.attribute-name, entity.other.attribute-name.html#407255
support.class.component, entity.name.tag.template.value#8C6908
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#396A4E
entity.other.attribute-name.class.css, entity.other.attribute-name.class#8E7229
entity.other.attribute-name.id.css, entity.other.attribute-name.id#C11524
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#407255
markup.heading#C11524bold
markup.boldbold
markup.italicitalic
markup.quote#1D2B23
markup.inline.raw, markup.fenced_code#396A4E
invalid, invalid.illegal#C22929