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#C7CCD1
  • activityBar.foreground#A63044
  • activityBarBadge.background#A63044
  • activityBarBadge.foreground#FDFDFC
  • badge.background#A63044
  • badge.foreground#FDFDFC
  • button.background#A63044
  • button.foreground#FDFDFC
  • button.hoverBackground#A63044
  • dropdown.background#FDFDFC
  • dropdown.border#C7CCD1
  • dropdown.foreground#000000
  • editor.background#FDFDFC
  • editor.foreground#000000
  • editor.lineHighlightBackground#F2F0EECC
  • editor.selectionBackground#DEE8ED66
  • editorBracketMatch.background#DEE8ED55
  • editorBracketMatch.border#A63044
  • editorCursor.foreground#A63044
  • editorGroupHeader.tabsBackground#F2F0EE
  • editorIndentGuide.activeBackground#C7CCD1
  • editorIndentGuide.background#C7CCD188
  • editorLineNumber.activeForeground#376281
  • editorLineNumber.foreground#000000AA
  • editorWhitespace.foreground#C7CCD166
  • focusBorder#C7CCD1
  • foreground#000000
  • gitDecoration.deletedResourceForeground#A3293D
  • gitDecoration.modifiedResourceForeground#A5731D
  • gitDecoration.untrackedResourceForeground#356E4D
  • input.background#FDFDFC
  • input.border#C7CCD1
  • input.foreground#000000
  • inputOption.activeBorder#A63044
  • list.activeSelectionBackground#DEE8ED
  • list.activeSelectionForeground#000000
  • list.focusOutline#A63044
  • list.hoverBackground#FDFDFC
  • list.inactiveSelectionBackground#DEE8ED
  • minimap.selectionHighlight#DEE8EDAA
  • panel.background#F2F0EE
  • panel.border#C7CCD1
  • peekView.border#C7CCD1
  • peekViewEditor.background#FDFDFC
  • peekViewTitle.background#F2F0EE
  • scrollbarSlider.activeBackground#A63044AA
  • scrollbarSlider.background#C7CCD166
  • scrollbarSlider.hoverBackground#C7CCD199
  • sideBar.background#F9F8F6
  • sideBar.border#C7CCD1
  • sideBar.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#F2F0EE
  • statusBar.border#C7CCD1
  • statusBar.foreground#000000
  • tab.activeBackground#FDFDFC
  • tab.activeForeground#000000
  • tab.border#C7CCD1
  • tab.inactiveBackground#DEE8ED
  • tab.inactiveForeground#376281
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#376281
  • terminal.ansiCyan#000000
  • terminal.ansiGreen#376281
  • terminal.ansiMagenta#A63044
  • terminal.ansiRed#A63044
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#DEE8ED
  • terminal.background#FDFDFC
  • terminal.foreground#000000
  • titleBar.activeBackground#F2F0EE
  • titleBar.activeForeground#000000
  • titleBar.inactiveBackground#F9F8F6
  • titleBar.inactiveForeground#000000
  • widget.shadow#6A738155

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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