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#10231b
  • activityBar.border#ffffff15
  • activityBar.foreground#5a2f25
  • activityBar.inactiveForeground#eee8dc60
  • activityBarBadge.background#5a2f25
  • activityBarBadge.foreground#10231b
  • button.background#5a2f25
  • button.foreground#10231b
  • button.hoverBackground#5a2f25dd
  • editor.background#10231b
  • editor.foreground#eee8dc
  • editor.inactiveSelectionBackground#f7f1e63580
  • editor.lineHighlightBackground#221a1640
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#f7f1e635
  • editorCursor.foreground#5a2f25
  • editorGroupHeader.tabsBackground#10231bdd
  • editorLineNumber.activeForeground#5a2f25
  • editorLineNumber.foreground#f7f1e680
  • focusBorder#5a2f25
  • foreground#eee8dc
  • input.background#221a16
  • input.border#ffffff15
  • input.foreground#eee8dc
  • input.placeholderForeground#eee8dc60
  • list.activeSelectionBackground#5a2f2530
  • list.activeSelectionForeground#eee8dc
  • list.highlightForeground#5a2f25
  • list.hoverBackground#221a1640
  • list.hoverForeground#eee8dc
  • list.inactiveSelectionBackground#5a2f2515
  • list.inactiveSelectionForeground#eee8dc
  • selection.background#f7f1e635
  • sideBar.background#221a16
  • sideBar.border#ffffff15
  • sideBar.foreground#eee8dc
  • sideBarSectionHeader.background#10231b80
  • sideBarSectionHeader.foreground#eee8dc
  • sideBarTitle.foreground#5a2f25
  • statusBar.background#10231b
  • statusBar.border#ffffff15
  • statusBar.foreground#eee8dc
  • statusBar.noFolderBackground#10231b
  • tab.activeBackground#10231b
  • tab.activeBorderTop#5a2f25
  • tab.activeForeground#eee8dc
  • tab.border#ffffff15
  • tab.inactiveBackground#221a1660
  • tab.inactiveForeground#eee8dc80
  • terminal.ansiBlack#10231b
  • terminal.ansiBlue#f7f1e6
  • terminal.ansiCyan#173c2d
  • terminal.ansiGreen#5a2f25
  • terminal.ansiMagenta#4f6f45
  • terminal.ansiRed#4f6f45
  • terminal.ansiWhite#eee8dc
  • terminal.ansiYellow#173c2d
  • terminal.background#10231b
  • terminal.foreground#eee8dc
  • titleBar.activeBackground#10231b
  • titleBar.activeForeground#eee8dc
  • titleBar.border#ffffff15
  • titleBar.inactiveBackground#10231b
  • titleBar.inactiveForeground#eee8dc60
  • widget.border#ffffff15

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#f7f1e6italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#f7f1e6bold
storage.type, storage.modifier#f7f1e6italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#5a2f25
string, punctuation.definition.string, string.template, meta.template.expression#173c2d
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#4f6f45
variable, variable.other.readwrite, variable.other.object#eee8dc
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#eee8dc
variable.parameter, meta.parameter#eee8dcdditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#eee8dc80
keyword.operator#eee8dc
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#173c2dbold
entity.other.inherited-class#5a2f25
entity.name.tag, punctuation.definition.tag#f7f1e6
entity.other.attribute-name#5a2f25
meta.diff, meta.diff.header#f7f1e6
markup.deleted#4f6f45
markup.inserted#5a2f25
markup.changed#173c2d
markup.heading, markup.heading.setext, punctuation.definition.heading#5a2f25bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#173c2d
string.other.link.title, string.other.link.description#5a2f25
markup.underline.link#f7f1e6underline
punctuation.definition.list#f7f1e6
markup.quote, punctuation.definition.quote#f7f1e6italic