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#16221C
  • activityBar.border#28332E
  • activityBar.foreground#42BE37
  • activityBarBadge.background#42BE37
  • activityBarBadge.foreground#121C17
  • badge.background#42BE37
  • badge.foreground#121C17
  • button.background#42BE37
  • button.foreground#121C17
  • button.hoverBackground#42BE37
  • dropdown.background#1B2721
  • dropdown.border#3A4A41
  • dropdown.foreground#DDE3DF
  • editor.background#0D1613
  • editor.foreground#C0CEC5
  • editor.lineHighlightBackground#16221C99
  • editor.selectionBackground#203C2A80
  • editorBracketMatch.background#203C2A55
  • editorBracketMatch.border#42BE37
  • editorCursor.foreground#42BE37
  • editorGroupHeader.tabsBackground#16221C
  • editorIndentGuide.activeBackground#3A4A41
  • editorIndentGuide.background#28332E88
  • editorLineNumber.activeForeground#52C247
  • editorLineNumber.foreground#6E8778AA
  • editorWhitespace.foreground#28332E66
  • focusBorder#3A4A41
  • foreground#C0CEC5
  • gitDecoration.deletedResourceForeground#DA4E4E
  • gitDecoration.modifiedResourceForeground#EDC626
  • gitDecoration.untrackedResourceForeground#4DB143
  • input.background#1B2721
  • input.border#3A4A41
  • input.foreground#DDE3DF
  • inputOption.activeBorder#42BE37
  • list.activeSelectionBackground#203C2A
  • list.activeSelectionForeground#C0CEC5
  • list.focusOutline#42BE37
  • list.hoverBackground#181D20
  • list.inactiveSelectionBackground#151B1E
  • minimap.selectionHighlight#203C2AAA
  • panel.background#16221C
  • panel.border#28332E
  • peekView.border#3A4A41
  • peekViewEditor.background#101815
  • peekViewTitle.background#16221C
  • scrollbarSlider.activeBackground#42BE37AA
  • scrollbarSlider.background#3A4A4166
  • scrollbarSlider.hoverBackground#3A4A4199
  • sideBar.background#121C17
  • sideBar.border#28332E
  • sideBar.foreground#BCC8C0
  • sideBarTitle.foreground#C0CEC5
  • statusBar.background#16221C
  • statusBar.border#28332E
  • statusBar.foreground#7B8E83
  • tab.activeBackground#0D1613
  • tab.activeForeground#C0CEC5
  • tab.border#28332E
  • tab.inactiveBackground#151B1E
  • tab.inactiveForeground#668FA3
  • terminal.ansiBlack#0D1613
  • terminal.ansiBlue#668FA3
  • terminal.ansiCyan#6E8778
  • terminal.ansiGreen#52C247
  • terminal.ansiMagenta#EDC31D
  • terminal.ansiRed#42BE37
  • terminal.ansiWhite#C0CEC5
  • terminal.ansiYellow#7E2525
  • terminal.background#0D1613
  • terminal.foreground#C0CEC5
  • titleBar.activeBackground#16221C
  • titleBar.activeForeground#C0CEC5
  • titleBar.inactiveBackground#121C17
  • titleBar.inactiveForeground#6E8778
  • widget.shadow#060A0855

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#6E8778italic
string, constant.other.symbol, string.regexp, string.template#4DB143
constant.character.escape#F0D04C
constant.numeric#EDC626
constant.language.boolean, constant.language.null, constant.language.undefined#E4BE25
constant, entity.name.constant, support.constant#DD5F5F
keyword, storage.type, storage.modifier, storage.type.function#DA4E4E
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#CC3E3E
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#67796F
storage.type.class, storage.type.interface, storage.type.enum#DA4E4E
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#5B6760
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#668FA3
support.type.builtin, entity.name.type.primitive#769EB2
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#42BE37
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#67C95E
variable.parameter, variable.parameter.function#9CABA1
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#87A192
variable, meta.definition.variable, variable.other.readwrite#C0CEC5
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#DA4E4E
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#6E8778
entity.other.attribute-name, entity.other.attribute-name.html#668FA3
support.class.component, entity.name.tag.template.value#EDC626
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#4DB143
entity.other.attribute-name.class.css, entity.other.attribute-name.class#42BE37
entity.other.attribute-name.id.css, entity.other.attribute-name.id#DA4E4E
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#668FA3
markup.heading#DA4E4Ebold
markup.boldbold
markup.italicitalic
markup.quote#C0CEC5
markup.inline.raw, markup.fenced_code#4DB143
invalid, invalid.illegal#FF6B6B