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#E6E0E370
  • activityBar.activeBorder#714628
  • activityBar.background#fff6d8
  • activityBar.foreground#30212A
  • activityBar.inactiveForeground#C9B3A6
  • activityBarBadge.background#3E2818
  • activityBarBadge.foreground#30212A
  • activityBarTop.foreground#30212A
  • badge.background#3E2818
  • badge.foreground#30212A
  • breadcrumb.activeForeground#30212A
  • breadcrumb.activeSelectionForeground#30212A
  • breadcrumb.background#fff6d8
  • breadcrumb.focusForeground#30212A
  • breadcrumb.foreground#C9B3A6
  • breadcrumbPicker.background#fff6d8
  • button.background#3E2818db
  • button.foreground#30212A
  • button.hoverBackground#3E2818
  • button.secondaryBackground#714628db
  • button.secondaryForeground#30212A
  • button.secondaryHoverBackground#714628
  • checkbox.background#fffae2
  • checkbox.foreground#30212A
  • debugToolBar.background#4573A1
  • debugToolBar.foreground#30212A
  • descriptionForeground#302721
  • diffEditor.diagonalFill#4573A1
  • diffEditor.insertedLineBackground#4573A140
  • diffEditor.insertedTextBackground#4573A150
  • diffEditor.insertedTextBorder#4573A1
  • diffEditor.removedLineBackground#842E2E40
  • diffEditor.removedTextBackground#842E2E50
  • diffEditor.removedTextBorder#842E2E
  • diffEditorGutter.insertedLineBackground#4573A1
  • diffEditorGutter.removedLineBackground#842E2E
  • disabledForeground#C9B3A6
  • dropdown.background#cdc7bb
  • dropdown.border#D6D3D9
  • dropdown.foreground#30212A
  • editor.background#fffae2
  • editor.findMatchBackground#BBADCD70
  • editor.findMatchForeground#30212A
  • editor.findMatchHighlightBackground#E6E0E370
  • editor.findMatchHighlightForeground#30212A
  • editor.findRangeHighlightBackground#D2C8C170
  • editor.foldBackground#E6E0E370
  • editor.foldPlaceholderForeground#30212A
  • editor.foreground#30212A
  • editor.hoverHighlightBackground#E6E0E370
  • editor.inactiveSelectionBackground#D2C8C170
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#302721
  • editor.rangeHighlightBackground#E6E0E370
  • editor.selectionBackground#D2C8C170
  • editor.selectionForeground#30212A
  • editor.selectionHighlightBackground#D2C8C170
  • editor.snippetFinalTabstopHighlightBackground#E6E0E370
  • editor.snippetTabstopHighlightBackground#E6E0E370
  • editor.symbolHighlightBackground#E6E0E370
  • editor.wordHighlightBackground#E6E0E370
  • editor.wordHighlightStrongBackground#E6E0E350
  • editor.wordHighlightTextBackground#E6E0E370
  • editorCodeLens.foreground#C9B3A6
  • editorCursor.background#E6E0E370
  • editorCursor.foreground#714628
  • editorError.foreground#842E2E
  • editorGroup.border#D6D3D9
  • editorGroup.dropBackground#cdc7bb
  • editorGroup.emptyBackground#fffae2
  • editorGroupHeader.border#D6D3D9
  • editorGroupHeader.tabsBackground#fffae2
  • editorGutter.addedBackground#295729
  • editorGutter.background#fffae2
  • editorGutter.commentRangeForeground#C9B3A6
  • editorGutter.deletedBackground#842E2E
  • editorGutter.modifiedBackground#4573A1
  • editorHint.foreground#295729
  • editorHoverWidget.background#fffae2
  • editorHoverWidget.border#D6D3D9
  • editorHoverWidget.foreground#30212A
  • editorHoverWidget.highlightForeground#30212A
  • editorHoverWidget.statusBarBackground#fffae2
  • editorIndentGuide.activeBackground1#714628
  • editorIndentGuide.background1#E6E0E370
  • editorInfo.foreground#4573A1
  • editorLineNumber.activeForeground#714628
  • editorLineNumber.dimmedForeground#C9B3A690
  • editorLineNumber.foreground#C9B3A6
  • editorLink.activeForeground#4573A1
  • editorMarkerNavigation.background#fff6d8
  • editorMarkerNavigationError.background#fff6d8
  • editorMarkerNavigationWarning.background#fff6d8
  • editorMultiCursor.primary.background#E6E0E370
  • editorMultiCursor.primary.foreground#714628
  • editorMultiCursor.secondary.background#E6E0E370
  • editorMultiCursor.secondary.foreground#30212A
  • editorOverviewRuler.addedForeground#295729
  • editorOverviewRuler.border#D6D3D9
  • editorOverviewRuler.commentForeground#C9B3A6
  • editorOverviewRuler.commonContentForeground#30212A
  • editorOverviewRuler.currentContentForeground#4573A1
  • editorOverviewRuler.deletedForeground#842E2E
  • editorOverviewRuler.errorForeground#842E2E
  • editorOverviewRuler.findMatchForeground#30212A
  • editorOverviewRuler.incomingContentForeground#295729
  • editorOverviewRuler.infoForeground#4573A1
  • editorOverviewRuler.modifiedForeground#4573A1
  • editorOverviewRuler.rangeHighlightForeground#E6E0E370
  • editorOverviewRuler.selectionHighlightForeground#D2C8C170
  • editorOverviewRuler.warningForeground#815932
  • editorOverviewRuler.wordHighlightForeground#E6E0E370
  • editorOverviewRuler.wordHighlightStrongForeground#E6E0E370
  • editorRuler.foreground#E6E0E370
  • editorSuggestWidget.background#fffae2
  • editorSuggestWidget.border#D6D3D9
  • editorSuggestWidget.focusHighlightForeground#30212A
  • editorSuggestWidget.foreground#C9B3A6
  • editorSuggestWidget.highlightForeground#30212A
  • editorSuggestWidget.selectedBackground#3E281880
  • editorSuggestWidget.selectedForeground#30212A
  • editorUnicodeHighlight.background#E6E0E370
  • editorWarning.foreground#815932
  • editorWhitespace.foreground#E6E0E370
  • editorWidget.background#fffae2
  • editorWidget.border#D6D3D9
  • editorWidget.foreground#30212A
  • errorForeground#842E2E
  • extensionButton.prominentBackground#3E2818aa
  • extensionButton.prominentForeground#30212A
  • extensionButton.prominentHoverBackground#3E2818
  • focusBorder#D6D3D9
  • foreground#30212A
  • gitDecoration.addedResourceForeground#295729
  • gitDecoration.conflictingResourceForeground#815932
  • gitDecoration.deletedResourceForeground#842E2E
  • gitDecoration.ignoredResourceForeground#C9B3A6
  • gitDecoration.modifiedResourceForeground#4573A1
  • gitDecoration.renamedResourceForeground#714628
  • gitDecoration.untrackedResourceForeground#302721
  • input.background#fffae2
  • input.border#C9B3A6
  • input.foreground#30212A
  • input.placeholderForeground#C9B3A6
  • inputOption.activeBorder#714628
  • inputValidation.errorBorder#842E2E
  • inputValidation.infoBorder#4573A1
  • inputValidation.warningBorder#815932
  • list.activeSelectionBackground#3E281870
  • list.activeSelectionForeground#30212A
  • list.dropBackground#cdc7bb
  • list.dropBetweenBackground#D6D3D9
  • list.errorForeground#842E2E
  • list.focusBackground#3E281850
  • list.focusForeground#30212A
  • list.highlightForeground#714628
  • list.hoverBackground#3E281820
  • list.hoverForeground#30212A
  • list.inactiveFocusBackground#fff6d8
  • list.inactiveSelectionBackground#3E281860
  • list.inactiveSelectionForeground#302721
  • list.warningForeground#815932
  • listFilterWidget.background#cdc7bb
  • listFilterWidget.noMatchesOutline#842E2E
  • listFilterWidget.outline#D6D3D9
  • merge.border#D6D3D9
  • merge.currentContentBackground#4573A120
  • merge.currentHeaderBackground#4573A140
  • merge.incomingContentBackground#29572920
  • merge.incomingHeaderBackground#29572940
  • mergeEditor.change.background#815932
  • notificationLink.foreground#4573A1
  • notifications.background#fff6d8
  • notifications.border#D6D3D9
  • notifications.foreground#30212A
  • notificationsErrorIcon.foreground#842E2E
  • notificationsInfoIcon.foreground#4573A1
  • notificationsWarningIcon.foreground#815932
  • panel.background#fff6d8
  • panel.border#714628
  • panelInput.border#C9B3A6
  • panelTitle.activeBorder#714628
  • panelTitle.activeForeground#30212A
  • panelTitle.inactiveForeground#C9B3A6
  • peekView.border#3E2818
  • peekViewEditor.background#fffae2
  • peekViewEditor.matchHighlightBackground#BBADCD70
  • peekViewResult.background#fffae2
  • peekViewResult.fileForeground#30212A
  • peekViewResult.lineForeground#30212A
  • peekViewResult.matchHighlightBackground#E6E0E370
  • peekViewResult.selectionBackground#fff6d8
  • peekViewResult.selectionForeground#30212A
  • peekViewTitle.background#fffae2
  • peekViewTitleDescription.foreground#302721
  • peekViewTitleLabel.foreground#30212A
  • pickerGroup.border#3E2818
  • pickerGroup.foreground#3F1F66
  • progressBar.background#714628
  • selection.background#3E281850
  • settings.checkboxBackground#fffae2
  • settings.checkboxBorder#D6D3D9
  • settings.checkboxForeground#30212A
  • settings.dropdownBackground#fffae2
  • settings.dropdownBorder#D6D3D9
  • settings.dropdownForeground#30212A
  • settings.focusedRowBackground#E6E0E370
  • settings.focusedRowBorder#C9B3A6
  • settings.headerBorder#D6D3D9
  • settings.headerForeground#30212A
  • settings.inactiveSelectedItemBorder#C9B3A6
  • settings.modifiedItemIndicator#815932
  • settings.numberInputBackground#fffae2
  • settings.numberInputBorder#C9B3A6
  • settings.numberInputForeground#30212A
  • settings.rowHoverBackground#E6E0E370
  • settings.settingsHeaderHoverForeground#30212A
  • settings.textInputBackground#fffae2
  • settings.textInputBorder#C9B3A6
  • settings.textInputForeground#30212A
  • sideBar.background#fffae2
  • sideBarActivityBarTop.border#D6D3D9
  • sideBarSectionHeader.background#fff6d8
  • sideBarSectionHeader.border#D6D3D9
  • sideBarStickyScroll.background#fffae2
  • sideBarStickyScroll.border#D6D3D9
  • sideBarStickyScroll.shadow#D6D3D9
  • sideBarTitle.background#fffae2
  • sideBarTitle.foreground#30212A
  • statusBar.background#3E2818
  • statusBar.debuggingBackground#815932
  • statusBar.debuggingForeground#30212A
  • statusBar.foreground#30212A
  • statusBar.noFolderBackground#302721
  • statusBar.noFolderForeground#E5E5E6
  • statusBarItem.activeBackground#3E2818aa
  • statusBarItem.errorBackground#842E2E
  • statusBarItem.errorForeground#30212A
  • statusBarItem.errorHoverBackground#842E2Eaa
  • statusBarItem.hoverBackground#3E2818aa
  • statusBarItem.prominentBackground#3E2818aa
  • statusBarItem.prominentForeground#E5E5E6
  • statusBarItem.prominentHoverBackground#3E2818aa
  • statusBarItem.prominentHoverForeground#E5E5E6
  • statusBarItem.remoteBackground#714628
  • statusBarItem.remoteForeground#30212A
  • statusBarItem.remoteHoverBackground#714628aa
  • statusBarItem.warningBackground#815932
  • statusBarItem.warningForeground#30212A
  • statusBarItem.warningHoverBackground#815932aa
  • tab.activeBackground#fff6d8
  • tab.activeBorderTop#714628
  • tab.activeForeground#30212A
  • tab.border#D6D3D9
  • tab.hoverBackground#fff6d880
  • tab.hoverForeground#30212A
  • tab.inactiveBackground#fffae2
  • tab.inactiveForeground#C9B3A6
  • tab.selectedBackground#E6E0E370
  • 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#D6D3D9
  • terminal.foreground#30212A
  • terminal.inactiveSelectionBackground#D2C8C170
  • terminal.selectionBackground#D2C8C170
  • textBlockQuote.background#cdc7bb
  • textBlockQuote.border#D6D3D9
  • textCodeBlock.background#cdc7bb
  • textLink.activeForeground#4573A1
  • textLink.foreground#3E2818
  • textPreformat.background#cdc7bb
  • textPreformat.foreground#30212A
  • textSeparator.foreground#30212A
  • titleBar.activeBackground#fff6d8
  • titleBar.activeForeground#30212A
  • titleBar.inactiveBackground#fff6d8
  • titleBar.inactiveForeground#C9B3A6
  • widget.border#D6D3D9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#30212A
