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.activeBorder#A86832
  • activityBar.background#EDE4D8
  • activityBar.border#D4C4B0
  • activityBar.foreground#5C4D40
  • activityBar.inactiveForeground#8C7B6B
  • activityBarBadge.background#A86832
  • activityBarBadge.foreground#FAF5EE
  • badge.background#7A3530
  • badge.foreground#FAF5EE
  • breadcrumb.activeSelectionForeground#2E2419
  • breadcrumb.background#F2EAD8
  • breadcrumb.foreground#8C7B6B
  • button.background#A86832
  • button.foreground#FAF5EE
  • button.hoverBackground#945A28
  • button.secondaryBackground#DDD0BC
  • button.secondaryForeground#2E2419
  • button.secondaryHoverBackground#D0C0A8
  • checkbox.background#FAF5EE
  • checkbox.border#D4C4B0
  • checkbox.foreground#2E2419
  • descriptionForeground#5C4D40
  • dropdown.background#FAF5EE
  • dropdown.border#D4C4B0
  • dropdown.foreground#2E2419
  • editor.background#F5EDE2
  • editor.findMatchBackground#9A7B3A88
  • editor.findMatchHighlightBackground#9A7B3A30
  • editor.foreground#2E2419
  • editor.inactiveSelectionBackground#D4DEE899
  • editor.lineHighlightBackground#EDE8E0
  • editor.lineHighlightBorder#DDD4C6
  • editor.selectionBackground#D4DEE8
  • editor.selectionHighlightBackground#A8683220
  • editor.wordHighlightBackground#9A7B3A1C
  • editor.wordHighlightStrongBackground#7A353024
  • editorBracketMatch.border#A86832
  • editorCursor.foreground#A86832
  • editorError.foreground#7A3530
  • editorGroupHeader.tabsBackground#E8DFD0
  • editorGutter.addedBackground#5A7A63
  • editorGutter.deletedBackground#7A3530
  • editorGutter.modifiedBackground#6E8FA8
  • editorHoverWidget.background#FAF5EE
  • editorHoverWidget.border#D4C4B0
  • editorHoverWidget.foreground#2E2419
  • editorIndentGuide.activeBackground1#B5A494
  • editorIndentGuide.background1#DDD4C6
  • editorInfo.foreground#6E8FA8
  • editorInlayHint.background#EBF0F6
  • editorInlayHint.foreground#5C4D40
  • editorLineNumber.activeForeground#7A3530
  • editorLineNumber.foreground#B5A494
  • editorLink.activeForeground#6E8FA8
  • editorSuggestWidget.background#FAF5EE
  • editorSuggestWidget.border#D4C4B0
  • editorSuggestWidget.foreground#2E2419
  • editorSuggestWidget.highlightForeground#A86832
  • editorWarning.foreground#9A7B3A
  • editorWhitespace.foreground#D4C4B0
  • editorWidget.background#FAF5EE
  • editorWidget.border#D4C4B0
  • editorWidget.foreground#2E2419
  • errorForeground#7A3530
  • focusBorder#C48840
  • foreground#2E2419
  • gitDecoration.addedResourceForeground#5A7A63
  • gitDecoration.deletedResourceForeground#7A3530
  • gitDecoration.modifiedResourceForeground#6E8FA8
  • gitDecoration.untrackedResourceForeground#5A7A63
  • icon.foreground#5C4D40
  • input.background#FAF5EE
  • input.border#D4C4B0
  • input.foreground#2E2419
  • input.placeholderForeground#8C7B6B
  • inputOption.activeBackground#A8683218
  • inputOption.activeBorder#A86832
  • inputOption.activeForeground#2E2419
  • inputValidation.errorBackground#F0DBD8
  • inputValidation.errorBorder#7A3530
  • inputValidation.infoBackground#EBF0F6
  • inputValidation.infoBorder#6E8FA8
  • inputValidation.warningBackground#F2E8D0
  • inputValidation.warningBorder#9A7B3A
  • list.activeSelectionBackground#D4DEE8
  • list.activeSelectionForeground#2E2419
  • list.focusBackground#D4DEE8
  • list.focusForeground#2E2419
  • list.highlightForeground#A86832
  • list.hoverBackground#EBF0F6
  • list.hoverForeground#2E2419
  • list.inactiveSelectionBackground#DDE4EC
  • list.inactiveSelectionForeground#2E2419
  • minimap.selectionHighlight#A8683238
  • notificationCenterHeader.background#E8DFD0
  • notifications.background#FAF5EE
  • notifications.border#D4C4B0
  • notifications.foreground#2E2419
  • panel.background#F2EAD8
  • panel.border#DDD4C6
  • panelTitle.activeForeground#2E2419
  • panelTitle.inactiveForeground#8C7B6B
  • peekView.border#D4C4B0
  • peekViewEditor.background#F5EDE2
  • peekViewEditorGutter.background#F5EDE2
  • peekViewResult.background#FAF5EE
  • peekViewResult.selectionBackground#D4DEE8
  • peekViewTitle.background#EDE4D8
  • peekViewTitleLabel.foreground#2E2419
  • progressBar.background#A86832
  • scrollbarSlider.activeBackground#8C7B6B77
  • scrollbarSlider.background#B5A49455
  • scrollbarSlider.hoverBackground#A0908066
  • selection.background#D4DEE8
  • sideBar.background#F2EAD8
  • sideBar.border#DDD4C6
  • sideBar.foreground#5C4D40
  • sideBarSectionHeader.background#E8DFD0
  • sideBarSectionHeader.border#DDD4C6
  • sideBarSectionHeader.foreground#2E2419
  • sideBarTitle.foreground#2E2419
  • statusBar.background#EDE4D8
  • statusBar.border#D4C4B0
  • statusBar.debuggingBackground#7A3530
  • statusBar.debuggingForeground#FAF5EE
  • statusBar.foreground#2E2419
  • statusBar.noFolderBackground#EDE4D8
  • tab.activeBackground#FAF5EE
  • tab.activeBorderTop#A86832
  • tab.activeForeground#2E2419
  • tab.border#DDD4C6
  • tab.inactiveBackground#E8DFD0
  • tab.inactiveForeground#8C7B6B
  • terminal.ansiBlack#3D3228
  • terminal.ansiBlue#6E8FA8
  • terminal.ansiBrightBlack#8C7B6B
  • terminal.ansiBrightBlue#88A4B8
  • terminal.ansiBrightCyan#72A0A0
  • terminal.ansiBrightGreen#6E9478
  • terminal.ansiBrightMagenta#946474
  • terminal.ansiBrightRed#9A4A42
  • terminal.ansiBrightWhite#F5EDE2
  • terminal.ansiBrightYellow#9A7B3A
  • terminal.ansiCyan#5A8A8A
  • terminal.ansiGreen#5A7A63
  • terminal.ansiMagenta#7A4A5C
  • terminal.ansiRed#7A3530
  • terminal.ansiWhite#E8DFD0
  • terminal.ansiYellow#8A6A28
  • terminal.background#F5EDE2
  • terminal.foreground#2E2419
  • terminalCursor.foreground#A86832
  • textLink.activeForeground#A86832
  • textLink.foreground#6E8FA8
  • titleBar.activeBackground#EDE4D8
  • titleBar.activeForeground#2E2419
  • titleBar.border#D4C4B0
  • titleBar.inactiveBackground#F2EAD8
  • titleBar.inactiveForeground#8C7B6B
  • widget.border#D4C4B0
  • widget.shadow#3D322818

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8C7B6Bitalic
string, string.quoted, string.template#5A7A63
constant.numeric, constant.language, constant.character#8A6A28
constant.character.escape, constant.other.symbol#7A4A5C
keyword, storage, storage.modifier#7A3530
keyword.operator, punctuation#5C4D40
entity.name.function, support.function, meta.function-call#A86832
variable.parameter#5A7A63italic
entity.name.type, entity.name.class, support.type, support.class#6E8FA8
entity.other.attribute-name, support.constant.property-value, meta.object-literal.key#8A6A28
variable, identifier#2E2419
entity.name.tag, punctuation.definition.tag#7A3530
support.constant, support.variable#6E8FA8
markup.heading, markup.bold#A86832bold
markup.italic#7A3530italic
markup.inline.raw, markup.fenced_code#6E8FA8
markup.quote#5C4D40italic
invalid, invalid.illegal#FAF5EE
PahadiBilla Theme by Totoshi - VS Code Theme