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#2A241D
  • activityBar.border#2E3833
  • activityBar.foreground#C85341
  • activityBarBadge.background#C85341
  • activityBarBadge.foreground#251F18
  • badge.background#C85341
  • badge.foreground#251F18
  • button.background#C85341
  • button.foreground#251F18
  • button.hoverBackground#C85341
  • dropdown.background#2F2922
  • dropdown.border#404F47
  • dropdown.foreground#E9E6E2
  • editor.background#1C1712
  • editor.foreground#D8D3CB
  • editor.lineHighlightBackground#2A241D99
  • editor.selectionBackground#283E3780
  • editorBracketMatch.background#283E3755
  • editorBracketMatch.border#C85341
  • editorCursor.foreground#C85341
  • editorGroupHeader.tabsBackground#2A241D
  • editorIndentGuide.activeBackground#404F47
  • editorIndentGuide.background#2E383388
  • editorLineNumber.activeForeground#5E8D79
  • editorLineNumber.foreground#698C7AAA
  • editorWhitespace.foreground#2E383366
  • focusBorder#404F47
  • foreground#D8D3CB
  • gitDecoration.deletedResourceForeground#C45F4F
  • gitDecoration.modifiedResourceForeground#C69C39
  • gitDecoration.untrackedResourceForeground#5B8F7A
  • input.background#2F2922
  • input.border#404F47
  • input.foreground#E9E6E2
  • inputOption.activeBorder#C85341
  • list.activeSelectionBackground#283E37
  • list.activeSelectionForeground#D8D3CB
  • list.focusOutline#C85341
  • list.hoverBackground#1D2522
  • list.inactiveSelectionBackground#1C2623
  • minimap.selectionHighlight#283E37AA
  • panel.background#2A241D
  • panel.border#2E3833
  • peekView.border#404F47
  • peekViewEditor.background#211C17
  • peekViewTitle.background#2A241D
  • scrollbarSlider.activeBackground#C85341AA
  • scrollbarSlider.background#404F4766
  • scrollbarSlider.hoverBackground#404F4799
  • sideBar.background#251F18
  • sideBar.border#2E3833
  • sideBar.foreground#D2CEC6
  • sideBarTitle.foreground#D8D3CB
  • statusBar.background#2A241D
  • statusBar.border#2E3833
  • statusBar.foreground#7F9A8D
  • tab.activeBackground#1C1712
  • tab.activeForeground#D8D3CB
  • tab.border#2E3833
  • tab.inactiveBackground#1C2623
  • tab.inactiveForeground#5F9583
  • terminal.ansiBlack#1C1712
  • terminal.ansiBlue#5F9583
  • terminal.ansiCyan#698C7A
  • terminal.ansiGreen#5E8D79
  • terminal.ansiMagenta#B19043
  • terminal.ansiRed#C85341
  • terminal.ansiWhite#D8D3CB
  • terminal.ansiYellow#683027
  • terminal.background#1C1712
  • terminal.foreground#D8D3CB
  • titleBar.activeBackground#2A241D
  • titleBar.activeForeground#D8D3CB
  • titleBar.inactiveBackground#251F18
  • titleBar.inactiveForeground#698C7A
  • widget.shadow#0C0A0855

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#6C897Aitalic
string, constant.other.symbol, string.regexp, string.template#5F9583
constant.character.escape#C9A95E
constant.numeric#C69C39
constant.language.boolean, constant.language.null, constant.language.undefined#AE8C3D
constant, entity.name.constant, support.constant#C26051
keyword, storage.type, storage.modifier, storage.type.function#C85341
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#AE4C3D
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#657B70
storage.type.class, storage.type.interface, storage.type.enum#C85341
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#596961
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#649082
support.type.builtin, entity.name.type.primitive#70A492
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#B84E3D
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#C16A5C
variable.parameter, variable.parameter.function#B6B0A5
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#799A8A
variable, meta.definition.variable, variable.other.readwrite#D8D3CB
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#C85341
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#6C897A
entity.other.attribute-name, entity.other.attribute-name.html#649082
support.class.component, entity.name.tag.template.value#C69C39
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#5F9583
entity.other.attribute-name.class.css, entity.other.attribute-name.class#5E8D79
entity.other.attribute-name.id.css, entity.other.attribute-name.id#C85341
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#649082
markup.heading#C85341bold
markup.boldbold
markup.italicitalic
markup.quote#D8D3CB
markup.inline.raw, markup.fenced_code#5F9583
invalid, invalid.illegal#FF6B6B