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#F0F2F5
  • activityBar.border#D7DBE0
  • activityBar.foreground#C91D2B
  • activityBarBadge.background#C91D2B
  • activityBarBadge.foreground#FFFFFF
  • badge.background#C91D2B
  • badge.foreground#FFFFFF
  • button.background#C91D2B
  • button.foreground#FFFFFF
  • button.hoverBackground#2B96AB
  • dropdown.background#FFFFFF
  • dropdown.border#BEC7CF
  • dropdown.foreground#2B3750
  • editor.background#FFFFFF
  • editor.foreground#2E3F60
  • editor.lineHighlightBackground#F0F2F5CC
  • editor.selectionBackground#D9E0E866
  • editorBracketMatch.background#D9E0E855
  • editorBracketMatch.border#C91D2B
  • editorCursor.foreground#C91D2B
  • editorGroupHeader.tabsBackground#F0F2F5
  • editorIndentGuide.activeBackground#BEC7CF
  • editorIndentGuide.background#D7DBE088
  • editorLineNumber.activeForeground#357E8D
  • editorLineNumber.foreground#5E786FAA
  • editorWhitespace.foreground#D7DBE066
  • focusBorder#BEC7CF
  • foreground#2E3F60
  • gitDecoration.deletedResourceForeground#DA1B2B
  • gitDecoration.modifiedResourceForeground#8C6908
  • gitDecoration.untrackedResourceForeground#356E5B
  • input.background#FFFFFF
  • input.border#BEC7CF
  • input.foreground#2B3750
  • inputOption.activeBorder#C91D2B
  • list.activeSelectionBackground#D9E0E8
  • list.activeSelectionForeground#2E3F60
  • list.focusOutline#C91D2B
  • list.hoverBackground#FCFCFD
  • list.inactiveSelectionBackground#E7EEEC
  • minimap.selectionHighlight#D9E0E8AA
  • panel.background#F0F2F5
  • panel.border#D7DBE0
  • peekView.border#BEC7CF
  • peekViewEditor.background#EDF0F2
  • peekViewTitle.background#F0F2F5
  • scrollbarSlider.activeBackground#C91D2BAA
  • scrollbarSlider.background#BEC7CF66
  • scrollbarSlider.hoverBackground#BEC7CF99
  • sideBar.background#F6F7F9
  • sideBar.border#D7DBE0
  • sideBar.foreground#2B3750
  • sideBarTitle.foreground#2E3F60
  • statusBar.background#F0F2F5
  • statusBar.border#D7DBE0
  • statusBar.foreground#5A6877
  • tab.activeBackground#FFFFFF
  • tab.activeForeground#2E3F60
  • tab.border#D7DBE0
  • tab.inactiveBackground#E7EEEC
  • tab.inactiveForeground#447E6B
  • terminal.ansiBlack#2E3F60
  • terminal.ansiBlue#447E6B
  • terminal.ansiCyan#5E786F
  • terminal.ansiGreen#357E8D
  • terminal.ansiMagenta#37A7BE
  • terminal.ansiRed#C91D2B
  • terminal.ansiWhite#2E3F60
  • terminal.ansiYellow#F4E4BE
  • terminal.background#FFFFFF
  • terminal.foreground#2E3F60
  • titleBar.activeBackground#F0F2F5
  • titleBar.activeForeground#2E3F60
  • titleBar.inactiveBackground#F6F7F9
  • titleBar.inactiveForeground#5E786F
  • widget.shadow#49596955

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#356E5B
constant.character.escape#308191
constant.numeric#8C6908
constant.language.boolean, constant.language.null, constant.language.undefined#327785
constant, entity.name.constant, support.constant#A8242F
keyword, storage.type, storage.modifier, storage.type.function#C91D2B
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#A51D28
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#5E666E
storage.type.class, storage.type.interface, storage.type.enum#C91D2B
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#7C858D
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#36717D
support.type.builtin, entity.name.type.primitive#468491
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#6A5110
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#D02533
variable.parameter, variable.parameter.function#3F4550
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#3F7883
variable, meta.definition.variable, variable.other.readwrite#1F2533
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#C91D2B
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#8B949C
entity.other.attribute-name, entity.other.attribute-name.html#36717D
support.class.component, entity.name.tag.template.value#8C6908
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#356E5B
entity.other.attribute-name.class.css, entity.other.attribute-name.class#327785
entity.other.attribute-name.id.css, entity.other.attribute-name.id#C91D2B
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#36717D
markup.heading#C91D2Bbold
markup.boldbold
markup.italicitalic
markup.quote#1F2533
markup.inline.raw, markup.fenced_code#356E5B
invalid, invalid.illegal#C22929