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#221B16
  • activityBar.border#38322E
  • activityBar.foreground#E79F23
  • activityBarBadge.background#E79F23
  • activityBarBadge.foreground#1C1612
  • badge.background#E79F23
  • badge.foreground#1C1612
  • button.background#E79F23
  • button.foreground#1C1612
  • button.hoverBackground#D2A92D
  • dropdown.background#27201B
  • dropdown.border#52473D
  • dropdown.foreground#EDECE8
  • editor.background#16120E
  • editor.foreground#E5E3DC
  • editor.lineHighlightBackground#221B1699
  • editor.selectionBackground#283E3780
  • editorBracketMatch.background#283E3755
  • editorBracketMatch.border#E79F23
  • editorCursor.foreground#E79F23
  • editorGroupHeader.tabsBackground#221B16
  • editorIndentGuide.activeBackground#52473D
  • editorIndentGuide.background#38322E88
  • editorLineNumber.activeForeground#D1AF47
  • editorLineNumber.foreground#A19487AA
  • editorWhitespace.foreground#38322E66
  • focusBorder#52473D
  • foreground#E5E3DC
  • gitDecoration.deletedResourceForeground#F05161
  • gitDecoration.modifiedResourceForeground#E8C545
  • gitDecoration.untrackedResourceForeground#5AAF93
  • input.background#27201B
  • input.border#52473D
  • input.foreground#EDECE8
  • inputOption.activeBorder#E79F23
  • list.activeSelectionBackground#283E37
  • list.activeSelectionForeground#E5E3DC
  • list.focusOutline#E79F23
  • list.hoverBackground#1D2522
  • list.inactiveSelectionBackground#1A2320
  • minimap.selectionHighlight#283E37AA
  • panel.background#221B16
  • panel.border#38322E
  • peekView.border#52473D
  • peekViewEditor.background#1E1915
  • peekViewTitle.background#221B16
  • scrollbarSlider.activeBackground#E79F23AA
  • scrollbarSlider.background#52473D66
  • scrollbarSlider.hoverBackground#52473D99
  • sideBar.background#1C1612
  • sideBar.border#38322E
  • sideBar.foreground#DFDDD8
  • sideBarTitle.foreground#E5E3DC
  • statusBar.background#221B16
  • statusBar.border#38322E
  • statusBar.foreground#989281
  • tab.activeBackground#16120E
  • tab.activeForeground#E5E3DC
  • tab.border#38322E
  • tab.inactiveBackground#1A2320
  • tab.inactiveForeground#64B49A
  • terminal.ansiBlack#16120E
  • terminal.ansiBlue#64B49A
  • terminal.ansiCyan#A19487
  • terminal.ansiGreen#D1AF47
  • terminal.ansiMagenta#B8617E
  • terminal.ansiRed#E79F23
  • terminal.ansiWhite#E5E3DC
  • terminal.ansiYellow#67551E
  • terminal.background#16120E
  • terminal.foreground#E5E3DC
  • titleBar.activeBackground#221B16
  • titleBar.activeForeground#E5E3DC
  • titleBar.inactiveBackground#1C1612
  • titleBar.inactiveForeground#A19487
  • widget.shadow#0A070655

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#9F9989italic
string, constant.other.symbol, string.regexp, string.template#6EB9A0
constant.character.escape#A1CEBF
constant.numeric#E8C545
constant.language.boolean, constant.language.null, constant.language.undefined#DABF6C
constant, entity.name.constant, support.constant#E6CF89
keyword, storage.type, storage.modifier, storage.type.function#ECB351
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#EEC277
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#938E80
storage.type.class, storage.type.interface, storage.type.enum#ECB351
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#888477
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#C893A5
support.type.builtin, entity.name.type.primitive#D1ADB9
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#D8B041
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#DF9890
variable.parameter, variable.parameter.function#C8C5BC
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#D8C079
variable, meta.definition.variable, variable.other.readwrite#E9E7E2
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#ECB351
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#9F9989
entity.other.attribute-name, entity.other.attribute-name.html#C893A5
support.class.component, entity.name.tag.template.value#E8C545
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#6EB9A0
entity.other.attribute-name.class.css, entity.other.attribute-name.class#DABF6C
entity.other.attribute-name.id.css, entity.other.attribute-name.id#ECB351
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#C893A5
markup.heading#ECB351bold
markup.boldbold
markup.italicitalic
markup.quote#E9E7E2
markup.inline.raw, markup.fenced_code#6EB9A0
invalid, invalid.illegal#FF6B6B
Minor Themes by Lenik - VS Code Theme