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#F2ECE3
  • activityBar.border#E2DCD4
  • activityBar.foreground#EE2B52
  • activityBarBadge.background#EE2B52
  • activityBarBadge.foreground#FCFBF7
  • badge.background#EE2B52
  • badge.foreground#FCFBF7
  • button.background#EE2B52
  • button.foreground#FCFBF7
  • button.hoverBackground#EE2B52
  • dropdown.background#FBF8F4
  • dropdown.border#DDB0B9
  • dropdown.foreground#000000
  • editor.background#FCFBF7
  • editor.foreground#000000
  • editor.lineHighlightBackground#F2ECE3CC
  • editor.selectionBackground#F7D4DB66
  • editorBracketMatch.background#F7D4DB55
  • editorBracketMatch.border#EE2B52
  • editorCursor.foreground#EE2B52
  • editorGroupHeader.tabsBackground#F2ECE3
  • editorIndentGuide.activeBackground#DDB0B9
  • editorIndentGuide.background#E2DCD488
  • editorLineNumber.activeForeground#8F5B3D
  • editorLineNumber.foreground#000000AA
  • editorWhitespace.foreground#E2DCD466
  • focusBorder#DDB0B9
  • foreground#000000
  • gitDecoration.deletedResourceForeground#C11532
  • gitDecoration.modifiedResourceForeground#A56F12
  • gitDecoration.untrackedResourceForeground#378162
  • input.background#FBF8F4
  • input.border#DDB0B9
  • input.foreground#000000
  • inputOption.activeBorder#EE2B52
  • list.activeSelectionBackground#F7D4DB
  • list.activeSelectionForeground#000000
  • list.focusOutline#EE2B52
  • list.hoverBackground#FAF8F4
  • list.inactiveSelectionBackground#F7E4D4
  • minimap.selectionHighlight#F7D4DBAA
  • panel.background#F2ECE3
  • panel.border#E2DCD4
  • peekView.border#DDB0B9
  • peekViewEditor.background#F9EAC8
  • peekViewTitle.background#F2ECE3
  • scrollbarSlider.activeBackground#EE2B52AA
  • scrollbarSlider.background#DDB0B966
  • scrollbarSlider.hoverBackground#DDB0B999
  • sideBar.background#F8F4ED
  • sideBar.border#E2DCD4
  • sideBar.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#F2ECE3
  • statusBar.border#E2DCD4
  • statusBar.foreground#000000
  • tab.activeBackground#FCFBF7
  • tab.activeForeground#000000
  • tab.border#E2DCD4
  • tab.inactiveBackground#F7E4D4
  • tab.inactiveForeground#96532C
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#96532C
  • terminal.ansiCyan#000000
  • terminal.ansiGreen#8F5B3D
  • terminal.ansiMagenta#F4B625
  • terminal.ansiRed#EE2B52
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#FCDC92
  • terminal.background#FCFBF7
  • terminal.foreground#000000
  • titleBar.activeBackground#F2ECE3
  • titleBar.activeForeground#000000
  • titleBar.inactiveBackground#F8F4ED
  • titleBar.inactiveForeground#000000
  • widget.shadow#7E444E55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#6E5F53italic
string, constant.other.symbol, string.regexp, string.template#96532C
constant.character.escape#F4B625
constant.numeric#EE2B52
constant.language.boolean, constant.language.null, constant.language.undefined#EE2B52
constant, entity.name.constant, support.constant#A51D38
keyword, storage.type, storage.modifier, storage.type.function#EE2B52
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#A51D38
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#6E5F53
storage.type.class, storage.type.interface, storage.type.enum#EE2B52
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#6E5F53
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#8F5B3D
support.type.builtin, entity.name.type.primitive#96532C
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#401C22
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#EE2B52
variable.parameter, variable.parameter.function#401C22
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#8F5B3D
variable, meta.definition.variable, variable.other.readwrite#401C22
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#EE2B52
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#6E5F53
entity.other.attribute-name, entity.other.attribute-name.html#96532C
support.class.component, entity.name.tag.template.value#EE2B52
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#378162
entity.other.attribute-name.class.css, entity.other.attribute-name.class#EE2B52
entity.other.attribute-name.id.css, entity.other.attribute-name.id#EE2B52
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#96532C
markup.heading#EE2B52bold
markup.boldbold
markup.italicitalic
markup.quote#4C242B
markup.inline.raw, markup.fenced_code#96532C
invalid, invalid.illegal#C22929