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#F0EEEA
  • activityBar.border#CEC8C0
  • activityBar.foreground#AD2B1F
  • activityBarBadge.background#AD2B1F
  • activityBarBadge.foreground#FDFDFC
  • badge.background#AD2B1F
  • badge.foreground#FDFDFC
  • button.background#AD2B1F
  • button.foreground#FDFDFC
  • button.hoverBackground#AD2B1F
  • dropdown.background#FDFDFC
  • dropdown.border#CEC8C0
  • dropdown.foreground#000000
  • editor.background#FDFDFC
  • editor.foreground#000000
  • editor.lineHighlightBackground#F0EEEACC
  • editor.selectionBackground#DEEDE466
  • editorBracketMatch.background#DEEDE455
  • editorBracketMatch.border#AD2B1F
  • editorCursor.foreground#AD2B1F
  • editorGroupHeader.tabsBackground#F0EEEA
  • editorIndentGuide.activeBackground#CEC8C0
  • editorIndentGuide.background#CEC8C088
  • editorLineNumber.activeForeground#2E6B4D
  • editorLineNumber.foreground#000000AA
  • editorWhitespace.foreground#CEC8C066
  • focusBorder#CEC8C0
  • foreground#000000
  • gitDecoration.deletedResourceForeground#A5281D
  • gitDecoration.modifiedResourceForeground#B38519
  • gitDecoration.untrackedResourceForeground#356E4D
  • input.background#FDFDFC
  • input.border#CEC8C0
  • input.foreground#000000
  • inputOption.activeBorder#AD2B1F
  • list.activeSelectionBackground#DEEDE4
  • list.activeSelectionForeground#000000
  • list.focusOutline#AD2B1F
  • list.hoverBackground#FDFDFC
  • list.inactiveSelectionBackground#DEEDE4
  • minimap.selectionHighlight#DEEDE4AA
  • panel.background#F0EEEA
  • panel.border#CEC8C0
  • peekView.border#CEC8C0
  • peekViewEditor.background#FDFDFC
  • peekViewTitle.background#F0EEEA
  • scrollbarSlider.activeBackground#AD2B1FAA
  • scrollbarSlider.background#CEC8C066
  • scrollbarSlider.hoverBackground#CEC8C099
  • sideBar.background#F7F6F3
  • sideBar.border#CEC8C0
  • sideBar.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#F0EEEA
  • statusBar.border#CEC8C0
  • statusBar.foreground#000000
  • tab.activeBackground#FDFDFC
  • tab.activeForeground#000000
  • tab.border#CEC8C0
  • tab.inactiveBackground#DEEDE4
  • tab.inactiveForeground#2E6B4D
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2E6B4D
  • terminal.ansiCyan#000000
  • terminal.ansiGreen#2E6B4D
  • terminal.ansiMagenta#AD2B1F
  • terminal.ansiRed#AD2B1F
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#DEEDE4
  • terminal.background#FDFDFC
  • terminal.foreground#000000
  • titleBar.activeBackground#F0EEEA
  • titleBar.activeForeground#000000
  • titleBar.inactiveBackground#F7F6F3
  • titleBar.inactiveForeground#000000
  • widget.shadow#7E736755

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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