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#D1CEC7
  • activityBar.foreground#9E2E37
  • activityBarBadge.background#9E2E37
  • activityBarBadge.foreground#FDFDFC
  • badge.background#9E2E37
  • badge.foreground#FDFDFC
  • button.background#9E2E37
  • button.foreground#FDFDFC
  • button.hoverBackground#9E2E37
  • dropdown.background#FDFDFC
  • dropdown.border#D1CEC7
  • dropdown.foreground#000000
  • editor.background#FDFDFC
  • editor.foreground#000000
  • editor.lineHighlightBackground#F2F0EECC
  • editor.selectionBackground#E1EAE666
  • editorBracketMatch.background#E1EAE655
  • editorBracketMatch.border#9E2E37
  • editorCursor.foreground#9E2E37
  • editorGroupHeader.tabsBackground#F2F0EE
  • editorIndentGuide.activeBackground#D1CEC7
  • editorIndentGuide.background#D1CEC788
  • editorLineNumber.activeForeground#396A56
  • editorLineNumber.foreground#000000AA
  • editorWhitespace.foreground#D1CEC766
  • focusBorder#D1CEC7
  • foreground#000000
  • gitDecoration.deletedResourceForeground#9B2730
  • gitDecoration.modifiedResourceForeground#AD7E1F
  • gitDecoration.untrackedResourceForeground#376C52
  • input.background#FDFDFC
  • input.border#D1CEC7
  • input.foreground#000000
  • inputOption.activeBorder#9E2E37
  • list.activeSelectionBackground#E1EAE6
  • list.activeSelectionForeground#000000
  • list.focusOutline#9E2E37
  • list.hoverBackground#FDFDFC
  • list.inactiveSelectionBackground#E1EAE6
  • minimap.selectionHighlight#E1EAE6AA
  • panel.background#F2F0EE
  • panel.border#D1CEC7
  • peekView.border#D1CEC7
  • peekViewEditor.background#FDFDFC
  • peekViewTitle.background#F2F0EE
  • scrollbarSlider.activeBackground#9E2E37AA
  • scrollbarSlider.background#D1CEC766
  • scrollbarSlider.hoverBackground#D1CEC799
  • sideBar.background#F9F8F6
  • sideBar.border#D1CEC7
  • sideBar.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#F2F0EE
  • statusBar.border#D1CEC7
  • statusBar.foreground#000000
  • tab.activeBackground#FDFDFC
  • tab.activeForeground#000000
  • tab.border#D1CEC7
  • tab.inactiveBackground#E1EAE6
  • tab.inactiveForeground#396A56
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#396A56
  • terminal.ansiCyan#000000
  • terminal.ansiGreen#396A56
  • terminal.ansiMagenta#9E2E37
  • terminal.ansiRed#9E2E37
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#E1EAE6
  • terminal.background#FDFDFC
  • terminal.foreground#000000
  • titleBar.activeBackground#F2F0EE
  • titleBar.activeForeground#000000
  • titleBar.inactiveBackground#F9F8F6
  • titleBar.inactiveForeground#000000
  • widget.shadow#6C757F55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#6C757Fitalic
string, constant.other.symbol, string.regexp, string.template#396A56
constant.character.escape#9E2E37
constant.numeric#9E2E37
constant.language.boolean, constant.language.null, constant.language.undefined#9E2E37
constant, entity.name.constant, support.constant#9E2E37
keyword, storage.type, storage.modifier, storage.type.function#9E2E37
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#9E2E37
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#6C757F
storage.type.class, storage.type.interface, storage.type.enum#9E2E37
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#6C757F
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#396A56
support.type.builtin, entity.name.type.primitive#396A56
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#9E2E37
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#396A56
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#9E2E37
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#6C757F
entity.other.attribute-name, entity.other.attribute-name.html#396A56
support.class.component, entity.name.tag.template.value#9E2E37
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#376C52
entity.other.attribute-name.class.css, entity.other.attribute-name.class#9E2E37
entity.other.attribute-name.id.css, entity.other.attribute-name.id#9E2E37
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#396A56
markup.heading#9E2E37bold
markup.boldbold
markup.italicitalic
markup.quote#2A303C
markup.inline.raw, markup.fenced_code#396A56
invalid, invalid.illegal#C22929