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#ECE9E4
  • activityBar.border#D6D2DA
  • activityBar.foreground#4C7AA9
  • activityBarBadge.background#4C7AA9
  • activityBarBadge.foreground#FAFAFA
  • badge.background#4C7AA9
  • badge.foreground#FAFAFA
  • button.background#4C7AA9
  • button.foreground#FAFAFA
  • button.hoverBackground#4D759D
  • dropdown.background#FFFFFF
  • dropdown.border#BBC7D3
  • dropdown.foreground#31343F
  • editor.background#FAFAFA
  • editor.foreground#3F4250
  • editor.lineHighlightBackground#ECE9E4CC
  • editor.selectionBackground#D7E0EA66
  • editorBracketMatch.background#D7E0EA55
  • editorBracketMatch.border#4C7AA9
  • editorCursor.foreground#4C7AA9
  • editorGroupHeader.tabsBackground#ECE9E4
  • editorIndentGuide.activeBackground#BBC7D3
  • editorIndentGuide.background#D6D2DA88
  • editorLineNumber.activeForeground#587E6E
  • editorLineNumber.foreground#7A6C89AA
  • editorWhitespace.foreground#D6D2DA66
  • focusBorder#BBC7D3
  • foreground#3F4250
  • gitDecoration.deletedResourceForeground#9D5848
  • gitDecoration.modifiedResourceForeground#7B6228
  • gitDecoration.untrackedResourceForeground#497461
  • input.background#FFFFFF
  • input.border#BBC7D3
  • input.foreground#31343F
  • inputOption.activeBorder#4C7AA9
  • list.activeSelectionBackground#D7E0EA
  • list.activeSelectionForeground#3F4250
  • list.focusOutline#4C7AA9
  • list.hoverBackground#F8F7F7
  • list.inactiveSelectionBackground#DEE8ED
  • minimap.selectionHighlight#D7E0EAAA
  • panel.background#ECE9E4
  • panel.border#D6D2DA
  • peekView.border#BBC7D3
  • peekViewEditor.background#F3ECF0
  • peekViewTitle.background#ECE9E4
  • scrollbarSlider.activeBackground#4C7AA9AA
  • scrollbarSlider.background#BBC7D366
  • scrollbarSlider.hoverBackground#BBC7D399
  • sideBar.background#EEEBE7
  • sideBar.border#D6D2DA
  • sideBar.foreground#3B3D4A
  • sideBarTitle.foreground#3F4250
  • statusBar.background#ECE9E4
  • statusBar.border#D6D2DA
  • statusBar.foreground#72587E
  • tab.activeBackground#FAFAFA
  • tab.activeForeground#3F4250
  • tab.border#D6D2DA
  • tab.inactiveBackground#DEE8ED
  • tab.inactiveForeground#3E6B98
  • terminal.ansiBlack#3F4250
  • terminal.ansiBlue#3E6B98
  • terminal.ansiCyan#7A6C89
  • terminal.ansiGreen#587E6E
  • terminal.ansiMagenta#97C4B1
  • terminal.ansiRed#4C7AA9
  • terminal.ansiWhite#3F4250
  • terminal.ansiYellow#E8D9E0
  • terminal.background#FAFAFA
  • terminal.foreground#3F4250
  • titleBar.activeBackground#ECE9E4
  • titleBar.activeForeground#3F4250
  • titleBar.inactiveBackground#EEEBE7
  • titleBar.inactiveForeground#7A6C89
  • widget.shadow#4F536955

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#79717Fitalic
string, constant.other.symbol, string.regexp, string.template#587E6E
constant.character.escape#4C7AA9
constant.numeric#7B6228
constant.language.boolean, constant.language.null, constant.language.undefined#9C7D3A
constant, entity.name.constant, support.constant#8C4A52
keyword, storage.type, storage.modifier, storage.type.function#4C7AA9
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#3A6992
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#6B7280
storage.type.class, storage.type.interface, storage.type.enum#4C7AA9
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#89919F
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#69577F
support.type.builtin, entity.name.type.primitive#7B6991
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#5A6A48
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#6B90B8
variable.parameter, variable.parameter.function#4B4950
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#6B5978
variable, meta.definition.variable, variable.other.readwrite#29272F
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#4C7AA9
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#79717F
entity.other.attribute-name, entity.other.attribute-name.html#69577F
support.class.component, entity.name.tag.template.value#7B6228
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#587E6E
entity.other.attribute-name.class.css, entity.other.attribute-name.class#9C7D3A
entity.other.attribute-name.id.css, entity.other.attribute-name.id#4C7AA9
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#69577F
markup.heading#4C7AA9bold
markup.boldbold
markup.italicitalic
markup.quote#29272F
markup.inline.raw, markup.fenced_code#587E6E
invalid, invalid.illegal#C22929