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#211A10
  • activityBar.border#3B2A18
  • activityBar.foreground#D97706
  • activityBar.inactiveForeground#5C4A2A
  • activityBarBadge.background#FF6B35
  • activityBarBadge.foreground#1A1208
  • badge.background#FF6B35
  • badge.foreground#1A1208
  • breadcrumb.activeSelectionForeground#FF6B35
  • breadcrumb.focusForeground#FAF3E0
  • breadcrumb.foreground#A8956A
  • button.background#FF6B35
  • button.foreground#1A1208
  • button.hoverBackground#C2410C
  • dropdown.background#211A10
  • dropdown.border#3B2A18
  • dropdown.foreground#FAF3E0
  • editor.background#1A1208
  • editor.findMatchBackground#FF6B3550
  • editor.findMatchHighlightBackground#FF6B3530
  • editor.foreground#FAF3E0
  • editor.inactiveSelectionBackground#FF6B3518
  • editor.lineHighlightBackground#211A10
  • editor.selectionBackground#FF6B3530
  • editorBracketMatch.background#FF6B3525
  • editorBracketMatch.border#FF6B35
  • editorCursor.foreground#FF6B35
  • editorError.foreground#F87171
  • editorGroupHeader.tabsBackground#211A10
  • editorGroupHeader.tabsBorder#3B2A18
  • editorGutter.addedBackground#86EFAC60
  • editorGutter.deletedBackground#F8717160
  • editorGutter.modifiedBackground#D9770660
  • editorHint.foreground#FF6B35
  • editorIndentGuide.activeBackground1#FF6B3550
  • editorIndentGuide.background1#3B2A18
  • editorInfo.foreground#D97706
  • editorLineNumber.activeForeground#FF6B35
  • editorLineNumber.foreground#3B2A18
  • editorOverviewRuler.addedForeground#86EFAC
  • editorOverviewRuler.border#3B2A18
  • editorOverviewRuler.deletedForeground#F87171
  • editorOverviewRuler.modifiedForeground#D97706
  • editorWarning.foreground#FBBF24
  • editorWhitespace.foreground#3B2A18
  • focusBorder#FF6B35
  • gitDecoration.addedResourceForeground#86EFAC
  • gitDecoration.conflictingResourceForeground#FBBF24
  • gitDecoration.deletedResourceForeground#F87171
  • gitDecoration.ignoredResourceForeground#5C4A2A
  • gitDecoration.modifiedResourceForeground#D97706
  • gitDecoration.untrackedResourceForeground#FF6B35
  • input.background#211A10
  • input.border#3B2A18
  • input.foreground#FAF3E0
  • input.placeholderForeground#5C4A2A
  • inputOption.activeBackground#FF6B3520
  • inputOption.activeBorder#FF6B35
  • list.activeSelectionBackground#3B2A18
  • list.activeSelectionForeground#FAF3E0
  • list.focusBackground#3B2A18
  • list.highlightForeground#FF6B35
  • list.hoverBackground#3B2A1880
  • list.inactiveSelectionBackground#3B2A1880
  • menu.background#211A10
  • menu.foreground#FAF3E0
  • menu.selectionBackground#3B2A18
  • menu.selectionForeground#FAF3E0
  • menu.separatorBackground#3B2A18
  • notifications.background#211A10
  • notifications.border#3B2A18
  • notifications.foreground#FAF3E0
  • panel.background#1A1208
  • panel.border#3B2A18
  • panelTitle.activeBorder#FF6B35
  • panelTitle.activeForeground#FF6B35
  • panelTitle.inactiveForeground#A8956A
  • pickerGroup.foreground#FF6B35
  • progressBar.background#FF6B35
  • quickInput.background#211A10
  • quickInput.foreground#FAF3E0
  • quickInputHighlightForeground#FF6B35
  • scrollbarSlider.activeBackground#FF6B3560
  • scrollbarSlider.background#3B2A1880
  • scrollbarSlider.hoverBackground#FF6B3540
  • selection.background#FF6B3540
  • sideBar.background#211A10
  • sideBar.border#3B2A18
  • sideBar.foreground#E8D5B0
  • sideBarSectionHeader.background#1A1208
  • sideBarSectionHeader.border#3B2A18
  • sideBarSectionHeader.foreground#FF6B35
  • sideBarTitle.foreground#FF6B35
  • statusBar.background#FF6B35
  • statusBar.debuggingBackground#C2410C
  • statusBar.foreground#1A1208
  • statusBar.noFolderBackground#1A1208
  • statusBarItem.hoverBackground#C2410C80
  • statusBarItem.remoteBackground#D97706
  • statusBarItem.remoteForeground#1A1208
  • tab.activeBackground#1A1208
  • tab.activeBorder#FF6B35
  • tab.activeForeground#FAF3E0
  • tab.border#3B2A18
  • tab.hoverBackground#3B2A18
  • tab.inactiveBackground#211A10
  • tab.inactiveForeground#A8956A
  • terminal.ansiBlack#3B2A18
  • terminal.ansiBlue#60A5FA
  • terminal.ansiBrightBlack#5C4A2A
  • 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#FF6B35
  • terminal.ansiRed#F87171
  • terminal.ansiWhite#FAF3E0
  • terminal.ansiYellow#D97706
  • terminal.background#1A1208
  • terminal.foreground#FAF3E0
  • terminal.selectionBackground#FF6B3540
  • titleBar.activeBackground#1A1208
  • titleBar.activeForeground#FAF3E0
  • titleBar.border#3B2A18
  • titleBar.inactiveBackground#1A1208
  • titleBar.inactiveForeground#A8956A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5C4A2Aitalic
variable, string constant.other.placeholder#FAF3E0—
invalid, invalid.illegal#F87171—
keyword, storage.type, storage.modifier#FF6B35—
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#D97706—
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#D97706—
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#86d4c0—
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#FF6B35—
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#FF6B35—
string.regexp#D97706—
constant.character.escape#D97706—
*url*, *link*, *uri*—underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#D97706italic
source.json meta.structure.dictionary.json support.type.property-name.json#FF6B35—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#D97706—
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#FF6B35—
markup.bold, markup.bold string#FCA5A5bold
markup.italic#FCA5A5italic
string.other.link.title.markdown#D97706—