meta.diff, meta.diff.header#C9B3A6
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#3F1C63
emphasisitalic
strongbold
invalid#842E2Estrikethrough
invalid.deprecated#30212Aunderline italic
header#3F1C63
source.ini, source.ignore, source#302721
markup.inserted#3F1C63
markup.deleted#842E2E
markup.changed#4573A1
markup.error#842E2E
markup.underlineunderline
markup.bold#815932bold
markup.heading#714628bold
markup.italic#302721italic
markup.inline.raw, markup.raw.restructuredtext#714628
markup.underline.link, markup.underline.link.image, markup.quote#4573A1
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#3E2818
meta.separator.markdown#714628
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#3E1F61
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#815932
entity.name.class, entity.name.type.class, entity.other.inherited-class#3E2818
entity.name.tag, entity.other.attribute-name.parent-selector#4A2376
entity.other.attribute-name#3E2818
entity.name.function, meta.function-call, meta.method-call, meta.method#714628
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#67284A
support#5F1B42
entity.name, variable.other.key#714628
entity.name.type#492574
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#401A4C
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#432565
entity.other.attribute-name.class.css#714628
storage.class, storage.type#3E2818
storage.modifier#6A4224
comment, punctuation.definition.comment, unused.comment, wildcard.comment#C9B3A6
constant#3F1C63
constant.other.color#3B1C5E
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#441230
constant.other.date, constant.other.timestamp#69214A
keyword.operator#634531
keyword.other.unit#621D45
keyword.control, keyword.other.template, keyword.other.substitution#311650
keyword.other.this#3F1C63
keyword.control.import, keyword.control.from#351646
keyword.control.new, keyword.operator.new, keyword.other.important.css#3E2818
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#4B1952
meta.attribute-selector.scss#653D20
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#4A2376
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#562366
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#3E2818
support.constant.property-value.css, constant.numeric.css#302721
keyword.control.at-rule.apply.tailwind#351646
keyword.control.at-rule.tailwind.tailwind#311650
keyword.control.at-rule.layer.tailwind#4B1952
meta.selector#653D20
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#544464
punctuation.definition.constant.restructuredtext#3F1C63
string.quoted.docstring.multi#714628
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#544464
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#562366
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#634A6E
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#745180
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#4D3C5D
punctuation.definition.directive.restructuredtext#3F1C63
variable#602545
variable.other.alias.yaml#602545underline
variable.language, variable.parameter.function.language.special#441230
variable.other.constant#7F2E4A
support.variable#602545
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#5A2A25
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#815932
support.function, support.type.property-name#752E85
storage#693E21
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#714628
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#3E2818
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#4573A1
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#815932
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#842E2E
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#295729
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#714628
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#3E2818
token.info-token#4573A1
token.warn-token#815932
token.error-token#842E2E
token.debug-token#815932