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#1F1B19
  • activityBar.border#363230
  • activityBar.foreground#D95A3A
  • activityBarBadge.background#D95A3A
  • activityBarBadge.foreground#1A1614
  • badge.background#D95A3A
  • badge.foreground#1A1614
  • button.background#D95A3A
  • button.foreground#1A1614
  • button.hoverBackground#C8A241
  • dropdown.background#24201E
  • dropdown.border#3F5046
  • dropdown.foreground#ECEBEA
  • editor.background#141110
  • editor.foreground#E2E1DF
  • editor.lineHighlightBackground#1F1B1999
  • editor.selectionBackground#28313E80
  • editorBracketMatch.background#28313E55
  • editorBracketMatch.border#D95A3A
  • editorCursor.foreground#D95A3A
  • editorGroupHeader.tabsBackground#1F1B19
  • editorIndentGuide.activeBackground#3F5046
  • editorIndentGuide.background#36323088
  • editorLineNumber.activeForeground#C0A359
  • editorLineNumber.foreground#8D929AAA
  • editorWhitespace.foreground#36323066
  • focusBorder#3F5046
  • foreground#E2E1DF
  • gitDecoration.deletedResourceForeground#E0775C
  • gitDecoration.modifiedResourceForeground#E8C545
  • gitDecoration.untrackedResourceForeground#62A77F
  • input.background#24201E
  • input.border#3F5046
  • input.foreground#ECEBEA
  • inputOption.activeBorder#D95A3A
  • list.activeSelectionBackground#28313E
  • list.activeSelectionForeground#E2E1DF
  • list.focusOutline#D95A3A
  • list.hoverBackground#1C1E21
  • list.inactiveSelectionBackground#1B1E22
  • minimap.selectionHighlight#28313EAA
  • panel.background#1F1B19
  • panel.border#363230
  • peekView.border#3F5046
  • peekViewEditor.background#1C1917
  • peekViewTitle.background#1F1B19
  • scrollbarSlider.activeBackground#D95A3AAA
  • scrollbarSlider.background#3F504666
  • scrollbarSlider.hoverBackground#3F504699
  • sideBar.background#1A1614
  • sideBar.border#363230
  • sideBar.foreground#DDDCDA
  • sideBarTitle.foreground#E2E1DF
  • statusBar.background#1F1B19
  • statusBar.border#363230
  • statusBar.foreground#928F87
  • tab.activeBackground#141110
  • tab.activeForeground#E2E1DF
  • tab.border#363230
  • tab.inactiveBackground#1B1E22
  • tab.inactiveForeground#6E8EB9
  • terminal.ansiBlack#141110
  • terminal.ansiBlue#6E8EB9
  • terminal.ansiCyan#8D929A
  • terminal.ansiGreen#C0A359
  • terminal.ansiMagenta#589D75
  • terminal.ansiRed#D95A3A
  • terminal.ansiWhite#E2E1DF
  • terminal.ansiYellow#483236
  • terminal.background#141110
  • terminal.foreground#E2E1DF
  • titleBar.activeBackground#1F1B19
  • titleBar.activeForeground#E2E1DF
  • titleBar.inactiveBackground#1A1614
  • titleBar.inactiveForeground#8D929A
  • widget.shadow#09070755

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#8D929Aitalic
string, constant.other.symbol, string.regexp, string.template#76B28F
constant.character.escape#DFC990
constant.numeric#E8C545
constant.language.boolean, constant.language.null, constant.language.undefined#839EC3
constant, entity.name.constant, support.constant#C4ABAF
keyword, storage.type, storage.modifier, storage.type.function#E0775C
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#E8927D
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#848890
storage.type.class, storage.type.interface, storage.type.enum#E0775C
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#7A7E85
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#95A9C6
support.type.builtin, entity.name.type.primitive#AFBDCF
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#E69C89
variable.parameter, variable.parameter.function#C4C3BF
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#90A4C1
variable, meta.definition.variable, variable.other.readwrite#E7E6E4
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#E0775C
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#8D929A
entity.other.attribute-name, entity.other.attribute-name.html#95A9C6
support.class.component, entity.name.tag.template.value#E8C545
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#76B28F
entity.other.attribute-name.class.css, entity.other.attribute-name.class#839EC3
entity.other.attribute-name.id.css, entity.other.attribute-name.id#E0775C
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#95A9C6
markup.heading#E0775Cbold
markup.boldbold
markup.italicitalic
markup.quote#E7E6E4
markup.inline.raw, markup.fenced_code#76B28F
invalid, invalid.illegal#FF6B6B
Minor Themes by Lenik - VS Code Theme