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#2E0F0F70
  • activityBar.activeBorder#DF7270
  • activityBar.background#170D0C
  • activityBar.foreground#EAC8C8
  • activityBar.inactiveForeground#6B6868
  • activityBarBadge.background#CA8281
  • activityBarBadge.foreground#250909
  • activityBarTop.foreground#EAC8C8
  • badge.background#CA8281
  • badge.foreground#250909
  • breadcrumb.activeForeground#EAC8C8
  • breadcrumb.activeSelectionForeground#EAC8C8
  • breadcrumb.background#170D0C
  • breadcrumb.focusForeground#EAC8C8
  • breadcrumb.foreground#6B6868
  • breadcrumbPicker.background#170D0C
  • button.background#CA8281db
  • button.foreground#250909
  • button.hoverBackground#CA8281
  • button.secondaryBackground#DF7270db
  • button.secondaryForeground#250909
  • button.secondaryHoverBackground#DF7270
  • checkbox.background#251818
  • checkbox.foreground#EAC8C8
  • debugToolBar.background#78A6D4
  • debugToolBar.foreground#250909
  • descriptionForeground#E4BAB9
  • diffEditor.diagonalFill#78A6D4
  • diffEditor.insertedLineBackground#78A6D440
  • diffEditor.insertedTextBackground#78A6D450
  • diffEditor.insertedTextBorder#78A6D4
  • diffEditor.removedLineBackground#BA919140
  • diffEditor.removedTextBackground#BA919150
  • diffEditor.removedTextBorder#BA9191
  • diffEditorGutter.insertedLineBackground#78A6D4
  • diffEditorGutter.removedLineBackground#BA9191
  • disabledForeground#6B6868
  • dropdown.background#2E1515
  • dropdown.border#3B1C1C
  • dropdown.foreground#EAC8C8
  • editor.background#251818
  • editor.findMatchBackground#6C1F1D70
  • editor.findMatchForeground#EAC8C8
  • editor.findMatchHighlightBackground#2E0F0F70
  • editor.findMatchHighlightForeground#EAC8C8
  • editor.findRangeHighlightBackground#531E1E70
  • editor.foldBackground#2E0F0F70
  • editor.foldPlaceholderForeground#EAC8C8
  • editor.foreground#EAC8C8
  • editor.hoverHighlightBackground#2E0F0F70
  • editor.inactiveSelectionBackground#531E1E70
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#E4BAB9
  • editor.rangeHighlightBackground#2E0F0F70
  • editor.selectionBackground#531E1E70
  • editor.selectionForeground#EAC8C8
  • editor.selectionHighlightBackground#531E1E70
  • editor.snippetFinalTabstopHighlightBackground#2E0F0F70
  • editor.snippetTabstopHighlightBackground#2E0F0F70
  • editor.symbolHighlightBackground#2E0F0F70
  • editor.wordHighlightBackground#2E0F0F70
  • editor.wordHighlightStrongBackground#2E0F0F50
  • editor.wordHighlightTextBackground#2E0F0F70
  • editorCodeLens.foreground#6B6868
  • editorCursor.background#2E0F0F70
  • editorCursor.foreground#DF7270
  • editorError.foreground#BA9191
  • editorGroup.border#3B1C1C
  • editorGroup.dropBackground#2E1515
  • editorGroup.emptyBackground#251818
  • editorGroupHeader.border#3B1C1C
  • editorGroupHeader.tabsBackground#251818
  • editorGutter.addedBackground#29AC29
  • editorGutter.background#251818
  • editorGutter.commentRangeForeground#6B6868
  • editorGutter.deletedBackground#BA9191
  • editorGutter.modifiedBackground#78A6D4
  • editorHint.foreground#29AC29
  • editorHoverWidget.background#251818
  • editorHoverWidget.border#3B1C1C
  • editorHoverWidget.foreground#EAC8C8
  • editorHoverWidget.highlightForeground#EAC8C8
  • editorHoverWidget.statusBarBackground#251818
  • editorIndentGuide.activeBackground1#DF7270
  • editorIndentGuide.background1#2E0F0F70
  • editorInfo.foreground#78A6D4
  • editorLineNumber.activeForeground#DF7270
  • editorLineNumber.dimmedForeground#6B686890
  • editorLineNumber.foreground#6B6868
  • editorLink.activeForeground#78A6D4
  • editorMarkerNavigation.background#170D0C
  • editorMarkerNavigationError.background#170D0C
  • editorMarkerNavigationWarning.background#170D0C
  • editorMultiCursor.primary.background#2E0F0F70
  • editorMultiCursor.primary.foreground#DF7270
  • editorMultiCursor.secondary.background#2E0F0F70
  • editorMultiCursor.secondary.foreground#EAC8C8
  • editorOverviewRuler.addedForeground#29AC29
  • editorOverviewRuler.border#3B1C1C
  • editorOverviewRuler.commentForeground#6B6868
  • editorOverviewRuler.commonContentForeground#EAC8C8
  • editorOverviewRuler.currentContentForeground#78A6D4
  • editorOverviewRuler.deletedForeground#BA9191
  • editorOverviewRuler.errorForeground#BA9191
  • editorOverviewRuler.findMatchForeground#EAC8C8
  • editorOverviewRuler.incomingContentForeground#29AC29
  • editorOverviewRuler.infoForeground#78A6D4
  • editorOverviewRuler.modifiedForeground#78A6D4
  • editorOverviewRuler.rangeHighlightForeground#2E0F0F70
  • editorOverviewRuler.selectionHighlightForeground#531E1E70
  • editorOverviewRuler.warningForeground#DAA671
  • editorOverviewRuler.wordHighlightForeground#2E0F0F70
  • editorOverviewRuler.wordHighlightStrongForeground#2E0F0F70
  • editorRuler.foreground#2E0F0F70
  • editorSuggestWidget.background#251818
  • editorSuggestWidget.border#3B1C1C
  • editorSuggestWidget.focusHighlightForeground#EAC8C8
  • editorSuggestWidget.foreground#6B6868
  • editorSuggestWidget.highlightForeground#EAC8C8
  • editorSuggestWidget.selectedBackground#CA828180
  • editorSuggestWidget.selectedForeground#EAC8C8
  • editorUnicodeHighlight.background#2E0F0F70
  • editorWarning.foreground#DAA671
  • editorWhitespace.foreground#2E0F0F70
  • editorWidget.background#251818
  • editorWidget.border#3B1C1C
  • editorWidget.foreground#EAC8C8
  • errorForeground#BA9191
  • extensionButton.prominentBackground#CA8281aa
  • extensionButton.prominentForeground#250909
  • extensionButton.prominentHoverBackground#CA8281
  • focusBorder#3B1C1C
  • foreground#EAC8C8
  • gitDecoration.addedResourceForeground#29AC29
  • gitDecoration.conflictingResourceForeground#DAA671
  • gitDecoration.deletedResourceForeground#BA9191
  • gitDecoration.ignoredResourceForeground#6B6868
  • gitDecoration.modifiedResourceForeground#78A6D4
  • gitDecoration.renamedResourceForeground#DF7270
  • gitDecoration.untrackedResourceForeground#E4BAB9
  • input.background#251818
  • input.border#6B6868
  • input.foreground#EAC8C8
  • input.placeholderForeground#6B6868
  • inputOption.activeBorder#DF7270
  • inputValidation.errorBorder#BA9191
  • inputValidation.infoBorder#78A6D4
  • inputValidation.warningBorder#DAA671
  • list.activeSelectionBackground#CA828170
  • list.activeSelectionForeground#EAC8C8
  • list.dropBackground#2E1515
  • list.dropBetweenBackground#3B1C1C
  • list.errorForeground#BA9191
  • list.focusBackground#CA828150
  • list.focusForeground#EAC8C8
  • list.highlightForeground#DF7270
  • list.hoverBackground#CA828120
  • list.hoverForeground#EAC8C8
  • list.inactiveFocusBackground#170D0C
  • list.inactiveSelectionBackground#CA828160
  • list.inactiveSelectionForeground#E4BAB9
  • list.warningForeground#DAA671
  • listFilterWidget.background#2E1515
  • listFilterWidget.noMatchesOutline#BA9191
  • listFilterWidget.outline#3B1C1C
  • merge.border#3B1C1C
  • merge.currentContentBackground#78A6D420
  • merge.currentHeaderBackground#78A6D440
  • merge.incomingContentBackground#29AC2920
  • merge.incomingHeaderBackground#29AC2940
  • mergeEditor.change.background#DAA671
  • notificationLink.foreground#78A6D4
  • notifications.background#170D0C
  • notifications.border#3B1C1C
  • notifications.foreground#EAC8C8
  • notificationsErrorIcon.foreground#BA9191
  • notificationsInfoIcon.foreground#78A6D4
  • notificationsWarningIcon.foreground#DAA671
  • panel.background#170D0C
  • panel.border#DF7270
  • panelInput.border#6B6868
  • panelTitle.activeBorder#DF7270
  • panelTitle.activeForeground#EAC8C8
  • panelTitle.inactiveForeground#6B6868
  • peekView.border#CA8281
  • peekViewEditor.background#251818
  • peekViewEditor.matchHighlightBackground#6C1F1D70
  • peekViewResult.background#251818
  • peekViewResult.fileForeground#EAC8C8
  • peekViewResult.lineForeground#EAC8C8
  • peekViewResult.matchHighlightBackground#2E0F0F70
  • peekViewResult.selectionBackground#170D0C
  • peekViewResult.selectionForeground#EAC8C8
  • peekViewTitle.background#251818
  • peekViewTitleDescription.foreground#E4BAB9
  • peekViewTitleLabel.foreground#EAC8C8
  • pickerGroup.border#CA8281
  • pickerGroup.foreground#E8B0B0
  • progressBar.background#DF7270
  • selection.background#CA828150
  • settings.checkboxBackground#251818
  • settings.checkboxBorder#3B1C1C
  • settings.checkboxForeground#EAC8C8
  • settings.dropdownBackground#251818
  • settings.dropdownBorder#3B1C1C
  • settings.dropdownForeground#EAC8C8
  • settings.focusedRowBackground#2E0F0F70
  • settings.focusedRowBorder#6B6868
  • settings.headerBorder#3B1C1C
  • settings.headerForeground#EAC8C8
  • settings.inactiveSelectedItemBorder#6B6868
  • settings.modifiedItemIndicator#DAA671
  • settings.numberInputBackground#251818
  • settings.numberInputBorder#6B6868
  • settings.numberInputForeground#EAC8C8
  • settings.rowHoverBackground#2E0F0F70
  • settings.settingsHeaderHoverForeground#EAC8C8
  • settings.textInputBackground#251818
  • settings.textInputBorder#6B6868
  • settings.textInputForeground#EAC8C8
  • sideBar.background#251818
  • sideBarActivityBarTop.border#3B1C1C
  • sideBarSectionHeader.background#170D0C
  • sideBarSectionHeader.border#3B1C1C
  • sideBarStickyScroll.background#251818
  • sideBarStickyScroll.border#3B1C1C
  • sideBarStickyScroll.shadow#3B1C1C
  • sideBarTitle.background#251818
  • sideBarTitle.foreground#EAC8C8
  • statusBar.background#CA8281
  • statusBar.debuggingBackground#DAA671
  • statusBar.debuggingForeground#250909
  • statusBar.foreground#250909
  • statusBar.noFolderBackground#E4BAB9
  • statusBar.noFolderForeground#250909
  • statusBarItem.activeBackground#CA8281aa
  • statusBarItem.errorBackground#BA9191
  • statusBarItem.errorForeground#250909
  • statusBarItem.errorHoverBackground#BA9191aa
  • statusBarItem.hoverBackground#CA8281aa
  • statusBarItem.prominentBackground#CA8281aa
  • statusBarItem.prominentForeground#250909
  • statusBarItem.prominentHoverBackground#CA8281aa
  • statusBarItem.prominentHoverForeground#250909
  • statusBarItem.remoteBackground#DF7270
  • statusBarItem.remoteForeground#250909
  • statusBarItem.remoteHoverBackground#DF7270aa
  • statusBarItem.warningBackground#DAA671
  • statusBarItem.warningForeground#250909
  • statusBarItem.warningHoverBackground#DAA671aa
  • tab.activeBackground#170D0C
  • tab.activeBorderTop#DF7270
  • tab.activeForeground#EAC8C8
  • tab.border#3B1C1C
  • tab.hoverBackground#170D0C80
  • tab.hoverForeground#EAC8C8
  • tab.inactiveBackground#251818
  • tab.inactiveForeground#6B6868
  • tab.selectedBackground#2E0F0F70
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#3B83FF
  • terminal.ansiBrightBlack#474747
  • terminal.ansiBrightBlue#347EFE
  • terminal.ansiBrightCyan#90E8F9
  • terminal.ansiBrightGreen#D0F7D2
  • terminal.ansiBrightMagenta#FF2DB4
  • terminal.ansiBrightRed#FF258A
  • terminal.ansiBrightWhite#FEFEFE
  • terminal.ansiBrightYellow#FAE511
  • terminal.ansiCyan#27A4BC
  • terminal.ansiGreen#42BE48
  • terminal.ansiMagenta#FD00A0
  • terminal.ansiRed#FA1A82
  • terminal.ansiWhite#FEFEFE
  • terminal.ansiYellow#968B17
  • terminal.background#251818
  • terminal.border#3B1C1C
  • terminal.foreground#EAC8C8
  • terminal.inactiveSelectionBackground#531E1E70
  • terminal.selectionBackground#531E1E70
  • textBlockQuote.background#2E1515
  • textBlockQuote.border#3B1C1C
  • textCodeBlock.background#2E1515
  • textLink.activeForeground#78A6D4
  • textLink.foreground#CA8281
  • textPreformat.background#2E1515
  • textPreformat.foreground#EAC8C8
  • textSeparator.foreground#EAC8C8
  • titleBar.activeBackground#170D0C
  • titleBar.activeForeground#EAC8C8
  • titleBar.inactiveBackground#170D0C
  • titleBar.inactiveForeground#6B6868
  • widget.border#3B1C1C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#EAC8C8
