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#EDF0F2
  • activityBar.border#C6CCD2
  • activityBar.foreground#B63420
  • activityBarBadge.background#B63420
  • activityBarBadge.foreground#FFFFFF
  • badge.background#B63420
  • badge.foreground#FFFFFF
  • button.background#B63420
  • button.foreground#FFFFFF
  • button.hoverBackground#B63420
  • dropdown.background#FFFFFF
  • dropdown.border#C6CCD2
  • dropdown.foreground#000000
  • editor.background#FFFFFF
  • editor.foreground#000000
  • editor.lineHighlightBackground#EDF0F2CC
  • editor.selectionBackground#DDE8EE66
  • editorBracketMatch.background#DDE8EE55
  • editorBracketMatch.border#B63420
  • editorCursor.foreground#B63420
  • editorGroupHeader.tabsBackground#EDF0F2
  • editorIndentGuide.activeBackground#C6CCD2
  • editorIndentGuide.background#C6CCD288
  • editorLineNumber.activeForeground#316081
  • editorLineNumber.foreground#000000AA
  • editorWhitespace.foreground#C6CCD266
  • focusBorder#C6CCD2
  • foreground#000000
  • gitDecoration.deletedResourceForeground#AD2B1F
  • gitDecoration.modifiedResourceForeground#AD7E1F
  • gitDecoration.untrackedResourceForeground#356E4D
  • input.background#FFFFFF
  • input.border#C6CCD2
  • input.foreground#000000
  • inputOption.activeBorder#B63420
  • list.activeSelectionBackground#DDE8EE
  • list.activeSelectionForeground#000000
  • list.focusOutline#B63420
  • list.hoverBackground#FFFFFF
  • list.inactiveSelectionBackground#DDE8EE
  • minimap.selectionHighlight#DDE8EEAA
  • panel.background#EDF0F2
  • panel.border#C6CCD2
  • peekView.border#C6CCD2
  • peekViewEditor.background#FFFFFF
  • peekViewTitle.background#EDF0F2
  • scrollbarSlider.activeBackground#B63420AA
  • scrollbarSlider.background#C6CCD266
  • scrollbarSlider.hoverBackground#C6CCD299
  • sideBar.background#F5F7F9
  • sideBar.border#C6CCD2
  • sideBar.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#EDF0F2
  • statusBar.border#C6CCD2
  • statusBar.foreground#000000
  • tab.activeBackground#FFFFFF
  • tab.activeForeground#000000
  • tab.border#C6CCD2
  • tab.inactiveBackground#DDE8EE
  • tab.inactiveForeground#316081
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#316081
  • terminal.ansiCyan#000000
  • terminal.ansiGreen#316081
  • terminal.ansiMagenta#B63420
  • terminal.ansiRed#B63420
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#DDE8EE
  • terminal.background#FFFFFF
  • terminal.foreground#000000
  • titleBar.activeBackground#EDF0F2
  • titleBar.activeForeground#000000
  • titleBar.inactiveBackground#F5F7F9
  • 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#316081
constant.character.escape#B63420
constant.numeric#B63420
constant.language.boolean, constant.language.null, constant.language.undefined#B63420
constant, entity.name.constant, support.constant#B63420
keyword, storage.type, storage.modifier, storage.type.function#B63420
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#B63420
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#B63420
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#316081
support.type.builtin, entity.name.type.primitive#316081
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#263140
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#B63420
variable.parameter, variable.parameter.function#263140
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#316081
variable, meta.definition.variable, variable.other.readwrite#263140
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#B63420
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#6A7581
entity.other.attribute-name, entity.other.attribute-name.html#316081
support.class.component, entity.name.tag.template.value#B63420
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#B63420
entity.other.attribute-name.id.css, entity.other.attribute-name.id#B63420
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#316081
markup.heading#B63420bold
markup.boldbold
markup.italicitalic
markup.quote#263140
markup.inline.raw, markup.fenced_code#316081
invalid, invalid.illegal#C22929
Minor Themes by Lenik - VS Code Theme