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.activeBackground#6B4A28
  • activityBar.activeBorder#D6971B
  • activityBar.background#593E21
  • activityBar.border#80583A
  • activityBar.foreground#F0E8D5
  • activityBar.inactiveForeground#9A7A52
  • activityBarBadge.background#D6971B
  • activityBarBadge.foreground#593E21
  • badge.background#D6971B
  • badge.foreground#593E21
  • breadcrumb.activeSelectionForeground#3A2B18
  • breadcrumb.background#F4EDD9
  • breadcrumb.focusForeground#4A3520
  • breadcrumb.foreground#9A8060
  • breadcrumbPicker.background#DED4BD
  • button.background#593E21
  • button.border#7A5530
  • button.foreground#F0E8D5
  • button.hoverBackground#7A5530
  • button.secondaryBackground#DDD3BD
  • button.secondaryForeground#4A3520
  • button.secondaryHoverBackground#D8C9A3
  • charts.blue#1E6A9B
  • charts.foreground#4A3520
  • charts.green#3A8A5C
  • charts.lines#B8A07A
  • charts.orange#C8692A
  • charts.purple#6B4AA0
  • charts.red#C9473B
  • charts.yellow#D6971B
  • debugToolBar.background#F0E8D5
  • debugToolBar.border#B8A07A
  • descriptionForeground#7A6040
  • diffEditor.border#B8A07A
  • diffEditor.insertedLineBackground#3A8A5C18
  • diffEditor.insertedTextBackground#3A8A5C26
  • diffEditor.removedLineBackground#C9473B18
  • diffEditor.removedTextBackground#C9473B26
  • diffEditorGutter.insertedLineBackground#3A8A5C30
  • diffEditorGutter.removedLineBackground#C9473B30
  • dropdown.background#FAF4E4
  • dropdown.border#A0804A
  • dropdown.foreground#4A3520
  • dropdown.listBackground#EBE1CE
  • editor.background#F4EDD9
  • editor.findMatchBackground#D6971B80
  • editor.findMatchBorder#D6971BCC
  • editor.findMatchHighlightBackground#D6971B50
  • editor.findMatchHighlightBorder#D6971B80
  • editor.focusedStackFrameHighlightBackground#D6971B50
  • editor.foreground#3A2B18
  • editor.inactiveSelectionBackground#B8905040
  • editor.lineHighlightBackground#E5DBCA
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#D6971B20
  • editor.selectionBackground#B8905059
  • editor.selectionHighlightBackground#B8905040
  • editor.selectionHighlightBorder#B8905099
  • editor.stackFrameHighlightBackground#D6971B30
  • editor.symbolHighlightBackground#B8905040
  • editor.wordHighlightBackground#C0A87066
  • editor.wordHighlightBorder#A08040AA
  • editor.wordHighlightStrongBackground#A0804059
  • editor.wordHighlightStrongBorder#8060309A
  • editorBracketHighlight.foreground1#B8860B
  • editorBracketHighlight.foreground2#1E6A9B
  • editorBracketHighlight.foreground3#6B4AA0
  • editorBracketHighlight.foreground4#3A8A5C
  • editorBracketHighlight.foreground5#C9473B
  • editorBracketHighlight.foreground6#C8692A
  • editorBracketHighlight.unexpectedBracket.foreground#C9473B
  • editorBracketMatch.background#B8A07A40
  • editorBracketMatch.border#B8860B
  • editorCodeLens.foreground#9A8060
  • editorCursor.background#F4EDD9
  • editorCursor.foreground#B8860B
  • editorError.border#C9473B40
  • editorError.foreground#C9473B
  • editorGroup.border#B8A07A
  • editorGroup.dropBackground#D6971B20
  • editorGroupHeader.noTabsBackground#F4EDD9
  • editorGroupHeader.tabsBackground#DDD3BD
  • editorGroupHeader.tabsBorder#D8C9A3
  • editorGutter.addedBackground#3A8A5C
  • editorGutter.background#F4EDD9
  • editorGutter.commentRangeForeground#C0AA88
  • editorGutter.deletedBackground#C9473B
  • editorGutter.modifiedBackground#1E6A9B
  • editorHint.foreground#6B4AA0
  • editorHoverWidget.background#EBE1CE
  • editorHoverWidget.border#A0804A
  • editorHoverWidget.foreground#4A3520
  • editorIndentGuide.activeBackground1#B8A07A
  • editorIndentGuide.background1#D8C9A3
  • editorInfo.border#1E6A9B40
  • editorInfo.foreground#1E6A9B
  • editorLineNumber.activeForeground#9A8060
  • editorLineNumber.foreground#C0AA88
  • editorOverviewRuler.addedForeground#3A8A5C
  • editorOverviewRuler.border#D8C9A3
  • editorOverviewRuler.deletedForeground#C9473B
  • editorOverviewRuler.errorForeground#C9473B
  • editorOverviewRuler.findMatchForeground#D6971BCC
  • editorOverviewRuler.infoForeground#1E6A9B
  • editorOverviewRuler.modifiedForeground#1E6A9B
  • editorOverviewRuler.selectionHighlightForeground#B8905066
  • editorOverviewRuler.warningForeground#B8860B
  • editorOverviewRuler.wordHighlightForeground#C0A87099
  • editorRuler.foreground#D8C9A3
  • editorSuggestWidget.background#DDD3BD
  • editorSuggestWidget.border#A0804A
  • editorSuggestWidget.foreground#4A3520
  • editorSuggestWidget.highlightForeground#8B6914
  • editorSuggestWidget.selectedBackground#D8C9A3
  • editorSuggestWidget.selectedForeground#3A2B18
  • editorWarning.border#B8860B40
  • editorWarning.foreground#B8860B
  • editorWhitespace.foreground#C0A878
  • editorWidget.background#EBE1CE
  • editorWidget.border#A0804A
  • editorWidget.foreground#4A3520
  • editorWidget.resizeBorder#B8860B
  • errorForeground#C9473B
  • extensionButton.prominentBackground#593E21
  • extensionButton.prominentForeground#F0E8D5
  • extensionButton.prominentHoverBackground#7A5530
  • focusBorder#A0804A
  • foreground#4A3520
  • gitDecoration.addedResourceForeground#3A8A5C
  • gitDecoration.conflictingResourceForeground#C8692A
  • gitDecoration.deletedResourceForeground#C9473B
  • gitDecoration.ignoredResourceForeground#CCBA98
  • gitDecoration.modifiedResourceForeground#1E6A9B
  • gitDecoration.renamedResourceForeground#B8860B
  • gitDecoration.stageDeletedResourceForeground#E05040
  • gitDecoration.stageModifiedResourceForeground#164E7A
  • gitDecoration.submoduleResourceForeground#9A8060
  • gitDecoration.untrackedResourceForeground#6B4AA0
  • icon.foreground#7A6040
  • input.background#FAF4E4
  • input.border#A0804A
  • input.foreground#3A2B18
  • input.placeholderForeground#9A8060
  • inputOption.activeBackground#DDD3BD
  • inputOption.activeBorder#B8860B
  • inputOption.activeForeground#3A2B18
  • inputValidation.errorBackground#C9473B20
  • inputValidation.errorBorder#C9473B
  • inputValidation.infoBackground#1E6A9B20
  • inputValidation.infoBorder#1E6A9B
  • inputValidation.warningBackground#B8860B20
  • inputValidation.warningBorder#B8860B
  • keybindingLabel.background#F0E8D5
  • keybindingLabel.border#A0804A
  • keybindingLabel.bottomBorder#B8A07A
  • keybindingLabel.foreground#4A3520
  • list.activeSelectionBackground#D8C9A3
  • list.activeSelectionForeground#3A2B18
  • list.activeSelectionIconForeground#8B6914
  • list.dropBackground#D6971B26
  • list.errorForeground#C9473B
  • list.focusBackground#DDD3BD
  • list.focusForeground#3A2B18
  • list.focusOutline#B8A07A
  • list.highlightForeground#8B6914
  • list.hoverBackground#ECE3CE
  • list.hoverForeground#3A2B18
  • list.inactiveSelectionBackground#E5DBCA
  • list.inactiveSelectionForeground#4A3520
  • list.warningForeground#B8860B
  • listFilterWidget.background#EBE1CE
  • listFilterWidget.noMatchesOutline#C9473B
  • listFilterWidget.outline#B8860B
  • menu.background#FAF4E4
  • menu.border#B8A07A
  • menu.foreground#4A3520
  • menu.selectionBackground#DDD3BD
  • menu.selectionForeground#3A2B18
  • menu.separatorBackground#DDD3BD
  • menubar.selectionBackground#DDD3BD
  • menubar.selectionForeground#3A2B18
  • merge.border#B8A07A
  • merge.currentContentBackground#1E6A9B20
  • merge.currentHeaderBackground#1E6A9B40
  • merge.incomingContentBackground#3A8A5C20
  • merge.incomingHeaderBackground#3A8A5C40
  • minimap.errorHighlight#C9473BCC
  • minimap.findMatchHighlight#D6971BCC
  • minimap.selectionHighlight#B8905099
  • minimap.warningHighlight#D6971BCC
  • minimapGutter.addedBackground#3A8A5C
  • minimapGutter.deletedBackground#C9473B
  • minimapGutter.modifiedBackground#1E6A9B
  • minimapSlider.activeBackground#B8A07A99
  • minimapSlider.background#C0A87040
  • minimapSlider.hoverBackground#C0A87070
  • notificationCenterHeader.background#EBE1CE
  • notificationCenterHeader.foreground#4A3520
  • notificationLink.foreground#B8860B
  • notifications.background#F4EDD9
  • notifications.border#B8A07A
  • notifications.foreground#4A3520
  • notificationsErrorIcon.foreground#C9473B
  • notificationsInfoIcon.foreground#1E6A9B
  • notificationsWarningIcon.foreground#B8860B
  • panel.background#EBE1CE
  • panel.border#B8A07A
  • panel.dropBorder#B8860B
  • panelInput.border#B8A07A
  • panelTitle.activeBorder#B8860B
  • panelTitle.activeForeground#3A2B18
  • panelTitle.inactiveForeground#9A8060
  • peekView.border#B8860B
  • peekViewEditor.background#FAF4E4
  • peekViewEditor.matchHighlightBackground#D6971B40
  • peekViewEditorGutter.background#F4EDD9
  • peekViewResult.background#F4EDD9
  • peekViewResult.fileForeground#4A3520
  • peekViewResult.lineForeground#9A8060
  • peekViewResult.matchHighlightBackground#D6971B40
  • peekViewResult.selectionBackground#DDD3BD
  • peekViewResult.selectionForeground#3A2B18
  • peekViewTitle.background#EBE1CE
  • peekViewTitleDescription.foreground#7A6040
  • peekViewTitleLabel.foreground#3A2B18
  • problemsErrorIcon.foreground#C9473B
  • problemsInfoIcon.foreground#1E6A9B
  • problemsWarningIcon.foreground#B8860B
  • progressBar.background#D6971B
  • scrollbar.shadow#B8A07A66
  • scrollbarSlider.activeBackground#A08040CC
  • scrollbarSlider.background#C0A87059
  • scrollbarSlider.hoverBackground#B8A07AAA
  • selection.background#B8905059
  • sideBar.background#EBE1CE
  • sideBar.border#B8A07A
  • sideBar.dropBackground#B8905040
  • sideBar.foreground#4A3520
  • sideBarSectionHeader.background#DDD3BD
  • sideBarSectionHeader.border#D7C8A3
  • sideBarSectionHeader.foreground#7A6040
  • sideBarTitle.foreground#3A2B18
  • statusBar.background#593E21
  • statusBar.border#80583A
  • statusBar.debuggingBackground#7A1E18
  • statusBar.debuggingForeground#F0E8D5
  • statusBar.foreground#E8DFCA
  • statusBar.noFolderBackground#7A6040
  • statusBar.noFolderForeground#E8DFCA
  • statusBarItem.activeBackground#7A5530
  • statusBarItem.errorBackground#7A1E18
  • statusBarItem.errorForeground#F0E8D5
  • statusBarItem.hoverBackground#7A5030
  • statusBarItem.remoteBackground#7A5530
  • statusBarItem.remoteForeground#F0E8D5
  • statusBarItem.warningBackground#8B5E18
  • statusBarItem.warningForeground#F0E8D5
  • tab.activeBackground#F4EDD9
  • tab.activeBorder#00000000
  • tab.activeBorderTop#B8860B
  • tab.activeForeground#3A2B18
  • tab.border#D8C9A3
  • tab.inactiveBackground#DDD3BD
  • tab.inactiveForeground#7A6648
  • tab.lastPinnedBorder#B8A07A
  • tab.unfocusedActiveBackground#F4EDD9
  • tab.unfocusedActiveForeground#7A6040
  • tab.unfocusedInactiveForeground#A09070
  • terminal.ansiBlack#3A2B18
  • terminal.ansiBlue#1E6A9B
  • terminal.ansiBrightBlack#7A6648
  • terminal.ansiBrightBlue#164E7A
  • terminal.ansiBrightCyan#205A58
  • terminal.ansiBrightGreen#2E7A5C
  • terminal.ansiBrightMagenta#553A85
  • terminal.ansiBrightRed#E05040
  • terminal.ansiBrightWhite#FBF6EE
  • terminal.ansiBrightYellow#7A5C0E
  • terminal.ansiCyan#2E7A78
  • terminal.ansiGreen#3A8A5C
  • terminal.ansiMagenta#6B4AA0
  • terminal.ansiRed#C9473B
  • terminal.ansiWhite#EBE1CE
  • terminal.ansiYellow#8B6914
  • terminal.background#EBE1CE
  • terminal.border#B8A07A
  • terminal.foreground#3A2B18
  • terminal.selectionBackground#B8905059
  • terminalCursor.background#EBE1CE
  • terminalCursor.foreground#B8860B
  • titleBar.activeBackground#FAF4E4
  • titleBar.activeForeground#4A3520
  • titleBar.border#D7C8A3
  • titleBar.inactiveBackground#F4EDD9
  • titleBar.inactiveForeground#9A8060
  • tree.indentGuidesStroke#D8C9A3
  • tree.tableColumnsBorder#DDD3BD
  • widget.border#A0804A
  • widget.shadow#B8A07A66

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, punctuation.definition.comment#9A8060italic
string, string.quoted, string.template#C9473B
constant.character.escape, string.regexp#C8692A
constant.numeric#C8692A
constant.language#C8692Aitalic
constant.other, constant.other.color#C8692A
keyword, keyword.control, keyword.other#1E6A9Bitalic
storage.type, storage.modifier#1E6A9Bitalic
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical#7A6040
entity.name.function, meta.definition.method entity.name.function#8B6914
meta.function-call entity.name.function, meta.method-call entity.name.function#8B6914
entity.name.type, entity.name.class, entity.name.interface, entity.name.enum, entity.name.namespace, entity.other.inherited-class#6B4AA0
entity.name.tag, meta.tag.sgml#C9473B
entity.other.attribute-name#8B6914
support.type.property-name.css, support.type.property-name#8B6914
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#6B4AA0
variable, variable.other, variable.other.readwrite#3A2B18
variable.language#1E6A9Bitalic
variable.parameter#7A5030
variable.other.property, variable.other.object.property, support.variable.property#6B4828
support.function, support.function.builtin#3A8A5C
support.type, support.class#6B4AA0
support.constant#C8692A
punctuation, punctuation.definition.tag, punctuation.separator, punctuation.terminator, punctuation.accessor#9A8060
punctuation.definition.template-expression#C8692A
meta.decorator, punctuation.decorator, entity.name.function.decorator#C8692A
invalid, invalid.deprecated#C9473Bunderline
markup.heading, punctuation.definition.heading.markdown, entity.name.section#8B6914bold
markup.bold#C9473Bbold
markup.italic#1E6A9Bitalic
markup.bold markup.italic, markup.italic markup.bold#C9473Bbold italic
markup.inline.raw, markup.raw.inline#3A8A5C
markup.underline.link, string.other.link, meta.link#1E6A9Bunderline
markup.quote#9A8060italic
beginning.punctuation.definition.list.markdown, punctuation.definition.list.begin.markdown#8B6914
support.type.property-name.json#8B6914
entity.name.tag.yaml#8B6914
meta.import string, meta.require string#C9473B