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#271E1B
  • activityBar.border#4A403A
  • activityBar.foreground#DD513C
  • activityBarBadge.background#DD513C
  • activityBarBadge.foreground#1F1714
  • badge.background#DD513C
  • badge.foreground#1F1714
  • button.background#DD513C
  • button.foreground#1F1714
  • button.hoverBackground#DD513C
  • dropdown.background#271E1B
  • dropdown.border#4A403A
  • dropdown.foreground#FFFFFF
  • editor.background#16100D
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#271E1B99
  • editor.selectionBackground#213B3480
  • editorBracketMatch.background#213B3455
  • editorBracketMatch.border#DD513C
  • editorCursor.foreground#DD513C
  • editorGroupHeader.tabsBackground#271E1B
  • editorIndentGuide.activeBackground#4A403A
  • editorIndentGuide.background#4A403A88
  • editorLineNumber.activeForeground#82C9B2
  • editorLineNumber.foreground#FFFFFFAA
  • editorWhitespace.foreground#4A403A66
  • focusBorder#4A403A
  • foreground#FFFFFF
  • gitDecoration.deletedResourceForeground#D74E42
  • gitDecoration.modifiedResourceForeground#DAA12F
  • gitDecoration.untrackedResourceForeground#53AC80
  • input.background#271E1B
  • input.border#4A403A
  • input.foreground#FFFFFF
  • inputOption.activeBorder#DD513C
  • list.activeSelectionBackground#213B34
  • list.activeSelectionForeground#FFFFFF
  • list.focusOutline#DD513C
  • list.hoverBackground#271E1B
  • list.inactiveSelectionBackground#213B34
  • minimap.selectionHighlight#213B34AA
  • panel.background#271E1B
  • panel.border#4A403A
  • peekView.border#4A403A
  • peekViewEditor.background#271E1B
  • peekViewTitle.background#271E1B
  • scrollbarSlider.activeBackground#DD513CAA
  • scrollbarSlider.background#4A403A66
  • scrollbarSlider.hoverBackground#4A403A99
  • sideBar.background#1F1714
  • sideBar.border#4A403A
  • sideBar.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#271E1B
  • statusBar.border#4A403A
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#16100D
  • tab.activeForeground#FFFFFF
  • tab.border#4A403A
  • tab.inactiveBackground#213B34
  • tab.inactiveForeground#82C9B2
  • terminal.ansiBlack#16100D
  • terminal.ansiBlue#82C9B2
  • terminal.ansiCyan#FFFFFF
  • terminal.ansiGreen#82C9B2
  • terminal.ansiMagenta#DD513C
  • terminal.ansiRed#DD513C
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#213B34
  • terminal.background#16100D
  • terminal.foreground#FFFFFF
  • titleBar.activeBackground#271E1B
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#1F1714
  • titleBar.inactiveForeground#FFFFFF
  • widget.shadow#0A0A0A55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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