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#261F1D
  • activityBar.border#49403C
  • activityBar.foreground#DDA73C
  • activityBarBadge.background#DDA73C
  • activityBarBadge.foreground#1E1815
  • badge.background#DDA73C
  • badge.foreground#1E1815
  • button.background#DDA73C
  • button.foreground#1E1815
  • button.hoverBackground#DDA73C
  • dropdown.background#261F1D
  • dropdown.border#49403C
  • dropdown.foreground#FFFFFF
  • editor.background#15100E
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#261F1D99
  • editor.selectionBackground#21323B80
  • editorBracketMatch.background#21323B55
  • editorBracketMatch.border#DDA73C
  • editorCursor.foreground#DDA73C
  • editorGroupHeader.tabsBackground#261F1D
  • editorIndentGuide.activeBackground#49403C
  • editorIndentGuide.background#49403C88
  • editorLineNumber.activeForeground#8DBECE
  • editorLineNumber.foreground#FFFFFFAA
  • editorWhitespace.foreground#49403C66
  • focusBorder#49403C
  • foreground#FFFFFF
  • gitDecoration.deletedResourceForeground#D74E42
  • gitDecoration.modifiedResourceForeground#DAA12F
  • gitDecoration.untrackedResourceForeground#59A679
  • input.background#261F1D
  • input.border#49403C
  • input.foreground#FFFFFF
  • inputOption.activeBorder#DDA73C
  • list.activeSelectionBackground#21323B
  • list.activeSelectionForeground#FFFFFF
  • list.focusOutline#DDA73C
  • list.hoverBackground#261F1D
  • list.inactiveSelectionBackground#21323B
  • minimap.selectionHighlight#21323BAA
  • panel.background#261F1D
  • panel.border#49403C
  • peekView.border#49403C
  • peekViewEditor.background#261F1D
  • peekViewTitle.background#261F1D
  • scrollbarSlider.activeBackground#DDA73CAA
  • scrollbarSlider.background#49403C66
  • scrollbarSlider.hoverBackground#49403C99
  • sideBar.background#1E1815
  • sideBar.border#49403C
  • sideBar.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#261F1D
  • statusBar.border#49403C
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#15100E
  • tab.activeForeground#FFFFFF
  • tab.border#49403C
  • tab.inactiveBackground#21323B
  • tab.inactiveForeground#8DBECE
  • terminal.ansiBlack#15100E
  • terminal.ansiBlue#8DBECE
  • terminal.ansiCyan#FFFFFF
  • terminal.ansiGreen#8DBECE
  • terminal.ansiMagenta#DDA73C
  • terminal.ansiRed#DDA73C
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#21323B
  • terminal.background#15100E
  • terminal.foreground#FFFFFF
  • titleBar.activeBackground#261F1D
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#1E1815
  • titleBar.inactiveForeground#FFFFFF
  • widget.shadow#0A0A0A55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#988E81italic
string, constant.other.symbol, string.regexp, string.template#8DBECE
constant.character.escape#DDA73C
constant.numeric#DDA73C
constant.language.boolean, constant.language.null, constant.language.undefined#DDA73C
constant, entity.name.constant, support.constant#DDA73C
keyword, storage.type, storage.modifier, storage.type.function#DDA73C
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#DDA73C
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#988E81
storage.type.class, storage.type.interface, storage.type.enum#DDA73C
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#988E81
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#8DBECE
support.type.builtin, entity.name.type.primitive#8DBECE
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#DDA73C
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#8DBECE
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#DDA73C
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#988E81
entity.other.attribute-name, entity.other.attribute-name.html#8DBECE
support.class.component, entity.name.tag.template.value#DDA73C
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#59A679
entity.other.attribute-name.class.css, entity.other.attribute-name.class#DDA73C
entity.other.attribute-name.id.css, entity.other.attribute-name.id#DDA73C
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#8DBECE
markup.heading#DDA73Cbold
markup.boldbold
markup.italicitalic
markup.quote#E5E2DC
markup.inline.raw, markup.fenced_code#8DBECE
invalid, invalid.illegal#FF6B6B