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#291F19
  • activityBar.border#3A312C
  • activityBar.foreground#F5475E
  • activityBarBadge.background#F5475E
  • activityBarBadge.foreground#211812
  • badge.background#F5475E
  • badge.foreground#211812
  • button.background#F5475E
  • button.foreground#211812
  • button.hoverBackground#F5475E
  • dropdown.background#2F241E
  • dropdown.border#54443B
  • dropdown.foreground#FFFFFF
  • editor.background#17100C
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#291F1999
  • editor.selectionBackground#4F222980
  • editorBracketMatch.background#4F222955
  • editorBracketMatch.border#F5475E
  • editorCursor.foreground#F5475E
  • editorGroupHeader.tabsBackground#291F19
  • editorIndentGuide.activeBackground#54443B
  • editorIndentGuide.background#3A312C88
  • editorLineNumber.activeForeground#C9828E
  • editorLineNumber.foreground#FFFFFFAA
  • editorWhitespace.foreground#3A312C66
  • focusBorder#54443B
  • foreground#FFFFFF
  • gitDecoration.deletedResourceForeground#EB475D
  • gitDecoration.modifiedResourceForeground#E2AF36
  • gitDecoration.untrackedResourceForeground#4DB388
  • input.background#2F241E
  • input.border#54443B
  • input.foreground#FFFFFF
  • inputOption.activeBorder#F5475E
  • list.activeSelectionBackground#4F2229
  • list.activeSelectionForeground#FFFFFF
  • list.focusOutline#F5475E
  • list.hoverBackground#271B1D
  • list.inactiveSelectionBackground#2E1A1D
  • minimap.selectionHighlight#4F2229AA
  • panel.background#291F19
  • panel.border#3A312C
  • peekView.border#54443B
  • peekViewEditor.background#271C17
  • peekViewTitle.background#291F19
  • scrollbarSlider.activeBackground#F5475EAA
  • scrollbarSlider.background#54443B66
  • scrollbarSlider.hoverBackground#54443B99
  • sideBar.background#211812
  • sideBar.border#3A312C
  • sideBar.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#291F19
  • statusBar.border#3A312C
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#17100C
  • tab.activeForeground#FFFFFF
  • tab.border#3A312C
  • tab.inactiveBackground#2E1A1D
  • tab.inactiveForeground#DF909D
  • terminal.ansiBlack#17100C
  • terminal.ansiBlue#DF909D
  • terminal.ansiCyan#FFFFFF
  • terminal.ansiGreen#C9828E
  • terminal.ansiMagenta#DDAC3C
  • terminal.ansiRed#F5475E
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#77222E
  • terminal.background#17100C
  • terminal.foreground#FFFFFF
  • titleBar.activeBackground#291F19
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#211812
  • titleBar.inactiveForeground#FFFFFF
  • widget.shadow#0A070555

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#B7ADA4italic
string, constant.other.symbol, string.regexp, string.template#DF909D
constant.character.escape#DDAC3C
constant.numeric#F5475E
constant.language.boolean, constant.language.null, constant.language.undefined#F5475E
constant, entity.name.constant, support.constant#DDB75F
keyword, storage.type, storage.modifier, storage.type.function#F5475E
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#DDB75F
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#B7ADA4
storage.type.class, storage.type.interface, storage.type.enum#F5475E
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#B7ADA4
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#C9828E
support.type.builtin, entity.name.type.primitive#DF909D
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#F5F1EA
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#F5475E
variable.parameter, variable.parameter.function#F5F1EA
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#C9828E
variable, meta.definition.variable, variable.other.readwrite#F5F1EA
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#F5475E
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#B7ADA4
entity.other.attribute-name, entity.other.attribute-name.html#DF909D
support.class.component, entity.name.tag.template.value#F5475E
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#4DB388
entity.other.attribute-name.class.css, entity.other.attribute-name.class#F5475E
entity.other.attribute-name.id.css, entity.other.attribute-name.id#F5475E
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#DF909D
markup.heading#F5475Ebold
markup.boldbold
markup.italicitalic
markup.quote#E8E2D9
markup.inline.raw, markup.fenced_code#DF909D
invalid, invalid.illegal#FF6B6B