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#F1F2F4
  • activityBar.border#D8DADE
  • activityBar.foreground#DA1B2B
  • activityBarBadge.background#DA1B2B
  • activityBarBadge.foreground#FFFFFF
  • badge.background#DA1B2B
  • badge.foreground#FFFFFF
  • button.background#DA1B2B
  • button.foreground#FFFFFF
  • button.hoverBackground#3162C4
  • dropdown.background#FFFFFF
  • dropdown.border#D3BBBD
  • dropdown.foreground#471519
  • editor.background#FFFFFF
  • editor.foreground#5A161C
  • editor.lineHighlightBackground#F1F2F4CC
  • editor.selectionBackground#D6DDEB66
  • editorBracketMatch.background#D6DDEB55
  • editorBracketMatch.border#DA1B2B
  • editorCursor.foreground#DA1B2B
  • editorGroupHeader.tabsBackground#F1F2F4
  • editorIndentGuide.activeBackground#D3BBBD
  • editorIndentGuide.background#D8DADE88
  • editorLineNumber.activeForeground#3057A6
  • editorLineNumber.foreground#606876AA
  • editorWhitespace.foreground#D8DADE66
  • focusBorder#D3BBBD
  • foreground#5A161C
  • gitDecoration.deletedResourceForeground#DA1B2B
  • gitDecoration.modifiedResourceForeground#8C6608
  • gitDecoration.untrackedResourceForeground#2E5CB8
  • input.background#FFFFFF
  • input.border#D3BBBD
  • input.foreground#471519
  • inputOption.activeBorder#DA1B2B
  • list.activeSelectionBackground#D6DDEB
  • list.activeSelectionForeground#5A161C
  • list.focusOutline#DA1B2B
  • list.hoverBackground#FCFCFD
  • list.inactiveSelectionBackground#F3EFE2
  • minimap.selectionHighlight#D6DDEBAA
  • panel.background#F1F2F4
  • panel.border#D8DADE
  • peekView.border#D3BBBD
  • peekViewEditor.background#EEEFF1
  • peekViewTitle.background#F1F2F4
  • scrollbarSlider.activeBackground#DA1B2BAA
  • scrollbarSlider.background#D3BBBD66
  • scrollbarSlider.hoverBackground#D3BBBD99
  • sideBar.background#F6F7F8
  • sideBar.border#D8DADE
  • sideBar.foreground#471519
  • sideBarTitle.foreground#5A161C
  • statusBar.background#F1F2F4
  • statusBar.border#D8DADE
  • statusBar.foreground#775A5D
  • tab.activeBackground#FFFFFF
  • tab.activeForeground#5A161C
  • tab.border#D8DADE
  • tab.inactiveBackground#F3EFE2
  • tab.inactiveForeground#C69910
  • terminal.ansiBlack#5A161C
  • terminal.ansiBlue#C69910
  • terminal.ansiCyan#606876
  • terminal.ansiGreen#3057A6
  • terminal.ansiMagenta#F4C025
  • terminal.ansiRed#DA1B2B
  • terminal.ansiWhite#5A161C
  • terminal.ansiYellow#F4E6BE
  • terminal.background#FFFFFF
  • terminal.foreground#5A161C
  • titleBar.activeBackground#F1F2F4
  • titleBar.activeForeground#5A161C
  • titleBar.inactiveBackground#F6F7F8
  • titleBar.inactiveForeground#606876
  • widget.shadow#6E353A55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#6B7080italic
string, constant.other.symbol, string.regexp, string.template#2E5CB8
constant.character.escape#497FD0
constant.numeric#8C6608
constant.language.boolean, constant.language.null, constant.language.undefined#A27910
constant, entity.name.constant, support.constant#C6101F
keyword, storage.type, storage.modifier, storage.type.function#DA1B2B
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#B8141F
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#5B6371
storage.type.class, storage.type.interface, storage.type.enum#DA1B2B
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#7A8290
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#1D4087
support.type.builtin, entity.name.type.primitive#2A5098
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#E02E3D
variable.parameter, variable.parameter.function#3A4050
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#3960A7
variable, meta.definition.variable, variable.other.readwrite#1B2132
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#DA1B2B
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#898F9F
entity.other.attribute-name, entity.other.attribute-name.html#1D4087
support.class.component, entity.name.tag.template.value#8C6608
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#2E5CB8
entity.other.attribute-name.class.css, entity.other.attribute-name.class#A27910
entity.other.attribute-name.id.css, entity.other.attribute-name.id#DA1B2B
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#1D4087
markup.heading#DA1B2Bbold
markup.boldbold
markup.italicitalic
markup.quote#1B2132
markup.inline.raw, markup.fenced_code#2E5CB8
invalid, invalid.illegal#C22929