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#1e100e
  • activityBar.border#2e1a18
  • activityBar.foreground#c4bbaf
  • activityBarBadge.background#8d5b4c
  • activityBarBadge.foreground#f5f0eb
  • badge.background#8d5b4c
  • badge.foreground#f5f0eb
  • breadcrumb.activeSelectionForeground#c4bbaf
  • breadcrumb.background#1e100e
  • breadcrumb.focusForeground#a5978b
  • breadcrumb.foreground#6b4a45
  • breadcrumbPicker.background#1e100e
  • button.background#8d5b4c
  • button.foreground#f5f0eb
  • button.hoverBackground#5c4742
  • debugExceptionWidget.background#2e1a18
  • debugExceptionWidget.border#8d5b4c
  • diffEditor.insertedTextBackground#8d5b4c20
  • diffEditor.removedTextBackground#5a2a2715
  • dropdown.background#1e100e
  • dropdown.border#2e1a18
  • dropdown.foreground#a5978b
  • dropdown.listBackground#2e1a18
  • editor.background#1e100e
  • editor.findMatchBackground#8d5b4c50
  • editor.findMatchHighlightBackground#8d5b4c25
  • editor.foreground#c4bbaf
  • editor.inactiveSelectionBackground#8d5b4c40
  • editor.lineHighlightBackground#2e1a18
  • editor.rangeHighlightBackground#8d5b4c15
  • editor.selectionBackground#8d5b4c66
  • editor.selectionHighlightBackground#8d5b4c44
  • editor.wordHighlightBackground#8d5b4c44
  • editor.wordHighlightStrongBackground#8d5b4c66
  • editorBracketMatch.background#8d5b4c20
  • editorBracketMatch.border#8d5b4c
  • editorCodeLens.foreground#6b4a45
  • editorCursor.foreground#8d5b4c
  • editorError.foreground#f14c4c
  • editorGroup.border#2e1a18
  • editorGroup.dropBackground#2e1a18cc
  • editorGroupHeader.noTabsBackground#1e100e
  • editorGroupHeader.tabsBackground#1e100e
  • editorGroupHeader.tabsBorder#2e1a18
  • editorGutter.addedBackground#a5978bb3
  • editorGutter.background#1e100e
  • editorGutter.deletedBackground#8d5b4cb3
  • editorGutter.modifiedBackground#6b4a45b3
  • editorHoverWidget.background#2e1a18
  • editorHoverWidget.border#3d2420
  • editorLineNumber.activeForeground#6b4a45
  • editorLineNumber.foreground#3d2420
  • editorLink.activeForeground#a5978b
  • editorMarkerNavigation.background#2e1a18
  • editorMarkerNavigationError.background#f14c4cb3
  • editorMarkerNavigationWarning.background#cca700b3
  • editorOverviewRuler.addedForeground#a5978b
  • editorOverviewRuler.border#2e1a18
  • editorOverviewRuler.currentContentForeground#a5978b20
  • editorOverviewRuler.deletedForeground#8d5b4c
  • editorOverviewRuler.errorForeground#f14c4c
  • editorOverviewRuler.findMatchForeground#8d5b4c50
  • editorOverviewRuler.incomingContentForeground#8d5b4c20
  • editorOverviewRuler.infoForeground#8d5b4c
  • editorOverviewRuler.modifiedForeground#6b4a45
  • editorOverviewRuler.rangeHighlightForeground#8d5b4c44
  • editorOverviewRuler.selectionHighlightForeground#8d5b4c44
  • editorOverviewRuler.warningForeground#cca700
  • editorOverviewRuler.wordHighlightForeground#8d5b4c44
  • editorOverviewRuler.wordHighlightStrongForeground#8d5b4c66
  • editorRuler.foreground#2e1a18
  • editorSuggestWidget.background#2e1a18
  • editorSuggestWidget.border#3d2420
  • editorSuggestWidget.foreground#c4bbaf
  • editorSuggestWidget.highlightForeground#c4bbaf
  • editorSuggestWidget.selectedBackground#8d5b4c66
  • editorWarning.foreground#cca700
  • editorWhitespace.foreground#2e1a1866
  • editorWidget.background#2e1a18
  • editorWidget.border#3d2420
  • errorForeground#f14c4c
  • extensionButton.prominentBackground#8d5b4c
  • extensionButton.prominentForeground#f5f0eb
  • extensionButton.prominentHoverBackground#5c4742
  • focusBorder#8d5b4c80
  • foreground#a5978b
  • gitDecoration.conflictingResourceForeground#6b4a45
  • gitDecoration.deletedResourceForeground#8d5b4c
  • gitDecoration.ignoredResourceForeground#3d2420
  • gitDecoration.modifiedResourceForeground#a5978b
  • gitDecoration.untrackedResourceForeground#c4bbaf
  • input.background#2e1a18
  • input.border#3d2420
  • input.foreground#c4bbaf
  • input.placeholderForeground#3d2420
  • inputOption.activeBorder#8d5b4c
  • inputValidation.errorBackground#1e100e
  • inputValidation.errorBorder#f14c4c
  • inputValidation.infoBackground#1e100e
  • inputValidation.infoBorder#8d5b4c
  • inputValidation.warningBackground#1e100e
  • inputValidation.warningBorder#cca700
  • list.activeSelectionBackground#8d5b4c66
  • list.activeSelectionForeground#c4bbaf
  • list.dropBackground#8d5b4c44
  • list.focusBackground#8d5b4c66
  • list.focusForeground#c4bbaf
  • list.highlightForeground#8d5b4c
  • list.hoverBackground#2e1a18
  • list.hoverForeground#c4bbaf
  • list.inactiveFocusBackground#8d5b4c40
  • list.inactiveSelectionBackground#8d5b4c44
  • list.inactiveSelectionForeground#c4bbaf
  • list.invalidItemForeground#8d5b4c
  • merge.border#8d5b4c80
  • merge.currentContentBackground#a5978b20
  • merge.currentHeaderBackground#a5978b40
  • merge.incomingContentBackground#8d5b4c20
  • merge.incomingHeaderBackground#8d5b4c40
  • notificationCenter.border#8d5b4c
  • notificationCenterHeader.background#8d5b4c
  • notificationCenterHeader.foreground#f5f0eb
  • notificationLink.foreground#a5978b
  • notifications.background#2e1a18
  • notifications.border#3d2420
  • notifications.foreground#c4bbaf
  • notificationToast.border#3d2420
  • panel.background#1e100e
  • panel.border#2e1a18
  • panelTitle.activeBorder#8d5b4c
  • panelTitle.activeForeground#c4bbaf
  • panelTitle.inactiveForeground#3d2420
  • peekView.border#3d2420
  • peekViewEditor.background#2e1a18
  • peekViewEditor.matchHighlightBackground#8d5b4c30
  • peekViewEditorGutter.background#2e1a18
  • peekViewResult.background#1e100e
  • peekViewResult.fileForeground#c4bbaf
  • peekViewResult.lineForeground#a5978b
  • peekViewResult.matchHighlightBackground#8d5b4c30
  • peekViewResult.selectionBackground#8d5b4c66
  • peekViewResult.selectionForeground#c4bbaf
  • peekViewTitle.background#1e100e
  • peekViewTitleDescription.foreground#3d2420
  • peekViewTitleLabel.foreground#c4bbaf
  • pickerGroup.border#2e1a18
  • pickerGroup.foreground#3d2420
  • progressBar.background#8d5b4c
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#8d5b4c66
  • scrollbarSlider.background#8d5b4c22
  • scrollbarSlider.hoverBackground#8d5b4c44
  • selection.background#8d5b4c66
  • sideBar.background#1e100e
  • sideBar.border#2e1a18
  • sideBar.foreground#a5978b
  • sideBarSectionHeader.background#2e1a18
  • sideBarSectionHeader.foreground#6b4a45
  • sideBarTitle.foreground#a5978b
  • statusBar.background#1e100e
  • statusBar.border#2e1a18
  • statusBar.debuggingBackground#8d5b4c
  • statusBar.debuggingForeground#f5f0eb
  • statusBar.foreground#6b4a45
  • statusBar.noFolderBackground#2e1a18
  • statusBar.noFolderForeground#6b4a45
  • statusBarItem.activeBackground#8d5b4c66
  • statusBarItem.hoverBackground#8d5b4c44
  • statusBarItem.prominentBackground#8d5b4c
  • statusBarItem.prominentHoverBackground#5c4742
  • tab.activeBackground#1e100e
  • tab.activeBorder#8d5b4c
  • tab.activeForeground#c4bbaf
  • tab.border#2e1a18
  • tab.hoverBackground#2e1a18
  • tab.inactiveBackground#1e100e
  • tab.inactiveForeground#3d2420
  • tab.unfocusedActiveForeground#a5978b
  • tab.unfocusedHoverBackground#2e1a18
  • tab.unfocusedInactiveForeground#3d2420
  • terminal.ansiBlack#1e100e
  • terminal.ansiBlue#6b8aa0
  • terminal.ansiBrightBlack#6b4a45
  • terminal.ansiBrightBlue#a5978b
  • terminal.ansiBrightCyan#c4bbaf
  • terminal.ansiBrightGreen#c4bbaf
  • terminal.ansiBrightMagenta#5a2a27
  • terminal.ansiBrightRed#8d5b4c
  • terminal.ansiBrightWhite#f5f0eb
  • terminal.ansiBrightYellow#d4c8be
  • terminal.ansiCyan#6a9a8a
  • terminal.ansiGreen#7a9a6a
  • terminal.ansiMagenta#a0708a
  • terminal.ansiRed#8d5b4c
  • terminal.ansiWhite#a5978b
  • terminal.ansiYellow#c8a060
  • terminal.background#1e100e
  • terminal.foreground#c4bbaf
  • terminal.selectionBackground#8d5b4c66
  • titleBar.activeBackground#1e100e
  • titleBar.activeForeground#c4bbaf
  • titleBar.border#2e1a18
  • titleBar.inactiveBackground#1e100e
  • titleBar.inactiveForeground#3d2420
  • walkThrough.embeddedEditorBackground#1e100e
  • widget.shadow#00000044

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6b4a45italic
keyword, storage.type, storage.modifier#c47a5aitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical#8a7570
keyword.control.import, keyword.control.export, keyword.control.from#c47a5a
string, string.quoted, string.template#c8a060
punctuation.definition.string.begin, punctuation.definition.string.end#a88040
constant.character.escape, constant.other.placeholder#e0b870italic
entity.name.function, meta.function-call, variable.function, support.function#7ab87a
entity.name.label#7ab87a
entity.name.type.class, entity.name.type, support.class, support.type#9ab8c8italic
meta.type.annotation, meta.type.parameters#9ab8c8italic
entity.name.type.module, meta.import variable.other#9ab8c8
variable, variable.name, variable.other#c4bbaf
variable.parameter#d4c8be
variable.language#c47a5aitalic
variable.other.property, variable.other.object.property, support.variable.property#d4a870
constant.numeric#a0c8a0
constant.language#c47a5a
constant, constant.other, constant.character#a0c8a0
entity.name.tag, meta.tag.sgml#c47a5a
entity.name.tag support.class.component#9ab8c8
meta.tag.attribute, entity.other.attribute-name#d4a870italic
punctuation, meta.tag, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#8a7570
punctuation.terminator.statement, punctuation.separator.comma, punctuation.terminator.rule#6b4a45
punctuation.accessor#8a7570
source.css entity.other.attribute-name.class, source.scss entity.other.attribute-name.class#9ab8c8
source.css entity.other.attribute-name.id, source.scss entity.other.attribute-name.id#d4a870
support.type.property-name.css, meta.property-list.css, meta.property-list.scss#7ab87a
meta.property-value.css, support.constant.property-value.css#c8a060
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#a0c8a0italic
meta.object-literal.key#d4a870
source.json meta.structure.dictionary.json support.type.property-name.json#7ab87a
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c8a060
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#9ab8c8
*url*, *link*, *uri*#9ab8c8underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#c47a5aitalic
markup.heading, entity.name.section#7ab87abold
markup.italic#d4c8beitalic
markup.bold#c4bbafbold
markup.underline#c8a060underline
markup.strike#6b4a45strikethrough
markup.quote#8a7570italic
markup.raw.block, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#a0c8a0
markup.deleted, punctuation.definition.deleted#8d5b4c
markup.inserted, punctuation.definition.inserted#a0c8a0
markup.changed, punctuation.definition.changed#c8a060
entity.other.inherited-class#9ab8c8
invalid, invalid.illegal#f14c4c
token.info-token#8d5b4c
token.warn-token#cca700
token.error-token#f14c4c
token.debug-token#6b4a45