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#EFF2F5
  • activityBar.border#D6DBE1
  • activityBar.foreground#D41121
  • activityBarBadge.background#D41121
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D41121
  • badge.foreground#FFFFFF
  • button.background#D41121
  • button.foreground#FFFFFF
  • button.hoverBackground#2B7ACA
  • dropdown.background#FFFFFF
  • dropdown.border#BCC7D2
  • dropdown.foreground#3D1418
  • editor.background#FFFFFF
  • editor.foreground#471519
  • editor.lineHighlightBackground#EFF2F5CC
  • editor.selectionBackground#D6E0EB66
  • editorBracketMatch.background#D6E0EB55
  • editorBracketMatch.border#D41121
  • editorCursor.foreground#D41121
  • editorGroupHeader.tabsBackground#EFF2F5
  • editorIndentGuide.activeBackground#BCC7D2
  • editorIndentGuide.background#D6DBE188
  • editorLineNumber.activeForeground#2E669E
  • editorLineNumber.foreground#5E6B78AA
  • editorWhitespace.foreground#D6DBE166
  • focusBorder#BCC7D2
  • foreground#471519
  • gitDecoration.deletedResourceForeground#DA0B1D
  • gitDecoration.modifiedResourceForeground#8C6608
  • gitDecoration.untrackedResourceForeground#1D56C9
  • input.background#FFFFFF
  • input.border#BCC7D2
  • input.foreground#3D1418
  • inputOption.activeBorder#D41121
  • list.activeSelectionBackground#D6E0EB
  • list.activeSelectionForeground#471519
  • list.focusOutline#D41121
  • list.hoverBackground#FCFCFD
  • list.inactiveSelectionBackground#E4EBF1
  • minimap.selectionHighlight#D6E0EBAA
  • panel.background#EFF2F5
  • panel.border#D6DBE1
  • peekView.border#BCC7D2
  • peekViewEditor.background#EDF0F3
  • peekViewTitle.background#EFF2F5
  • scrollbarSlider.activeBackground#D41121AA
  • scrollbarSlider.background#BCC7D266
  • scrollbarSlider.hoverBackground#BCC7D299
  • sideBar.background#F5F7F9
  • sideBar.border#D6DBE1
  • sideBar.foreground#3D1418
  • sideBarTitle.foreground#471519
  • statusBar.background#EFF2F5
  • statusBar.border#D6DBE1
  • statusBar.foreground#5A6877
  • tab.activeBackground#FFFFFF
  • tab.activeForeground#471519
  • tab.border#D6DBE1
  • tab.inactiveBackground#E4EBF1
  • tab.inactiveForeground#206BB6
  • terminal.ansiBlack#471519
  • terminal.ansiBlue#206BB6
  • terminal.ansiCyan#5E6B78
  • terminal.ansiGreen#2E669E
  • terminal.ansiMagenta#F3B416
  • terminal.ansiRed#D41121
  • terminal.ansiWhite#471519
  • terminal.ansiYellow#F8E2AA
  • terminal.background#FFFFFF
  • terminal.foreground#471519
  • titleBar.activeBackground#EFF2F5
  • titleBar.activeForeground#471519
  • titleBar.inactiveBackground#F5F7F9
  • titleBar.inactiveForeground#5E6B78
  • widget.shadow#47596B55

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#1D56C9
constant.character.escape#4880E0
constant.numeric#8C6608
constant.language.boolean, constant.language.null, constant.language.undefined#A27910
constant, entity.name.constant, support.constant#C6101F
keyword, storage.type, storage.modifier, storage.type.function#DA0B1D
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#B90917
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#DA0B1D
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#143D8F
support.type.builtin, entity.name.type.primitive#1A4F9E
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#E01F2F
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#2B60B1
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#DA0B1D
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#898F9F
entity.other.attribute-name, entity.other.attribute-name.html#143D8F
support.class.component, entity.name.tag.template.value#8C6608
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#1D56C9
entity.other.attribute-name.class.css, entity.other.attribute-name.class#A27910
entity.other.attribute-name.id.css, entity.other.attribute-name.id#DA0B1D
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#143D8F
markup.heading#DA0B1Dbold
markup.boldbold
markup.italicitalic
markup.quote#1B2132
markup.inline.raw, markup.fenced_code#1D56C9
invalid, invalid.illegal#C22929