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#111D16
  • activityBar.border#232F28
  • activityBar.foreground#2BAB60
  • activityBarBadge.background#2BAB60
  • activityBarBadge.foreground#0D1711
  • badge.background#2BAB60
  • badge.foreground#0D1711
  • button.background#2BAB60
  • button.foreground#0D1711
  • button.hoverBackground#D22D3A
  • dropdown.background#16221B
  • dropdown.border#32483B
  • dropdown.foreground#EEECE8
  • editor.background#09100D
  • editor.foreground#E6E4DB
  • editor.lineHighlightBackground#111D1699
  • editor.selectionBackground#1D352780
  • editorBracketMatch.background#1D352755
  • editorBracketMatch.border#2BAB60
  • editorCursor.foreground#2BAB60
  • editorGroupHeader.tabsBackground#111D16
  • editorIndentGuide.activeBackground#32483B
  • editorIndentGuide.background#232F2888
  • editorLineNumber.activeForeground#4E85BC
  • editorLineNumber.foreground#7E9A8AAA
  • editorWhitespace.foreground#232F2866
  • focusBorder#32483B
  • foreground#E6E4DB
  • gitDecoration.deletedResourceForeground#F05161
  • gitDecoration.modifiedResourceForeground#E8C545
  • gitDecoration.untrackedResourceForeground#3DB870
  • input.background#16221B
  • input.border#32483B
  • input.foreground#EEECE8
  • inputOption.activeBorder#2BAB60
  • list.activeSelectionBackground#1D3527
  • list.activeSelectionForeground#E6E4DB
  • list.focusOutline#2BAB60
  • list.hoverBackground#17211B
  • list.inactiveSelectionBackground#141F19
  • minimap.selectionHighlight#1D3527AA
  • panel.background#111D16
  • panel.border#232F28
  • peekView.border#32483B
  • peekViewEditor.background#101914
  • peekViewTitle.background#111D16
  • scrollbarSlider.activeBackground#2BAB60AA
  • scrollbarSlider.background#32483B66
  • scrollbarSlider.hoverBackground#32483B99
  • sideBar.background#0D1711
  • sideBar.border#232F28
  • sideBar.foreground#E0DED7
  • sideBarTitle.foreground#E6E4DB
  • statusBar.background#111D16
  • statusBar.border#232F28
  • statusBar.foreground#989381
  • tab.activeBackground#09100D
  • tab.activeForeground#E6E4DB
  • tab.border#232F28
  • tab.inactiveBackground#141F19
  • tab.inactiveForeground#DAB82F
  • terminal.ansiBlack#09100D
  • terminal.ansiBlue#DAB82F
  • terminal.ansiCyan#7E9A8A
  • terminal.ansiGreen#4E85BC
  • terminal.ansiMagenta#377ABE
  • terminal.ansiRed#2BAB60
  • terminal.ansiWhite#E6E4DB
  • terminal.ansiYellow#655515
  • terminal.background#09100D
  • terminal.foreground#E6E4DB
  • titleBar.activeBackground#111D16
  • titleBar.activeForeground#E6E4DB
  • titleBar.inactiveBackground#0D1711
  • titleBar.inactiveForeground#7E9A8A
  • widget.shadow#03070555

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#899F92italic
string, constant.other.symbol, string.regexp, string.template#64C48C
constant.character.escape#EAD686
constant.numeric#E8C545
constant.language.boolean, constant.language.null, constant.language.undefined#E8CD5E
constant, entity.name.constant, support.constant#97D8B2
keyword, storage.type, storage.modifier, storage.type.function#E07B83
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#E89299
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#809388
storage.type.class, storage.type.interface, storage.type.enum#E07B83
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#77887E
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#89ADD2
support.type.builtin, entity.name.type.primitive#A6BFD9
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#E2958D
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#86A8CB
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#E07B83
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#899F92
entity.other.attribute-name, entity.other.attribute-name.html#89ADD2
support.class.component, entity.name.tag.template.value#E8C545
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#64C48C
entity.other.attribute-name.class.css, entity.other.attribute-name.class#E8CD5E
entity.other.attribute-name.id.css, entity.other.attribute-name.id#E07B83
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#89ADD2
markup.heading#E07B83bold
markup.boldbold
markup.italicitalic
markup.quote#E9E7E2
markup.inline.raw, markup.fenced_code#64C48C
invalid, invalid.illegal#FF6B6B