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#2A1617DD
  • activityBar.border#7A4B4744
  • activityBar.foreground#FFFB97
  • button.background#7A4B47
  • button.foreground#FFFB97
  • button.hoverBackground#832C1A
  • editor.background#2A1617CC
  • editor.findMatchBackground#FE7A4266
  • editor.findMatchHighlightBackground#FE7A4244
  • editor.foreground#FFFB97
  • editor.lineHighlightBackground#7A4B4733
  • editor.selectionBackground#FE7A4266
  • editor.selectionHighlightBackground#7A4B4744
  • editor.wordHighlightBackground#FE7A4222
  • editorCursor.foreground#FFFB97
  • editorGroupHeader.tabsBackground#2A1617BB
  • editorLineNumber.activeForeground#FFFB97
  • editorLineNumber.foreground#7A4B47AA
  • input.background#2A161777
  • input.border#7A4B4744
  • input.foreground#FFFB97
  • list.activeSelectionBackground#7A4B4788
  • list.activeSelectionForeground#FFFB97
  • list.hoverBackground#7A4B4744
  • list.hoverForeground#FFFB97
  • list.inactiveSelectionBackground#7A4B4755
  • list.inactiveSelectionForeground#FFFB97DD
  • notificationCenter.border#7A4B4744
  • notificationLink.foreground#FE7A42
  • notifications.background#2A1617DD
  • notifications.foreground#FFFB97
  • panel.background#2A1617BB
  • panel.border#7A4B4766
  • scrollbarSlider.activeBackground#FE7A4288
  • scrollbarSlider.background#7A4B4744
  • scrollbarSlider.hoverBackground#7A4B4788
  • sideBar.background#2A1617AA
  • sideBar.border#7A4B4744
  • sideBar.foreground#FEE7D3
  • statusBar.background#2A1617EE
  • statusBar.debuggingBackground#FE7A42AA
  • statusBar.foreground#FFFB97
  • statusBar.noFolderBackground#7A4B47AA
  • tab.activeBackground#7A4B4744
  • tab.activeBorder#FE7A42
  • tab.activeBorderTop#FE7A42
  • tab.activeForeground#FFFB97
  • tab.border#00000000
  • tab.inactiveBackground#2A161799
  • tab.inactiveForeground#FEE7D3AA
  • terminal.background#2A1617EE
  • terminal.foreground#FFFB97
  • terminalCursor.background#2A1617
  • terminalCursor.foreground#FFFB97
  • titleBar.activeBackground#2A1617EE
  • titleBar.activeForeground#FFFB97

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A4B47BBitalic
variable, string constant.other.placeholder#FEE7D3
keyword, storage.type, storage.modifier#FE7A42
entity.name.function, meta.function-call, support.function#FFFB97
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution#FFFB97
meta.method.declaration, meta.definition.method#FFFB97
string, string.template, punctuation.definition.string#FFFB97CC
constant.numeric#FE7A42
constant.language, support.constant, constant.character, constant.other#832C1A
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#FE7A42
entity.other.attribute-name#FFFB97DD
keyword.operator#FE7A42
constant.character.escape#832C1A
meta.decorator, tag.decorator.js entity.name.tag, tag.decorator.js punctuation.definition.tag#FFFB97italic
markup.heading, markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#FFFB97bold
markup.underline.link, string.other.link#FE7A42
markup.bold, punctuation.definition.bold#FE7A42bold
markup.italic, punctuation.definition.italic#FFFB97DDitalic
markup.raw.inline, markup.raw.block#FFFB97