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#C0803A
  • activityBar.border#C0803A
  • activityBar.foreground#F7EEE0
  • activityBar.inactiveForeground#EAC79E
  • activityBarBadge.background#A66A2C
  • activityBarBadge.foreground#F7EEE0
  • badge.background#C0803A
  • badge.foreground#F7EEE0
  • button.background#C0803A
  • button.foreground#F7EEE0
  • button.hoverBackground#A66A2C
  • button.secondaryBackground#DFC9A2
  • button.secondaryForeground#332720
  • contrastBorder#DFC9A2
  • dropdown.background#FFFFFF
  • dropdown.border#DFC9A2
  • editor.background#F7EEE0
  • editor.findMatchBackground#D08150A5
  • editor.findMatchHighlightBackground#D0815060
  • editor.foreground#332720
  • editor.inactiveSelectionBackground#A56C3F20
  • editor.lineHighlightBackground#EEE0CB
  • editor.selectionBackground#A56C3F45
  • editor.selectionHighlightBackground#A56C3F2A
  • editor.wordHighlightBackground#6E8351A0
  • editorBracketMatch.background#A56C3F30
  • editorBracketMatch.border#C0803A
  • editorCursor.foreground#C0803A
  • editorGroup.border#DFC9A2
  • editorGroupHeader.tabsBackground#F0E3CE
  • editorGutter.addedBackground#6B8351
  • editorGutter.deletedBackground#B15D50
  • editorGutter.modifiedBackground#6E8592
  • editorHoverWidget.background#EEE0CB
  • editorHoverWidget.border#DFC9A2
  • editorIndentGuide.activeBackground1#C9B393
  • editorIndentGuide.background1#E2D0AE
  • editorLineNumber.activeForeground#B9863C
  • editorLineNumber.foreground#C9B393
  • editorRuler.foreground#E2D0AE
  • editorSuggestWidget.background#EEE0CB
  • editorSuggestWidget.border#DFC9A2
  • editorSuggestWidget.selectedBackground#A56C3F30
  • editorWhitespace.foreground#E2D0AE
  • editorWidget.background#EEE0CB
  • editorWidget.border#DFC9A2
  • extensionButton.prominentBackground#C0803A
  • extensionButton.prominentHoverBackground#A66A2C
  • focusBorder#C0803A80
  • foreground#332720
  • input.background#FFFFFF
  • input.border#DFC9A2
  • input.foreground#332720
  • input.placeholderForeground#BFA985
  • list.activeSelectionBackground#DFC9A2
  • list.activeSelectionForeground#332720
  • list.highlightForeground#C0803A
  • list.hoverBackground#EAD9BB
  • list.inactiveSelectionBackground#E6D5B4
  • notificationCenterHeader.background#EEE0CB
  • notifications.background#EEE0CB
  • notifications.border#DFC9A2
  • notifications.foreground#332720
  • panel.background#F0E3CE
  • panel.border#DFC9A2
  • panelTitle.activeForeground#332720
  • panelTitle.inactiveForeground#6B5A46
  • peekView.border#C0803A
  • peekViewEditor.background#F7EEE0
  • peekViewResult.background#EEE0CB
  • progressBar.background#C0803A
  • scrollbarSlider.activeBackground#C0803A80
  • scrollbarSlider.background#DFC9A270
  • scrollbarSlider.hoverBackground#DFC9A2A0
  • sideBar.background#F0E3CE
  • sideBar.border#DFC9A2
  • sideBar.foreground#6B5A46
  • sideBarSectionHeader.background#E6D5B4
  • sideBarSectionHeader.foreground#332720
  • sideBarTitle.foreground#332720
  • statusBar.background#C0803A
  • statusBar.debuggingBackground#B15D50
  • statusBar.foreground#F7EEE0
  • statusBar.noFolderBackground#C0803A
  • statusBarItem.hoverBackground#A66A2C
  • tab.activeBackground#F7EEE0
  • tab.activeBorderTop#C0803A
  • tab.activeForeground#332720
  • tab.border#DFC9A2
  • tab.inactiveBackground#E6D5B4
  • tab.inactiveForeground#6B5A46
  • terminal.ansiBlack#332720
  • terminal.ansiBlue#6E8592
  • terminal.ansiBrightBlack#C9B393
  • terminal.ansiBrightBlue#8199A6
  • terminal.ansiBrightCyan#78A099
  • terminal.ansiBrightGreen#83995F
  • terminal.ansiBrightMagenta#AC8286
  • terminal.ansiBrightRed#C77163
  • terminal.ansiBrightWhite#332720
  • terminal.ansiBrightYellow#CB9E4C
  • terminal.ansiCyan#5E8580
  • terminal.ansiGreen#6B8351
  • terminal.ansiMagenta#966E72
  • terminal.ansiRed#B15D50
  • terminal.ansiWhite#6B5A46
  • terminal.ansiYellow#B98A3C
  • terminal.background#F7EEE0
  • terminal.foreground#332720
  • titleBar.activeBackground#A66A2C
  • titleBar.activeForeground#F7EEE0
  • titleBar.inactiveBackground#A66A2C
  • titleBar.inactiveForeground#E3C4A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#332720
comment, punctuation.definition.comment#A48F72italic
keyword, keyword.control, storage.type, storage.modifier#B9863Cbold
string, string.quoted#C77163
constant.numeric, constant.language, constant.character#8199A6
entity.name.function, support.function, meta.function-call#A66A2Cbold
variable, variable.parameter#332720
entity.name.type, entity.name.class, support.class, support.type#966E72italic
entity.name.tag#6B8351
entity.other.attribute-name#B98A3C
keyword.operator, punctuation#8A7461
variable.other.property, meta.object-literal.key#5E8580
markup.heading#C0803Abold
markup.boldbold
markup.italicitalic
invalid, invalid.illegal#B15D50