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#EFEFF1
  • activityBar.border#D4D5D9
  • activityBar.foreground#B6202D
  • activityBarBadge.background#B6202D
  • activityBarBadge.foreground#FFFFFF
  • badge.background#B6202D
  • badge.foreground#FFFFFF
  • button.background#B6202D
  • button.foreground#FFFFFF
  • button.hoverBackground#916546
  • dropdown.background#FFFFFF
  • dropdown.border#BDC0C7
  • dropdown.foreground#53282B
  • editor.background#FFFFFF
  • editor.foreground#642B30
  • editor.lineHighlightBackground#EFEFF1CC
  • editor.selectionBackground#E5DCDF66
  • editorBracketMatch.background#E5DCDF55
  • editorBracketMatch.border#B6202D
  • editorCursor.foreground#B6202D
  • editorGroupHeader.tabsBackground#EFEFF1
  • editorIndentGuide.activeBackground#BDC0C7
  • editorIndentGuide.background#D4D5D988
  • editorLineNumber.activeForeground#815664
  • editorLineNumber.foreground#7C6A70AA
  • editorWhitespace.foreground#D4D5D966
  • focusBorder#BDC0C7
  • foreground#642B30
  • gitDecoration.deletedResourceForeground#C6101F
  • gitDecoration.modifiedResourceForeground#8C6908
  • gitDecoration.untrackedResourceForeground#1F5CD6
  • input.background#FFFFFF
  • input.border#BDC0C7
  • input.foreground#53282B
  • inputOption.activeBorder#B6202D
  • list.activeSelectionBackground#E5DCDF
  • list.activeSelectionForeground#642B30
  • list.focusOutline#B6202D
  • list.hoverBackground#FAFAFA
  • list.inactiveSelectionBackground#E6E7EA
  • minimap.selectionHighlight#E5DCDFAA
  • panel.background#EFEFF1
  • panel.border#D4D5D9
  • peekView.border#BDC0C7
  • peekViewEditor.background#EFEBED
  • peekViewTitle.background#EFEFF1
  • scrollbarSlider.activeBackground#B6202DAA
  • scrollbarSlider.background#BDC0C766
  • scrollbarSlider.hoverBackground#BDC0C799
  • sideBar.background#F4F5F6
  • sideBar.border#D4D5D9
  • sideBar.foreground#53282B
  • sideBarTitle.foreground#642B30
  • statusBar.background#EFEFF1
  • statusBar.border#D4D5D9
  • statusBar.foreground#636A79
  • tab.activeBackground#FFFFFF
  • tab.activeForeground#642B30
  • tab.border#D4D5D9
  • tab.inactiveBackground#E6E7EA
  • tab.inactiveForeground#6C7689
  • terminal.ansiBlack#642B30
  • terminal.ansiBlue#6C7689
  • terminal.ansiCyan#7C6A70
  • terminal.ansiGreen#815664
  • terminal.ansiMagenta#A97083
  • terminal.ansiRed#B6202D
  • terminal.ansiWhite#642B30
  • terminal.ansiYellow#E4D7CD
  • terminal.background#FFFFFF
  • terminal.foreground#642B30
  • titleBar.activeBackground#EFEFF1
  • titleBar.activeForeground#642B30
  • titleBar.inactiveBackground#F4F5F6
  • titleBar.inactiveForeground#7C6A70
  • widget.shadow#50566255

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#6B7080italic
string, constant.other.symbol, string.regexp, string.template#1F5CD6
constant.character.escape#4880E0
constant.numeric#8C6908
constant.language.boolean, constant.language.null, constant.language.undefined#A27910
constant, entity.name.constant, support.constant#AF0E19
keyword, storage.type, storage.modifier, storage.type.function#C6101F
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#A00E18
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#C6101F
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#394F7F
support.type.builtin, entity.name.type.primitive#4B6191
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#6A5110
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#D92030
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#4A68B0
variable, meta.definition.variable, variable.other.readwrite#1B2132
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#C6101F
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#898F9F
entity.other.attribute-name, entity.other.attribute-name.html#394F7F
support.class.component, entity.name.tag.template.value#8C6908
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#1F5CD6
entity.other.attribute-name.class.css, entity.other.attribute-name.class#A27910
entity.other.attribute-name.id.css, entity.other.attribute-name.id#C6101F
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#394F7F
markup.heading#C6101Fbold
markup.boldbold
markup.italicitalic
markup.quote#1B2132
markup.inline.raw, markup.fenced_code#1F5CD6
invalid, invalid.illegal#C22929