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#E0DBD770
  • activityBar.activeBorder#785026
  • activityBar.background#fff6d8
  • activityBar.foreground#060404
  • activityBar.inactiveForeground#C0AB96
  • activityBarBadge.background#6D2727
  • activityBarBadge.foreground#060404
  • activityBarTop.foreground#060404
  • badge.background#6D2727
  • badge.foreground#060404
  • breadcrumb.activeForeground#060404
  • breadcrumb.activeSelectionForeground#060404
  • breadcrumb.background#fff6d8
  • breadcrumb.focusForeground#060404
  • breadcrumb.foreground#C0AB96
  • breadcrumbPicker.background#fff6d8
  • button.background#6D2727db
  • button.foreground#060404
  • button.hoverBackground#6D2727
  • button.secondaryBackground#785026db
  • button.secondaryForeground#060404
  • button.secondaryHoverBackground#785026
  • checkbox.background#fffae2
  • checkbox.foreground#060404
  • debugToolBar.background#4173A4
  • debugToolBar.foreground#060404
  • descriptionForeground#2B241D
  • diffEditor.diagonalFill#4173A4
  • diffEditor.insertedLineBackground#4173A440
  • diffEditor.insertedTextBackground#4173A450
  • diffEditor.insertedTextBorder#4173A4
  • diffEditor.removedLineBackground#872B2B40
  • diffEditor.removedTextBackground#872B2B50
  • diffEditor.removedTextBorder#872B2B
  • diffEditorGutter.insertedLineBackground#4173A4
  • diffEditorGutter.removedLineBackground#872B2B
  • disabledForeground#C0AB96
  • dropdown.background#cdc7bb
  • dropdown.border#D3CFCA
  • dropdown.foreground#060404
  • editor.background#fffae2
  • editor.findMatchBackground#C8B6A270
  • editor.findMatchForeground#060404
  • editor.findMatchHighlightBackground#E0DBD770
  • editor.findMatchHighlightForeground#060404
  • editor.findRangeHighlightBackground#CCB7B770
  • editor.foldBackground#E0DBD770
  • editor.foldPlaceholderForeground#060404
  • editor.foreground#060404
  • editor.hoverHighlightBackground#E0DBD770
  • editor.inactiveSelectionBackground#CCB7B770
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#2B241D
  • editor.rangeHighlightBackground#E0DBD770
  • editor.selectionBackground#CCB7B770
  • editor.selectionForeground#060404
  • editor.selectionHighlightBackground#CCB7B770
  • editor.snippetFinalTabstopHighlightBackground#E0DBD770
  • editor.snippetTabstopHighlightBackground#E0DBD770
  • editor.symbolHighlightBackground#E0DBD770
  • editor.wordHighlightBackground#E0DBD770
  • editor.wordHighlightStrongBackground#E0DBD750
  • editor.wordHighlightTextBackground#E0DBD770
  • editorCodeLens.foreground#C0AB96
  • editorCursor.background#E0DBD770
  • editorCursor.foreground#785026
  • editorError.foreground#872B2B
  • editorGroup.border#D3CFCA
  • editorGroup.dropBackground#cdc7bb
  • editorGroup.emptyBackground#fffae2
  • editorGroupHeader.border#D3CFCA
  • editorGroupHeader.tabsBackground#fffae2
  • editorGutter.addedBackground#275827
  • editorGutter.background#fffae2
  • editorGutter.commentRangeForeground#C0AB96
  • editorGutter.deletedBackground#872B2B
  • editorGutter.modifiedBackground#4173A4
  • editorHint.foreground#275827
  • editorHoverWidget.background#fffae2
  • editorHoverWidget.border#D3CFCA
  • editorHoverWidget.foreground#060404
  • editorHoverWidget.highlightForeground#060404
  • editorHoverWidget.statusBarBackground#fffae2
  • editorIndentGuide.activeBackground1#785026
  • editorIndentGuide.background1#E0DBD770
  • editorInfo.foreground#4173A4
  • editorLineNumber.activeForeground#785026
  • editorLineNumber.dimmedForeground#C0AB9690
  • editorLineNumber.foreground#C0AB96
  • editorLink.activeForeground#4173A4
  • editorMarkerNavigation.background#fff6d8
  • editorMarkerNavigationError.background#fff6d8
  • editorMarkerNavigationWarning.background#fff6d8
  • editorMultiCursor.primary.background#E0DBD770
  • editorMultiCursor.primary.foreground#785026
  • editorMultiCursor.secondary.background#E0DBD770
  • editorMultiCursor.secondary.foreground#060404
  • editorOverviewRuler.addedForeground#275827
  • editorOverviewRuler.border#D3CFCA
  • editorOverviewRuler.commentForeground#C0AB96
  • editorOverviewRuler.commonContentForeground#060404
  • editorOverviewRuler.currentContentForeground#4173A4
  • editorOverviewRuler.deletedForeground#872B2B
  • editorOverviewRuler.errorForeground#872B2B
  • editorOverviewRuler.findMatchForeground#060404
  • editorOverviewRuler.incomingContentForeground#275827
  • editorOverviewRuler.infoForeground#4173A4
  • editorOverviewRuler.modifiedForeground#4173A4
  • editorOverviewRuler.rangeHighlightForeground#E0DBD770
  • editorOverviewRuler.selectionHighlightForeground#CCB7B770
  • editorOverviewRuler.warningForeground#83592F
  • editorOverviewRuler.wordHighlightForeground#E0DBD770
  • editorOverviewRuler.wordHighlightStrongForeground#E0DBD770
  • editorRuler.foreground#E0DBD770
  • editorSuggestWidget.background#fffae2
  • editorSuggestWidget.border#D3CFCA
  • editorSuggestWidget.focusHighlightForeground#060404
  • editorSuggestWidget.foreground#C0AB96
  • editorSuggestWidget.highlightForeground#060404
  • editorSuggestWidget.selectedBackground#6D272780
  • editorSuggestWidget.selectedForeground#060404
  • editorUnicodeHighlight.background#E0DBD770
  • editorWarning.foreground#83592F
  • editorWhitespace.foreground#E0DBD770
  • editorWidget.background#fffae2
  • editorWidget.border#D3CFCA
  • editorWidget.foreground#060404
  • errorForeground#872B2B
  • extensionButton.prominentBackground#6D2727aa
  • extensionButton.prominentForeground#060404
  • extensionButton.prominentHoverBackground#6D2727
  • focusBorder#D3CFCA
  • foreground#060404
  • gitDecoration.addedResourceForeground#275827
  • gitDecoration.conflictingResourceForeground#83592F
  • gitDecoration.deletedResourceForeground#872B2B
  • gitDecoration.ignoredResourceForeground#C0AB96
  • gitDecoration.modifiedResourceForeground#4173A4
  • gitDecoration.renamedResourceForeground#785026
  • gitDecoration.untrackedResourceForeground#2B241D
  • input.background#fffae2
  • input.border#C0AB96
  • input.foreground#060404
  • input.placeholderForeground#C0AB96
  • inputOption.activeBorder#785026
  • inputValidation.errorBorder#872B2B
  • inputValidation.infoBorder#4173A4
  • inputValidation.warningBorder#83592F
  • list.activeSelectionBackground#6D272770
  • list.activeSelectionForeground#060404
  • list.dropBackground#cdc7bb
  • list.dropBetweenBackground#D3CFCA
  • list.errorForeground#872B2B
  • list.focusBackground#6D272750
  • list.focusForeground#060404
  • list.highlightForeground#785026
  • list.hoverBackground#6D272720
  • list.hoverForeground#060404
  • list.inactiveFocusBackground#fff6d8
  • list.inactiveSelectionBackground#6D272760
  • list.inactiveSelectionForeground#2B241D
  • list.warningForeground#83592F
  • listFilterWidget.background#cdc7bb
  • listFilterWidget.noMatchesOutline#872B2B
  • listFilterWidget.outline#D3CFCA
  • merge.border#D3CFCA
  • merge.currentContentBackground#4173A420
  • merge.currentHeaderBackground#4173A440
  • merge.incomingContentBackground#27582720
  • merge.incomingHeaderBackground#27582740
  • mergeEditor.change.background#83592F
  • notificationLink.foreground#4173A4
  • notifications.background#fff6d8
  • notifications.border#D3CFCA
  • notifications.foreground#060404
  • notificationsErrorIcon.foreground#872B2B
  • notificationsInfoIcon.foreground#4173A4
  • notificationsWarningIcon.foreground#83592F
  • panel.background#fff6d8
  • panel.border#785026
  • panelInput.border#C0AB96
  • panelTitle.activeBorder#785026
  • panelTitle.activeForeground#060404
  • panelTitle.inactiveForeground#C0AB96
  • peekView.border#6D2727
  • peekViewEditor.background#fffae2
  • peekViewEditor.matchHighlightBackground#C8B6A270
  • peekViewResult.background#fffae2
  • peekViewResult.fileForeground#060404
  • peekViewResult.lineForeground#060404
  • peekViewResult.matchHighlightBackground#E0DBD770
  • peekViewResult.selectionBackground#fff6d8
  • peekViewResult.selectionForeground#060404
  • peekViewTitle.background#fffae2
  • peekViewTitleDescription.foreground#2B241D
  • peekViewTitleLabel.foreground#060404
  • pickerGroup.border#6D2727
  • pickerGroup.foreground#641C1B
  • progressBar.background#785026
  • selection.background#6D272750
  • settings.checkboxBackground#fffae2
  • settings.checkboxBorder#D3CFCA
  • settings.checkboxForeground#060404
  • settings.dropdownBackground#fffae2
  • settings.dropdownBorder#D3CFCA
  • settings.dropdownForeground#060404
  • settings.focusedRowBackground#E0DBD770
  • settings.focusedRowBorder#C0AB96
  • settings.headerBorder#D3CFCA
  • settings.headerForeground#060404
  • settings.inactiveSelectedItemBorder#C0AB96
  • settings.modifiedItemIndicator#83592F
  • settings.numberInputBackground#fffae2
  • settings.numberInputBorder#C0AB96
  • settings.numberInputForeground#060404
  • settings.rowHoverBackground#E0DBD770
  • settings.settingsHeaderHoverForeground#060404
  • settings.textInputBackground#fffae2
  • settings.textInputBorder#C0AB96
  • settings.textInputForeground#060404
  • sideBar.background#fffae2
  • sideBarActivityBarTop.border#D3CFCA
  • sideBarSectionHeader.background#fff6d8
  • sideBarSectionHeader.border#D3CFCA
  • sideBarStickyScroll.background#fffae2
  • sideBarStickyScroll.border#D3CFCA
  • sideBarStickyScroll.shadow#D3CFCA
  • sideBarTitle.background#fffae2
  • sideBarTitle.foreground#060404
  • statusBar.background#6D2727
  • statusBar.debuggingBackground#83592F
  • statusBar.debuggingForeground#060404
  • statusBar.foreground#060404
  • statusBar.noFolderBackground#2B241D
  • statusBar.noFolderForeground#E1E0E0
  • statusBarItem.activeBackground#6D2727aa
  • statusBarItem.errorBackground#872B2B
  • statusBarItem.errorForeground#060404
  • statusBarItem.errorHoverBackground#872B2Baa
  • statusBarItem.hoverBackground#6D2727aa
  • statusBarItem.prominentBackground#6D2727aa
  • statusBarItem.prominentForeground#E1E0E0
  • statusBarItem.prominentHoverBackground#6D2727aa
  • statusBarItem.prominentHoverForeground#E1E0E0
  • statusBarItem.remoteBackground#785026
  • statusBarItem.remoteForeground#060404
  • statusBarItem.remoteHoverBackground#785026aa
  • statusBarItem.warningBackground#83592F
  • statusBarItem.warningForeground#060404
  • statusBarItem.warningHoverBackground#83592Faa
  • tab.activeBackground#fff6d8
  • tab.activeBorderTop#785026
  • tab.activeForeground#060404
  • tab.border#D3CFCA
  • tab.hoverBackground#fff6d880
  • tab.hoverForeground#060404
  • tab.inactiveBackground#fffae2
  • tab.inactiveForeground#C0AB96
  • tab.selectedBackground#E0DBD770
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#3E2473
  • terminal.ansiBrightBlack#444444
  • terminal.ansiBrightBlue#5A13EC
  • terminal.ansiBrightCyan#00A06C
  • terminal.ansiBrightGreen#4BA100
  • terminal.ansiBrightMagenta#C273FF
  • terminal.ansiBrightRed#FF564F
  • terminal.ansiBrightWhite#868600
  • terminal.ansiBrightYellow#7D8600
  • terminal.ansiCyan#107E5B
  • terminal.ansiGreen#4CA000
  • terminal.ansiMagenta#7C10D5
  • terminal.ansiRed#FF625B
  • terminal.ansiWhite#DB6B00
  • terminal.ansiYellow#6C7220
  • terminal.background#fffae2
  • terminal.border#D3CFCA
  • terminal.foreground#060404
  • terminal.inactiveSelectionBackground#CCB7B770
  • terminal.selectionBackground#CCB7B770
  • textBlockQuote.background#cdc7bb
  • textBlockQuote.border#D3CFCA
  • textCodeBlock.background#cdc7bb
  • textLink.activeForeground#4173A4
  • textLink.foreground#6D2727
  • textPreformat.background#cdc7bb
  • textPreformat.foreground#060404
  • textSeparator.foreground#060404
  • titleBar.activeBackground#fff6d8
  • titleBar.activeForeground#060404
  • titleBar.inactiveBackground#fff6d8
  • titleBar.inactiveForeground#C0AB96
  • widget.border#D3CFCA

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#060404
meta.diff, meta.diff.header#C0AB96
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#721E1D
emphasisitalic
strongbold
invalid#872B2Bstrikethrough
invalid.deprecated#060404underline italic
header#721E1D
source.ini, source.ignore, source#2B241D
markup.inserted#721E1D
markup.deleted#872B2B
markup.changed#4173A4
markup.error#872B2B
markup.underlineunderline
markup.bold#83592Fbold
markup.heading#785026bold
markup.italic#2B241Ditalic
markup.inline.raw, markup.raw.restructuredtext#785026
markup.underline.link, markup.underline.link.image, markup.quote#4173A4
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#6D2727
meta.separator.markdown#785026
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#6A201F
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#83592F
entity.name.class, entity.name.type.class, entity.other.inherited-class#6D2727
entity.name.tag, entity.other.attribute-name.parent-selector#701F1F
entity.other.attribute-name#6D2727
entity.name.function, meta.function-call, meta.method-call, meta.method#785026
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#5E2322
support#5E1918
entity.name, variable.other.key#785026
entity.name.type#762323
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#5D371D
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#5F2120
entity.other.attribute-name.class.css#785026
storage.class, storage.type#6D2727
storage.modifier#692221
comment, punctuation.definition.comment, unused.comment, wildcard.comment#C0AB96
constant#721E1D
constant.other.color#4C1515
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#461110
constant.other.date, constant.other.timestamp#764E23
keyword.operator#6F3434
keyword.other.unit#601B1A
keyword.control, keyword.other.template, keyword.other.substitution#390F0E
keyword.other.this#721E1D
keyword.control.import, keyword.control.from#47291F
keyword.control.new, keyword.operator.new, keyword.other.important.css#6D2727
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#582D18
meta.attribute-selector.scss#7A5024
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#701F1F
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#783826
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#6D2727
support.constant.property-value.css, constant.numeric.css#2B241D
keyword.control.at-rule.apply.tailwind#47291F
keyword.control.at-rule.tailwind.tailwind#390F0E
keyword.control.at-rule.layer.tailwind#582D18
meta.selector#7A5024
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#5C4D3D
punctuation.definition.constant.restructuredtext#721E1D
string.quoted.docstring.multi#785026
punctuation.definition.keyword.css, punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css, punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#5C4D3D
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#783826
entity.other.attribute-name punctuation, meta.brace.square, meta.group.toml, meta.group.double.toml, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.separator#DB6B00
meta.brace.round, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end#A68300
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.end, punctuation.definition.variable.makefile#6B6242
punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css#6E6444
punctuation.definition.directive.restructuredtext#721E1D
variable#694926
variable.other.alias.yaml#694926underline
variable.language, variable.parameter.function.language.special#461110
variable.other.constant#6B6724
support.variable#694926
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#868A00
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#83592F
support.function, support.type.property-name#8C482C
storage#764E23
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#6C7220
punctuation.definition.group.capture.regexp#FF625B
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#FF625B
punctuation.definition.character-class.regexp#7D8600
punctuation.definition.group.regexp#5A13EC
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#FF625B
meta.assertion.look-ahead.regexp#5A13EC
source.json meta.structure.dictionary.json support.type.property-name.json#785026
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#6D2727
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#4173A4
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#83592F
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#872B2B
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#275827
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#785026
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#6D2727
token.info-token#4173A4
token.warn-token#83592F
token.error-token#872B2B
token.debug-token#83592F