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#292524
  • activityBar.border#44403C
  • activityBar.foreground#F59E0B
  • activityBar.inactiveForeground#57534E
  • activityBarBadge.background#FB923C
  • activityBarBadge.foreground#1C1917
  • badge.background#FB923C
  • badge.foreground#1C1917
  • breadcrumb.activeSelectionForeground#FB923C
  • breadcrumb.focusForeground#FAF3E0
  • breadcrumb.foreground#78716C
  • button.background#FB923C
  • button.foreground#1C1917
  • button.hoverBackground#C2410C
  • dropdown.background#292524
  • dropdown.border#44403C
  • dropdown.foreground#FAF3E0
  • editor.background#1C1917
  • editor.findMatchBackground#FB923C50
  • editor.findMatchHighlightBackground#FB923C30
  • editor.foreground#FAF3E0
  • editor.inactiveSelectionBackground#FB923C18
  • editor.lineHighlightBackground#292524
  • editor.selectionBackground#FB923C30
  • editorBracketMatch.background#FB923C25
  • editorBracketMatch.border#FB923C
  • editorCursor.foreground#FB923C
  • editorError.foreground#F87171
  • editorGroupHeader.tabsBackground#292524
  • editorGroupHeader.tabsBorder#44403C
  • editorGutter.addedBackground#86EFAC60
  • editorGutter.deletedBackground#F8717160
  • editorGutter.modifiedBackground#F59E0B60
  • editorHint.foreground#FB923C
  • editorIndentGuide.activeBackground1#FB923C50
  • editorIndentGuide.background1#44403C
  • editorInfo.foreground#F59E0B
  • editorLineNumber.activeForeground#FB923C
  • editorLineNumber.foreground#44403C
  • editorOverviewRuler.addedForeground#86EFAC
  • editorOverviewRuler.border#44403C
  • editorOverviewRuler.deletedForeground#F87171
  • editorOverviewRuler.modifiedForeground#F59E0B
  • editorWarning.foreground#FBBF24
  • editorWhitespace.foreground#44403C
  • focusBorder#FB923C
  • gitDecoration.addedResourceForeground#86EFAC
  • gitDecoration.conflictingResourceForeground#FBBF24
  • gitDecoration.deletedResourceForeground#F87171
  • gitDecoration.ignoredResourceForeground#57534E
  • gitDecoration.modifiedResourceForeground#F59E0B
  • gitDecoration.untrackedResourceForeground#FB923C
  • input.background#292524
  • input.border#44403C
  • input.foreground#FAF3E0
  • input.placeholderForeground#57534E
  • inputOption.activeBackground#FB923C20
  • inputOption.activeBorder#FB923C
  • list.activeSelectionBackground#44403C
  • list.activeSelectionForeground#FAF3E0
  • list.focusBackground#44403C
  • list.highlightForeground#FB923C
  • list.hoverBackground#44403C80
  • list.inactiveSelectionBackground#44403C80
  • menu.background#292524
  • menu.foreground#FAF3E0
  • menu.selectionBackground#44403C
  • menu.selectionForeground#FAF3E0
  • menu.separatorBackground#44403C
  • notifications.background#292524
  • notifications.border#44403C
  • notifications.foreground#FAF3E0
  • panel.background#1C1917
  • panel.border#44403C
  • panelTitle.activeBorder#FB923C
  • panelTitle.activeForeground#FB923C
  • panelTitle.inactiveForeground#78716C
  • pickerGroup.foreground#FB923C
  • progressBar.background#FB923C
  • quickInput.background#292524
  • quickInput.foreground#FAF3E0
  • quickInputHighlightForeground#FB923C
  • scrollbarSlider.activeBackground#FB923C60
  • scrollbarSlider.background#44403C80
  • scrollbarSlider.hoverBackground#FB923C40
  • selection.background#FB923C40
  • sideBar.background#292524
  • sideBar.border#44403C
  • sideBar.foreground#D6C9B4
  • sideBarSectionHeader.background#1C1917
  • sideBarSectionHeader.border#44403C
  • sideBarSectionHeader.foreground#FB923C
  • sideBarTitle.foreground#FB923C
  • statusBar.background#FB923C
  • statusBar.debuggingBackground#C2410C
  • statusBar.foreground#1C1917
  • statusBar.noFolderBackground#1C1917
  • statusBarItem.hoverBackground#C2410C80
  • statusBarItem.remoteBackground#F59E0B
  • statusBarItem.remoteForeground#1C1917
  • tab.activeBackground#1C1917
  • tab.activeBorder#FB923C
  • tab.activeForeground#FAF3E0
  • tab.border#44403C
  • tab.hoverBackground#44403C
  • tab.inactiveBackground#292524
  • tab.inactiveForeground#78716C
  • terminal.ansiBlack#44403C
  • terminal.ansiBlue#60A5FA
  • terminal.ansiBrightBlack#57534E
  • terminal.ansiBrightBlue#93C5FD
  • terminal.ansiBrightCyan#6EE7B7
  • terminal.ansiBrightGreen#BBF7D0
  • terminal.ansiBrightMagenta#FDBA74
  • terminal.ansiBrightRed#FCA5A5
  • terminal.ansiBrightWhite#FFFBF0
  • terminal.ansiBrightYellow#FDE68A
  • terminal.ansiCyan#34D399
  • terminal.ansiGreen#86EFAC
  • terminal.ansiMagenta#FB923C
  • terminal.ansiRed#F87171
  • terminal.ansiWhite#FAF3E0
  • terminal.ansiYellow#F59E0B
  • terminal.background#1C1917
  • terminal.foreground#FAF3E0
  • terminal.selectionBackground#FB923C40
  • titleBar.activeBackground#1C1917
  • titleBar.activeForeground#FAF3E0
  • titleBar.border#44403C
  • titleBar.inactiveBackground#1C1917
  • titleBar.inactiveForeground#78716C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#57534Eitalic
variable, string constant.other.placeholder#FAF3E0—
invalid, invalid.illegal#F87171—
keyword, storage.type, storage.modifier#FB923C—
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#F59E0B—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#FCA5A5—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#F59E0B—
meta.block variable.other#FCA5A5—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#FBBF24—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#86EFAC—
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#FBBF24—
support.type#FDE68A—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#FDE68A—
entity.other.attribute-name#FB923C—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FBBF24italic
entity.other.attribute-name.class#FBBF24—
markup.inserted#86EFAC—
markup.deleted#F87171—
markup.changed#FB923C—
string.regexp#F59E0B—
constant.character.escape#F59E0B—
*url*, *link*, *uri*—underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#F59E0Bitalic
source.json meta.structure.dictionary.json support.type.property-name.json#FB923C—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#F59E0B—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FBBF24—
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#FB923C—
markup.bold, markup.bold string#FCA5A5bold
markup.italic#FCA5A5italic
string.other.link.title.markdown#F59E0B—