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#343434
  • activityBar.border#ffffff15
  • activityBar.foreground#f4b43f
  • activityBar.inactiveForeground#fff8e660
  • activityBarBadge.background#f4b43f
  • activityBarBadge.foreground#343434
  • button.background#f4b43f
  • button.foreground#343434
  • button.hoverBackground#f4b43fdd
  • editor.background#343434
  • editor.foreground#fff8e6
  • editor.inactiveSelectionBackground#9aa0a23580
  • editor.lineHighlightBackground#24221c40
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#9aa0a235
  • editorCursor.foreground#f4b43f
  • editorGroupHeader.tabsBackground#343434dd
  • editorLineNumber.activeForeground#f4b43f
  • editorLineNumber.foreground#9aa0a280
  • focusBorder#f4b43f
  • foreground#fff8e6
  • input.background#24221c
  • input.border#ffffff15
  • input.foreground#fff8e6
  • input.placeholderForeground#fff8e660
  • list.activeSelectionBackground#f4b43f30
  • list.activeSelectionForeground#fff8e6
  • list.highlightForeground#f4b43f
  • list.hoverBackground#24221c40
  • list.hoverForeground#fff8e6
  • list.inactiveSelectionBackground#f4b43f15
  • list.inactiveSelectionForeground#fff8e6
  • selection.background#9aa0a235
  • sideBar.background#24221c
  • sideBar.border#ffffff15
  • sideBar.foreground#fff8e6
  • sideBarSectionHeader.background#34343480
  • sideBarSectionHeader.foreground#fff8e6
  • sideBarTitle.foreground#f4b43f
  • statusBar.background#343434
  • statusBar.border#ffffff15
  • statusBar.foreground#fff8e6
  • statusBar.noFolderBackground#343434
  • tab.activeBackground#343434
  • tab.activeBorderTop#f4b43f
  • tab.activeForeground#fff8e6
  • tab.border#ffffff15
  • tab.inactiveBackground#24221c60
  • tab.inactiveForeground#fff8e680
  • terminal.ansiBlack#343434
  • terminal.ansiBlue#9aa0a2
  • terminal.ansiCyan#d98a1c
  • terminal.ansiGreen#f4b43f
  • terminal.ansiMagenta#3f8f72
  • terminal.ansiRed#3f8f72
  • terminal.ansiWhite#fff8e6
  • terminal.ansiYellow#d98a1c
  • terminal.background#343434
  • terminal.foreground#fff8e6
  • titleBar.activeBackground#343434
  • titleBar.activeForeground#fff8e6
  • titleBar.border#ffffff15
  • titleBar.inactiveBackground#343434
  • titleBar.inactiveForeground#fff8e660
  • widget.border#ffffff15

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9aa0a2italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#9aa0a2bold
storage.type, storage.modifier#9aa0a2italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#f4b43f
string, punctuation.definition.string, string.template, meta.template.expression#d98a1c
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#3f8f72
variable, variable.other.readwrite, variable.other.object#fff8e6
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#fff8e6
variable.parameter, meta.parameter#fff8e6dditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#fff8e680
keyword.operator#fff8e6
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#d98a1cbold
entity.other.inherited-class#f4b43f
entity.name.tag, punctuation.definition.tag#9aa0a2
entity.other.attribute-name#f4b43f
meta.diff, meta.diff.header#9aa0a2
markup.deleted#3f8f72
markup.inserted#f4b43f
markup.changed#d98a1c
markup.heading, markup.heading.setext, punctuation.definition.heading#f4b43fbold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#d98a1c
string.other.link.title, string.other.link.description#f4b43f
markup.underline.link#9aa0a2underline
punctuation.definition.list#9aa0a2
markup.quote, punctuation.definition.quote#9aa0a2italic