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#F2F0EE
  • activityBar.border#D1CDC7
  • activityBar.foreground#B43622
  • activityBarBadge.background#B43622
  • activityBarBadge.foreground#FDFDFC
  • badge.background#B43622
  • badge.foreground#FDFDFC
  • button.background#B43622
  • button.foreground#FDFDFC
  • button.hoverBackground#B43622
  • dropdown.background#FDFDFC
  • dropdown.border#D1CDC7
  • dropdown.foreground#000000
  • editor.background#FDFDFC
  • editor.foreground#000000
  • editor.lineHighlightBackground#F2F0EECC
  • editor.selectionBackground#DEE8ED66
  • editorBracketMatch.background#DEE8ED55
  • editorBracketMatch.border#B43622
  • editorCursor.foreground#B43622
  • editorGroupHeader.tabsBackground#F2F0EE
  • editorIndentGuide.activeBackground#D1CDC7
  • editorIndentGuide.background#D1CDC788
  • editorLineNumber.activeForeground#39627F
  • editorLineNumber.foreground#000000AA
  • editorWhitespace.foreground#D1CDC766
  • focusBorder#D1CDC7
  • foreground#000000
  • gitDecoration.deletedResourceForeground#AD2B1F
  • gitDecoration.modifiedResourceForeground#AD791F
  • gitDecoration.untrackedResourceForeground#376C4D
  • input.background#FDFDFC
  • input.border#D1CDC7
  • input.foreground#000000
  • inputOption.activeBorder#B43622
  • list.activeSelectionBackground#DEE8ED
  • list.activeSelectionForeground#000000
  • list.focusOutline#B43622
  • list.hoverBackground#FDFDFC
  • list.inactiveSelectionBackground#DEE8ED
  • minimap.selectionHighlight#DEE8EDAA
  • panel.background#F2F0EE
  • panel.border#D1CDC7
  • peekView.border#D1CDC7
  • peekViewEditor.background#FDFDFC
  • peekViewTitle.background#F2F0EE
  • scrollbarSlider.activeBackground#B43622AA
  • scrollbarSlider.background#D1CDC766
  • scrollbarSlider.hoverBackground#D1CDC799
  • sideBar.background#F9F8F6
  • sideBar.border#D1CDC7
  • sideBar.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#F2F0EE
  • statusBar.border#D1CDC7
  • statusBar.foreground#000000
  • tab.activeBackground#FDFDFC
  • tab.activeForeground#000000
  • tab.border#D1CDC7
  • tab.inactiveBackground#DEE8ED
  • tab.inactiveForeground#39627F
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#39627F
  • terminal.ansiCyan#000000
  • terminal.ansiGreen#39627F
  • terminal.ansiMagenta#B43622
  • terminal.ansiRed#B43622
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#DEE8ED
  • terminal.background#FDFDFC
  • terminal.foreground#000000
  • titleBar.activeBackground#F2F0EE
  • titleBar.activeForeground#000000
  • titleBar.inactiveBackground#F9F8F6
  • titleBar.inactiveForeground#000000
  • widget.shadow#6C757F55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#6C757Fitalic
string, constant.other.symbol, string.regexp, string.template#39627F
constant.character.escape#B43622
constant.numeric#B43622
constant.language.boolean, constant.language.null, constant.language.undefined#B43622
constant, entity.name.constant, support.constant#B43622
keyword, storage.type, storage.modifier, storage.type.function#B43622
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#B43622
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#6C757F
storage.type.class, storage.type.interface, storage.type.enum#B43622
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#6C757F
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#39627F
support.type.builtin, entity.name.type.primitive#39627F
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#2A303C
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#B43622
variable.parameter, variable.parameter.function#2A303C
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#39627F
variable, meta.definition.variable, variable.other.readwrite#2A303C
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#B43622
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#6C757F
entity.other.attribute-name, entity.other.attribute-name.html#39627F
support.class.component, entity.name.tag.template.value#B43622
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#376C4D
entity.other.attribute-name.class.css, entity.other.attribute-name.class#B43622
entity.other.attribute-name.id.css, entity.other.attribute-name.id#B43622
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#39627F
markup.heading#B43622bold
markup.boldbold
markup.italicitalic
markup.quote#2A303C
markup.inline.raw, markup.fenced_code#39627F
invalid, invalid.illegal#C22929