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#F2F1ED
  • activityBar.border#D9DBDD
  • activityBar.foreground#BB2E1B
  • activityBarBadge.background#BB2E1B
  • activityBarBadge.foreground#FDFDFC
  • badge.background#BB2E1B
  • badge.foreground#FDFDFC
  • button.background#BB2E1B
  • button.foreground#FDFDFC
  • button.hoverBackground#9C2B1C
  • dropdown.background#FDFDFC
  • dropdown.border#C2C5CB
  • dropdown.foreground#24272E
  • editor.background#FDFDFC
  • editor.foreground#292C32
  • editor.lineHighlightBackground#F2F1EDCC
  • editor.selectionBackground#D9E4E866
  • editorBracketMatch.background#D9E4E855
  • editorBracketMatch.border#BB2E1B
  • editorCursor.foreground#BB2E1B
  • editorGroupHeader.tabsBackground#F2F1ED
  • editorIndentGuide.activeBackground#C2C5CB
  • editorIndentGuide.background#D9DBDD88
  • editorLineNumber.activeForeground#35778D
  • editorLineNumber.foreground#6A707CAA
  • editorWhitespace.foreground#D9DBDD66
  • focusBorder#C2C5CB
  • foreground#292C32
  • gitDecoration.deletedResourceForeground#C21D14
  • gitDecoration.modifiedResourceForeground#8C6908
  • gitDecoration.untrackedResourceForeground#2E6B3E
  • input.background#FDFDFC
  • input.border#C2C5CB
  • input.foreground#24272E
  • inputOption.activeBorder#BB2E1B
  • list.activeSelectionBackground#D9E4E8
  • list.activeSelectionForeground#292C32
  • list.focusOutline#BB2E1B
  • list.hoverBackground#FBFAF9
  • list.inactiveSelectionBackground#E8ECEE
  • minimap.selectionHighlight#D9E4E8AA
  • panel.background#F2F1ED
  • panel.border#D9DBDD
  • peekView.border#C2C5CB
  • peekViewEditor.background#F0EEEA
  • peekViewTitle.background#F2F1ED
  • scrollbarSlider.activeBackground#BB2E1BAA
  • scrollbarSlider.background#C2C5CB66
  • scrollbarSlider.hoverBackground#C2C5CB99
  • sideBar.background#F7F6F3
  • sideBar.border#D9DBDD
  • sideBar.foreground#25272D
  • sideBarTitle.foreground#292C32
  • statusBar.background#F2F1ED
  • statusBar.border#D9DBDD
  • statusBar.foreground#636A79
  • tab.activeBackground#FDFDFC
  • tab.activeForeground#292C32
  • tab.border#D9DBDD
  • tab.inactiveBackground#E8ECEE
  • tab.inactiveForeground#42788A
  • terminal.ansiBlack#292C32
  • terminal.ansiBlue#42788A
  • terminal.ansiCyan#6A707C
  • terminal.ansiGreen#35778D
  • terminal.ansiMagenta#35778D
  • terminal.ansiRed#BB2E1B
  • terminal.ansiWhite#292C32
  • terminal.ansiYellow#F3D2CE
  • terminal.background#FDFDFC
  • terminal.foreground#292C32
  • titleBar.activeBackground#F2F1ED
  • titleBar.activeForeground#292C32
  • titleBar.inactiveBackground#F7F6F3
  • titleBar.inactiveForeground#6A707C
  • widget.shadow#52576055

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#7B5F5Bitalic
string, constant.other.symbol, string.regexp, string.template#2E6B3E
constant.character.escape#8C5508
constant.numeric#8C6908
constant.language.boolean, constant.language.null, constant.language.undefined#A78111
constant, entity.name.constant, support.constant#A12717
keyword, storage.type, storage.modifier, storage.type.function#DD260E
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#B61D0C
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#69574F
storage.type.class, storage.type.interface, storage.type.enum#DD260E
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#897870
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#4A7859
support.type.builtin, entity.name.type.primitive#5B8B6B
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#C21D14
variable.parameter, variable.parameter.function#4A3830
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#8F2314
variable, meta.definition.variable, variable.other.readwrite#29170F
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#DD260E
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#998780
entity.other.attribute-name, entity.other.attribute-name.html#4A7859
support.class.component, entity.name.tag.template.value#8C6908
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#2E6B3E
entity.other.attribute-name.class.css, entity.other.attribute-name.class#A78111
entity.other.attribute-name.id.css, entity.other.attribute-name.id#DD260E
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#4A7859
markup.heading#DD260Ebold
markup.boldbold
markup.italicitalic
markup.quote#29170F
markup.inline.raw, markup.fenced_code#2E6B3E
invalid, invalid.illegal#C22929