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#F0F1F5
  • activityBar.border#D6D9E1
  • activityBar.foreground#7F28BD
  • activityBarBadge.background#7F28BD
  • activityBarBadge.foreground#FFFFFF
  • badge.background#7F28BD
  • badge.foreground#FFFFFF
  • button.background#7F28BD
  • button.foreground#FFFFFF
  • button.hoverBackground#DC1829
  • dropdown.background#FFFFFF
  • dropdown.border#BFC4CF
  • dropdown.foreground#1D202A
  • editor.background#FFFFFF
  • editor.foreground#212530
  • editor.lineHighlightBackground#F0F1F5CC
  • editor.selectionBackground#D7F4EA66
  • editorBracketMatch.background#D7F4EA55
  • editorBracketMatch.border#7F28BD
  • editorCursor.foreground#7F28BD
  • editorGroupHeader.tabsBackground#F0F1F5
  • editorIndentGuide.activeBackground#BFC4CF
  • editorIndentGuide.background#D6D9E188
  • editorLineNumber.activeForeground#279B57
  • editorLineNumber.foreground#606676AA
  • editorWhitespace.foreground#D6D9E166
  • focusBorder#BFC4CF
  • foreground#212530
  • gitDecoration.deletedResourceForeground#A928A1
  • gitDecoration.modifiedResourceForeground#8A6500
  • gitDecoration.untrackedResourceForeground#1E8F53
  • input.background#FFFFFF
  • input.border#BFC4CF
  • input.foreground#1D202A
  • inputOption.activeBorder#7F28BD
  • list.activeSelectionBackground#D7F4EA
  • list.activeSelectionForeground#212530
  • list.focusOutline#7F28BD
  • list.hoverBackground#FCFCFD
  • list.inactiveSelectionBackground#E7E9EF
  • minimap.selectionHighlight#D7F4EAAA
  • panel.background#F0F1F5
  • panel.border#D6D9E1
  • peekView.border#BFC4CF
  • peekViewEditor.background#ECEEF3
  • peekViewTitle.background#F0F1F5
  • scrollbarSlider.activeBackground#7F28BDAA
  • scrollbarSlider.background#BFC4CF66
  • scrollbarSlider.hoverBackground#BFC4CF99
  • sideBar.background#F6F7F9
  • sideBar.border#D6D9E1
  • sideBar.foreground#1D202A
  • sideBarTitle.foreground#212530
  • statusBar.background#F0F1F5
  • statusBar.border#D6D9E1
  • statusBar.foreground#5A6177
  • tab.activeBackground#FFFFFF
  • tab.activeForeground#212530
  • tab.border#D6D9E1
  • tab.inactiveBackground#E7E9EF
  • tab.inactiveForeground#156BC1
  • terminal.ansiBlack#212530
  • terminal.ansiBlue#156BC1
  • terminal.ansiCyan#606676
  • terminal.ansiGreen#279B57
  • terminal.ansiMagenta#11B4D4
  • terminal.ansiRed#7F28BD
  • terminal.ansiWhite#212530
  • terminal.ansiYellow#FBE36A
  • terminal.background#FFFFFF
  • terminal.foreground#212530
  • titleBar.activeBackground#F0F1F5
  • titleBar.activeForeground#212530
  • titleBar.inactiveBackground#F6F7F9
  • titleBar.inactiveForeground#606676
  • widget.shadow#49546955

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#6F7685italic
string, constant.other.symbol, string.regexp, string.template#1E8F53
constant.character.escape#1B6B79
constant.numeric#8A6500
constant.language.boolean, constant.language.null, constant.language.undefined#B7860B
constant, entity.name.constant, support.constant#C6101F
keyword, storage.type, storage.modifier, storage.type.function#7F28BD
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#9C30C0
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#5B6371
storage.type.class, storage.type.interface, storage.type.enum#7F28BD
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#7A8290
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#1D56C9
support.type.builtin, entity.name.type.primitive#2C6BD8
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#1A7A45
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#A928A1
variable.parameter, variable.parameter.function#3A4050
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#5B4B9B
variable, meta.definition.variable, variable.other.readwrite#1A1E28
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#7F28BD
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#898F9F
entity.other.attribute-name, entity.other.attribute-name.html#1D56C9
support.class.component, entity.name.tag.template.value#8A6500
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#1E8F53
entity.other.attribute-name.class.css, entity.other.attribute-name.class#B7860B
entity.other.attribute-name.id.css, entity.other.attribute-name.id#7F28BD
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#1D56C9
markup.heading#7F28BDbold
markup.boldbold
markup.italicitalic
markup.quote#1A1E28
markup.inline.raw, markup.fenced_code#1E8F53
invalid, invalid.illegal#C22929
Minor Themes by Lenik - VS Code Theme