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#e8e4d9
  • activityBar.border#ccc5b9
  • activityBar.foreground#252422
  • activityBarBadge.background#eb5e28
  • activityBarBadge.foreground#fffcf2
  • badge.background#eb5e28
  • badge.foreground#fffcf2
  • breadcrumb.activeSelectionForeground#252422
  • breadcrumb.background#fffcf2
  • breadcrumb.focusForeground#403d39
  • breadcrumb.foreground#6b6560
  • breadcrumbPicker.background#f0ece0
  • button.background#eb5e28
  • button.foreground#fffcf2
  • button.hoverBackground#d4521f
  • debugExceptionWidget.background#eb5e28
  • debugExceptionWidget.border#eb5e28
  • diffEditor.insertedTextBackground#eb5e2820
  • diffEditor.removedTextBackground#eb5e2815
  • dropdown.background#f0ece0
  • dropdown.border#ccc5b9
  • dropdown.foreground#252422
  • dropdown.listBackground#fffcf2
  • editor.background#fffcf2
  • editor.findMatchBackground#eb5e2850
  • editor.findMatchHighlightBackground#eb5e2825
  • editor.foreground#252422
  • editor.inactiveSelectionBackground#ccc5b940
  • editor.lineHighlightBackground#f0ece0
  • editor.rangeHighlightBackground#eb5e2815
  • editor.selectionBackground#ccc5b966
  • editor.selectionHighlightBackground#ccc5b944
  • editor.wordHighlightBackground#ccc5b944
  • editor.wordHighlightStrongBackground#ccc5b966
  • editorBracketMatch.background#eb5e2820
  • editorBracketMatch.border#eb5e28
  • editorCodeLens.foreground#9e9690
  • editorCursor.foreground#eb5e28
  • editorError.foreground#f14c4c
  • editorGroup.border#ccc5b9
  • editorGroup.dropBackground#f0ece0cc
  • editorGroupHeader.noTabsBackground#f0ece0
  • editorGroupHeader.tabsBackground#f0ece0
  • editorGroupHeader.tabsBorder#ccc5b9
  • editorGutter.addedBackground#403d39b3
  • editorGutter.background#fffcf2
  • editorGutter.deletedBackground#eb5e28b3
  • editorGutter.modifiedBackground#9e9690b3
  • editorHoverWidget.background#f0ece0
  • editorHoverWidget.border#ccc5b9
  • editorLineNumber.activeForeground#6b6560
  • editorLineNumber.foreground#ccc5b9
  • editorLink.activeForeground#403d39
  • editorMarkerNavigation.background#f0ece0
  • editorMarkerNavigationError.background#eb5e28b3
  • editorMarkerNavigationWarning.background#9e9690b3
  • editorOverviewRuler.addedForeground#403d39
  • editorOverviewRuler.border#ccc5b9
  • editorOverviewRuler.currentContentForeground#40393920
  • editorOverviewRuler.deletedForeground#eb5e28
  • editorOverviewRuler.errorForeground#eb5e28
  • editorOverviewRuler.findMatchForeground#eb5e2850
  • editorOverviewRuler.incomingContentForeground#eb5e2820
  • editorOverviewRuler.infoForeground#9e9690
  • editorOverviewRuler.modifiedForeground#9e9690
  • editorOverviewRuler.rangeHighlightForeground#ccc5b944
  • editorOverviewRuler.selectionHighlightForeground#ccc5b944
  • editorOverviewRuler.warningForeground#403d39
  • editorOverviewRuler.wordHighlightForeground#ccc5b944
  • editorOverviewRuler.wordHighlightStrongForeground#ccc5b966
  • editorRuler.foreground#ccc5b9
  • editorSuggestWidget.background#f0ece0
  • editorSuggestWidget.border#ccc5b9
  • editorSuggestWidget.foreground#252422
  • editorSuggestWidget.highlightForeground#252422
  • editorSuggestWidget.selectedBackground#ccc5b966
  • editorWarning.foreground#cca700
  • editorWhitespace.foreground#ccc5b966
  • editorWidget.background#f0ece0
  • editorWidget.border#ccc5b9
  • errorForeground#eb5e28
  • extensionButton.prominentBackground#eb5e28
  • extensionButton.prominentForeground#fffcf2
  • extensionButton.prominentHoverBackground#d4521f
  • focusBorder#eb5e2880
  • foreground#403d39
  • gitDecoration.conflictingResourceForeground#6b6560
  • gitDecoration.deletedResourceForeground#eb5e28
  • gitDecoration.ignoredResourceForeground#9e9690
  • gitDecoration.modifiedResourceForeground#403d39
  • gitDecoration.untrackedResourceForeground#252422
  • input.background#fffcf2
  • input.border#ccc5b9
  • input.foreground#252422
  • input.placeholderForeground#9e9690
  • inputOption.activeBorder#eb5e28
  • inputValidation.errorBackground#fffcf2
  • inputValidation.errorBorder#eb5e28
  • inputValidation.infoBackground#fffcf2
  • inputValidation.infoBorder#403d39
  • inputValidation.warningBackground#fffcf2
  • inputValidation.warningBorder#9e9690
  • list.activeSelectionBackground#ccc5b966
  • list.activeSelectionForeground#252422
  • list.dropBackground#ccc5b944
  • list.focusBackground#ccc5b966
  • list.focusForeground#252422
  • list.highlightForeground#eb5e28
  • list.hoverBackground#f0ece0
  • list.hoverForeground#252422
  • list.inactiveFocusBackground#ccc5b940
  • list.inactiveSelectionBackground#ccc5b944
  • list.inactiveSelectionForeground#252422
  • list.invalidItemForeground#eb5e28
  • merge.border#eb5e2880
  • merge.currentContentBackground#40393920
  • merge.currentHeaderBackground#40393940
  • merge.incomingContentBackground#eb5e2820
  • merge.incomingHeaderBackground#eb5e2840
  • notificationCenter.border#eb5e28
  • notificationCenterHeader.background#eb5e28
  • notificationCenterHeader.foreground#fffcf2
  • notificationLink.foreground#403d39
  • notifications.background#f0ece0
  • notifications.border#ccc5b9
  • notifications.foreground#252422
  • notificationToast.border#ccc5b9
  • panel.background#f0ece0
  • panel.border#ccc5b9
  • panelTitle.activeBorder#eb5e28
  • panelTitle.activeForeground#252422
  • panelTitle.inactiveForeground#9e9690
  • peekView.border#ccc5b9
  • peekViewEditor.background#f0ece0
  • peekViewEditor.matchHighlightBackground#eb5e2830
  • peekViewEditorGutter.background#f0ece0
  • peekViewResult.background#e8e4d9
  • peekViewResult.fileForeground#252422
  • peekViewResult.lineForeground#403d39
  • peekViewResult.matchHighlightBackground#eb5e2830
  • peekViewResult.selectionBackground#ccc5b966
  • peekViewResult.selectionForeground#252422
  • peekViewTitle.background#fffcf2
  • peekViewTitleDescription.foreground#6b6560
  • peekViewTitleLabel.foreground#252422
  • pickerGroup.border#ccc5b9
  • pickerGroup.foreground#9e9690
  • progressBar.background#eb5e28
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#40393966
  • scrollbarSlider.background#40393922
  • scrollbarSlider.hoverBackground#40393944
  • selection.background#ccc5b966
  • sideBar.background#f0ece0
  • sideBar.border#ccc5b9
  • sideBar.foreground#403d39
  • sideBarSectionHeader.background#e8e4d9
  • sideBarSectionHeader.foreground#6b6560
  • sideBarTitle.foreground#403d39
  • statusBar.background#e8e4d9
  • statusBar.border#ccc5b9
  • statusBar.debuggingBackground#eb5e28
  • statusBar.debuggingForeground#fffcf2
  • statusBar.foreground#403d39
  • statusBar.noFolderBackground#ccc5b9
  • statusBar.noFolderForeground#403d39
  • statusBarItem.activeBackground#ccc5b966
  • statusBarItem.hoverBackground#ccc5b944
  • statusBarItem.prominentBackground#eb5e28
  • statusBarItem.prominentHoverBackground#d4521f
  • tab.activeBackground#fffcf2
  • tab.activeBorder#eb5e28
  • tab.activeForeground#252422
  • tab.border#ccc5b9
  • tab.hoverBackground#e8e4d9
  • tab.inactiveBackground#f0ece0
  • tab.inactiveForeground#9e9690
  • tab.unfocusedActiveForeground#403d39
  • tab.unfocusedHoverBackground#e8e4d9
  • tab.unfocusedInactiveForeground#9e9690
  • terminal.ansiBlack#252422
  • terminal.ansiBlue#403d39
  • terminal.ansiBrightBlack#6b6560
  • terminal.ansiBrightBlue#252422
  • terminal.ansiBrightCyan#252422
  • terminal.ansiBrightGreen#252422
  • terminal.ansiBrightMagenta#d4521f
  • terminal.ansiBrightRed#eb5e28
  • terminal.ansiBrightWhite#fffcf2
  • terminal.ansiBrightYellow#403d39
  • terminal.ansiCyan#403d39
  • terminal.ansiGreen#403d39
  • terminal.ansiMagenta#6b6560
  • terminal.ansiRed#eb5e28
  • terminal.ansiWhite#ccc5b9
  • terminal.ansiYellow#6b6560
  • terminal.background#f0ece0
  • terminal.foreground#252422
  • terminal.selectionBackground#ccc5b966
  • titleBar.activeBackground#e8e4d9
  • titleBar.activeForeground#252422
  • titleBar.border#ccc5b9
  • titleBar.inactiveBackground#f0ece0
  • titleBar.inactiveForeground#9e9690
  • walkThrough.embeddedEditorBackground#f0ece0
  • widget.shadow#ccc5b966

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9e9690italic
keyword, storage.type, storage.modifier#a0522ditalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical#6b6560
keyword.control.import, keyword.control.export, keyword.control.from#a0522d
string, string.quoted, string.template#7a6020
punctuation.definition.string.begin, punctuation.definition.string.end#9a7a30
constant.character.escape, constant.other.placeholder#eb5e28italic
entity.name.function, meta.function-call, variable.function, support.function#3a7a3a
entity.name.label#3a7a3a
entity.name.type.class, entity.name.type, support.class, support.type#8b5e3citalic
meta.type.annotation, meta.type.parameters#8b5e3citalic
entity.name.type.module, meta.import variable.other#8b5e3c
variable, variable.name, variable.other#2e2b28
variable.parameter#403d39
variable.language#2e6080italic
variable.other.property, variable.other.object.property, support.variable.property#2e6080
constant.numeric#3a6b3a
constant.language#a0522d
constant, constant.other, constant.character#3a6b3a
entity.name.tag, meta.tag.sgml#a0522d
entity.name.tag support.class.component#8b5e3c
meta.tag.attribute, entity.other.attribute-name#2e6080italic
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#6b6560
punctuation.terminator.statement, punctuation.separator.comma, punctuation.terminator.rule#9e9690
punctuation.accessor#6b6560
source.css entity.other.attribute-name.class, source.scss entity.other.attribute-name.class#8b5e3c
source.css entity.other.attribute-name.id, source.scss entity.other.attribute-name.id#7a6020
support.type.property-name.css, meta.property-list.css, meta.property-list.scss#2e6080
meta.property-value.css, support.constant.property-value.css#7a6020
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#3a7a3aitalic
meta.object-literal.key#2e6080
source.json meta.structure.dictionary.json support.type.property-name.json#2e6080
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#7a6020
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#8b5e3c
*url*, *link*, *uri*#2e6080underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#a0522ditalic
markup.heading, entity.name.section#7a6020bold
markup.italic#403d39italic
markup.bold#252422bold
markup.underline#2e6080underline
markup.strike#9e9690strikethrough
markup.quote#6b6560italic
markup.raw.block, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#3a6b3a
markup.deleted, punctuation.definition.deleted#c0392b
markup.inserted, punctuation.definition.inserted#3a7a3a
markup.changed, punctuation.definition.changed#7a6020
entity.other.inherited-class#8b5e3c
invalid, invalid.illegal#f14c4c
token.info-token#2e6080
token.warn-token#cca700
token.error-token#f14c4c
token.debug-token#9e9690