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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6b6560italic
keyword, storage.type, storage.modifier#c47b5aitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical#9e9690
keyword.control.import, keyword.control.export, keyword.control.from#c47b5a
string, string.quoted, string.template#c8a96e
punctuation.definition.string.begin, punctuation.definition.string.end#a8894e
constant.character.escape, constant.other.placeholder#eb5e28italic
entity.name.function, meta.function-call, variable.function, support.function#7da87b
entity.name.label#7da87b
entity.name.type.class, entity.name.type, support.class, support.type#b8956aitalic
meta.type.annotation, meta.type.parameters#b8956aitalic
entity.name.type.module, meta.import variable.other#b8956a
variable, variable.name, variable.other#d4c5a9
variable.parameter#c4b598
variable.language#9db8c0italic
variable.other.property, variable.other.object.property, support.variable.property#9db8c0
constant.numeric#a0c4a0
constant.language#c47b5a
constant, constant.other, constant.character#a0c4a0
entity.name.tag, meta.tag.sgml#c47b5a
entity.name.tag support.class.component#b8956a
meta.tag.attribute, entity.other.attribute-name#9db8c0italic
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#9e9690
punctuation.terminator.statement, punctuation.separator.comma, punctuation.terminator.rule#6b6560
punctuation.accessor#9e9690
source.css entity.other.attribute-name.class, source.scss entity.other.attribute-name.class#b8956a
source.css entity.other.attribute-name.id, source.scss entity.other.attribute-name.id#c8a96e
support.type.property-name.css, meta.property-list.css, meta.property-list.scss#9db8c0
meta.property-value.css, support.constant.property-value.css#c8a96e
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#7da87bitalic
meta.object-literal.key#9db8c0
source.json meta.structure.dictionary.json support.type.property-name.json#9db8c0
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c8a96e
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#b8956a
*url*, *link*, *uri*#9db8c0underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#c47b5aitalic
markup.heading, entity.name.section#c8a96ebold
markup.italic#c4b598italic
markup.bold#d4c5a9bold
markup.underline#9db8c0underline
markup.strike#6b6560strikethrough
markup.quote#9e9690italic
markup.raw.block, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#a0c4a0
markup.deleted, punctuation.definition.deleted#eb5e28
markup.inserted, punctuation.definition.inserted#7da87b
markup.changed, punctuation.definition.changed#c8a96e
entity.other.inherited-class#b8956a
invalid, invalid.illegal#f14c4c
token.info-token#9db8c0
token.warn-token#cca700
token.error-token#f14c4c
token.debug-token#6b6560