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#F1F3F4
  • activityBar.border#D8DCDE
  • activityBar.foreground#C61010
  • activityBarBadge.background#C61010
  • activityBarBadge.foreground#FFFFFF
  • badge.background#C61010
  • badge.foreground#FFFFFF
  • button.background#C61010
  • button.foreground#FFFFFF
  • button.hoverBackground#C91D1D
  • dropdown.background#FFFFFF
  • dropdown.border#BECFCA
  • dropdown.foreground#761919
  • editor.background#FFFFFF
  • editor.foreground#8B1818
  • editor.lineHighlightBackground#F1F3F4CC
  • editor.selectionBackground#D9E8E366
  • editorBracketMatch.background#D9E8E355
  • editorBracketMatch.border#C61010
  • editorCursor.foreground#C61010
  • editorGroupHeader.tabsBackground#F1F3F4
  • editorIndentGuide.activeBackground#BECFCA
  • editorIndentGuide.background#D8DCDE88
  • editorLineNumber.activeForeground#3F836C
  • editorLineNumber.foreground#5E786FAA
  • editorWhitespace.foreground#D8DCDE66
  • focusBorder#BECFCA
  • foreground#8B1818
  • gitDecoration.deletedResourceForeground#E00606
  • gitDecoration.modifiedResourceForeground#8C5508
  • gitDecoration.untrackedResourceForeground#2D6C40
  • input.background#FFFFFF
  • input.border#BECFCA
  • input.foreground#761919
  • inputOption.activeBorder#C61010
  • list.activeSelectionBackground#D9E8E3
  • list.activeSelectionForeground#8B1818
  • list.focusOutline#C61010
  • list.hoverBackground#FCFDFD
  • list.inactiveSelectionBackground#E7EFEC
  • minimap.selectionHighlight#D9E8E3AA
  • panel.background#F1F3F4
  • panel.border#D8DCDE
  • peekView.border#BECFCA
  • peekViewEditor.background#EEF0F1
  • peekViewTitle.background#F1F3F4
  • scrollbarSlider.activeBackground#C61010AA
  • scrollbarSlider.background#BECFCA66
  • scrollbarSlider.hoverBackground#BECFCA99
  • sideBar.background#F6F8F8
  • sideBar.border#D8DCDE
  • sideBar.foreground#761919
  • sideBarTitle.foreground#8B1818
  • statusBar.background#F1F3F4
  • statusBar.border#D8DCDE
  • statusBar.foreground#4C6C61
  • tab.activeBackground#FFFFFF
  • tab.activeForeground#8B1818
  • tab.border#D8DCDE
  • tab.inactiveBackground#E7EFEC
  • tab.inactiveForeground#3F836C
  • terminal.ansiBlack#8B1818
  • terminal.ansiBlue#3F836C
  • terminal.ansiCyan#5E786F
  • terminal.ansiGreen#3F836C
  • terminal.ansiMagenta#45A182
  • terminal.ansiRed#C61010
  • terminal.ansiWhite#8B1818
  • terminal.ansiYellow#F4D4BE
  • terminal.background#FFFFFF
  • terminal.foreground#8B1818
  • titleBar.activeBackground#F1F3F4
  • titleBar.activeForeground#8B1818
  • titleBar.inactiveBackground#F6F8F8
  • titleBar.inactiveForeground#5E786F
  • widget.shadow#4C5E6755

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#7A7171italic
string, constant.other.symbol, string.regexp, string.template#2D6C40
constant.character.escape#8C5508
constant.numeric#8C5508
constant.language.boolean, constant.language.null, constant.language.undefined#A26A10
constant, entity.name.constant, support.constant#C20505
keyword, storage.type, storage.modifier, storage.type.function#E00606
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#C20505
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#6A6262
storage.type.class, storage.type.interface, storage.type.enum#E00606
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#8B8484
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#5B4949
support.type.builtin, entity.name.type.primitive#6A5858
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#6A4810
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#EF1F1F
variable.parameter, variable.parameter.function#4A4040
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#8C4040
variable, meta.definition.variable, variable.other.readwrite#2A1818
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#E00606
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#998F8F
entity.other.attribute-name, entity.other.attribute-name.html#5B4949
support.class.component, entity.name.tag.template.value#8C5508
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#2D6C40
entity.other.attribute-name.class.css, entity.other.attribute-name.class#A26A10
entity.other.attribute-name.id.css, entity.other.attribute-name.id#E00606
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#5B4949
markup.heading#E00606bold
markup.boldbold
markup.italicitalic
markup.quote#2A1818
markup.inline.raw, markup.fenced_code#2D6C40
invalid, invalid.illegal#C22929