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#180f08
  • activityBar.activeBorder#d2a67b
  • activityBar.activeFocusBorder#d2a67b
  • activityBar.background#180f08
  • activityBar.border#180f08
  • activityBar.dropBackground#faf4f0
  • activityBar.foreground#d2a67b
  • activityBar.inactiveForeground#d2a67b60
  • activityBarBadge.background#d2a67b
  • activityBarBadge.foreground#180f08
  • badge.background#d2a67b
  • badge.foreground#180f08
  • breadcrumb.activeSelectionForeground#fcfaf6
  • breadcrumb.background#180f08
  • breadcrumb.focusForeground#fcfaf6
  • breadcrumb.foreground#f6ece0a0
  • breadcrumbPicker.background#180f08
  • button.background#d2a67b
  • button.foreground#180f08
  • button.hoverBackground#faf4f0
  • checkbox.background#180f08
  • checkbox.border#d2a67b
  • checkbox.foreground#fcfaf6
  • debugExceptionWidget.background#180f08
  • debugExceptionWidget.border#f6ece0
  • debugToolBar.background#180f08
  • debugToolBar.border#f6ece0
  • descriptionForeground#fcfaf6
  • diffEditor.border#f6ece060
  • diffEditor.insertedTextBackground#efb22d20
  • diffEditor.removedTextBackground#df5b0220
  • dropdown.background#180f08
  • dropdown.border#d2a67b80
  • dropdown.foreground#fcfaf6
  • dropdown.listBackground#080402
  • editor.background#180f08
  • editor.findMatchBackground#faf4f040
  • editor.findMatchHighlightBackground#3e4242f0
  • editor.findRangeHighlightBackground#fcfaf620
  • editor.focusedStackFrameHighlightBackground#faf4f0
  • editor.foreground#fcfaf6
  • editor.hoverHighlightBackground#180f0820
  • editor.inactiveSelectionBackground#3e4242f0
  • editor.lineHighlightBackground#080402
  • editor.rangeHighlightBackground#faf4f040
  • editor.rangeHighlightBorder#faf4f020
  • editor.selectionBackground#faf4f080
  • editor.selectionForeground#180f08
  • editor.selectionHighlightBackground#3e4242f0
  • editor.selectionHighlightBorder#3e4242
  • editor.stackFrameHighlightBackground#d2a67b
  • editor.wordHighlightBackground#faf4f080
  • editor.wordHighlightStrongBackground#faf4f080
  • editorBracketMatch.background#faf4f060
  • editorBracketMatch.border#faf4f020
  • editorCursor.background#180f08
  • editorCursor.foreground#faf4f0
  • editorError.foreground#df5b02
  • editorGroup.border#362412a0
  • editorGroup.dropBackground#faf4f0a0
  • editorGroup.emptyBackground#180f08
  • editorGroup.focusedEmptyBorder#d2a67b40
  • editorGroupHeader.noTabsBackground#180f08
  • editorGroupHeader.tabsBackground#180f08
  • editorGroupHeader.tabsBorder#362412a0
  • editorGutter.addedBackground#faf4f0
  • editorGutter.background#180f08
  • editorGutter.commentRangeForeground#dcd4a8
  • editorGutter.deletedBackground#df5b02
  • editorGutter.modifiedBackground#efb22d
  • editorHint.foreground#d2a67b
  • editorHoverWidget.background#180f08
  • editorHoverWidget.border#f6ece0
  • editorHoverWidget.foreground#fcfaf6
  • editorIndentGuide.activeBackground#faf4f0f0
  • editorIndentGuide.background#fcfaf620
  • editorInfo.foreground#f6ece0
  • editorLightBulb.foreground#efb22d
  • editorLightBulbAutoFix.foreground#df5b02
  • editorLineNumber.activeForeground#faf4f0
  • editorLineNumber.foreground#f6ece040
  • editorLink.activeForeground#faf4f0
  • editorMarkerNavigation.background#180f08
  • editorMarkerNavigationError.background#df5b02
  • editorMarkerNavigationInfo.background#f6ece0
  • editorMarkerNavigationWarning.background#efb22d
  • editorOverviewRuler.border#362412a0
  • editorOverviewRuler.commonContentForeground#180f08
  • editorOverviewRuler.currentContentForeground#f6ece0
  • editorOverviewRuler.incomingContentForeground#faf4f0
  • editorPane.background#180f08
  • editorSuggestWidget.background#080402
  • editorSuggestWidget.border#f6ece0
  • editorSuggestWidget.foreground#fcfaf6
  • editorSuggestWidget.highlightForeground#fcfaf6
  • editorSuggestWidget.selectedBackground#f6ece060
  • editorUnnecessaryCode.opacity#fcfaf6c0
  • editorWarning.foreground#efb22d
  • editorWhitespace.foreground#fcfaf620
  • editorWidget.background#180f08
  • editorWidget.border#f6ece0
  • editorWidget.foreground#f6ece0
  • editorWidget.resizeBorder#f6ece0
  • errorForeground#ba4d06
  • extensionBadge.remoteBackground#df5b02
  • extensionBadge.remoteForeground#fcfaf6
  • extensionButton.prominentBackground#d2a67b
  • extensionButton.prominentForeground#fcfaf6
  • extensionButton.prominentHoverBackground#faf4f0
  • focusBorder#08040260
  • foreground#fcfaf6
  • gitDecoration.addedResourceForeground#faf4f0
  • gitDecoration.conflictingResourceForeground#8f68ae
  • gitDecoration.deletedResourceForeground#df5b02
  • gitDecoration.ignoredResourceForeground#f6ece0
  • gitDecoration.modifiedResourceForeground#efb22d
  • gitDecoration.submoduleResourceForeground#1f98a2
  • gitDecoration.untrackedResourceForeground#fcfaf6
  • icon.foreground#faf4f0
  • imagePreview.border#f6ece0
  • input.background#180f08
  • input.border#d2a67b80
  • input.foreground#fcfaf6
  • input.placeholderForeground#fcfaf660
  • inputOption.activeBackground#180f08
  • inputOption.activeBorder#faf4f0
  • inputValidation.errorBackground#ba4d0660
  • inputValidation.errorBorder#ba4d06
  • inputValidation.errorForeground#fcfaf6
  • inputValidation.infoBackground#080402
  • inputValidation.infoBorder#faf4f0
  • inputValidation.infoForeground#fcfaf6
  • inputValidation.warningBackground#efb22d60
  • inputValidation.warningBorder#efb22d
  • inputValidation.warningForeground#fcfaf6
  • list.activeSelectionBackground#d2a67b40
  • list.activeSelectionForeground#fcfaf6
  • list.dropBackground#080402
  • list.errorForeground#df5b0280
  • list.filterMatchBackground#d2a67b60
  • list.filterMatchBorder#d2a67b60
  • list.focusBackground#faf4f040
  • list.focusForeground#fcfaf6
  • list.highlightForeground#fcfaf6
  • list.hoverBackground#faf4f040
  • list.hoverForeground#fcfaf6
  • list.inactiveFocusBackground#080402
  • list.inactiveSelectionBackground#d2a67b20
  • list.inactiveSelectionForeground#f6ece0d0
  • list.invalidItemForeground#efb22d
  • list.warningForeground#efb22d80
  • listFilterWidget.background#180f08
  • listFilterWidget.noMatchesOutline#efb22d80
  • listFilterWidget.outline#d2a67b
  • menu.background#080402
  • menu.foreground#fcfaf6a0
  • menu.selectionBackground#d2a67b80
  • menu.selectionForeground#fcfaf6
  • menu.separatorBackground#f6ece040
  • menubar.selectionBackground#d2a67b80
  • menubar.selectionForeground#fcfaf6
  • merge.border#f6ece0
  • merge.currentContentBackground#f6ece020
  • merge.currentHeaderBackground#f6ece060
  • merge.incomingContentBackground#faf4f020
  • merge.incomingHeaderBackground#faf4f060
  • minimap.errorHighlight#df5b02
  • minimap.findMatchHighlight#faf4f0
  • minimap.selectionHighlight#faf4f0
  • minimap.warningHighlight#efb22d
  • notificationCenter.border#f6ece0
  • notificationCenterHeader.background#d2a67b
  • notificationCenterHeader.foreground#fcfaf6
  • notificationLink.foreground#faf4f0
  • notifications.background#180f08
  • notifications.border#f6ece0
  • notifications.foreground#fcfaf6
  • notificationsErrorIcon.foreground#df5b02
  • notificationsInfoIcon.foreground#f6ece0
  • notificationsWarningIcon.foreground#efb22d
  • notificationToast.border#f6ece0
  • panel.background#080402
  • panel.border#f6ece060
  • panel.dropBackground#faf4f0a0
  • panelInput.border#d2a67b
  • panelTitle.activeBorder#f6ece0
  • panelTitle.activeForeground#fcfaf6
  • panelTitle.inactiveForeground#fcfaf680
  • peekView.border#f6ece0
  • peekViewEditor.background#080402
  • peekViewEditor.matchHighlightBackground#efb22d40
  • peekViewEditorGutter.background#080402
  • peekViewResult.background#180f08
  • peekViewResult.fileForeground#f6ece0
  • peekViewResult.lineForeground#f6ece0
  • peekViewResult.matchHighlightBackground#efb22d40
  • peekViewResult.selectionBackground#080402
  • peekViewResult.selectionForeground#f6ece0
  • peekViewTitle.background#180f08
  • peekViewTitleDescription.foreground#f6ece0
  • peekViewTitleLabel.foreground#fcfaf6
  • pickerGroup.border#f6ece0
  • pickerGroup.foreground#faf4f0
  • problemsErrorIcon.foreground#df5b02
  • problemsInfoIcon.foreground#f6ece0
  • problemsWarningIcon.foreground#efb22d
  • progressBar.background#d2a67b
  • quickInput.background#080402
  • quickInput.foreground#fcfaf6a0
  • scrollbar.shadow#080402
  • scrollbarSlider.activeBackground#d2a67b
  • scrollbarSlider.background#362412a0
  • scrollbarSlider.hoverBackground#faf4f0
  • selection.background#faf4f0
  • sideBar.background#180f08
  • sideBar.border#362412a0
  • sideBar.dropBackground#d2a67b40
  • sideBar.foreground#f6ece080
  • sideBarSectionHeader.background#d2a67b40
  • sideBarSectionHeader.border#08040240
  • sideBarSectionHeader.foreground#f6ece0
  • sideBarTitle.foreground#fcfaf6
  • statusBar.background#180f08
  • statusBar.border#362412a0
  • statusBar.debuggingBackground#faf4f0
  • statusBar.debuggingBorder#362412a0
  • statusBar.debuggingForeground#180f08
  • statusBar.foreground#f6ece0
  • statusBar.noFolderBackground#180f08
  • statusBar.noFolderBorder#362412a0
  • statusBar.noFolderForeground#f6ece0
  • statusBarItem.activeBackground#080402
  • statusBarItem.hoverBackground#080402
  • statusBarItem.prominentBackground#080402
  • statusBarItem.prominentForeground#f6ece0
  • statusBarItem.prominentHoverBackground#080402
  • statusBarItem.remoteBackground#df5b02
  • statusBarItem.remoteForeground#f8f8f8
  • tab.activeBackground#180f08
  • tab.activeBorder#180f08
  • tab.activeBorderTop#faf4f0
  • tab.activeForeground#fcfaf6
  • tab.activeModifiedBorder#efb22d80
  • tab.border#362412a0
  • tab.hoverBackground#080402
  • tab.inactiveBackground#180f08
  • tab.inactiveForeground#f6ece0c0
  • tab.inactiveModifiedBorder#efb22d40
  • tab.unfocusedActiveBackground#180f08
  • tab.unfocusedActiveBorder#180f08
  • tab.unfocusedActiveBorderTop#d2a67b40
  • tab.unfocusedActiveForeground#f6ece0a0
  • tab.unfocusedActiveModifiedBorder#efb22d40
  • tab.unfocusedInactiveForeground#f6ece080
  • tab.unfocusedInactiveModifiedBorder#efb22d20
  • terminal.ansiBlack#020202
  • terminal.ansiBlue#76abdc
  • terminal.ansiBrightBlack#424242
  • terminal.ansiBrightBlue#76abdc
  • terminal.ansiBrightCyan#56b8c8
  • terminal.ansiBrightGreen#80a28e
  • terminal.ansiBrightMagenta#b68db2
  • terminal.ansiBrightRed#c45e04
  • terminal.ansiBrightWhite#fefefe
  • terminal.ansiBrightYellow#f4db60
  • terminal.ansiCyan#56b8c8
  • terminal.ansiGreen#80a28e
  • terminal.ansiMagenta#b68db2
  • terminal.ansiRed#c45e04
  • terminal.ansiWhite#efefef
  • terminal.ansiYellow#f4db60
  • terminal.background#080402
  • terminal.border#f6ece0
  • terminal.foreground#fcfaf6
  • terminal.selectionBackground#d2a67b40
  • terminalCursor.background#180f08
  • terminalCursor.foreground#faf4f0
  • textBlockQuote.background#180f08
  • textCodeBlock.background#f6ece040
  • textLink.activeForeground#faf4f0
  • textLink.foreground#faf4f0
  • textPreformat.foreground#fcfaf6
  • textSeparator.foreground#fcfaf640
  • titleBar.activeBackground#180f08
  • titleBar.activeForeground#fcfaf6a0
  • titleBar.border#08040260
  • titleBar.inactiveBackground#180f08
  • titleBar.inactiveForeground#fcfaf680
  • tree.indentGuidesStroke#f6ece040
  • walkThrough.embeddedEditorBackground#080402
  • welcomePage.background#180f08
  • welcomePage.buttonBackground#d2a67b40
  • welcomePage.buttonHoverBackground#faf4f080
  • widget.shadow#180f08
  • window.activeBorder#180f08
  • window.inactiveBorder#080402

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#fefefe60italic
variable, string constant.other.placeholder#d2d8d8
constant.other.color#d2d8d8
invalid, invalid.deprecated, invalid.illegal#c86206
keyword, storage.type, storage.modifier#c28e60
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#00b4d6
meta.function punctuation.separator.comma#f4e286
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#8bcbd2
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#5d8a74
meta.block variable.other#8bcbd2
support.other.variable, string.other.link#8bcbd2
string.quoted, variable.other.readwrite.js#e4e4e4
string.quoted.single.js#ecd2b4
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#ecd2b4
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#ecd2b4
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#f4e286
support.type#afd2e2
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#fcfaf6a0
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#c4d4c2
variable.language#c4d4c2
entity.name.method.js#5d8a74
meta.class-method.js entity.name.function.js, variable.function.constructor#5d8a74
source.cs keyword.other.using.cs#ecd2b4a0
source.cs entity.name.type.namespace.cs#f4e286
entity.other.attribute-name#c28e60
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#f4e286italic
text.html.derivative entity.name.tag.html#ecd2b4a0
entity.other.attribute-name.class#f4e286
entity.name.tag.css#f4e286
source.sass keyword.control#5d8a74
markup.inserted#ecd2b4
markup.deleted#c4d4c2
markup.changed#c28e60
string.regexp#00b4d6
constant.character.escape#00b4d6
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#5d8a74italic
source.js constant.other.object.key.js string.unquoted.label.js#c4d4c2italic
source.json meta.structure.dictionary.json support.type.property-name.json#c28e60
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f4e286
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#b2d8d8
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#c4d4c2
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#ca8c80
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#5d8a74
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#8bcbd2
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#c28e60
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#ecd2b4
text.html.markdown, punctuation.definition.list_item.markdown#d2d8e4
text.html.markdown markup.inline.raw.markdown#c28e60
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#6e7a82
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#c28e60
markup.italic#8bcbd2italic
markup.bold, markup.bold string#8bcbd2bold
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#8bcbd2bold
markup.underline#b2d8d8underline
markup.quote punctuation.definition.blockquote.markdown#6e7a82
markup.quoteitalic
markup.underline.link.markdown, markup.underline.link.image.markdown#ecd2b4
string.other.link.description.markdown#8bcbd2
string.other.link.title.markdown#d2d8e4
constant.other.reference.link.markdown#f4e286
markup.raw.block#c28e60
markup.raw.block.fenced.markdown#0a0a0a60
punctuation.definition.fenced.markdown#0a0a0a60
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#d2d8e4
variable.language.fenced.markdown#6e7a82
meta.separator#6e7a82bold
markup.table#d2d8e4
Overcast Theme by Cecil Jacob - VS Code Theme