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#B7774F
  • activityBar.border#B7774F
  • activityBar.foreground#F7F2E9
  • activityBar.inactiveForeground#EAC2A7
  • activityBarBadge.background#D28B5E
  • activityBarBadge.foreground#2E261F
  • badge.background#B7774F
  • badge.foreground#F7F2E9
  • button.background#B7774F
  • button.foreground#F7F2E9
  • button.hoverBackground#9C5F40
  • button.secondaryBackground#DDC7AC
  • button.secondaryForeground#2E261F
  • contrastBorder#DDC7AC
  • dropdown.background#FFFFFF
  • dropdown.border#DDC7AC
  • editor.background#F7F2E9
  • editor.findMatchBackground#B7774F60
  • editor.findMatchHighlightBackground#B7774F35
  • editor.foreground#2E261F
  • editor.inactiveSelectionBackground#F0C27A25
  • editor.lineHighlightBackground#EFE1D0
  • editor.selectionBackground#F0C27A50
  • editor.selectionHighlightBackground#F0C27A30
  • editor.wordHighlightBackground#6B948630
  • editorBracketMatch.background#F0C27A35
  • editorBracketMatch.border#B7774F
  • editorCursor.foreground#B7774F
  • editorGroup.border#DDC7AC
  • editorGroupHeader.tabsBackground#EFE1D0
  • editorGutter.addedBackground#6F8E63
  • editorGutter.deletedBackground#C46D60
  • editorGutter.modifiedBackground#6A8BA1
  • editorHoverWidget.background#EFE1D0
  • editorHoverWidget.border#DDC7AC
  • editorIndentGuide.activeBackground1#C7B79E
  • editorIndentGuide.background1#E0CFBA
  • editorLineNumber.activeForeground#B7774F
  • editorLineNumber.foreground#C7B79E
  • editorRuler.foreground#E0CFBA
  • editorSuggestWidget.background#EFE1D0
  • editorSuggestWidget.border#DDC7AC
  • editorSuggestWidget.selectedBackground#F0C27A40
  • editorWhitespace.foreground#E0CFBA
  • editorWidget.background#EFE1D0
  • editorWidget.border#DDC7AC
  • extensionButton.prominentBackground#B7774F
  • extensionButton.prominentHoverBackground#9C5F40
  • focusBorder#B7774F80
  • foreground#2E261F
  • input.background#FFFFFF
  • input.border#DDC7AC
  • input.foreground#2E261F
  • input.placeholderForeground#C0B09A
  • list.activeSelectionBackground#2E261F
  • list.activeSelectionForeground#F7F2E9
  • list.highlightForeground#B7774F
  • list.hoverBackground#ECDCCA
  • list.inactiveSelectionBackground#E5D3BF
  • notificationCenterHeader.background#EFE1D0
  • notifications.background#EFE1D0
  • notifications.border#DDC7AC
  • notifications.foreground#2E261F
  • panel.background#EFE1D0
  • panel.border#DDC7AC
  • panelTitle.activeForeground#2E261F
  • panelTitle.inactiveForeground#6C5D50
  • peekView.border#B7774F
  • peekViewEditor.background#F7F2E9
  • peekViewResult.background#EFE1D0
  • progressBar.background#B7774F
  • scrollbarSlider.activeBackground#B7774F80
  • scrollbarSlider.background#C7B79E70
  • scrollbarSlider.hoverBackground#C7B79EA0
  • sideBar.background#EFE1D0
  • sideBar.border#DDC7AC
  • sideBar.foreground#6C5D50
  • sideBarSectionHeader.background#E5D3BF
  • sideBarSectionHeader.foreground#2E261F
  • sideBarTitle.foreground#2E261F
  • statusBar.background#B7774F
  • statusBar.debuggingBackground#C46D60
  • statusBar.foreground#F7F2E9
  • statusBar.noFolderBackground#B7774F
  • statusBarItem.hoverBackground#9C5F40
  • tab.activeBackground#F7F2E9
  • tab.activeBorderTop#B7774F
  • tab.activeForeground#2E261F
  • tab.border#DDC7AC
  • tab.inactiveBackground#E5D3BF
  • tab.inactiveForeground#6C5D50
  • terminal.ansiBlack#2E261F
  • terminal.ansiBlue#6A8BA1
  • terminal.ansiBrightBlack#C7B79E
  • terminal.ansiBrightBlue#89A4B7
  • terminal.ansiBrightCyan#7AA6A3
  • terminal.ansiBrightGreen#8AA97E
  • terminal.ansiBrightMagenta#A28193
  • terminal.ansiBrightRed#D88A7D
  • terminal.ansiBrightWhite#F7F2E9
  • terminal.ansiBrightYellow#E0B862
  • terminal.ansiCyan#5E8E8C
  • terminal.ansiGreen#6F8E63
  • terminal.ansiMagenta#8B647A
  • terminal.ansiRed#C46D60
  • terminal.ansiWhite#6C5D50
  • terminal.ansiYellow#C89A46
  • terminal.background#F7F2E9
  • terminal.foreground#2E261F
  • titleBar.activeBackground#A46844
  • titleBar.activeForeground#F7F2E9
  • titleBar.inactiveBackground#A46844
  • titleBar.inactiveForeground#E4C9B5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#2E261F
comment, punctuation.definition.comment#A48F7Ditalic
keyword, keyword.control, storage.type, storage.modifier#6A8BA1bold
string, string.quoted#B7774F
constant.numeric, constant.language, constant.character#C89A46
entity.name.function, support.function, meta.function-call#2E261Fbold
variable, variable.parameter#2E261F
entity.name.type, entity.name.class, support.class, support.type#8B647Aitalic
entity.name.tag#6F8E63
entity.other.attribute-name#C89A46
keyword.operator, punctuation#8A7464
variable.other.property, meta.object-literal.key#6E8E88
markup.heading#B7774Fbold
markup.boldbold
markup.italicitalic
invalid, invalid.illegal#C46D60