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#BF360C
  • activityBar.background#150D0A
  • activityBar.border#321E18
  • activityBar.foreground#DEBEB0
  • activityBar.inactiveForeground#7D5D50
  • activityBarBadge.background#BF360C
  • activityBarBadge.foreground#150D0A
  • badge.background#321E18
  • badge.foreground#DEBEB0
  • banner.background#231611
  • banner.foreground#DEBEB0
  • banner.iconForeground#BF360C
  • breadcrumb.activeSelectionForeground#BF360C
  • breadcrumb.background#0E0806
  • breadcrumb.focusForeground#EAD5CC
  • breadcrumb.foreground#7D5D50
  • button.background#BF360C
  • button.foreground#150D0A
  • button.hoverBackground#bf360cd9
  • button.secondaryBackground#321E18
  • button.secondaryForeground#DEBEB0
  • charts.blue#BF360C
  • charts.foreground#DEBEB0
  • charts.green#558B2F
  • charts.lines#4C2E24
  • charts.orange#F57F17
  • charts.purple#0D47A1
  • charts.red#D50000
  • charts.yellow#F57F17
  • chat.avatarBackground#231611
  • chat.avatarForeground#DEBEB0
  • chat.background#0E0806
  • chat.requestBackground#150D0A
  • chat.requestBorder#321E18
  • chat.slashCommandBackground#bf360c33
  • chat.slashCommandForeground#BF360C
  • checkbox.background#231611
  • checkbox.border#4C2E24
  • checkbox.foreground#EAD5CC
  • checkbox.selectBackground#BF360C
  • checkbox.selectBorder#BF360C
  • commandCenter.activeBackground#321E18
  • commandCenter.activeBorder#BF360C
  • commandCenter.activeForeground#EAD5CC
  • commandCenter.background#231611
  • commandCenter.border#321E18
  • commandCenter.debuggingBackground#F57F17
  • commandCenter.foreground#BD9E90
  • commandCenter.inactiveBorder#321E18
  • commandCenter.inactiveForeground#7D5D50
  • debugConsole.errorForeground#D50000
  • debugConsole.infoForeground#DEBEB0
  • debugConsole.sourceForeground#BD9E90
  • debugConsole.warningForeground#F57F17
  • debugConsoleInputIcon.foreground#BF360C
  • debugExceptionWidget.background#231611
  • debugExceptionWidget.border#D50000
  • debugIcon.breakpointDisabledForeground#7D5D50
  • debugIcon.breakpointForeground#D50000
  • debugIcon.breakpointUnverifiedForeground#BD9E90
  • debugIcon.continueForeground#558B2F
  • debugIcon.disconnectForeground#D50000
  • debugIcon.pauseForeground#BF360C
  • debugIcon.restartForeground#558B2F
  • debugIcon.startForeground#558B2F
  • debugIcon.stepBackForeground#BF360C
  • debugIcon.stepIntoForeground#BF360C
  • debugIcon.stepOutForeground#BF360C
  • debugIcon.stepOverForeground#BF360C
  • debugIcon.stopForeground#D50000
  • debugTokenExpression.boolean#F57F17
  • debugTokenExpression.error#D50000
  • debugTokenExpression.name#DEBEB0
  • debugTokenExpression.number#F57F17
  • debugTokenExpression.string#558B2F
  • debugTokenExpression.value#BD9E90
  • debugToolBar.background#231611
  • debugToolBar.border#4C2E24
  • descriptionForeground#7D5D50
  • diffEditor.insertedTextBackground#558b2f26
  • diffEditor.removedTextBackground#d5000026
  • dropdown.background#231611
  • dropdown.border#4C2E24
  • dropdown.foreground#EAD5CC
  • editor.background#150D0A
  • editor.findMatchBackground#f57f1766
  • editor.findMatchHighlightBackground#bf360c33
  • editor.focusedStackFrameHighlightBackground#558b2f33
  • editor.foldBackground#bf360c1a
  • editor.foreground#DEBEB0
  • editor.inactiveSelectionBackground#321e18cc
  • editor.lineHighlightBackground#0e080699
  • editor.lineHighlightBorder#321E18
  • editor.rangeHighlightBackground#bf360c1f
  • editor.selectionBackground#BF360C40
  • editor.selectionHighlightBackground#bf360c33
  • editor.snippetFinalTabstopHighlightBorder#BF360C
  • editor.snippetTabstopHighlightBackground#bf360c33
  • editor.stackFrameHighlightBackground#f57f1733
  • editor.symbolHighlightBackground#f57f1733
  • editor.wordHighlightBackground#bf360c26
  • editor.wordHighlightStrongBackground#bf360c40
  • editorBracketMatch.background#bf360c1f
  • editorBracketMatch.border#BF360C
  • editorBracketPairGuide.activeBackground1#BF360C
  • editorBracketPairGuide.background1#321E18
  • editorCodeLens.foreground#7D5D50
  • editorCursor.foreground#EAD5CC
  • editorError.foreground#D50000
  • editorGhostText.foreground#7d5d50a6
  • editorGroupHeader.tabsBackground#150D0A
  • editorGroupHeader.tabsBorder#321E18
  • editorGutter.addedBackground#558B2F
  • editorGutter.background#150D0A
  • editorGutter.deletedBackground#D50000
  • editorGutter.modifiedBackground#0D47A1
  • editorHint.foreground#BD9E90
  • editorHoverWidget.background#231611
  • editorHoverWidget.border#4C2E24
  • editorIndentGuide.activeBackground1#bf360c73
  • editorIndentGuide.background1#321E18
  • editorInfo.foreground#BF360C
  • editorInlayHint.background#231611e6
  • editorInlayHint.foreground#7D5D50
  • editorLightBulb.foreground#F57F17
  • editorLightBulbAutoFix.foreground#BF360C
  • editorLineNumber.activeForeground#EAD5CC
  • editorLineNumber.foreground#7D5D50
  • editorLink.activeForeground#BF360C
  • editorOverviewRuler.addedForeground#558B2F
  • editorOverviewRuler.border#321E18
  • editorOverviewRuler.bracketMatchForeground#BF360C
  • editorOverviewRuler.commonContentForeground#7D5D50
  • editorOverviewRuler.currentContentForeground#558B2F
  • editorOverviewRuler.deletedForeground#D50000
  • editorOverviewRuler.errorForeground#D50000
  • editorOverviewRuler.findMatchForeground#f57f1780
  • editorOverviewRuler.incomingContentForeground#BF360C
  • editorOverviewRuler.infoForeground#BF360C
  • editorOverviewRuler.modifiedForeground#0D47A1
  • editorOverviewRuler.selectionHighlightForeground#bf360c66
  • editorOverviewRuler.warningForeground#F57F17
  • editorOverviewRuler.wordHighlightForeground#bf360c66
  • editorRuler.foreground#321E18
  • editorStickyScroll.background#0E0806
  • editorStickyScroll.border#321E18
  • editorStickyScrollHover.background#231611
  • editorSuggestWidget.background#231611
  • editorSuggestWidget.border#4C2E24
  • editorSuggestWidget.foreground#DEBEB0
  • editorSuggestWidget.highlightForeground#BF360C
  • editorSuggestWidget.selectedBackground#2A1812
  • editorSuggestWidget.selectedForeground#F5EBE6
  • editorWarning.foreground#F57F17
  • editorWhitespace.foreground#7d5d5059
  • editorWidget.background#231611
  • editorWidget.border#4C2E24
  • errorForeground#D50000
  • extensionButton.background#BF360C
  • extensionButton.foreground#150D0A
  • extensionButton.hoverBackground#bf360cd9
  • extensionButton.prominentBackground#BF360C
  • extensionButton.prominentForeground#150D0A
  • extensionButton.prominentHoverBackground#bf360cd9
  • focusBorder#BF360C
  • foreground#DEBEB0
  • gauge.errorBackground#d5000033
  • gauge.errorForeground#D50000
  • gauge.infoBackground#bf360c33
  • gauge.infoForeground#BF360C
  • gauge.warningBackground#f57f1733
  • gauge.warningForeground#F57F17
  • gitDecoration.addedResourceForeground#558B2F
  • gitDecoration.conflictingResourceForeground#D50000
  • gitDecoration.deletedResourceForeground#D50000
  • gitDecoration.ignoredResourceForeground#7D5D50
  • gitDecoration.modifiedResourceForeground#0D47A1
  • gitDecoration.renamedResourceForeground#558B2F
  • gitDecoration.stageDeletedResourceForeground#D50000
  • gitDecoration.stageModifiedResourceForeground#0D47A1
  • gitDecoration.submoduleResourceForeground#BF360C
  • gitDecoration.untrackedResourceForeground#558B2F
  • icon.foreground#BD9E90
  • inlineChat.background#231611
  • inlineChat.border#4C2E24
  • inlineChat.shadow#150d0a80
  • inlineChatDiff.inserted#558b2f26
  • inlineChatDiff.removed#d5000026
  • inlineChatInput.background#150D0A
  • inlineChatInput.border#321E18
  • inlineChatInput.focusBorder#BF360C
  • inlineChatInput.placeholderForeground#7D5D50
  • input.background#231611
  • input.border#4C2E24
  • input.foreground#EAD5CC
  • input.placeholderForeground#7D5D50
  • inputOption.activeBorder#BF360C
  • inputValidation.errorBackground#d5000026
  • inputValidation.errorBorder#D50000
  • inputValidation.warningBackground#f57f1726
  • inputValidation.warningBorder#F57F17
  • keybindingLabel.background#321E18
  • keybindingLabel.border#4C2E24
  • keybindingLabel.foreground#EAD5CC
  • list.activeSelectionBackground#2A1812
  • list.activeSelectionForeground#F5EBE6
  • list.deemphasizedForeground#7D5D50
  • list.dropBackground#bf360c33
  • list.errorForeground#D50000
  • list.filterMatchBackground#f57f1759
  • list.focusBackground#2A1812
  • list.focusForeground#F5EBE6
  • list.focusHighlightForeground#bf360cbf
  • list.focusOutline#bf360c80
  • list.highlightForeground#BF360C
  • list.hoverBackground#321E18
  • list.hoverForeground#EAD5CC
  • list.inactiveSelectionBackground#321E18
  • list.inactiveSelectionForeground#DEBEB0
  • list.warningForeground#F57F17
  • listFilterWidget.background#231611
  • listFilterWidget.noMatchesOutline#D50000
  • listFilterWidget.outline#BF360C
  • menu.background#231611
  • menu.border#4C2E24
  • menu.foreground#DEBEB0
  • menu.selectionBackground#2A1812
  • menu.selectionForeground#F5EBE6
  • menu.separatorBackground#4C2E24
  • menubar.selectionBackground#bf360c33
  • menubar.selectionBorder#BF360C
  • menubar.selectionForeground#EAD5CC
  • merge.border#4C2E24
  • merge.commonContentBackground#321e1859
  • merge.commonHeaderBackground#321e1880
  • merge.currentContentBackground#558b2f33
  • merge.currentHeaderBackground#558b2f66
  • merge.incomingContentBackground#bf360c33
  • merge.incomingHeaderBackground#bf360c66
  • minimap.background#150D0A
  • minimap.errorHighlight#D50000
  • minimap.findMatchHighlight#f57f1780
  • minimap.selectionHighlight#bf360c80
  • minimap.warningHighlight#F57F17
  • minimapGutter.addedBackground#558B2F
  • minimapGutter.deletedBackground#D50000
  • minimapGutter.modifiedBackground#0D47A1
  • minimapSlider.activeBackground#bf360c80
  • minimapSlider.background#321e1880
  • minimapSlider.hoverBackground#4c2e2499
  • multiDiffEditor.background#150D0A
  • multiDiffEditor.border#321E18
  • multiDiffEditor.headerBackground#231611
  • notebook.cellBorderColor#321E18
  • notebook.cellEditorBackground#0E0806
  • notebook.cellHoverBackground#0e080680
  • notebook.cellStatusBarItemHoverBackground#321E18
  • notebook.editorBackground#150D0A
  • notebook.focusedCellBackground#321e1866
  • notebook.focusedCellBorder#BF360C
  • notebook.focusedEditorBorder#BF360C
  • notebook.selectedCellBackground#321e184d
  • notebookStatusErrorIcon.foreground#D50000
  • notebookStatusRunningIcon.foreground#BF360C
  • notebookStatusSuccessIcon.foreground#558B2F
  • notificationCenter.border#4C2E24
  • notificationCenterHeader.background#231611
  • notificationCenterHeader.foreground#EAD5CC
  • notificationLink.foreground#BF360C
  • notifications.background#231611
  • notifications.border#321E18
  • notifications.foreground#DEBEB0
  • notificationsErrorIcon.foreground#D50000
  • notificationsInfoIcon.foreground#BF360C
  • notificationsWarningIcon.foreground#F57F17
  • notificationToast.border#4C2E24
  • panel.background#231611
  • panel.border#321E18
  • panelInput.border#4C2E24
  • panelSection.border#321E18
  • panelSectionHeader.background#231611
  • panelSectionHeader.foreground#DEBEB0
  • panelTitle.activeBorder#BF360C
  • panelTitle.activeForeground#EAD5CC
  • panelTitle.inactiveForeground#7D5D50
  • peekView.border#BF360C
  • peekViewEditor.background#0E0806
  • peekViewResult.background#150D0A
  • peekViewTitle.background#231611
  • ports.iconRunningProcessForeground#558B2F
  • profileBadge.background#321E18
  • profileBadge.foreground#DEBEB0
  • progressBar.background#BF360C
  • quickInput.background#231611
  • quickInput.foreground#DEBEB0
  • quickInputList.focusBackground#2A1812
  • quickInputList.focusForeground#F5EBE6
  • quickInputList.focusIconForeground#bf360cbf
  • radio.activeBackground#bf360c33
  • radio.activeBorder#BF360C
  • radio.activeForeground#BF360C
  • radio.inactiveBackground#231611
  • radio.inactiveBorder#4C2E24
  • radio.inactiveForeground#BD9E90
  • radio.inactiveHoverBackground#321E18
  • sash.hoverBorder#BF360C
  • scmGraph.foreground1#BF360C
  • scmGraph.foreground2#F57F17
  • scmGraph.foreground3#D50000
  • scmGraph.foreground4#558B2F
  • scmGraph.foreground5#0D47A1
  • scmGraph.historyItemBaseRefColor#BF360C
  • scmGraph.historyItemHoverAdditionsForeground#558B2F
  • scmGraph.historyItemHoverDeletionsForeground#D50000
  • scmGraph.historyItemHoverLabelForeground#EAD5CC
  • scmGraph.historyItemRefColor#BF360C
  • scmGraph.historyItemRemoteRefColor#0D47A1
  • scrollbar.shadow#150d0a80
  • scrollbarSlider.activeBackground#bf360c99
  • scrollbarSlider.background#321e18b3
  • scrollbarSlider.hoverBackground#4c2e24cc
  • settings.checkboxBackground#231611
  • settings.checkboxBorder#4C2E24
  • settings.checkboxForeground#EAD5CC
  • settings.dropdownBackground#231611
  • settings.dropdownBorder#4C2E24
  • settings.dropdownForeground#EAD5CC
  • settings.focusedRowBackground#321e1880
  • settings.headerBorder#321E18
  • settings.headerForeground#EAD5CC
  • settings.modifiedItemIndicator#0D47A1
  • settings.numberInputBackground#231611
  • settings.numberInputBorder#4C2E24
  • settings.numberInputForeground#F57F17
  • settings.rowHoverBackground#23161180
  • settings.textInputBackground#231611
  • settings.textInputBorder#4C2E24
  • settings.textInputForeground#EAD5CC
  • sideBar.background#0E0806
  • sideBar.border#321E18
  • sideBar.foreground#BD9E90
  • sideBarSectionHeader.background#231611
  • sideBarSectionHeader.border#4C2E24
  • sideBarSectionHeader.foreground#DEBEB0
  • sideBarTitle.foreground#EAD5CC
  • statusBar.background#0E0806
  • statusBar.border#321E18
  • statusBar.debuggingBackground#F57F17
  • statusBar.debuggingForeground#150D0A
  • statusBar.foreground#DEBEB0
  • statusBar.noFolderBackground#231611
  • statusBar.noFolderForeground#DEBEB0
  • statusBarItem.hoverBackground#bf360c33
  • statusBarItem.remoteBackground#BF360C
  • statusBarItem.remoteForeground#150D0A
  • symbolIcon.arrayForeground#DEBEB0
  • symbolIcon.booleanForeground#F57F17
  • symbolIcon.classForeground#D84315
  • symbolIcon.colorForeground#BD9E90
  • symbolIcon.constantForeground#F57F17
  • symbolIcon.constructorForeground#BF360C
  • symbolIcon.enumeratorForeground#D84315
  • symbolIcon.enumeratorMemberForeground#F57F17
  • symbolIcon.eventForeground#BF360C
  • symbolIcon.fieldForeground#DEBEB0
  • symbolIcon.fileForeground#DEBEB0
  • symbolIcon.folderForeground#BD9E90
  • symbolIcon.functionForeground#BF360C
  • symbolIcon.interfaceForeground#D84315
  • symbolIcon.keyForeground#D84315
  • symbolIcon.keywordForeground#BD9E90
  • symbolIcon.methodForeground#BF360C
  • symbolIcon.moduleForeground#BD9E90
  • symbolIcon.namespaceForeground#BD9E90
  • symbolIcon.numberForeground#F57F17
  • symbolIcon.objectForeground#DEBEB0
  • symbolIcon.operatorForeground#BD9E90
  • symbolIcon.packageForeground#BD9E90
  • symbolIcon.propertyForeground#DEBEB0
  • symbolIcon.referenceForeground#BD9E90
  • symbolIcon.snippetForeground#BD9E90
  • symbolIcon.stringForeground#558B2F
  • symbolIcon.structForeground#D84315
  • symbolIcon.textForeground#DEBEB0
  • symbolIcon.typeParameterForeground#D84315
  • symbolIcon.unitForeground#F57F17
  • symbolIcon.variableForeground#DEBEB0
  • tab.activeBackground#0E0806
  • tab.activeBorderTop#BF360C
  • tab.activeForeground#EAD5CC
  • tab.border#321E18
  • tab.hoverBackground#231611
  • tab.inactiveBackground#150D0A
  • tab.inactiveForeground#7D5D50
  • terminal.ansiBlack#150D0A
  • terminal.ansiBlue#BF360C
  • terminal.ansiBrightBlack#7D5D50
  • terminal.ansiBrightBlue#BF360C
  • terminal.ansiBrightCyan#BF360C
  • terminal.ansiBrightGreen#558B2F
  • terminal.ansiBrightMagenta#0D47A1
  • terminal.ansiBrightRed#D50000
  • terminal.ansiBrightWhite#EAD5CC
  • terminal.ansiBrightYellow#F57F17
  • terminal.ansiCyan#BF360C
  • terminal.ansiGreen#558B2F
  • terminal.ansiMagenta#0D47A1
  • terminal.ansiRed#D50000
  • terminal.ansiWhite#DEBEB0
  • terminal.ansiYellow#F57F17
  • terminal.background#150D0A
  • terminal.border#321E18
  • terminal.foreground#DEBEB0
  • terminal.selectionBackground#BF360C40
  • terminalCursor.foreground#EAD5CC
  • testing.iconErrored#D50000
  • testing.iconFailed#D50000
  • testing.iconPassed#558B2F
  • testing.iconQueued#F57F17
  • testing.iconSkipped#7D5D50
  • testing.iconUnset#7D5D50
  • testing.message.error.decorationForeground#D50000
  • testing.message.info.decorationForeground#BF360C
  • testing.runAction#558B2F
  • textCodeBlockBackground#231611
  • textLink#BF360C
  • textLink.activeForeground#BF360C
  • textPreformatBackground#321E18
  • textPreformatForeground#BD9E90
  • titleBar.activeBackground#150D0A
  • titleBar.activeForeground#EAD5CC
  • titleBar.border#321E18
  • titleBar.inactiveBackground#0E0806
  • titleBar.inactiveForeground#7D5D50
  • toolbar.activeBackground#321E18
  • toolbar.hoverBackground#321e1880
  • tree.inactiveIndentGuidesStroke#321E18
  • tree.indentGuidesStroke#4C2E24
  • tree.tableColumnsBorder#4C2E24
  • tree.tableOddRowsBackground#23161180
  • walkThrough.embeddedEditorBackground#0E0806
  • welcomePage.background#150D0A
  • welcomePage.progress.background#321E18
  • welcomePage.progress.foreground#BF360C
  • welcomePage.tileBackground#0E0806
  • welcomePage.tileHoverBackground#231611
  • widget.shadow#150d0a80
  • window.activeBorder#BF360C
  • window.inactiveBorder#321E18

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7D5D50italic
keyword, keyword.other.sql, keyword.other.DML.sql, keyword.other.DDL.sql, storage.type, storage.modifier#BD9E90
entity.name.function, support.function, support.function.sql, meta.function-call#BF360C
entity.name.type, support.type, support.type.sql#D84315
entity.name.table.sql, entity.name.class#DEBEB0
variable, variable.other, meta.column.sql, variable.other.column.sql, support.variable#DEBEB0
variable.parameter.sql, variable.other.sql, variable.parameter#BD9E90
string, string.quoted.single.sql, string.quoted.double.sql#558B2F
constant.numeric, constant.language#F57F17
keyword.operator, keyword.operator.sql, punctuation#BD9E90
constant.other, support.constant#F57F17
support.type.property-name.json#D84315
meta.decorator, punctuation.decorator#D84315
string.template, punctuation.definition.template-expression#558B2F
constant.character.escape#F57F17
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D84315
string.regexp, keyword.control.anchor.regexp, constant.other.character-class.regexp#558B2F
entity.name.tag.yaml#D84315
meta.preprocessor, keyword.control.directive#BD9E90
storage.type.class.jsdoc, variable.other.jsdoc, entity.name.type.instance.jsdoc#7D5D50italic
markup.list, punctuation.definition.list#BD9E90
variable.other.special.shell#DEBEB0
entity.name.lifetime.rust, keyword.operator.borrow.rust#F57F17
variable.language.special.self.python, variable.language.special.self#BD9E90
keyword.control, keyword.control.flow, keyword.control.import, keyword.control.conditional, keyword.control.loop#BD9E90
storage.modifier, storage.type.modifier#BD9E90
variable.language, variable.language.this, variable.language.super#BD9E90italic
entity.name.namespace, entity.name.scope-resolution#D84315
entity.other.inherited-class#D84315italic
variable.other.property, variable.other.object.property, meta.object-literal.key#DEBEB0
support.class, support.other, support.constant.property-value#D84315
meta.annotation, storage.type.annotation, punctuation.definition.annotation#D84315
punctuation.accessor, punctuation.separator, meta.brace#BD9E90
meta.template.expression, punctuation.section.embedded#BD9E90
entity.name.tag, entity.name.tag.html, entity.name.tag.xml#BD9E90
entity.other.attribute-name, entity.other.attribute-name.html#BD9E90
punctuation.definition.tag, punctuation.separator.key-value.html#BD9E90
support.class.component, entity.name.tag.jsx, entity.name.tag.tsx#D84315
support.type.property-name.css, support.type.vendored.property-name.css#DEBEB0
keyword.other.unit, constant.numeric.css, constant.other.color#F57F17
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown#BD9E90bold
markup.bold, punctuation.definition.bold#F57F17bold
markup.italic, punctuation.definition.italic#D84315italic
markup.quote#7D5D50italic
markup.inline.raw, markup.fenced_code, markup.raw#558B2F
markup.underline.link, string.other.link, constant.other.reference.link.markdown#BF360C
string.other.link.title.markdown, string.other.link.description.markdown#BD9E90
meta.separator.markdown, punctuation.definition.constant.markdown#7D5D50
markup.inserted, meta.diff.header.to-file#558B2F
markup.deleted, meta.diff.header.from-file#D50000
markup.changed#0D47A1
invalid, invalid.illegal#D50000