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#EEF0F2
  • activityBar.border#C7CCD1
  • activityBar.foreground#A82F24
  • activityBarBadge.background#A82F24
  • activityBarBadge.foreground#FFFFFF
  • badge.background#A82F24
  • badge.foreground#FFFFFF
  • button.background#A82F24
  • button.foreground#FFFFFF
  • button.hoverBackground#A82F24
  • dropdown.background#FFFFFF
  • dropdown.border#C7CCD1
  • dropdown.foreground#000000
  • editor.background#FFFFFF
  • editor.foreground#000000
  • editor.lineHighlightBackground#EEF0F2CC
  • editor.selectionBackground#DEE8ED66
  • editorBracketMatch.background#DEE8ED55
  • editorBracketMatch.border#A82F24
  • editorCursor.foreground#A82F24
  • editorGroupHeader.tabsBackground#EEF0F2
  • editorIndentGuide.activeBackground#C7CCD1
  • editorIndentGuide.background#C7CCD188
  • editorLineNumber.activeForeground#345C79
  • editorLineNumber.foreground#000000AA
  • editorWhitespace.foreground#C7CCD166
  • focusBorder#C7CCD1
  • foreground#000000
  • gitDecoration.deletedResourceForeground#A5281D
  • gitDecoration.modifiedResourceForeground#AD7E1F
  • gitDecoration.untrackedResourceForeground#396A52
  • input.background#FFFFFF
  • input.border#C7CCD1
  • input.foreground#000000
  • inputOption.activeBorder#A82F24
  • list.activeSelectionBackground#DEE8ED
  • list.activeSelectionForeground#000000
  • list.focusOutline#A82F24
  • list.hoverBackground#FFFFFF
  • list.inactiveSelectionBackground#DEE8ED
  • minimap.selectionHighlight#DEE8EDAA
  • panel.background#EEF0F2
  • panel.border#C7CCD1
  • peekView.border#C7CCD1
  • peekViewEditor.background#FFFFFF
  • peekViewTitle.background#EEF0F2
  • scrollbarSlider.activeBackground#A82F24AA
  • scrollbarSlider.background#C7CCD166
  • scrollbarSlider.hoverBackground#C7CCD199
  • sideBar.background#F6F7F9
  • sideBar.border#C7CCD1
  • sideBar.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#EEF0F2
  • statusBar.border#C7CCD1
  • statusBar.foreground#000000
  • tab.activeBackground#FFFFFF
  • tab.activeForeground#000000
  • tab.border#C7CCD1
  • tab.inactiveBackground#DEE8ED
  • tab.inactiveForeground#345C79
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#345C79
  • terminal.ansiCyan#000000
  • terminal.ansiGreen#345C79
  • terminal.ansiMagenta#A82F24
  • terminal.ansiRed#A82F24
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#DEE8ED
  • terminal.background#FFFFFF
  • terminal.foreground#000000
  • titleBar.activeBackground#EEF0F2
  • titleBar.activeForeground#000000
  • titleBar.inactiveBackground#F6F7F9
  • titleBar.inactiveForeground#000000
  • widget.shadow#6A758155

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#6A7581italic
string, constant.other.symbol, string.regexp, string.template#345C79
constant.character.escape#A82F24
constant.numeric#A82F24
constant.language.boolean, constant.language.null, constant.language.undefined#A82F24
constant, entity.name.constant, support.constant#A82F24
keyword, storage.type, storage.modifier, storage.type.function#A82F24
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#A82F24
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#6A7581
storage.type.class, storage.type.interface, storage.type.enum#A82F24
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#6A7581
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#345C79
support.type.builtin, entity.name.type.primitive#345C79
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#242C38
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#A82F24
variable.parameter, variable.parameter.function#242C38
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#345C79
variable, meta.definition.variable, variable.other.readwrite#242C38
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#A82F24
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#6A7581
entity.other.attribute-name, entity.other.attribute-name.html#345C79
support.class.component, entity.name.tag.template.value#A82F24
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#396A52
entity.other.attribute-name.class.css, entity.other.attribute-name.class#A82F24
entity.other.attribute-name.id.css, entity.other.attribute-name.id#A82F24
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#345C79
markup.heading#A82F24bold
markup.boldbold
markup.italicitalic
markup.quote#242C38
markup.inline.raw, markup.fenced_code#345C79
invalid, invalid.illegal#C22929