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#261912
  • activityBar.border#261912
  • activityBar.dropBorder#6e422b
  • activityBar.foreground#ac8476
  • activityBar.inactiveForeground#ac847699
  • activityBarBadge.background#fb5607
  • activityBarBadge.foreground#261912
  • badge.background#fb5607
  • badge.foreground#312117
  • breadcrumb.activeSelectionForeground#dccfc9
  • breadcrumb.background#312117
  • breadcrumb.focusForeground#dccfc9
  • breadcrumb.foreground#ac8476
  • breadcrumbPicker.background#261912
  • button.background#fb5607
  • button.foreground#261912
  • button.hoverBackground#fb560799
  • debugExceptionWidget.background#6e422b
  • debugExceptionWidget.border#6e422b
  • debugToolBar.background#6e422b
  • debugToolBar.border#6e422b
  • descriptionForeground#dccfc9
  • diffEditor.border#6e422b
  • diffEditor.insertedTextBackground#56cfe122
  • diffEditor.insertedTextBorder#56cfe144
  • diffEditor.removedTextBackground#ff2d3b22
  • diffEditor.removedTextBorder#ff2d3b44
  • dropdown.background#6e422b
  • dropdown.border#6e422b
  • dropdown.foreground#dccfc9
  • dropdown.listBackground#261912
  • editor.background#312117
  • editor.findMatchBackground#ac847677
  • editor.findMatchBorder#ffe08a
  • editor.findMatchHighlightBackground#ac847677
  • editor.findRangeHighlightBackground#ac847677
  • editor.foreground#b8afa6
  • editor.hoverHighlightBackground#ac847677
  • editor.inactiveSelectionBackground#ac847677
  • editor.lineHighlightBackground#6e422b
  • editor.lineHighlightBorder#6e422b
  • editor.rangeHighlightBackground#6e422b
  • editor.selectionBackground#6e422b
  • editor.selectionForeground#b8afa6
  • editor.selectionHighlightBackground#ffe08a15
  • editor.wordHighlightBackground#ac847677
  • editor.wordHighlightStrongBackground#ac847677
  • editorBracketMatch.background#ffe08a20
  • editorBracketMatch.border#ffe08a70
  • editorCodeLens.foreground#dccfc9
  • editorCursor.background#312117
  • editorCursor.foreground#fb5607
  • editorError.foreground#ff2d3b
  • editorGroup.border#6e422b
  • editorGroup.dropBackground#6e422b
  • editorGroup.emptyBackground#312117
  • editorGroup.focusedEmptyBorder#312117
  • editorGroupHeader.noTabsBackground#312117
  • editorGroupHeader.tabsBackground#261912
  • editorGroupHeader.tabsBorder#261912
  • editorGutter.addedBackground#56cfe1
  • editorGutter.background#312117
  • editorGutter.deletedBackground#ff2d3b
  • editorGutter.modifiedBackground#4d8eff
  • editorHint.foreground#fb5607
  • editorHoverWidget.background#6e422b
  • editorHoverWidget.border#6e422b
  • editorIndentGuide.activeBackground#ac847677
  • editorIndentGuide.background#ac847633
  • editorInfo.foreground#4d8eff
  • editorInlayHint.background#261912
  • editorInlayHint.foreground#ac847699
  • editorLineNumber.activeForeground#ac8476
  • editorLineNumber.foreground#ac847655
  • editorLink.activeForeground#fb5607
  • editorMarkerNavigation.background#6e422b
  • editorMarkerNavigationError.background#ff2d3b
  • editorMarkerNavigationInfo.background#4d8eff
  • editorMarkerNavigationWarning.background#fb5607
  • editorOverviewRuler.addedForeground#56cfe1
  • editorOverviewRuler.border#6e422b
  • editorOverviewRuler.bracketMatchForeground#fb5607
  • editorOverviewRuler.commonContentForeground#6e422b
  • editorOverviewRuler.currentContentForeground#4d8eff
  • editorOverviewRuler.deletedForeground#ff2d3b
  • editorOverviewRuler.errorForeground#ff2d3b
  • editorOverviewRuler.findMatchForeground#fb5607
  • editorOverviewRuler.incomingContentForeground#56cfe1
  • editorOverviewRuler.infoForeground#4d8eff
  • editorOverviewRuler.modifiedForeground#4d8eff
  • editorOverviewRuler.rangeHighlightForeground#ac8476
  • editorOverviewRuler.selectionHighlightForeground#ac8476
  • editorOverviewRuler.warningForeground#ffbe0b
  • editorOverviewRuler.wordHighlightForeground#ac8476
  • editorOverviewRuler.wordHighlightStrongForeground#ac8476
  • editorPane.background#312117
  • editorRuler.foreground#6e422b
  • editorSuggestWidget.background#6e422b
  • editorSuggestWidget.border#6e422b
  • editorSuggestWidget.foreground#dccfc9
  • editorSuggestWidget.highlightForeground#fb5607
  • editorSuggestWidget.selectedBackground#312117
  • editorWarning.foreground#ffbe0b
  • editorWhitespace.foreground#ac847677
  • editorWidget.background#261912
  • editorWidget.border#261912
  • errorForeground#ff2d3b
  • extensionButton.prominentBackground#fb5607
  • extensionButton.prominentForeground#312117
  • extensionButton.prominentHoverBackground#fb560799
  • focusBorder#ac847677
  • foreground#ac8476
  • gitDecoration.conflictingResourceForeground#ff2d3b
  • gitDecoration.deletedResourceForeground#ff2d3b
  • gitDecoration.ignoredResourceForeground#ac847677
  • gitDecoration.modifiedResourceForeground#4d8eff
  • gitDecoration.untrackedResourceForeground#56cfe1
  • input.background#312117
  • input.border#6e422b
  • input.foreground#dccfc9
  • input.placeholderForeground#ac847677
  • inputOption.activeBorder#6e422b
  • inputValidation.errorBackground#312117
  • inputValidation.errorBorder#ff2d3b
  • inputValidation.errorForeground#ff2d3b
  • inputValidation.infoBackground#312117
  • inputValidation.infoBorder#4d8eff
  • inputValidation.infoForeground#4d8eff
  • inputValidation.warningBackground#312117
  • inputValidation.warningBorder#ffbe0b
  • inputValidation.warningForeground#ffbe0b
  • list.activeSelectionBackground#6e422b
  • list.activeSelectionForeground#dccfc9
  • list.dropBackground#6e422b
  • list.errorForeground#ff2d3b
  • list.focusBackground#6e422b
  • list.focusForeground#dccfc9
  • list.highlightForeground#fb5607
  • list.hoverBackground#6e422b
  • list.hoverForeground#dccfc9
  • list.inactiveFocusBackground#6e422b
  • list.inactiveSelectionBackground#6e422b
  • list.inactiveSelectionForeground#dccfc9
  • list.invalidItemForeground#ff2d3b
  • list.warningForeground#ffbe0b
  • listFilterWidget.background#6e422b
  • listFilterWidget.noMatchesOutline#ff2d3b
  • listFilterWidget.outline#6e422b
  • menu.background#261912
  • menu.foreground#ac8476
  • menu.selectionBackground#6e422b
  • menu.selectionForeground#dccfc9
  • menubar.selectionBackground#6e422b
  • menubar.selectionForeground#dccfc9
  • merge.border#ac8476
  • merge.commonContentBackground#6e422b55
  • merge.commonHeaderBackground#6e422b77
  • merge.currentContentBackground#4d8eff22
  • merge.currentHeaderBackground#4d8eff77
  • merge.incomingContentBackground#56cfe122
  • merge.incomingHeaderBackground#56cfe177
  • notificationCenter.border#261912
  • notificationCenterHeader.background#261912
  • notificationCenterHeader.foreground#dccfc9
  • notificationLink.foreground#dccfc9
  • notifications.background#261912
  • notifications.border#261912
  • notifications.foreground#dccfc9
  • notificationToast.border#261912
  • panel.background#261912
  • panel.border#312117
  • panel.dropBorder#6e422b
  • panelInput.border#ac8476
  • panelSection.border#6e422b
  • panelSection.dropBackground#6e422b
  • panelSectionHeader.background#312117
  • panelSectionHeader.foreground#fb5607
  • panelTitle.activeBorder#fb5607
  • panelTitle.activeForeground#dccfc9
  • panelTitle.inactiveForeground#ac8476
  • peekView.border#fb5607
  • peekViewEditor.background#6e422b
  • peekViewEditor.matchHighlightBackground#ac8476
  • peekViewEditor.matchHighlightBorder#fb5607
  • peekViewEditorGutter.background#312117
  • peekViewResult.background#6e422b
  • peekViewResult.fileForeground#ac8476
  • peekViewResult.lineForeground#dccfc9
  • peekViewResult.matchHighlightBackground#fb560733
  • peekViewResult.selectionBackground#6e422b
  • peekViewResult.selectionForeground#dccfc9
  • peekViewTitle.background#6e422b
  • peekViewTitleDescription.foreground#ac8476
  • peekViewTitleLabel.foreground#ac8476
  • pickerGroup.border#6e422b
  • pickerGroup.foreground#fb5607
  • progressBar.background#fb5607
  • scrollbar.shadow#0d0902
  • scrollbarSlider.activeBackground#ac847677
  • scrollbarSlider.background#ac847655
  • scrollbarSlider.hoverBackground#ac847699
  • selection.background#ac847677
  • settings.checkboxBackground#6e422b
  • settings.checkboxBorder#6e422b
  • settings.checkboxForeground#dccfc9
  • settings.dropdownBackground#6e422b
  • settings.dropdownBorder#6e422b
  • settings.dropdownForeground#dccfc9
  • settings.dropdownListBorder#6e422b
  • settings.headerForeground#dccfc9
  • settings.modifiedItemIndicator#4d8eff
  • settings.numberInputBackground#6e422b
  • settings.numberInputBorder#6e422b
  • settings.numberInputForeground#dccfc9
  • settings.textInputBackground#6e422b
  • settings.textInputBorder#6e422b
  • settings.textInputForeground#dccfc9
  • sideBar.background#261912
  • sideBar.foreground#ac8476
  • sideBarSectionHeader.background#312117
  • sideBarSectionHeader.border#261912
  • sideBarSectionHeader.foreground#fb5607
  • sideBarTitle.foreground#fb5607
  • statusBar.background#261912
  • statusBar.border#261912
  • statusBar.debuggingBackground#261912
  • statusBar.debuggingForeground#ac8476
  • statusBar.foreground#ac8476
  • statusBar.noFolderBackground#261912
  • statusBar.noFolderForeground#ac8476
  • statusBarItem.activeBackground#6e422b
  • statusBarItem.hoverBackground#312117
  • statusBarItem.remoteBackground#261912
  • statusBarItem.remoteForeground#ac8476
  • tab.activeBackground#312117
  • tab.activeBorder#fb5607
  • tab.activeBorderTop#261912
  • tab.activeForeground#dccfc9
  • tab.border#261912
  • tab.hoverBackground#6e422b
  • tab.hoverBorder#fb5607
  • tab.inactiveBackground#261912
  • tab.inactiveForeground#dccfc977
  • tab.unfocusedActiveBackground#312117
  • tab.unfocusedActiveBorder#fb560777
  • tab.unfocusedActiveBorderTop#312117
  • tab.unfocusedActiveForeground#dccfc9
  • tab.unfocusedHoverBackground#312117
  • tab.unfocusedHoverBorder#fb560777
  • tab.unfocusedInactiveForeground#dccfc977
  • terminal.ansiBlack#6e422b
  • terminal.ansiBlue#4d8eff
  • terminal.ansiBrightBlack#5a5348
  • terminal.ansiBrightBlue#4d8eff
  • terminal.ansiBrightCyan#4d8eff
  • terminal.ansiBrightGreen#56cfe1
  • terminal.ansiBrightMagenta#fb5607
  • terminal.ansiBrightRed#ff2d3b
  • terminal.ansiBrightWhite#b8afa6
  • terminal.ansiBrightYellow#fb5607
  • terminal.ansiCyan#4d8eff
  • terminal.ansiGreen#56cfe1
  • terminal.ansiMagenta#fb5607
  • terminal.ansiRed#ff2d3b
  • terminal.ansiWhite#b8afa6
  • terminal.ansiYellow#fb5607
  • terminal.background#261912
  • terminal.border#261912
  • terminal.foreground#b8afa6
  • terminal.selectionBackground#ac847633
  • terminalCursor.background#fb5607
  • terminalCursor.foreground#fb5607
  • textBlockQuote.background#6e422b
  • textBlockQuote.border#6e422b
  • textCodeBlock.background#261912
  • textLink.activeForeground#fb5607
  • textLink.foreground#fb5607
  • textPreformat.foreground#dccfc9
  • textSeparator.foreground#dccfc9
  • titleBar.activeBackground#261912
  • titleBar.activeForeground#dccfc9
  • titleBar.border#261912
  • titleBar.inactiveBackground#261912
  • titleBar.inactiveForeground#ac8476
  • tree.indentGuidesStroke#6e422b
  • walkThrough.embeddedEditorBackground#261912
  • welcomePage.buttonBackground#6e422b
  • welcomePage.buttonHoverBackground#6e422b99
  • widget.shadow#0d0902

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#b8afa6
comment, punctuation.definition.comment#ac847699italic
variable, string constant.other.placeholder, source#b8afa6
constant.other.color, punctuation.definition.entity, constant.character.entity, punctuation.definition.template-expression, punctuation.section.tag.twig#fb5607
invalid, invalid.illegal#ff2d3b
keyword, storage.type, storage.modifier, constant.numeric, constant.language, support.constant, constant.character, constant.escape#fb5607
punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.brace, meta.block, meta.jsx, meta.embedded.expression, meta.template.expression, meta.tag.block.any.html, string.unquoted.tag-string.nunjucks, text.html.nunjucks#b8afa6
punctuation.separator.key-value.html, keyword.control, keyword.operator, constant.other.color, punctuation.definition.constant, meta.function.block.start.handlebars, meta.function.inline.other, meta.property-value, support.constant.mathematical-symbols, support.constant.vendored.property-value, punctuation.definition.keyword, punctuation.accessor, punctuation.separator.property, string.unquoted.filter-pipe#ff9f1c
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, support.variable.dom, meta.import, meta.export, meta.export.default, support.class.builtin, support.class.component, variable.other.object#4d8eff
entity.name.function, variable.function, support.function, keyword.other.special-method, meta.function-call, keyword.control.filter#ffbe0b
meta.block variable.other#b8afa6
variable.parameter, text.html, punctuation.section.property-list, meta.property-value.scss punctuation, meta.property-list, keyword.operator.type.annotation, variable.other.object.property#b8afa6
string, constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, punctuation.definition.string, entity.name.section.markdown, meta.attribute-selector, entity.name.import.go, storage.type.attr.nunjucks#56cfe1
entity.name, support.type, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, meta.object-literal.key#ffbe0b
support.type, support.class, keyword.other.debugger, entity.other.inherited-class, meta.property-name, punctuation.definition.raw.markdown, variable.graphql, variable.other.readwrite#4d8eff
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name, support.type.property-name, support.variable.object.node, support.variable.object.process#4d8eff
entity.name.module.js, variable.import.parameter.js#ff2d3b
variable.language#4d8effitalic
entity.name.method.js#4d8effitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#4d8eff
entity.other.attribute-name#ff9f1c
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ff9f1c
entity.other.attribute-name.class, punctuation.definition.entity.css#ff9f1c
source.sass keyword.control#4d8eff
markup.inserted#56cfe1
markup.deleted#ff2d3b
markup.changed#fb5607
string.regexp#ff9f1c
constant.character.escape#4d8eff
*url*, *link*, *uri*underline
meta.decorator, tag.decorator.js entity.name.tag, tag.decorator.js punctuation.definition.tag#4d8eff
source.js constant.other.object.key.js string.unquoted.label.js#ff2d3bitalic
source.json meta.structure.dictionary.json support.type.property-name.json#4d8eff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#4d8eff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff9f1c
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#4d8eff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff9f1c
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#4d8eff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff9f1c
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#4d8eff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff9f1c
markup.italic#ff2d3bitalic
markup.bold#ff2d3bbold
markup.underline#fb5607underline
markup.strike#fb5607italic
markup.quote#4d8effitalic
markup.raw.block#ff9f1c
markup.table#4d8eff
text.html.markdown, punctuation.definition.list_item.markdown#b8afa6
text.html.markdown markup.raw.inline, text.html.markdown markup.inline.raw.string.markdown#4d8eff
text.html.markdown meta.dummy.line-break#b8afa6
markdown.heading, markup.heading, markup.heading entity.name, markup.heading.markdown, punctuation.definition.heading.markdown#56cfe1
markup.quote, punctuation.definition.blockquote.markdown#4d8effitalic
string.other.link.title.markdown#fb5607underline
markup.raw.block.fenced.markdown#dccfc9
punctuation.definition.fenced.markdown, variable.language.fenced.markdown#b8afa6
variable.language.fenced.markdown#b8afa6
meta.separator#b8afa6
token.info-token#4d8eff
token.warn-token#fb5607
token.error-token#ff2d3b
token.debug-token#fb5607
storage.type.error.go#4d8eff
punctuation.other.period.go#ff9f1c