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#E9EDF1
  • activityBar.border#D6DBE0
  • activityBar.foreground#1E6BB8
  • activityBarBadge.background#1E6BB8
  • activityBarBadge.foreground#FFFFFF
  • badge.background#1E6BB8
  • badge.foreground#FFFFFF
  • button.background#1E6BB8
  • button.foreground#FFFFFF
  • button.hoverBackground#1E6BB8
  • dropdown.background#F5F7F3
  • dropdown.border#AEBDCB
  • dropdown.foreground#000000
  • editor.background#FFFFFF
  • editor.foreground#000000
  • editor.lineHighlightBackground#E9EDF1CC
  • editor.selectionBackground#D0E0F166
  • editorBracketMatch.background#D0E0F155
  • editorBracketMatch.border#1E6BB8
  • editorCursor.foreground#1E6BB8
  • editorGroupHeader.tabsBackground#E9EDF1
  • editorIndentGuide.activeBackground#AEBDCB
  • editorIndentGuide.background#D6DBE088
  • editorLineNumber.activeForeground#587048
  • editorLineNumber.foreground#000000AA
  • editorWhitespace.foreground#D6DBE066
  • focusBorder#AEBDCB
  • foreground#000000
  • gitDecoration.deletedResourceForeground#B62A20
  • gitDecoration.modifiedResourceForeground#A55712
  • gitDecoration.untrackedResourceForeground#347957
  • input.background#F5F7F3
  • input.border#AEBDCB
  • input.foreground#000000
  • inputOption.activeBorder#1E6BB8
  • list.activeSelectionBackground#D0E0F1
  • list.activeSelectionForeground#000000
  • list.focusOutline#1E6BB8
  • list.hoverBackground#F9FAFB
  • list.inactiveSelectionBackground#EBEFE7
  • minimap.selectionHighlight#D0E0F1AA
  • panel.background#E9EDF1
  • panel.border#D6DBE0
  • peekView.border#AEBDCB
  • peekViewEditor.background#F6EADF
  • peekViewTitle.background#E9EDF1
  • scrollbarSlider.activeBackground#1E6BB8AA
  • scrollbarSlider.background#AEBDCB66
  • scrollbarSlider.hoverBackground#AEBDCB99
  • sideBar.background#F2F5F8
  • sideBar.border#D6DBE0
  • sideBar.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#E9EDF1
  • statusBar.border#D6DBE0
  • statusBar.foreground#000000
  • tab.activeBackground#FFFFFF
  • tab.activeForeground#000000
  • tab.border#D6DBE0
  • tab.inactiveBackground#EBEFE7
  • tab.inactiveForeground#536F3E
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#536F3E
  • terminal.ansiCyan#000000
  • terminal.ansiGreen#587048
  • terminal.ansiMagenta#EE862B
  • terminal.ansiRed#1E6BB8
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#F9C494
  • terminal.background#FFFFFF
  • terminal.foreground#000000
  • titleBar.activeBackground#E9EDF1
  • titleBar.activeForeground#000000
  • titleBar.inactiveBackground#F2F5F8
  • titleBar.inactiveForeground#000000
  • widget.shadow#43567055

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#57616Bitalic
string, constant.other.symbol, string.regexp, string.template#536F3E
constant.character.escape#EE862B
constant.numeric#1E6BB8
constant.language.boolean, constant.language.null, constant.language.undefined#1E6BB8
constant, entity.name.constant, support.constant#25527E
keyword, storage.type, storage.modifier, storage.type.function#1E6BB8
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#25527E
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#57616B
storage.type.class, storage.type.interface, storage.type.enum#1E6BB8
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#57616B
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#587048
support.type.builtin, entity.name.type.primitive#536F3E
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#1D2735
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#1E6BB8
variable.parameter, variable.parameter.function#1D2735
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#587048
variable, meta.definition.variable, variable.other.readwrite#1D2735
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#1E6BB8
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#57616B
entity.other.attribute-name, entity.other.attribute-name.html#536F3E
support.class.component, entity.name.tag.template.value#1E6BB8
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#347957
entity.other.attribute-name.class.css, entity.other.attribute-name.class#1E6BB8
entity.other.attribute-name.id.css, entity.other.attribute-name.id#1E6BB8
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#536F3E
markup.heading#1E6BB8bold
markup.boldbold
markup.italicitalic
markup.quote#283548
markup.inline.raw, markup.fenced_code#536F3E
invalid, invalid.illegal#C22929