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#231C1A
  • activityBar.border#453A36
  • activityBar.foreground#DD573C
  • activityBarBadge.background#DD573C
  • activityBarBadge.foreground#1C1512
  • badge.background#DD573C
  • badge.foreground#1C1512
  • button.background#DD573C
  • button.foreground#1C1512
  • button.hoverBackground#DD573C
  • dropdown.background#231C1A
  • dropdown.border#453A36
  • dropdown.foreground#FFFFFF
  • editor.background#130D0C
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#231C1A99
  • editor.selectionBackground#1E2C3380
  • editorBracketMatch.background#1E2C3355
  • editorBracketMatch.border#DD573C
  • editorCursor.foreground#DD573C
  • editorGroupHeader.tabsBackground#231C1A
  • editorIndentGuide.activeBackground#453A36
  • editorIndentGuide.background#453A3688
  • editorLineNumber.activeForeground#82B8C9
  • editorLineNumber.foreground#FFFFFFAA
  • editorWhitespace.foreground#453A3666
  • focusBorder#453A36
  • foreground#FFFFFF
  • gitDecoration.deletedResourceForeground#DA4B3E
  • gitDecoration.modifiedResourceForeground#DAA12F
  • gitDecoration.untrackedResourceForeground#59A680
  • input.background#231C1A
  • input.border#453A36
  • input.foreground#FFFFFF
  • inputOption.activeBorder#DD573C
  • list.activeSelectionBackground#1E2C33
  • list.activeSelectionForeground#FFFFFF
  • list.focusOutline#DD573C
  • list.hoverBackground#231C1A
  • list.inactiveSelectionBackground#1E2C33
  • minimap.selectionHighlight#1E2C33AA
  • panel.background#231C1A
  • panel.border#453A36
  • peekView.border#453A36
  • peekViewEditor.background#231C1A
  • peekViewTitle.background#231C1A
  • scrollbarSlider.activeBackground#DD573CAA
  • scrollbarSlider.background#453A3666
  • scrollbarSlider.hoverBackground#453A3699
  • sideBar.background#1C1512
  • sideBar.border#453A36
  • sideBar.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#231C1A
  • statusBar.border#453A36
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#130D0C
  • tab.activeForeground#FFFFFF
  • tab.border#453A36
  • tab.inactiveBackground#1E2C33
  • tab.inactiveForeground#82B8C9
  • terminal.ansiBlack#130D0C
  • terminal.ansiBlue#82B8C9
  • terminal.ansiCyan#FFFFFF
  • terminal.ansiGreen#82B8C9
  • terminal.ansiMagenta#DD573C
  • terminal.ansiRed#DD573C
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#1E2C33
  • terminal.background#130D0C
  • terminal.foreground#FFFFFF
  • titleBar.activeBackground#231C1A
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#1C1512
  • titleBar.inactiveForeground#FFFFFF
  • widget.shadow#0A0A0A55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#988C81italic
string, constant.other.symbol, string.regexp, string.template#82B8C9
constant.character.escape#DD573C
constant.numeric#DD573C
constant.language.boolean, constant.language.null, constant.language.undefined#DD573C
constant, entity.name.constant, support.constant#DD573C
keyword, storage.type, storage.modifier, storage.type.function#DD573C
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#DD573C
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#988C81
storage.type.class, storage.type.interface, storage.type.enum#DD573C
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#988C81
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#82B8C9
support.type.builtin, entity.name.type.primitive#82B8C9
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#DD573C
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#82B8C9
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#DD573C
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#988C81
entity.other.attribute-name, entity.other.attribute-name.html#82B8C9
support.class.component, entity.name.tag.template.value#DD573C
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#DD573C
entity.other.attribute-name.id.css, entity.other.attribute-name.id#DD573C
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#82B8C9
markup.heading#DD573Cbold
markup.boldbold
markup.italicitalic
markup.quote#E5E2DC
markup.inline.raw, markup.fenced_code#82B8C9
invalid, invalid.illegal#FF6B6B