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#EFF2EE
  • activityBar.border#CCD1C7
  • 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#CCD1C7
  • dropdown.foreground#000000
  • editor.background#FDFDFC
  • editor.foreground#000000
  • editor.lineHighlightBackground#EFF2EECC
  • editor.selectionBackground#DEEDE466
  • editorBracketMatch.background#DEEDE455
  • editorBracketMatch.border#AD2B1F
  • editorCursor.foreground#AD2B1F
  • editorGroupHeader.tabsBackground#EFF2EE
  • editorIndentGuide.activeBackground#CCD1C7
  • editorIndentGuide.background#CCD1C788
  • editorLineNumber.activeForeground#2E6B4D
  • editorLineNumber.foreground#000000AA
  • editorWhitespace.foreground#CCD1C766
  • focusBorder#CCD1C7
  • foreground#000000
  • gitDecoration.deletedResourceForeground#A7271B
  • gitDecoration.modifiedResourceForeground#AD7E1F
  • gitDecoration.untrackedResourceForeground#356E4D
  • input.background#FDFDFC
  • input.border#CCD1C7
  • 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#EFF2EE
  • panel.border#CCD1C7
  • peekView.border#CCD1C7
  • peekViewEditor.background#FDFDFC
  • peekViewTitle.background#EFF2EE
  • scrollbarSlider.activeBackground#AD2B1FAA
  • scrollbarSlider.background#CCD1C766
  • scrollbarSlider.hoverBackground#CCD1C799
  • sideBar.background#F8F8F6
  • sideBar.border#CCD1C7
  • sideBar.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#EFF2EE
  • statusBar.border#CCD1C7
  • statusBar.foreground#000000
  • tab.activeBackground#FDFDFC
  • tab.activeForeground#000000
  • tab.border#CCD1C7
  • 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#EFF2EE
  • titleBar.activeForeground#000000
  • titleBar.inactiveBackground#F8F8F6
  • titleBar.inactiveForeground#000000
  • widget.shadow#6C7F7255

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#6C7F72italic
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#6C7F72
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#6C7F72
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#25372E
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#AD2B1F
variable.parameter, variable.parameter.function#25372E
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#25372E
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#6C7F72
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#25372E
markup.inline.raw, markup.fenced_code#2E6B4D
invalid, invalid.illegal#C22929