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#1C2226
  • activityBar.border#3A444A
  • activityBar.foreground#CD515B
  • activityBarBadge.background#CD515B
  • activityBarBadge.foreground#14191F
  • badge.background#CD515B
  • badge.foreground#14191F
  • button.background#CD515B
  • button.foreground#14191F
  • button.hoverBackground#CD515B
  • dropdown.background#1C2226
  • dropdown.border#3A444A
  • dropdown.foreground#FFFFFF
  • editor.background#0E1116
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#1C222699
  • editor.selectionBackground#21323B80
  • editorBracketMatch.background#21323B55
  • editorBracketMatch.border#CD515B
  • editorCursor.foreground#CD515B
  • editorGroupHeader.tabsBackground#1C2226
  • editorIndentGuide.activeBackground#3A444A
  • editorIndentGuide.background#3A444A88
  • editorLineNumber.activeForeground#8DBECE
  • editorLineNumber.foreground#FFFFFFAA
  • editorWhitespace.foreground#3A444A66
  • focusBorder#3A444A
  • foreground#FFFFFF
  • gitDecoration.deletedResourceForeground#CD515B
  • gitDecoration.modifiedResourceForeground#D49F35
  • gitDecoration.untrackedResourceForeground#59A680
  • input.background#1C2226
  • input.border#3A444A
  • input.foreground#FFFFFF
  • inputOption.activeBorder#CD515B
  • list.activeSelectionBackground#21323B
  • list.activeSelectionForeground#FFFFFF
  • list.focusOutline#CD515B
  • list.hoverBackground#1C2226
  • list.inactiveSelectionBackground#21323B
  • minimap.selectionHighlight#21323BAA
  • panel.background#1C2226
  • panel.border#3A444A
  • peekView.border#3A444A
  • peekViewEditor.background#1C2226
  • peekViewTitle.background#1C2226
  • scrollbarSlider.activeBackground#CD515BAA
  • scrollbarSlider.background#3A444A66
  • scrollbarSlider.hoverBackground#3A444A99
  • sideBar.background#14191F
  • sideBar.border#3A444A
  • sideBar.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#1C2226
  • statusBar.border#3A444A
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#0E1116
  • tab.activeForeground#FFFFFF
  • tab.border#3A444A
  • tab.inactiveBackground#21323B
  • tab.inactiveForeground#8DBECE
  • terminal.ansiBlack#0E1116
  • terminal.ansiBlue#8DBECE
  • terminal.ansiCyan#FFFFFF
  • terminal.ansiGreen#8DBECE
  • terminal.ansiMagenta#CD515B
  • terminal.ansiRed#CD515B
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#21323B
  • terminal.background#0E1116
  • terminal.foreground#FFFFFF
  • titleBar.activeBackground#1C2226
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#14191F
  • titleBar.inactiveForeground#FFFFFF
  • widget.shadow#0A0A0A55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#7E939Aitalic
string, constant.other.symbol, string.regexp, string.template#8DBECE
constant.character.escape#CD515B
constant.numeric#CD515B
constant.language.boolean, constant.language.null, constant.language.undefined#CD515B
constant, entity.name.constant, support.constant#CD515B
keyword, storage.type, storage.modifier, storage.type.function#CD515B
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#CD515B
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#7E939A
storage.type.class, storage.type.interface, storage.type.enum#CD515B
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#7E939A
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#8DBECE
support.type.builtin, entity.name.type.primitive#8DBECE
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#E5E2DC
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#CD515B
variable.parameter, variable.parameter.function#E5E2DC
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#8DBECE
variable, meta.definition.variable, variable.other.readwrite#E5E2DC
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#CD515B
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#7E939A
entity.other.attribute-name, entity.other.attribute-name.html#8DBECE
support.class.component, entity.name.tag.template.value#CD515B
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#59A680
entity.other.attribute-name.class.css, entity.other.attribute-name.class#CD515B
entity.other.attribute-name.id.css, entity.other.attribute-name.id#CD515B
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#8DBECE
markup.heading#CD515Bbold
markup.boldbold
markup.italicitalic
markup.quote#E5E2DC
markup.inline.raw, markup.fenced_code#8DBECE
invalid, invalid.illegal#FF6B6B