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#EFF2EE
  • activityBar.border#CAD1C7
  • activityBar.foreground#9B3B5B
  • activityBarBadge.background#9B3B5B
  • activityBarBadge.foreground#FDFDFC
  • badge.background#9B3B5B
  • badge.foreground#FDFDFC
  • button.background#9B3B5B
  • button.foreground#FDFDFC
  • button.hoverBackground#9B3B5B
  • dropdown.background#FDFDFC
  • dropdown.border#CAD1C7
  • dropdown.foreground#000000
  • editor.background#FDFDFC
  • editor.foreground#000000
  • editor.lineHighlightBackground#EFF2EECC
  • editor.selectionBackground#DEEDE466
  • editorBracketMatch.background#DEEDE455
  • editorBracketMatch.border#9B3B5B
  • editorCursor.foreground#9B3B5B
  • editorGroupHeader.tabsBackground#EFF2EE
  • editorIndentGuide.activeBackground#CAD1C7
  • editorIndentGuide.background#CAD1C788
  • editorLineNumber.activeForeground#2E6B4D
  • editorLineNumber.foreground#000000AA
  • editorWhitespace.foreground#CAD1C766
  • focusBorder#CAD1C7
  • foreground#000000
  • gitDecoration.deletedResourceForeground#A82F24
  • gitDecoration.modifiedResourceForeground#AD7E1F
  • gitDecoration.untrackedResourceForeground#356E4D
  • input.background#FDFDFC
  • input.border#CAD1C7
  • input.foreground#000000
  • inputOption.activeBorder#9B3B5B
  • list.activeSelectionBackground#DEEDE4
  • list.activeSelectionForeground#000000
  • list.focusOutline#9B3B5B
  • list.hoverBackground#FDFDFC
  • list.inactiveSelectionBackground#DEEDE4
  • minimap.selectionHighlight#DEEDE4AA
  • panel.background#EFF2EE
  • panel.border#CAD1C7
  • peekView.border#CAD1C7
  • peekViewEditor.background#FDFDFC
  • peekViewTitle.background#EFF2EE
  • scrollbarSlider.activeBackground#9B3B5BAA
  • scrollbarSlider.background#CAD1C766
  • scrollbarSlider.hoverBackground#CAD1C799
  • sideBar.background#F9F6F7
  • sideBar.border#CAD1C7
  • sideBar.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#EFF2EE
  • statusBar.border#CAD1C7
  • statusBar.foreground#000000
  • tab.activeBackground#FDFDFC
  • tab.activeForeground#000000
  • tab.border#CAD1C7
  • tab.inactiveBackground#DEEDE4
  • tab.inactiveForeground#2E6B4D
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2E6B4D
  • terminal.ansiCyan#000000
  • terminal.ansiGreen#2E6B4D
  • terminal.ansiMagenta#9B3B5B
  • terminal.ansiRed#9B3B5B
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#DEEDE4
  • terminal.background#FDFDFC
  • terminal.foreground#000000
  • titleBar.activeBackground#EFF2EE
  • titleBar.activeForeground#000000
  • titleBar.inactiveBackground#F9F6F7
  • titleBar.inactiveForeground#000000
  • widget.shadow#6C7F7555

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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