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#1f1714
  • activityBar.foreground#ff9f5f
  • activityBar.inactiveForeground#7a5d47
  • activityBarBadge.background#ff9f5f
  • activityBarBadge.foreground#2a1f1a
  • badge.background#ff9f5f
  • badge.foreground#2a1f1a
  • button.background#ff9f5f
  • button.foreground#2a1f1a
  • button.hoverBackground#e58a4e
  • debugToolBar.background#1f1714
  • debugToolBar.border#4d3d2f
  • editor.background#2a1f1a
  • editor.findMatchBackground#a16b3e
  • editor.findMatchHighlightBackground#a16b3e55
  • editor.foreground#f5d5b8
  • editor.inactiveSelectionBackground#372b22
  • editor.lineHighlightBackground#28211c
  • editor.selectionBackground#4a3a2d
  • editor.wordHighlightBackground#4a3a2d55
  • editor.wordHighlightStrongBackground#4a3a2d99
  • editorBracketMatch.background#4a3a2d
  • editorBracketMatch.border#ff9f5f
  • editorCursor.foreground#f5d5b8
  • editorError.foreground#ff6b6b
  • editorGroupHeader.tabsBackground#1f1714
  • editorHint.foreground#ffca9f
  • editorIndentGuide.activeBackground#4d3d2f
  • editorIndentGuide.background#372b22
  • editorInfo.foreground#ffaf87
  • editorLineNumber.activeForeground#ff9f5f
  • editorLineNumber.foreground#4d3d2f
  • editorSuggestWidget.background#1f1714
  • editorSuggestWidget.border#4d3d2f
  • editorSuggestWidget.selectedBackground#4a3a2d
  • editorWarning.foreground#ffd97d
  • editorWhitespace.foreground#4d3d2f
  • editorWidget.background#1f1714
  • editorWidget.border#4d3d2f
  • extensionButton.prominentBackground#ff9f5f
  • extensionButton.prominentForeground#2a1f1a
  • extensionButton.prominentHoverBackground#e58a4e
  • gitDecoration.conflictingResourceForeground#ffb3ba
  • gitDecoration.deletedResourceForeground#ff6b6b
  • gitDecoration.ignoredResourceForeground#7a5d47
  • gitDecoration.modifiedResourceForeground#ffd97d
  • gitDecoration.untrackedResourceForeground#ffca9f
  • input.background#2a1f1a
  • input.border#4d3d2f
  • input.foreground#f5d5b8
  • inputOption.activeBackground#4a3a2d
  • inputOption.activeForeground#f5d5b8
  • list.activeSelectionBackground#4a3a2d
  • list.activeSelectionForeground#f5d5b8
  • list.hoverBackground#372b22
  • list.hoverForeground#f5d5b8
  • list.inactiveSelectionBackground#372b22
  • notificationCenter.border#4d3d2f
  • notifications.background#1f1714
  • notifications.border#4d3d2f
  • notificationToast.border#4d3d2f
  • panel.background#1f1714
  • panel.border#2a1f1a
  • panelTitle.activeBorder#ff9f5f
  • panelTitle.activeForeground#f5d5b8
  • panelTitle.inactiveForeground#7a5d47
  • peekViewEditor.background#1f1714
  • peekViewResult.background#1f1714
  • peekViewTitle.background#2a1f1a
  • pickerGroup.border#4d3d2f
  • pickerGroup.foreground#ff9f5f
  • scrollbarSlider.activeBackground#7a5d47
  • scrollbarSlider.background#4d3d2f80
  • scrollbarSlider.hoverBackground#4d3d2f
  • sideBar.background#1f1714
  • sideBar.foreground#d9b89f
  • sideBarSectionHeader.background#2a1f1a
  • sideBarSectionHeader.foreground#ff9f5f
  • sideBarTitle.foreground#f5d5b8
  • statusBar.background#1f1714
  • statusBar.debuggingBackground#ff6b6b
  • statusBar.debuggingForeground#2a1f1a
  • statusBar.foreground#d9b89f
  • statusBar.noFolderBackground#1f1714
  • tab.activeBackground#2a1f1a
  • tab.activeForeground#f5d5b8
  • tab.border#1f1714
  • tab.inactiveBackground#1f1714
  • tab.inactiveForeground#7a5d47
  • terminal.ansiBlack#52423a
  • terminal.ansiBlue#ffaf87
  • terminal.ansiBrightBlack#7a5d47
  • terminal.ansiBrightBlue#ffaf87
  • terminal.ansiBrightCyan#ffca9f
  • terminal.ansiBrightGreen#ffaa5a
  • terminal.ansiBrightMagenta#ffb3ba
  • terminal.ansiBrightRed#ff6b6b
  • terminal.ansiBrightWhite#f5d5b8
  • terminal.ansiBrightYellow#ffd97d
  • terminal.ansiCyan#ffca9f
  • terminal.ansiGreen#ffaa5a
  • terminal.ansiMagenta#ffb3ba
  • terminal.ansiRed#ff6b6b
  • terminal.ansiWhite#f5d5b8
  • terminal.ansiYellow#ffd97d
  • terminal.background#2a1f1a
  • terminal.foreground#f5d5b8
  • titleBar.activeBackground#1f1714
  • titleBar.activeForeground#f5d5b8
  • titleBar.inactiveBackground#1f1714
  • titleBar.inactiveForeground#7a5d47

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7a5d47italic
keyword, storage.type, storage.modifier#ffb3ba
keyword.control, keyword.operator#ffb3ba
string, string.quoted#ffaa5a
constant.numeric, constant.language#ffd97d
constant.character.escape#ffb3ba
entity.name.function, support.function#ff9f5f
entity.name.class, entity.name.type, support.class#ffaf87
variable, variable.other#f5d5b8
variable.parameter#d9b89f
entity.name.tag#ff6b6b
entity.other.attribute-name#ffb3ba
support.type.property-name#ff9f5f
markup.heading#ff9f5fbold
markup.bold#ffaf87bold
markup.italic#ffb3baitalic
markup.underlineunderline
markup.inline.raw#ffaa5a
punctuation.definition.tag#7a5d47
meta.function-call#ff9f5f
invalid#ff6b6b