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#0D0D0C70
  • activityBar.activeBorder#C7746B
  • activityBar.background#0E0C0C
  • activityBar.foreground#D0BFB4
  • activityBar.inactiveForeground#655E5E
  • activityBarBadge.background#CA8881
  • activityBarBadge.foreground#0D0808
  • activityBarTop.foreground#D0BFB4
  • badge.background#CA8881
  • badge.foreground#0D0808
  • breadcrumb.activeForeground#D0BFB4
  • breadcrumb.activeSelectionForeground#D0BFB4
  • breadcrumb.background#0E0C0C
  • breadcrumb.focusForeground#D0BFB4
  • breadcrumb.foreground#655E5E
  • breadcrumbPicker.background#0E0C0C
  • button.background#CA8881db
  • button.foreground#0D0808
  • button.hoverBackground#CA8881
  • button.secondaryBackground#C7746Bdb
  • button.secondaryForeground#0D0808
  • button.secondaryHoverBackground#C7746B
  • checkbox.background#060404
  • checkbox.foreground#D0BFB4
  • debugToolBar.background#89A6C2
  • debugToolBar.foreground#0D0808
  • descriptionForeground#B0BFAB
  • diffEditor.diagonalFill#89A6C2
  • diffEditor.insertedLineBackground#89A6C240
  • diffEditor.insertedTextBackground#89A6C250
  • diffEditor.insertedTextBorder#89A6C2
  • diffEditor.removedLineBackground#D6757540
  • diffEditor.removedTextBackground#D6757550
  • diffEditor.removedTextBorder#D67575
  • diffEditorGutter.insertedLineBackground#89A6C2
  • diffEditorGutter.removedLineBackground#D67575
  • disabledForeground#655E5E
  • dropdown.background#1D1711
  • dropdown.border#1E1515
  • dropdown.foreground#D0BFB4
  • editor.background#060404
  • editor.findMatchBackground#2F3A2C70
  • editor.findMatchForeground#D0BFB4
  • editor.findMatchHighlightBackground#0D0D0C70
  • editor.findMatchHighlightForeground#D0BFB4
  • editor.findRangeHighlightBackground#2F211E70
  • editor.foldBackground#0D0D0C70
  • editor.foldPlaceholderForeground#D0BFB4
  • editor.foreground#D0BFB4
  • editor.hoverHighlightBackground#0D0D0C70
  • editor.inactiveSelectionBackground#2F211E70
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#B0BFAB
  • editor.rangeHighlightBackground#0D0D0C70
  • editor.selectionBackground#2F211E70
  • editor.selectionForeground#D0BFB4
  • editor.selectionHighlightBackground#2F211E70
  • editor.snippetFinalTabstopHighlightBackground#0D0D0C70
  • editor.snippetTabstopHighlightBackground#0D0D0C70
  • editor.symbolHighlightBackground#0D0D0C70
  • editor.wordHighlightBackground#0D0D0C70
  • editor.wordHighlightStrongBackground#0D0D0C50
  • editor.wordHighlightTextBackground#0D0D0C70
  • editorCodeLens.foreground#655E5E
  • editorCursor.background#0D0D0C70
  • editorCursor.foreground#C7746B
  • editorError.foreground#D67575
  • editorGroup.border#1E1515
  • editorGroup.dropBackground#1D1711
  • editorGroup.emptyBackground#060404
  • editorGroupHeader.border#1E1515
  • editorGroupHeader.tabsBackground#060404
  • editorGutter.addedBackground#3C903C
  • editorGutter.background#060404
  • editorGutter.commentRangeForeground#655E5E
  • editorGutter.deletedBackground#D67575
  • editorGutter.modifiedBackground#89A6C2
  • editorHint.foreground#3C903C
  • editorHoverWidget.background#060404
  • editorHoverWidget.border#1E1515
  • editorHoverWidget.foreground#D0BFB4
  • editorHoverWidget.highlightForeground#D0BFB4
  • editorHoverWidget.statusBarBackground#060404
  • editorIndentGuide.activeBackground1#C7746B
  • editorIndentGuide.background1#0D0D0C70
  • editorInfo.foreground#89A6C2
  • editorLineNumber.activeForeground#C7746B
  • editorLineNumber.dimmedForeground#655E5E90
  • editorLineNumber.foreground#655E5E
  • editorLink.activeForeground#89A6C2
  • editorMarkerNavigation.background#0E0C0C
  • editorMarkerNavigationError.background#0E0C0C
  • editorMarkerNavigationWarning.background#0E0C0C
  • editorMultiCursor.primary.background#0D0D0C70
  • editorMultiCursor.primary.foreground#C7746B
  • editorMultiCursor.secondary.background#0D0D0C70
  • editorMultiCursor.secondary.foreground#D0BFB4
  • editorOverviewRuler.addedForeground#3C903C
  • editorOverviewRuler.border#1E1515
  • editorOverviewRuler.commentForeground#655E5E
  • editorOverviewRuler.commonContentForeground#D0BFB4
  • editorOverviewRuler.currentContentForeground#89A6C2
  • editorOverviewRuler.deletedForeground#D67575
  • editorOverviewRuler.errorForeground#D67575
  • editorOverviewRuler.findMatchForeground#D0BFB4
  • editorOverviewRuler.incomingContentForeground#3C903C
  • editorOverviewRuler.infoForeground#89A6C2
  • editorOverviewRuler.modifiedForeground#89A6C2
  • editorOverviewRuler.rangeHighlightForeground#0D0D0C70
  • editorOverviewRuler.selectionHighlightForeground#2F211E70
  • editorOverviewRuler.warningForeground#DBA671
  • editorOverviewRuler.wordHighlightForeground#0D0D0C70
  • editorOverviewRuler.wordHighlightStrongForeground#0D0D0C70
  • editorRuler.foreground#0D0D0C70
  • editorSuggestWidget.background#060404
  • editorSuggestWidget.border#1E1515
  • editorSuggestWidget.focusHighlightForeground#D0BFB4
  • editorSuggestWidget.foreground#655E5E
  • editorSuggestWidget.highlightForeground#D0BFB4
  • editorSuggestWidget.selectedBackground#CA888180
  • editorSuggestWidget.selectedForeground#D0BFB4
  • editorUnicodeHighlight.background#0D0D0C70
  • editorWarning.foreground#DBA671
  • editorWhitespace.foreground#0D0D0C70
  • editorWidget.background#060404
  • editorWidget.border#1E1515
  • editorWidget.foreground#D0BFB4
  • errorForeground#D67575
  • extensionButton.prominentBackground#CA8881aa
  • extensionButton.prominentForeground#0D0808
  • extensionButton.prominentHoverBackground#CA8881
  • focusBorder#1E1515
  • foreground#D0BFB4
  • gitDecoration.addedResourceForeground#3C903C
  • gitDecoration.conflictingResourceForeground#DBA671
  • gitDecoration.deletedResourceForeground#D67575
  • gitDecoration.ignoredResourceForeground#655E5E
  • gitDecoration.modifiedResourceForeground#89A6C2
  • gitDecoration.renamedResourceForeground#C7746B
  • gitDecoration.untrackedResourceForeground#B0BFAB
  • input.background#060404
  • input.border#655E5E
  • input.foreground#D0BFB4
  • input.placeholderForeground#655E5E
  • inputOption.activeBorder#C7746B
  • inputValidation.errorBorder#D67575
  • inputValidation.infoBorder#89A6C2
  • inputValidation.warningBorder#DBA671
  • list.activeSelectionBackground#CA888170
  • list.activeSelectionForeground#D0BFB4
  • list.dropBackground#1D1711
  • list.dropBetweenBackground#1E1515
  • list.errorForeground#D67575
  • list.focusBackground#CA888150
  • list.focusForeground#D0BFB4
  • list.highlightForeground#C7746B
  • list.hoverBackground#CA888120
  • list.hoverForeground#D0BFB4
  • list.inactiveFocusBackground#0E0C0C
  • list.inactiveSelectionBackground#CA888160
  • list.inactiveSelectionForeground#B0BFAB
  • list.warningForeground#DBA671
  • listFilterWidget.background#1D1711
  • listFilterWidget.noMatchesOutline#D67575
  • listFilterWidget.outline#1E1515
  • merge.border#1E1515
  • merge.currentContentBackground#89A6C220
  • merge.currentHeaderBackground#89A6C240
  • merge.incomingContentBackground#3C903C20
  • merge.incomingHeaderBackground#3C903C40
  • mergeEditor.change.background#DBA671
  • notificationLink.foreground#89A6C2
  • notifications.background#0E0C0C
  • notifications.border#1E1515
  • notifications.foreground#D0BFB4
  • notificationsErrorIcon.foreground#D67575
  • notificationsInfoIcon.foreground#89A6C2
  • notificationsWarningIcon.foreground#DBA671
  • panel.background#0E0C0C
  • panel.border#C7746B
  • panelInput.border#655E5E
  • panelTitle.activeBorder#C7746B
  • panelTitle.activeForeground#D0BFB4
  • panelTitle.inactiveForeground#655E5E
  • peekView.border#CA8881
  • peekViewEditor.background#060404
  • peekViewEditor.matchHighlightBackground#2F3A2C70
  • peekViewResult.background#060404
  • peekViewResult.fileForeground#D0BFB4
  • peekViewResult.lineForeground#D0BFB4
  • peekViewResult.matchHighlightBackground#0D0D0C70
  • peekViewResult.selectionBackground#0E0C0C
  • peekViewResult.selectionForeground#D0BFB4
  • peekViewTitle.background#060404
  • peekViewTitleDescription.foreground#B0BFAB
  • peekViewTitleLabel.foreground#D0BFB4
  • pickerGroup.border#CA8881
  • pickerGroup.foreground#FFB9A8
  • progressBar.background#C7746B
  • selection.background#CA888150
  • settings.checkboxBackground#060404
  • settings.checkboxBorder#1E1515
  • settings.checkboxForeground#D0BFB4
  • settings.dropdownBackground#060404
  • settings.dropdownBorder#1E1515
  • settings.dropdownForeground#D0BFB4
  • settings.focusedRowBackground#0D0D0C70
  • settings.focusedRowBorder#655E5E
  • settings.headerBorder#1E1515
  • settings.headerForeground#D0BFB4
  • settings.inactiveSelectedItemBorder#655E5E
  • settings.modifiedItemIndicator#DBA671
  • settings.numberInputBackground#060404
  • settings.numberInputBorder#655E5E
  • settings.numberInputForeground#D0BFB4
  • settings.rowHoverBackground#0D0D0C70
  • settings.settingsHeaderHoverForeground#D0BFB4
  • settings.textInputBackground#060404
  • settings.textInputBorder#655E5E
  • settings.textInputForeground#D0BFB4
  • sideBar.background#060404
  • sideBarActivityBarTop.border#1E1515
  • sideBarSectionHeader.background#0E0C0C
  • sideBarSectionHeader.border#1E1515
  • sideBarStickyScroll.background#060404
  • sideBarStickyScroll.border#1E1515
  • sideBarStickyScroll.shadow#1E1515
  • sideBarTitle.background#060404
  • sideBarTitle.foreground#D0BFB4
  • statusBar.background#CA8881
  • statusBar.debuggingBackground#DBA671
  • statusBar.debuggingForeground#0D0808
  • statusBar.foreground#0D0808
  • statusBar.noFolderBackground#B0BFAB
  • statusBar.noFolderForeground#0D0808
  • statusBarItem.activeBackground#CA8881aa
  • statusBarItem.errorBackground#D67575
  • statusBarItem.errorForeground#0D0808
  • statusBarItem.errorHoverBackground#D67575aa
  • statusBarItem.hoverBackground#CA8881aa
  • statusBarItem.prominentBackground#CA8881aa
  • statusBarItem.prominentForeground#0D0808
  • statusBarItem.prominentHoverBackground#CA8881aa
  • statusBarItem.prominentHoverForeground#0D0808
  • statusBarItem.remoteBackground#C7746B
  • statusBarItem.remoteForeground#0D0808
  • statusBarItem.remoteHoverBackground#C7746Baa
  • statusBarItem.warningBackground#DBA671
  • statusBarItem.warningForeground#0D0808
  • statusBarItem.warningHoverBackground#DBA671aa
  • tab.activeBackground#0E0C0C
  • tab.activeBorderTop#C7746B
  • tab.activeForeground#D0BFB4
  • tab.border#1E1515
  • tab.hoverBackground#0E0C0C80
  • tab.hoverForeground#D0BFB4
  • tab.inactiveBackground#060404
  • tab.inactiveForeground#655E5E
  • tab.selectedBackground#0D0D0C70
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#9D49F4
  • terminal.ansiBrightBlack#424242
  • terminal.ansiBrightBlue#DEBEFF
  • terminal.ansiBrightCyan#27EFFA
  • terminal.ansiBrightGreen#94F63C
  • terminal.ansiBrightMagenta#F42ED9
  • terminal.ansiBrightRed#F5C3AB
  • terminal.ansiBrightWhite#F9F9F8
  • terminal.ansiBrightYellow#DDFF44
  • terminal.ansiCyan#17868C
  • terminal.ansiGreen#4D8819
  • terminal.ansiMagenta#D900BB
  • terminal.ansiRed#B8633A
  • terminal.ansiWhite#FCFCFB
  • terminal.ansiYellow#6B800B
  • terminal.background#060404
  • terminal.border#1E1515
  • terminal.foreground#D0BFB4
  • terminal.inactiveSelectionBackground#2F211E70
  • terminal.selectionBackground#2F211E70
  • textBlockQuote.background#1D1711
  • textBlockQuote.border#1E1515
  • textCodeBlock.background#1D1711
  • textLink.activeForeground#89A6C2
  • textLink.foreground#CA8881
  • textPreformat.background#1D1711
  • textPreformat.foreground#D0BFB4
  • textSeparator.foreground#D0BFB4
  • titleBar.activeBackground#0E0C0C
  • titleBar.activeForeground#D0BFB4
  • titleBar.inactiveBackground#0E0C0C
  • titleBar.inactiveForeground#655E5E
  • widget.border#1E1515

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#D0BFB4
meta.diff, meta.diff.header#655E5E
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#FFD4A8
emphasisitalic
strongbold
invalid#D67575strikethrough
invalid.deprecated#D0BFB4underline italic
header#FFD4A8
source.ini, source.ignore, source#B0BFAB
markup.inserted#FFD4A8
markup.deleted#D67575
markup.changed#89A6C2
markup.error#D67575
markup.underlineunderline
markup.bold#DBA671bold
markup.heading#C7746Bbold
markup.italic#B0BFABitalic
markup.inline.raw, markup.raw.restructuredtext#C7746B
markup.underline.link, markup.underline.link.image, markup.quote#89A6C2
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#CA8881
meta.separator.markdown#C7746B
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#FFDBB8
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#DBA671
entity.name.class, entity.name.type.class, entity.other.inherited-class#CA8881
entity.name.tag, entity.other.attribute-name.parent-selector#FFCFBD
entity.other.attribute-name#CA8881
entity.name.function, meta.function-call, meta.method-call, meta.method#C7746B
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#F9C3BD
support#FFBD7B
entity.name, variable.other.key#C7746B
entity.name.type#FECCA9
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FCE597
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#FBD4B1
entity.other.attribute-name.class.css#C7746B
storage.class, storage.type#CA8881
storage.modifier#FDCBAF
comment, punctuation.definition.comment, unused.comment, wildcard.comment#655E5E
constant#FFD4A8
constant.other.color#FF927A
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#FF9889
constant.other.date, constant.other.timestamp#FEABA4
keyword.operator#F5D5D1
keyword.other.unit#FFC78F
keyword.control, keyword.other.template, keyword.other.substitution#FFA599
keyword.other.this#FFD4A8
keyword.control.import, keyword.control.from#FEA776
keyword.control.new, keyword.operator.new, keyword.other.important.css#CA8881
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#FFB97F
meta.attribute-selector.scss#FECC9A
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#FFCFBD
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#FDD7B5
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#CA8881
support.constant.property-value.css, constant.numeric.css#B0BFAB
keyword.control.at-rule.apply.tailwind#FEA776
keyword.control.at-rule.tailwind.tailwind#FFA599
keyword.control.at-rule.layer.tailwind#FFB97F
meta.selector#FECC9A
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#E7D7CB
punctuation.definition.constant.restructuredtext#FFD4A8
string.quoted.docstring.multi#C7746B
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#E7D7CB
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#FDD7B5
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#FCFCFB
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#F9F5F1
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#ECDDD0
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#FFFFFF
punctuation.definition.directive.restructuredtext#FFD4A8
variable#F8B0A5
variable.other.alias.yaml#F8B0A5underline
variable.language, variable.parameter.function.language.special#FF9889
variable.other.constant#FAD0A9
support.variable#F8B0A5
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#F6E5AC
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#DBA671
support.function, support.type.property-name#FEFAD2
storage#C4FFB3
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#6B800B
punctuation.definition.group.capture.regexp#B8633A
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#B8633A
punctuation.definition.character-class.regexp#DDFF44
punctuation.definition.group.regexp#DEBEFF
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#B8633A
meta.assertion.look-ahead.regexp#DEBEFF
source.json meta.structure.dictionary.json support.type.property-name.json#C7746B
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#CA8881
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#89A6C2
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#DBA671
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#D67575
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#3C903C
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#C7746B
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#CA8881
token.info-token#89A6C2
token.warn-token#DBA671
token.error-token#D67575
token.debug-token#DBA671