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

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#221a16
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#221a16
variable.parameter, meta.parameter#221a16dditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#221a1680
keyword.operator#221a16
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