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#292019
  • activityBar.border#38322E
  • activityBar.foreground#C9547F
  • activityBarBadge.background#C9547F
  • activityBarBadge.foreground#231A15
  • badge.background#C9547F
  • badge.foreground#231A15
  • button.background#C9547F
  • button.foreground#231A15
  • button.hoverBackground#E84817
  • dropdown.background#2F241E
  • dropdown.border#4F4540
  • dropdown.foreground#EEEAE7
  • editor.background#1A130F
  • editor.foreground#E2DBD4
  • editor.lineHighlightBackground#29201999
  • editor.selectionBackground#43232B80
  • editorBracketMatch.background#43232B55
  • editorBracketMatch.border#C9547F
  • editorCursor.foreground#C9547F
  • editorGroupHeader.tabsBackground#292019
  • editorIndentGuide.activeBackground#4F4540
  • editorIndentGuide.background#38322E88
  • editorLineNumber.activeForeground#CA4B2B
  • editorLineNumber.foreground#918378AA
  • editorWhitespace.foreground#38322E66
  • focusBorder#4F4540
  • foreground#E2DBD4
  • gitDecoration.deletedResourceForeground#DF4980
  • gitDecoration.modifiedResourceForeground#F67A28
  • gitDecoration.untrackedResourceForeground#53A278
  • input.background#2F241E
  • input.border#4F4540
  • input.foreground#EEEAE7
  • inputOption.activeBorder#C9547F
  • list.activeSelectionBackground#43232B
  • list.activeSelectionForeground#E2DBD4
  • list.focusOutline#C9547F
  • list.hoverBackground#26201C
  • list.inactiveSelectionBackground#28201B
  • minimap.selectionHighlight#43232BAA
  • panel.background#292019
  • panel.border#38322E
  • peekView.border#4F4540
  • peekViewEditor.background#221B16
  • peekViewTitle.background#292019
  • scrollbarSlider.activeBackground#C9547FAA
  • scrollbarSlider.background#4F454066
  • scrollbarSlider.hoverBackground#4F454099
  • sideBar.background#231A15
  • sideBar.border#38322E
  • sideBar.foreground#DCD6D0
  • sideBarTitle.foreground#E2DBD4
  • statusBar.background#292019
  • statusBar.border#38322E
  • statusBar.foreground#988B81
  • tab.activeBackground#1A130F
  • tab.activeForeground#E2DBD4
  • tab.border#38322E
  • tab.inactiveBackground#28201B
  • tab.inactiveForeground#E96A20
  • terminal.ansiBlack#1A130F
  • terminal.ansiBlue#E96A20
  • terminal.ansiCyan#918378
  • terminal.ansiGreen#CA4B2B
  • terminal.ansiMagenta#CA495F
  • terminal.ansiRed#C9547F
  • terminal.ansiWhite#E2DBD4
  • terminal.ansiYellow#843E15
  • terminal.background#1A130F
  • terminal.foreground#E2DBD4
  • titleBar.activeBackground#292019
  • titleBar.activeForeground#E2DBD4
  • titleBar.inactiveBackground#231A15
  • titleBar.inactiveForeground#918378
  • widget.shadow#0D090755

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#918378italic
string, constant.other.symbol, string.regexp, string.template#53A278
constant.character.escape#E48B58
constant.numeric#F67A28
constant.language.boolean, constant.language.null, constant.language.undefined#ED691D
constant, entity.name.constant, support.constant#E46444
keyword, storage.type, storage.modifier, storage.type.function#C9547F
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#D6668B
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#847971
storage.type.class, storage.type.interface, storage.type.enum#C9547F
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#726A65
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#E96A20
support.type.builtin, entity.name.type.primitive#E78340
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#E84817
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#D3697B
variable.parameter, variable.parameter.function#C2B7AE
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#CF7786
variable, meta.definition.variable, variable.other.readwrite#E2DBD4
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#C9547F
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#847971
entity.other.attribute-name, entity.other.attribute-name.html#E96A20
support.class.component, entity.name.tag.template.value#F67A28
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#53A278
entity.other.attribute-name.class.css, entity.other.attribute-name.class#ED691D
entity.other.attribute-name.id.css, entity.other.attribute-name.id#C9547F
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#E96A20
markup.heading#C9547Fbold
markup.boldbold
markup.italicitalic
markup.quote#E2DBD4
markup.inline.raw, markup.fenced_code#53A278
invalid, invalid.illegal#FF6B6B