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#F1F0EE
  • activityBar.border#DADBDD
  • activityBar.foreground#A54027
  • activityBarBadge.background#A54027
  • activityBarBadge.foreground#FDFDFC
  • badge.background#A54027
  • badge.foreground#FDFDFC
  • button.background#A54027
  • button.foreground#FDFDFC
  • button.hoverBackground#955F68
  • dropdown.background#FDFDFC
  • dropdown.border#C4C6CA
  • dropdown.foreground#282C33
  • editor.background#FDFDFC
  • editor.foreground#2E3138
  • editor.lineHighlightBackground#F1F0EECC
  • editor.selectionBackground#DADFE766
  • editorBracketMatch.background#DADFE755
  • editorBracketMatch.border#A54027
  • editorCursor.foreground#A54027
  • editorGroupHeader.tabsBackground#F1F0EE
  • editorIndentGuide.activeBackground#C4C6CA
  • editorIndentGuide.background#DADBDD88
  • editorLineNumber.activeForeground#487058
  • editorLineNumber.foreground#696E77AA
  • editorWhitespace.foreground#DADBDD66
  • focusBorder#C4C6CA
  • foreground#2E3138
  • gitDecoration.deletedResourceForeground#A54027
  • gitDecoration.modifiedResourceForeground#8C6608
  • gitDecoration.untrackedResourceForeground#366349
  • input.background#FDFDFC
  • input.border#C4C6CA
  • input.foreground#282C33
  • inputOption.activeBorder#A54027
  • list.activeSelectionBackground#DADFE7
  • list.activeSelectionForeground#2E3138
  • list.focusOutline#A54027
  • list.hoverBackground#FAFAF9
  • list.inactiveSelectionBackground#E7EAEE
  • minimap.selectionHighlight#DADFE7AA
  • panel.background#F1F0EE
  • panel.border#DADBDD
  • peekView.border#C4C6CA
  • peekViewEditor.background#EFEEEC
  • peekViewTitle.background#F1F0EE
  • scrollbarSlider.activeBackground#A54027AA
  • scrollbarSlider.background#C4C6CA66
  • scrollbarSlider.hoverBackground#C4C6CA99
  • sideBar.background#F6F5F4
  • sideBar.border#DADBDD
  • sideBar.foreground#292C32
  • sideBarTitle.foreground#2E3138
  • statusBar.background#F1F0EE
  • statusBar.border#DADBDD
  • statusBar.foreground#646A78
  • tab.activeBackground#FDFDFC
  • tab.activeForeground#2E3138
  • tab.border#DADBDD
  • tab.inactiveBackground#E7EAEE
  • tab.inactiveForeground#355582
  • terminal.ansiBlack#2E3138
  • terminal.ansiBlue#355582
  • terminal.ansiCyan#696E77
  • terminal.ansiGreen#487058
  • terminal.ansiMagenta#4D8966
  • terminal.ansiRed#A54027
  • terminal.ansiWhite#2E3138
  • terminal.ansiYellow#EAE1E2
  • terminal.background#FDFDFC
  • terminal.foreground#2E3138
  • titleBar.activeBackground#F1F0EE
  • titleBar.activeForeground#2E3138
  • titleBar.inactiveBackground#F6F5F4
  • titleBar.inactiveForeground#696E77
  • widget.shadow#50545E55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#6E737Citalic
string, constant.other.symbol, string.regexp, string.template#376249
constant.character.escape#3D664E
constant.numeric#8C6608
constant.language.boolean, constant.language.null, constant.language.undefined#3C567C
constant, entity.name.constant, support.constant#6E4950
keyword, storage.type, storage.modifier, storage.type.function#A54027
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#8B331D
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#60646C
storage.type.class, storage.type.interface, storage.type.enum#A54027
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#81858D
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#3E5574
support.type.builtin, entity.name.type.primitive#506786
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#B54B30
variable.parameter, variable.parameter.function#414349
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#465C7C
variable, meta.definition.variable, variable.other.readwrite#202327
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#A54027
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#8D929A
entity.other.attribute-name, entity.other.attribute-name.html#3E5574
support.class.component, entity.name.tag.template.value#8C6608
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#376249
entity.other.attribute-name.class.css, entity.other.attribute-name.class#3C567C
entity.other.attribute-name.id.css, entity.other.attribute-name.id#A54027
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#3E5574
markup.heading#A54027bold
markup.boldbold
markup.italicitalic
markup.quote#202327
markup.inline.raw, markup.fenced_code#376249
invalid, invalid.illegal#C22929