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#1B1E27
  • activityBar.border#3A3E4A
  • activityBar.foreground#CB884D
  • activityBarBadge.background#CB884D
  • activityBarBadge.foreground#14161F
  • badge.background#CB884D
  • badge.foreground#14161F
  • button.background#CB884D
  • button.foreground#14161F
  • button.hoverBackground#CB884D
  • dropdown.background#1B1E27
  • dropdown.border#3A3E4A
  • dropdown.foreground#FFFFFF
  • editor.background#0D0F16
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#1B1E2799
  • editor.selectionBackground#252C4180
  • editorBracketMatch.background#252C4155
  • editorBracketMatch.border#CB884D
  • editorCursor.foreground#CB884D
  • editorGroupHeader.tabsBackground#1B1E27
  • editorIndentGuide.activeBackground#3A3E4A
  • editorIndentGuide.background#3A3E4A88
  • editorLineNumber.activeForeground#94B2D1
  • editorLineNumber.foreground#FFFFFFAA
  • editorWhitespace.foreground#3A3E4A66
  • focusBorder#3A3E4A
  • foreground#FFFFFF
  • gitDecoration.deletedResourceForeground#D15347
  • gitDecoration.modifiedResourceForeground#D49A35
  • gitDecoration.untrackedResourceForeground#5CA380
  • input.background#1B1E27
  • input.border#3A3E4A
  • input.foreground#FFFFFF
  • inputOption.activeBorder#CB884D
  • list.activeSelectionBackground#252C41
  • list.activeSelectionForeground#FFFFFF
  • list.focusOutline#CB884D
  • list.hoverBackground#1B1E27
  • list.inactiveSelectionBackground#252C41
  • minimap.selectionHighlight#252C41AA
  • panel.background#1B1E27
  • panel.border#3A3E4A
  • peekView.border#3A3E4A
  • peekViewEditor.background#1B1E27
  • peekViewTitle.background#1B1E27
  • scrollbarSlider.activeBackground#CB884DAA
  • scrollbarSlider.background#3A3E4A66
  • scrollbarSlider.hoverBackground#3A3E4A99
  • sideBar.background#14161F
  • sideBar.border#3A3E4A
  • sideBar.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#1B1E27
  • statusBar.border#3A3E4A
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#0D0F16
  • tab.activeForeground#FFFFFF
  • tab.border#3A3E4A
  • tab.inactiveBackground#252C41
  • tab.inactiveForeground#94B2D1
  • terminal.ansiBlack#0D0F16
  • terminal.ansiBlue#94B2D1
  • terminal.ansiCyan#FFFFFF
  • terminal.ansiGreen#94B2D1
  • terminal.ansiMagenta#CB884D
  • terminal.ansiRed#CB884D
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#252C41
  • terminal.background#0D0F16
  • terminal.foreground#FFFFFF
  • titleBar.activeBackground#1B1E27
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#14161F
  • titleBar.inactiveForeground#FFFFFF
  • widget.shadow#0A0A0A55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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