meta.diff, meta.diff.header#6B6868
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#EDC0C0
emphasisitalic
strongbold
invalid#BA9191strikethrough
invalid.deprecated#EAC8C8underline italic
header#EDC0C0
source.ini, source.ignore, source#E4BAB9
markup.inserted#EDC0C0
markup.deleted#BA9191
markup.changed#78A6D4
markup.error#BA9191
markup.underlineunderline
markup.bold#DAA671bold
markup.heading#DF7270bold
markup.italic#E4BAB9italic
markup.inline.raw, markup.raw.restructuredtext#DF7270
markup.underline.link, markup.underline.link.image, markup.quote#78A6D4
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#CA8281
meta.separator.markdown#DF7270
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#EFC8C8
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#DAA671
entity.name.class, entity.name.type.class, entity.other.inherited-class#CA8281
entity.name.tag, entity.other.attribute-name.parent-selector#EEC4C4
entity.other.attribute-name#CA8281
entity.name.function, meta.function-call, meta.method-call, meta.method#DF7270
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#EFC8C8
support#C6E8B0
entity.name, variable.other.key#DF7270
entity.name.type#E8B0B0
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#E5B5A4
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#F2D4D4
entity.other.attribute-name.class.css#DF7270
storage.class, storage.type#CA8281
storage.modifier#EDC1BF
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6B6868
constant#EDC0C0
constant.other.color#BAE4A0
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#E8B0B0
constant.other.date, constant.other.timestamp#EDBFBF
keyword.operator#F1D0CF
keyword.other.unit#E29D9C
keyword.control, keyword.other.template, keyword.other.substitution#DD8A88
keyword.other.this#EDC0C0
keyword.control.import, keyword.control.from#E8B9B0
keyword.control.new, keyword.operator.new, keyword.other.important.css#CA8281
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#E7C2AC
meta.attribute-selector.scss#EAB9B8
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#EEC4C4
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#EDCDBF
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#CA8281
support.constant.property-value.css, constant.numeric.css#E4BAB9
keyword.control.at-rule.apply.tailwind#E8B9B0
keyword.control.at-rule.tailwind.tailwind#DD8A88
keyword.control.at-rule.layer.tailwind#E7C2AC
meta.selector#EAB9B8
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#F2DEDE
punctuation.definition.constant.restructuredtext#EDC0C0
string.quoted.docstring.multi#DF7270
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#F2DEDE
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#EDCDBF
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#FEFEFE
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#FCF9F8
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#F7EDE9
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#EDC0C0
variable#E9B4B4
variable.other.alias.yaml#E9B4B4underline
variable.language, variable.parameter.function.language.special#E8B0B0
variable.other.constant#E8BCB0
support.variable#E9B4B4
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#EDDAC0
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#DAA671
support.function, support.type.property-name#F5E3DB
storage#EBBDBC
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#968B17
punctuation.definition.group.capture.regexp#FA1A82
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#FA1A82
punctuation.definition.character-class.regexp#FAE511
punctuation.definition.group.regexp#347EFE
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#FA1A82
meta.assertion.look-ahead.regexp#347EFE
source.json meta.structure.dictionary.json support.type.property-name.json#DF7270
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#CA8281
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#78A6D4
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#DAA671
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#BA9191
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#29AC29
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#DF7270
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#CA8281
token.info-token#78A6D4
token.warn-token#DAA671
token.error-token#BA9191
token.debug-token#DAA671