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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#a5978bitalic
keyword, storage.type, storage.modifier#5a2a27italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical#5c4742
keyword.control.import, keyword.control.export, keyword.control.from#5a2a27
string, string.quoted, string.template#7a5a20
punctuation.definition.string.begin, punctuation.definition.string.end#8a6a30
constant.character.escape, constant.other.placeholder#a07a30italic
entity.name.function, meta.function-call, variable.function, support.function#2e6040
entity.name.label#2e6040
entity.name.type.class, entity.name.type, support.class, support.type#2a4a6aitalic
meta.type.annotation, meta.type.parameters#2a4a6aitalic
entity.name.type.module, meta.import variable.other#2a4a6a
variable, variable.name, variable.other#1e100e
variable.parameter#2e1a18
variable.language#8d5b4citalic
variable.other.property, variable.other.object.property, support.variable.property#8d5b4c
constant.numeric#3a6b3a
constant.language#5a2a27
constant, constant.other, constant.character#3a6b3a
entity.name.tag, meta.tag.sgml#5a2a27
entity.name.tag support.class.component#2a4a6a
meta.tag.attribute, entity.other.attribute-name#8d5b4citalic
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#8d5b4c
punctuation.terminator.statement, punctuation.separator.comma, punctuation.terminator.rule#a5978b
punctuation.accessor#8d5b4c
source.css entity.other.attribute-name.class, source.scss entity.other.attribute-name.class#2a4a6a
source.css entity.other.attribute-name.id, source.scss entity.other.attribute-name.id#8d5b4c
support.type.property-name.css, meta.property-list.css, meta.property-list.scss#5c4742
meta.property-value.css, support.constant.property-value.css#7a5a20
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#3a6b3aitalic
meta.object-literal.key#8d5b4c
source.json meta.structure.dictionary.json support.type.property-name.json#5c4742
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8d5b4c
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#2a4a6a
*url*, *link*, *uri*#2a4a6aunderline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#5a2a27italic
markup.heading, entity.name.section#5a2a27bold
markup.italic#5c4742italic
markup.bold#1e100ebold
markup.underline#7a5a20underline
markup.strike#a5978bstrikethrough
markup.quote#8d5b4citalic
markup.raw.block, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#3a6b3a
markup.deleted, punctuation.definition.deleted#8d5b4c
markup.inserted, punctuation.definition.inserted#3a6b3a
markup.changed, punctuation.definition.changed#7a5a20
entity.other.inherited-class#2a4a6a
invalid, invalid.illegal#f14c4c
token.info-token#8d5b4c
token.warn-token#cca700
token.error-token#f14c4c
token.debug-token#a5978b