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#F2F0EE
  • activityBar.border#C8CCD0
  • activityBar.foreground#A82F24
  • activityBarBadge.background#A82F24
  • activityBarBadge.foreground#FDFDFC
  • badge.background#A82F24
  • badge.foreground#FDFDFC
  • button.background#A82F24
  • button.foreground#FDFDFC
  • button.hoverBackground#A82F24
  • dropdown.background#FDFDFC
  • dropdown.border#C8CCD0
  • dropdown.foreground#000000
  • editor.background#FDFDFC
  • editor.foreground#000000
  • editor.lineHighlightBackground#F2F0EECC
  • editor.selectionBackground#F0EADB66
  • editorBracketMatch.background#F0EADB55
  • editorBracketMatch.border#A82F24
  • editorCursor.foreground#A82F24
  • editorGroupHeader.tabsBackground#F2F0EE
  • editorIndentGuide.activeBackground#C8CCD0
  • editorIndentGuide.background#C8CCD088
  • editorLineNumber.activeForeground#86612D
  • editorLineNumber.foreground#000000AA
  • editorWhitespace.foreground#C8CCD066
  • focusBorder#C8CCD0
  • foreground#000000
  • gitDecoration.deletedResourceForeground#A5281D
  • gitDecoration.modifiedResourceForeground#B38019
  • gitDecoration.untrackedResourceForeground#396A4E
  • input.background#FDFDFC
  • input.border#C8CCD0
  • input.foreground#000000
  • inputOption.activeBorder#A82F24
  • list.activeSelectionBackground#F0EADB
  • list.activeSelectionForeground#000000
  • list.focusOutline#A82F24
  • list.hoverBackground#FDFDFC
  • list.inactiveSelectionBackground#F0EADB
  • minimap.selectionHighlight#F0EADBAA
  • panel.background#F2F0EE
  • panel.border#C8CCD0
  • peekView.border#C8CCD0
  • peekViewEditor.background#FDFDFC
  • peekViewTitle.background#F2F0EE
  • scrollbarSlider.activeBackground#A82F24AA
  • scrollbarSlider.background#C8CCD066
  • scrollbarSlider.hoverBackground#C8CCD099
  • sideBar.background#F8F8F6
  • sideBar.border#C8CCD0
  • sideBar.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#F2F0EE
  • statusBar.border#C8CCD0
  • statusBar.foreground#000000
  • tab.activeBackground#FDFDFC
  • tab.activeForeground#000000
  • tab.border#C8CCD0
  • tab.inactiveBackground#F0EADB
  • tab.inactiveForeground#86612D
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#86612D
  • terminal.ansiCyan#000000
  • terminal.ansiGreen#86612D
  • terminal.ansiMagenta#A82F24
  • terminal.ansiRed#A82F24
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#F0EADB
  • terminal.background#FDFDFC
  • terminal.foreground#000000
  • titleBar.activeBackground#F2F0EE
  • titleBar.activeForeground#000000
  • titleBar.inactiveBackground#F8F8F6
  • titleBar.inactiveForeground#000000
  • widget.shadow#6C747F55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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