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#EEF0F1
  • activityBar.border#D9DBDD
  • activityBar.foreground#B4222E
  • activityBarBadge.background#B4222E
  • activityBarBadge.foreground#FCFDFD
  • badge.background#B4222E
  • badge.foreground#FCFDFD
  • button.background#B4222E
  • button.foreground#FCFDFD
  • button.hoverBackground#3A8188
  • dropdown.background#FCFDFD
  • dropdown.border#B9C9CB
  • dropdown.foreground#272E35
  • editor.background#FCFDFD
  • editor.foreground#2E3842
  • editor.lineHighlightBackground#EEF0F1CC
  • editor.selectionBackground#DAE7E066
  • editorBracketMatch.background#DAE7E055
  • editorBracketMatch.border#B4222E
  • editorCursor.foreground#B4222E
  • editorGroupHeader.tabsBackground#EEF0F1
  • editorIndentGuide.activeBackground#B9C9CB
  • editorIndentGuide.background#D9DBDD88
  • editorLineNumber.activeForeground#45735C
  • editorLineNumber.foreground#636B74AA
  • editorWhitespace.foreground#D9DBDD66
  • focusBorder#B9C9CB
  • foreground#2E3842
  • gitDecoration.deletedResourceForeground#B4222E
  • gitDecoration.modifiedResourceForeground#8C6908
  • gitDecoration.untrackedResourceForeground#36634D
  • input.background#FCFDFD
  • input.border#B9C9CB
  • input.foreground#272E35
  • inputOption.activeBorder#B4222E
  • list.activeSelectionBackground#DAE7E0
  • list.activeSelectionForeground#2E3842
  • list.focusOutline#B4222E
  • list.hoverBackground#F9FAFA
  • list.inactiveSelectionBackground#E7EEEB
  • minimap.selectionHighlight#DAE7E0AA
  • panel.background#EEF0F1
  • panel.border#D9DBDD
  • peekView.border#B9C9CB
  • peekViewEditor.background#EBEEEF
  • peekViewTitle.background#EEF0F1
  • scrollbarSlider.activeBackground#B4222EAA
  • scrollbarSlider.background#B9C9CB66
  • scrollbarSlider.hoverBackground#B9C9CB99
  • sideBar.background#F4F5F6
  • sideBar.border#D9DBDD
  • sideBar.foreground#272E35
  • sideBarTitle.foreground#2E3842
  • statusBar.background#EEF0F1
  • statusBar.border#D9DBDD
  • statusBar.foreground#5C6875
  • tab.activeBackground#FCFDFD
  • tab.activeForeground#2E3842
  • tab.border#D9DBDD
  • tab.inactiveBackground#E7EEEB
  • tab.inactiveForeground#42765C
  • terminal.ansiBlack#2E3842
  • terminal.ansiBlue#42765C
  • terminal.ansiCyan#636B74
  • terminal.ansiGreen#45735C
  • terminal.ansiMagenta#3B8A91
  • terminal.ansiRed#B4222E
  • terminal.ansiWhite#2E3842
  • terminal.ansiYellow#EFE7C8
  • terminal.background#FCFDFD
  • terminal.foreground#2E3842
  • titleBar.activeBackground#EEF0F1
  • titleBar.activeForeground#2E3842
  • titleBar.inactiveBackground#F4F5F6
  • titleBar.inactiveForeground#636B74
  • widget.shadow#45525E55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#6C757Fitalic
string, constant.other.symbol, string.regexp, string.template#37624D
constant.character.escape#3D6652
constant.numeric#8C6908
constant.language.boolean, constant.language.null, constant.language.undefined#3C777C
constant, entity.name.constant, support.constant#3C777C
keyword, storage.type, storage.modifier, storage.type.function#B4222E
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#931F29
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#5F666D
storage.type.class, storage.type.interface, storage.type.enum#B4222E
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#80878E
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#3E7074
support.type.builtin, entity.name.type.primitive#508186
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#6A4F10
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#C62F3B
variable.parameter, variable.parameter.function#3F454A
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#4C7661
variable, meta.definition.variable, variable.other.readwrite#1F2429
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#B4222E
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#8B949C
entity.other.attribute-name, entity.other.attribute-name.html#3E7074
support.class.component, entity.name.tag.template.value#8C6908
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#37624D
entity.other.attribute-name.class.css, entity.other.attribute-name.class#3C777C
entity.other.attribute-name.id.css, entity.other.attribute-name.id#B4222E
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#3E7074
markup.heading#B4222Ebold
markup.boldbold
markup.italicitalic
markup.quote#1F2429
markup.inline.raw, markup.fenced_code#37624D
invalid, invalid.illegal#C22929