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#221E1A
  • activityBar.border#2F2B26
  • activityBar.dropBackground#2F2B26
  • activityBar.foreground#E8E4D9
  • activityBar.inactiveForeground#8B6F47
  • activityBarBadge.background#7DA061
  • activityBarBadge.foreground#1F1D1A
  • badge.background#8B6F47a0
  • badge.foreground#1F1D1A
  • breadcrumb.activeSelectionForeground#E8E4D9
  • breadcrumb.background#2F2B26
  • breadcrumb.focusForeground#E8E4D9
  • breadcrumb.foreground#8B6F47
  • breadcrumbPicker.background#221E1A
  • button.background#7DA061
  • button.foreground#1F1D1A
  • button.hoverBackground#6B8B54
  • button.secondaryBackground#3A352E
  • button.secondaryForeground#E8E4D9
  • button.secondaryHoverBackground#4A443B
  • checkbox.background#2F2B26
  • checkbox.border#5A4F43
  • checkbox.foreground#8B6F47
  • debugConsole.errorForeground#e06c75
  • debugConsole.infoForeground#7DA061
  • debugConsole.sourceForeground#E8E4D9
  • debugConsole.warningForeground#8B6F47
  • debugConsoleInputIcon.foreground#C4B299
  • debugToolBar.background#2F2B26
  • debugToolBar.border#4A443B
  • descriptionForeground#8B6F47
  • dropdown.background#2F2B26
  • dropdown.border#4A443B
  • dropdown.foreground#C4B299
  • editor.background#292828
  • editor.findMatchBackground#98c37940
  • editor.findMatchHighlightBackground#98c37920
  • editor.findRangeHighlightBackground#32302f80
  • editor.focusedStackFrameHighlightBackground#7DA06140
  • editor.foreground#a89984
  • editor.hoverHighlightBackground#32302f80
  • editor.inactiveSelectionBackground#45403d60
  • editor.lineHighlightBorder#32302f
  • editor.rangeHighlightBackground#32302f80
  • editor.rangeHighlightBorder#928374
  • editor.selectionBackground#45403d80
  • editor.selectionHighlightBackground#45403d60
  • editor.stackFrameHighlightBackground#8B6F4740
  • editor.wordHighlightBackground#32302f80
  • editor.wordHighlightBorder#928374
  • editor.wordHighlightStrongBackground#32302f80
  • editor.wordHighlightStrongBorder#d4be98
  • editorBracketHighlight.foreground1#e06c75
  • editorBracketHighlight.foreground2#e78a4e
  • editorBracketHighlight.foreground3#98c379
  • editorBracketHighlight.foreground4#89b482
  • editorBracketHighlight.foreground5#7daea3
  • editorBracketHighlight.foreground6#ff6b6b
  • editorBracketHighlight.unexpectedBracket.foreground#e06c75
  • editorBracketMatch.background#45403d80
  • editorBracketMatch.border#928374
  • editorCodeLens.foreground#7c6f64
  • editorCursor.foreground#d4be98
  • editorError.foreground#e06c75
  • editorGroup.border#4A443B
  • editorGroup.dropBackground#7DA06120
  • editorGroupHeader.tabsBackground#2F2B26
  • editorGroupHeader.tabsBorder#4A443B
  • editorGutter.addedBackground#98c379
  • editorGutter.background#292828
  • editorGutter.deletedBackground#e06c75
  • editorGutter.foldingControlForeground#928374
  • editorGutter.modifiedBackground#7daea3
  • editorHint.foreground#89b482
  • editorHoverWidget.background#221E1A
  • editorHoverWidget.border#4A443B
  • editorIndentGuide.activeBackground#7c6f64
  • editorIndentGuide.background#5a524c
  • editorInfo.foreground#7daea3
  • editorLineNumber.activeForeground#928374
  • editorLineNumber.foreground#7c6f64
  • editorLink.activeForeground#98c379
  • editorOverviewRuler.addedForeground#98c379
  • editorOverviewRuler.border#45403d
  • editorOverviewRuler.bracketMatchForeground#928374
  • editorOverviewRuler.commonContentForeground#C4B299
  • editorOverviewRuler.currentContentForeground#7DA061
  • editorOverviewRuler.deletedForeground#e06c75
  • editorOverviewRuler.errorForeground#e06c75
  • editorOverviewRuler.findMatchForeground#98c37940
  • editorOverviewRuler.incomingContentForeground#8B6F47
  • editorOverviewRuler.infoForeground#7daea3
  • editorOverviewRuler.modifiedForeground#7daea3
  • editorOverviewRuler.rangeHighlightForeground#32302f80
  • editorOverviewRuler.selectionHighlightForeground#45403d80
  • editorOverviewRuler.warningForeground#e78a4e
  • editorOverviewRuler.wordHighlightForeground#32302f80
  • editorOverviewRuler.wordHighlightStrongForeground#32302f80
  • editorRuler.foreground#5a524c
  • editorSuggestWidget.background#221E1A
  • editorSuggestWidget.border#4A443B
  • editorSuggestWidget.foreground#C4B299
  • editorSuggestWidget.highlightForeground#7DA061
  • editorSuggestWidget.selectedBackground#4A443B
  • editorWarning.foreground#e78a4e
  • editorWhitespace.foreground#5a524c
  • errorForeground#ff6d7e
  • extensionButton.prominentBackground#7DA061
  • extensionButton.prominentForeground#1F1D1A
  • extensionButton.prominentHoverBackground#6B8B54
  • focusBorder#7DA061
  • foreground#C4B299
  • gitDecoration.addedResourceForeground#98c379
  • gitDecoration.conflictingResourceForeground#ff6b6b
  • gitDecoration.deletedResourceForeground#e06c75
  • gitDecoration.ignoredResourceForeground#7c6f64
  • gitDecoration.modifiedResourceForeground#7daea3
  • gitDecoration.submoduleResourceForeground#89b482
  • gitDecoration.untrackedResourceForeground#e78a4e
  • icon.foreground#E8E4D9
  • imagePreview.border#4A443B
  • input.background#2F2B2600
  • input.border#4A443B
  • input.foreground#E8E4D9
  • input.placeholderForeground#8B6F47
  • inputOption.activeBorder#7DA061
  • inputValidation.errorBackground#b85651
  • inputValidation.errorBorder#e06c75
  • inputValidation.errorForeground#E8E4D9
  • inputValidation.infoBackground#6B8B54
  • inputValidation.infoBorder#7DA061
  • inputValidation.infoForeground#E8E4D9
  • inputValidation.warningBackground#7A5F3F
  • inputValidation.warningBorder#8B6F47
  • inputValidation.warningForeground#E8E4D9
  • list.activeSelectionBackground#4A443B60
  • list.activeSelectionForeground#E8E4D9
  • list.dropBackground#2F2B2680
  • list.errorForeground#e06c75
  • list.focusBackground#221E1A
  • list.focusOutline#221E1A
  • list.highlightForeground#7DA061
  • list.hoverBackground#2F2B2600
  • list.hoverForeground#E8E4D9
  • list.inactiveFocusBackground#221E1A
  • list.inactiveSelectionBackground#4A443B48
  • list.inactiveSelectionForeground#C4B299
  • list.invalidItemForeground#b85651
  • list.warningForeground#8B6F47
  • menu.background#2F2B26
  • menu.border#4A443B
  • menu.foreground#C4B299
  • menu.selectionBackground#4A443B
  • menu.selectionForeground#E8E4D9
  • menu.separatorBackground#8B6F47
  • menubar.selectionBackground#4A443B
  • menubar.selectionForeground#E8E4D9
  • merge.border#4A443B
  • merge.commonContentBackground#C4B29920
  • merge.commonHeaderBackground#C4B29940
  • merge.currentContentBackground#7DA06120
  • merge.currentHeaderBackground#7DA06140
  • merge.incomingContentBackground#8B6F4720
  • merge.incomingHeaderBackground#8B6F4740
  • notificationCenterHeader.background#2F2B26
  • notificationCenterHeader.foreground#E8E4D9
  • notificationLink.foreground#7DA061
  • notifications.background#2F2B26
  • notifications.border#4A443B
  • notifications.foreground#C4B299
  • notificationsErrorIcon.foreground#e06c75
  • notificationsInfoIcon.foreground#7DA061
  • notificationsWarningIcon.foreground#8B6F47
  • notificationToast.border#4A443B
  • panel.background#221E1A
  • panel.border#4A443B
  • panel.dropBackground#7DA06120
  • panelInput.border#4A443B
  • panelTitle.activeBorder#7DA061
  • panelTitle.activeForeground#E8E4D9
  • panelTitle.inactiveForeground#8B6F47
  • peekView.border#7DA061
  • peekViewEditor.background#2F2B26
  • peekViewEditor.matchHighlightBackground#7DA06120
  • peekViewEditorGutter.background#221E1A
  • peekViewResult.background#221E1A
  • peekViewResult.fileForeground#E8E4D9
  • peekViewResult.lineForeground#C4B299
  • peekViewResult.matchHighlightBackground#7DA06120
  • peekViewResult.selectionBackground#4A443B
  • peekViewResult.selectionForeground#E8E4D9
  • peekViewTitle.background#4A443B
  • peekViewTitleDescription.foreground#8B6F47
  • peekViewTitleLabel.foreground#E8E4D9
  • pickerGroup.border#4A443B
  • pickerGroup.foreground#7DA061
  • problemsErrorIcon.foreground#e06c75
  • problemsInfoIcon.foreground#7daea3
  • problemsWarningIcon.foreground#e78a4e
  • progressBar.background#7DA061
  • scrollbar.shadow#00000070
  • scrollbarSlider.activeBackground#C4B299
  • scrollbarSlider.background#8B6F4780
  • scrollbarSlider.hoverBackground#8B6F47
  • selection.background#7DA06126
  • sideBar.background#221E1A
  • sideBar.border#2F2B26
  • sideBar.dropBackground#2F2B2680
  • sideBar.foreground#C4B299
  • sideBarSectionHeader.background#2F2B26
  • sideBarSectionHeader.border#4A443B
  • sideBarSectionHeader.foreground#E8E4D9
  • sideBarTitle.foreground#E8E4D9
  • statusBar.background#221E1A
  • statusBar.border#2F2B26
  • statusBar.debuggingBackground#8B6F47
  • statusBar.debuggingForeground#1F1D1A
  • statusBar.foreground#C4B299
  • statusBar.noFolderBackground#221E1A
  • statusBar.noFolderBorder#2F2B26
  • statusBar.noFolderForeground#C4B299
  • statusBarItem.activeBackground#4A443B80
  • statusBarItem.errorBackground#e06c75
  • statusBarItem.errorForeground#1F1D1A
  • statusBarItem.hoverBackground#4A443B60
  • statusBarItem.prominentBackground#7DA061
  • statusBarItem.prominentForeground#1F1D1A
  • statusBarItem.prominentHoverBackground#6B8B54
  • statusBarItem.remoteBackground#7DA061
  • statusBarItem.remoteForeground#1F1D1A
  • statusBarItem.warningBackground#8B6F47
  • statusBarItem.warningForeground#1F1D1A
  • tab.activeBackground#2F2B26
  • tab.activeBorder#7DA061
  • tab.activeBorderTop#7DA061
  • tab.activeForeground#E8E4D9
  • tab.activeModifiedBorder#8B6F47
  • tab.border#2F2B26
  • tab.hoverBackground#4A443B
  • tab.inactiveBackground#221E1A
  • tab.inactiveForeground#8B6F47
  • tab.inactiveModifiedBorder#8B6F4760
  • tab.unfocusedActiveBackground#2F2B26
  • tab.unfocusedActiveBorder#7DA06160
  • tab.unfocusedActiveForeground#C4B299
  • tab.unfocusedInactiveBackground#221E1A
  • tab.unfocusedInactiveForeground#8B6F47
  • terminal.ansiBlack#1F1D1A
  • terminal.ansiBlue#7DA061
  • terminal.ansiBrightBlack#8B6F47
  • terminal.ansiBrightBlue#7DA061
  • terminal.ansiBrightCyan#C4B299
  • terminal.ansiBrightGreen#7DA061
  • terminal.ansiBrightMagenta#E8E4D9
  • terminal.ansiBrightRed#e06c75
  • terminal.ansiBrightWhite#E8E4D9
  • terminal.ansiBrightYellow#e78a4e
  • terminal.ansiCyan#C4B299
  • terminal.ansiGreen#7DA061
  • terminal.ansiMagenta#E8E4D9
  • terminal.ansiRed#e06c75
  • terminal.ansiWhite#C4B299
  • terminal.ansiYellow#e78a4e
  • terminal.background#221E1A
  • terminal.border#4A443B
  • terminal.foreground#C4B299
  • terminal.selectionBackground#4A443B80
  • terminal.tab.activeBorder#7DA061
  • terminalCursor.background#221E1A
  • terminalCursor.foreground#E8E4D9
  • textBlockQuote.background#2F2B26
  • textBlockQuote.border#C4B299
  • textCodeBlock.background#2F2B26
  • textLink.activeForeground#f2fffc
  • textLink.foreground#7DA061
  • textPreformat.foreground#8B6F47
  • titleBar.activeBackground#221E1A
  • titleBar.activeForeground#E8E4D9
  • titleBar.border#2F2B26
  • titleBar.inactiveBackground#1F1D1A
  • titleBar.inactiveForeground#8B6F47
  • toolbar.hoverBackground#3A352E
  • tree.indentGuidesStroke#8B6F47
  • widget.shadow#00000070

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#928374italic
variable, string constant.other.placeholder#d4be98
constant.other.color#d4be98
invalid, invalid.illegal#e06c75
keyword, storage.type, storage.modifier#e06c75
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#e78a4e
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#e06c75
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#98c379
meta.block variable.other#d4be98
support.other.variable, string.other.link#e06c75
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#ff6b6b
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#98c379
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#7daea3
support.type#7daea3
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#7daea3
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#e06c75
variable.language#e06c75italic
entity.name.method.js#98c379italic
meta.class-method.js entity.name.function.js, variable.function.constructor#98c379
entity.other.attribute-name#ff6b6b
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#e78a4eitalic
entity.other.attribute-name.class#e78a4e
source.sass keyword.control#98c379
markup.inserted#98c379
markup.deleted#e06c75
markup.changed#ff6b6b
string.regexp#89b482
constant.character.escape#89b482
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#98c379italic
source.js constant.other.object.key.js string.unquoted.label.js#e06c75italic
source.json meta.structure.dictionary.json support.type.property-name.json#98c379
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#e78a4e
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#7daea3
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#e06c75
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#89b482
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#7daea3
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#e06c75
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#ff6b6b
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#98c379
markup.italic#e06c75italic
markup.bold, markup.bold string#e06c75bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#e06c75bold
markup.underline#e78a4eunderline
markup.strike#89b482strike
markup.quote#89b482italic
markup.raw.block#ff6b6b
markup.table#d4be98
text.html.markdown, punctuation.definition.list_item.markdown#d4be98
text.html.markdown markup.inline.raw.markdown#ff6b6b
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#928374
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#98c379
markup.italic#e78a4eitalic
markup.bold, markup.bold string#e78a4ebold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#e78a4ebold
markup.quote punctuation.definition.blockquote.markdown#928374
markup.quoteitalic
string.other.link.title.markdown#7daea3
string.other.link.description.title.markdown#ff6b6b
constant.other.reference.link.markdown#e78a4e
markup.raw.block.fenced.markdown#d4be98
punctuation.definition.fenced.markdown#928374
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#d4be98
variable.language.fenced.markdown#928374
meta.separator#928374bold
markup.table#d4be98