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#261E1C
  • activityBar.border#4A3E3A
  • activityBar.foreground#DD493C
  • activityBarBadge.background#DD493C
  • activityBarBadge.foreground#1F1714
  • badge.background#DD493C
  • badge.foreground#1F1714
  • button.background#DD493C
  • button.foreground#1F1714
  • button.hoverBackground#DD493C
  • dropdown.background#261E1C
  • dropdown.border#4A3E3A
  • dropdown.foreground#FFFFFF
  • editor.background#160F0E
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#261E1C99
  • editor.selectionBackground#22303A80
  • editorBracketMatch.background#22303A55
  • editorBracketMatch.border#DD493C
  • editorCursor.foreground#DD493C
  • editorGroupHeader.tabsBackground#261E1C
  • editorIndentGuide.activeBackground#4A3E3A
  • editorIndentGuide.background#4A3E3A88
  • editorLineNumber.activeForeground#8DB8CE
  • editorLineNumber.foreground#FFFFFFAA
  • editorWhitespace.foreground#4A3E3A66
  • focusBorder#4A3E3A
  • foreground#FFFFFF
  • gitDecoration.deletedResourceForeground#DA4B3E
  • gitDecoration.modifiedResourceForeground#D49A35
  • gitDecoration.untrackedResourceForeground#5CA37A
  • input.background#261E1C
  • input.border#4A3E3A
  • input.foreground#FFFFFF
  • inputOption.activeBorder#DD493C
  • list.activeSelectionBackground#22303A
  • list.activeSelectionForeground#FFFFFF
  • list.focusOutline#DD493C
  • list.hoverBackground#261E1C
  • list.inactiveSelectionBackground#22303A
  • minimap.selectionHighlight#22303AAA
  • panel.background#261E1C
  • panel.border#4A3E3A
  • peekView.border#4A3E3A
  • peekViewEditor.background#261E1C
  • peekViewTitle.background#261E1C
  • scrollbarSlider.activeBackground#DD493CAA
  • scrollbarSlider.background#4A3E3A66
  • scrollbarSlider.hoverBackground#4A3E3A99
  • sideBar.background#1F1714
  • sideBar.border#4A3E3A
  • sideBar.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#261E1C
  • statusBar.border#4A3E3A
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#160F0E
  • tab.activeForeground#FFFFFF
  • tab.border#4A3E3A
  • tab.inactiveBackground#22303A
  • tab.inactiveForeground#8DB8CE
  • terminal.ansiBlack#160F0E
  • terminal.ansiBlue#8DB8CE
  • terminal.ansiCyan#FFFFFF
  • terminal.ansiGreen#8DB8CE
  • terminal.ansiMagenta#DD493C
  • terminal.ansiRed#DD493C
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#22303A
  • terminal.background#160F0E
  • terminal.foreground#FFFFFF
  • titleBar.activeBackground#261E1C
  • 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#8DB8CE
constant.character.escape#DD493C
constant.numeric#DD493C
constant.language.boolean, constant.language.null, constant.language.undefined#DD493C
constant, entity.name.constant, support.constant#DD493C
keyword, storage.type, storage.modifier, storage.type.function#DD493C
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#DD493C
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#DD493C
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#8DB8CE
support.type.builtin, entity.name.type.primitive#8DB8CE
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#E5E2DC
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#DD493C
variable.parameter, variable.parameter.function#E5E2DC
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#8DB8CE
variable, meta.definition.variable, variable.other.readwrite#E5E2DC
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#DD493C
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#988C81
entity.other.attribute-name, entity.other.attribute-name.html#8DB8CE
support.class.component, entity.name.tag.template.value#DD493C
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#5CA37A
entity.other.attribute-name.class.css, entity.other.attribute-name.class#DD493C
entity.other.attribute-name.id.css, entity.other.attribute-name.id#DD493C
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#8DB8CE
markup.heading#DD493Cbold
markup.boldbold
markup.italicitalic
markup.quote#E5E2DC
markup.inline.raw, markup.fenced_code#8DB8CE
invalid, invalid.illegal#FF6B6B