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#EDF0F3
  • activityBar.border#C6CDD2
  • activityBar.foreground#2E669E
  • activityBarBadge.background#2E669E
  • activityBarBadge.foreground#FFFFFF
  • badge.background#2E669E
  • badge.foreground#FFFFFF
  • button.background#2E669E
  • button.foreground#FFFFFF
  • button.hoverBackground#2E669E
  • dropdown.background#FFFFFF
  • dropdown.border#C6CDD2
  • dropdown.foreground#000000
  • editor.background#FFFFFF
  • editor.foreground#000000
  • editor.lineHighlightBackground#EDF0F3CC
  • editor.selectionBackground#E8ECDF66
  • editorBracketMatch.background#E8ECDF55
  • editorBracketMatch.border#2E669E
  • editorCursor.foreground#2E669E
  • editorGroupHeader.tabsBackground#EDF0F3
  • editorIndentGuide.activeBackground#C6CDD2
  • editorIndentGuide.background#C6CDD288
  • editorLineNumber.activeForeground#566E35
  • editorLineNumber.foreground#000000AA
  • editorWhitespace.foreground#C6CDD266
  • focusBorder#C6CDD2
  • foreground#000000
  • gitDecoration.deletedResourceForeground#A82F24
  • gitDecoration.modifiedResourceForeground#AD7E1F
  • gitDecoration.untrackedResourceForeground#356E4D
  • input.background#FFFFFF
  • input.border#C6CDD2
  • input.foreground#000000
  • inputOption.activeBorder#2E669E
  • list.activeSelectionBackground#E8ECDF
  • list.activeSelectionForeground#000000
  • list.focusOutline#2E669E
  • list.hoverBackground#FFFFFF
  • list.inactiveSelectionBackground#E8ECDF
  • minimap.selectionHighlight#E8ECDFAA
  • panel.background#EDF0F3
  • panel.border#C6CDD2
  • peekView.border#C6CDD2
  • peekViewEditor.background#FFFFFF
  • peekViewTitle.background#EDF0F3
  • scrollbarSlider.activeBackground#2E669EAA
  • scrollbarSlider.background#C6CDD266
  • scrollbarSlider.hoverBackground#C6CDD299
  • sideBar.background#F5F7FA
  • sideBar.border#C6CDD2
  • sideBar.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#EDF0F3
  • statusBar.border#C6CDD2
  • statusBar.foreground#000000
  • tab.activeBackground#FFFFFF
  • tab.activeForeground#000000
  • tab.border#C6CDD2
  • tab.inactiveBackground#E8ECDF
  • tab.inactiveForeground#566E35
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#566E35
  • terminal.ansiCyan#000000
  • terminal.ansiGreen#566E35
  • terminal.ansiMagenta#2E669E
  • terminal.ansiRed#2E669E
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#E8ECDF
  • terminal.background#FFFFFF
  • terminal.foreground#000000
  • titleBar.activeBackground#EDF0F3
  • titleBar.activeForeground#000000
  • titleBar.inactiveBackground#F5F7FA
  • titleBar.inactiveForeground#000000
  • widget.shadow#6A758155

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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