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#F2EDED
  • activityBar.border#D5CDD3
  • activityBar.foreground#A06A6A
  • activityBarBadge.background#A06A6A
  • activityBarBadge.foreground#FAF9F9
  • badge.background#A06A6A
  • badge.foreground#FAF9F9
  • button.background#A06A6A
  • button.foreground#FAF9F9
  • button.hoverBackground#CAA52B
  • dropdown.background#FDFCFC
  • dropdown.border#C7B3B3
  • dropdown.foreground#4D0F17
  • editor.background#FAF9F9
  • editor.foreground#5A111B
  • editor.lineHighlightBackground#F2EDEDCC
  • editor.selectionBackground#E5DCE366
  • editorBracketMatch.background#E5DCE355
  • editorBracketMatch.border#A06A6A
  • editorCursor.foreground#A06A6A
  • editorGroupHeader.tabsBackground#F2EDED
  • editorIndentGuide.activeBackground#C7B3B3
  • editorIndentGuide.background#D5CDD388
  • editorLineNumber.activeForeground#566C5B
  • editorLineNumber.foreground#756170AA
  • editorWhitespace.foreground#D5CDD366
  • focusBorder#C7B3B3
  • foreground#5A111B
  • gitDecoration.deletedResourceForeground#B33B32
  • gitDecoration.modifiedResourceForeground#8B6F09
  • gitDecoration.untrackedResourceForeground#3D6B4F
  • input.background#FDFCFC
  • input.border#C7B3B3
  • input.foreground#4D0F17
  • inputOption.activeBorder#A06A6A
  • list.activeSelectionBackground#E5DCE3
  • list.activeSelectionForeground#5A111B
  • list.focusOutline#A06A6A
  • list.hoverBackground#FAFAFA
  • list.inactiveSelectionBackground#E9E2E7
  • minimap.selectionHighlight#E5DCE3AA
  • panel.background#F2EDED
  • panel.border#D5CDD3
  • peekView.border#C7B3B3
  • peekViewEditor.background#EDE8E9
  • peekViewTitle.background#F2EDED
  • scrollbarSlider.activeBackground#A06A6AAA
  • scrollbarSlider.background#C7B3B366
  • scrollbarSlider.hoverBackground#C7B3B399
  • sideBar.background#F2EDED
  • sideBar.border#D5CDD3
  • sideBar.foreground#5A161F
  • sideBarTitle.foreground#5A111B
  • statusBar.background#F2EDED
  • statusBar.border#D5CDD3
  • statusBar.foreground#755C6F
  • tab.activeBackground#FAF9F9
  • tab.activeForeground#5A111B
  • tab.border#D5CDD3
  • tab.inactiveBackground#E9E2E7
  • tab.inactiveForeground#6A5865
  • terminal.ansiBlack#5A111B
  • terminal.ansiBlue#6A5865
  • terminal.ansiCyan#756170
  • terminal.ansiGreen#566C5B
  • terminal.ansiMagenta#DDC05F
  • terminal.ansiRed#A06A6A
  • terminal.ansiWhite#5A111B
  • terminal.ansiYellow#F6ECCB
  • terminal.background#FAF9F9
  • terminal.foreground#5A111B
  • titleBar.activeBackground#F2EDED
  • titleBar.activeForeground#5A111B
  • titleBar.inactiveBackground#F2EDED
  • titleBar.inactiveForeground#756170
  • widget.shadow#6E353D55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#756170italic
string, constant.other.symbol, string.regexp, string.template#566C5B
constant.character.escape#997A0A
constant.numeric#81660E
constant.language.boolean, constant.language.null, constant.language.undefined#997A0A
constant, entity.name.constant, support.constant#601524
keyword, storage.type, storage.modifier, storage.type.function#975959
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#794444
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#6A5865
storage.type.class, storage.type.interface, storage.type.enum#975959
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#8B7981
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#6A5865
support.type.builtin, entity.name.type.primitive#7B5661
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#A06A6A
variable.parameter, variable.parameter.function#6F252C
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#8C4A52
variable, meta.definition.variable, variable.other.readwrite#5A161F
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#975959
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#9F898F
entity.other.attribute-name, entity.other.attribute-name.html#6A5865
support.class.component, entity.name.tag.template.value#81660E
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#566C5B
entity.other.attribute-name.class.css, entity.other.attribute-name.class#997A0A
entity.other.attribute-name.id.css, entity.other.attribute-name.id#975959
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#6A5865
markup.heading#975959bold
markup.boldbold
markup.italicitalic
markup.quote#5A111B
markup.inline.raw, markup.fenced_code#566C5B
invalid, invalid.illegal#C22929