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#1E0B1670
  • activityBar.activeBorder#D968A7
  • activityBar.background#17150c
  • activityBar.foreground#F7F9E7
  • activityBar.inactiveForeground#65665D
  • activityBarBadge.background#E2AD69
  • activityBarBadge.foreground#0A0805
  • activityBarTop.foreground#F7F9E7
  • badge.background#E2AD69
  • badge.foreground#0A0805
  • breadcrumb.activeForeground#F7F9E7
  • breadcrumb.activeSelectionForeground#F7F9E7
  • breadcrumb.background#17150c
  • breadcrumb.focusForeground#F7F9E7
  • breadcrumb.foreground#65665D
  • breadcrumbPicker.background#17150c
  • button.background#E2AD69db
  • button.foreground#0A0805
  • button.hoverBackground#E2AD69
  • button.secondaryBackground#D968A7db
  • button.secondaryForeground#0A0805
  • button.secondaryHoverBackground#D968A7
  • checkbox.background#19130B
  • checkbox.foreground#F7F9E7
  • debugToolBar.background#79A6D3
  • debugToolBar.foreground#0A0805
  • descriptionForeground#F0ADD3
  • diffEditor.diagonalFill#79A6D3
  • diffEditor.insertedLineBackground#79A6D340
  • diffEditor.insertedTextBackground#79A6D350
  • diffEditor.insertedTextBorder#79A6D3
  • diffEditor.removedLineBackground#D5767640
  • diffEditor.removedTextBackground#D5767650
  • diffEditor.removedTextBorder#D57676
  • diffEditorGutter.insertedLineBackground#79A6D3
  • diffEditorGutter.removedLineBackground#D57676
  • disabledForeground#65665D
  • dropdown.background#170D12
  • dropdown.border#302312
  • dropdown.foreground#F7F9E7
  • editor.background#19130B
  • editor.findMatchBackground#583E1D70
  • editor.findMatchForeground#F7F9E7
  • editor.findMatchHighlightBackground#1E0B1670
  • editor.findMatchHighlightForeground#F7F9E7
  • editor.findRangeHighlightBackground#48143170
  • editor.foldBackground#1E0B1670
  • editor.foldPlaceholderForeground#F7F9E7
  • editor.foreground#F7F9E7
  • editor.hoverHighlightBackground#1E0B1670
  • editor.inactiveSelectionBackground#48143170
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#F0ADD3
  • editor.rangeHighlightBackground#1E0B1670
  • editor.selectionBackground#48143170
  • editor.selectionForeground#F7F9E7
  • editor.selectionHighlightBackground#48143170
  • editor.snippetFinalTabstopHighlightBackground#1E0B1670
  • editor.snippetTabstopHighlightBackground#1E0B1670
  • editor.symbolHighlightBackground#1E0B1670
  • editor.wordHighlightBackground#1E0B1670
  • editor.wordHighlightStrongBackground#1E0B1650
  • editor.wordHighlightTextBackground#1E0B1670
  • editorCodeLens.foreground#65665D
  • editorCursor.background#1E0B1670
  • editorCursor.foreground#D968A7
  • editorError.foreground#D57676
  • editorGroup.border#302312
  • editorGroup.dropBackground#170D12
  • editorGroup.emptyBackground#19130B
  • editorGroupHeader.border#302312
  • editorGroupHeader.tabsBackground#19130B
  • editorGutter.addedBackground#24A824
  • editorGutter.background#19130B
  • editorGutter.commentRangeForeground#65665D
  • editorGutter.deletedBackground#D57676
  • editorGutter.modifiedBackground#79A6D3
  • editorHint.foreground#24A824
  • editorHoverWidget.background#19130B
  • editorHoverWidget.border#302312
  • editorHoverWidget.foreground#F7F9E7
  • editorHoverWidget.highlightForeground#F7F9E7
  • editorHoverWidget.statusBarBackground#19130B
  • editorIndentGuide.activeBackground1#D968A7
  • editorIndentGuide.background1#1E0B1670
  • editorInfo.foreground#79A6D3
  • editorLineNumber.activeForeground#D968A7
  • editorLineNumber.dimmedForeground#65665D90
  • editorLineNumber.foreground#65665D
  • editorLink.activeForeground#79A6D3
  • editorMarkerNavigation.background#17150c
  • editorMarkerNavigationError.background#17150c
  • editorMarkerNavigationWarning.background#17150c
  • editorMultiCursor.primary.background#1E0B1670
  • editorMultiCursor.primary.foreground#D968A7
  • editorMultiCursor.secondary.background#1E0B1670
  • editorMultiCursor.secondary.foreground#F7F9E7
  • editorOverviewRuler.addedForeground#24A824
  • editorOverviewRuler.border#302312
  • editorOverviewRuler.commentForeground#65665D
  • editorOverviewRuler.commonContentForeground#F7F9E7
  • editorOverviewRuler.currentContentForeground#79A6D3
  • editorOverviewRuler.deletedForeground#D57676
  • editorOverviewRuler.errorForeground#D57676
  • editorOverviewRuler.findMatchForeground#F7F9E7
  • editorOverviewRuler.incomingContentForeground#24A824
  • editorOverviewRuler.infoForeground#79A6D3
  • editorOverviewRuler.modifiedForeground#79A6D3
  • editorOverviewRuler.rangeHighlightForeground#1E0B1670
  • editorOverviewRuler.selectionHighlightForeground#48143170
  • editorOverviewRuler.warningForeground#DEA66D
  • editorOverviewRuler.wordHighlightForeground#1E0B1670
  • editorOverviewRuler.wordHighlightStrongForeground#1E0B1670
  • editorRuler.foreground#1E0B1670
  • editorSuggestWidget.background#19130B
  • editorSuggestWidget.border#302312
  • editorSuggestWidget.focusHighlightForeground#F7F9E7
  • editorSuggestWidget.foreground#65665D
  • editorSuggestWidget.highlightForeground#F7F9E7
  • editorSuggestWidget.selectedBackground#E2AD6980
  • editorSuggestWidget.selectedForeground#F7F9E7
  • editorUnicodeHighlight.background#1E0B1670
  • editorWarning.foreground#DEA66D
  • editorWhitespace.foreground#1E0B1670
  • editorWidget.background#19130B
  • editorWidget.border#302312
  • editorWidget.foreground#F7F9E7
  • errorForeground#D57676
  • extensionButton.prominentBackground#E2AD69aa
  • extensionButton.prominentForeground#0A0805
  • extensionButton.prominentHoverBackground#E2AD69
  • focusBorder#302312
  • foreground#F7F9E7
  • gitDecoration.addedResourceForeground#24A824
  • gitDecoration.conflictingResourceForeground#DEA66D
  • gitDecoration.deletedResourceForeground#D57676
  • gitDecoration.ignoredResourceForeground#65665D
  • gitDecoration.modifiedResourceForeground#79A6D3
  • gitDecoration.renamedResourceForeground#D968A7
  • gitDecoration.untrackedResourceForeground#F0ADD3
  • input.background#19130B
  • input.border#65665D
  • input.foreground#F7F9E7
  • input.placeholderForeground#65665D
  • inputOption.activeBorder#D968A7
  • inputValidation.errorBorder#D57676
  • inputValidation.infoBorder#79A6D3
  • inputValidation.warningBorder#DEA66D
  • list.activeSelectionBackground#E2AD6970
  • list.activeSelectionForeground#F7F9E7
  • list.dropBackground#170D12
  • list.dropBetweenBackground#302312
  • list.errorForeground#D57676
  • list.focusBackground#E2AD6950
  • list.focusForeground#F7F9E7
  • list.highlightForeground#D968A7
  • list.hoverBackground#E2AD6920
  • list.hoverForeground#F7F9E7
  • list.inactiveFocusBackground#17150c
  • list.inactiveSelectionBackground#E2AD6960
  • list.inactiveSelectionForeground#F0ADD3
  • list.warningForeground#DEA66D
  • listFilterWidget.background#170D12
  • listFilterWidget.noMatchesOutline#D57676
  • listFilterWidget.outline#302312
  • merge.border#302312
  • merge.currentContentBackground#79A6D320
  • merge.currentHeaderBackground#79A6D340
  • merge.incomingContentBackground#24A82420
  • merge.incomingHeaderBackground#24A82440
  • mergeEditor.change.background#DEA66D
  • notificationLink.foreground#79A6D3
  • notifications.background#17150c
  • notifications.border#302312
  • notifications.foreground#F7F9E7
  • notificationsErrorIcon.foreground#D57676
  • notificationsInfoIcon.foreground#79A6D3
  • notificationsWarningIcon.foreground#DEA66D
  • panel.background#17150c
  • panel.border#D968A7
  • panelInput.border#65665D
  • panelTitle.activeBorder#D968A7
  • panelTitle.activeForeground#F7F9E7
  • panelTitle.inactiveForeground#65665D
  • peekView.border#E2AD69
  • peekViewEditor.background#19130B
  • peekViewEditor.matchHighlightBackground#583E1D70
  • peekViewResult.background#19130B
  • peekViewResult.fileForeground#F7F9E7
  • peekViewResult.lineForeground#F7F9E7
  • peekViewResult.matchHighlightBackground#1E0B1670
  • peekViewResult.selectionBackground#17150c
  • peekViewResult.selectionForeground#F7F9E7
  • peekViewTitle.background#19130B
  • peekViewTitleDescription.foreground#F0ADD3
  • peekViewTitleLabel.foreground#F7F9E7
  • pickerGroup.border#E2AD69
  • pickerGroup.foreground#ECB1D2
  • progressBar.background#D968A7
  • selection.background#E2AD6950
  • settings.checkboxBackground#19130B
  • settings.checkboxBorder#302312
  • settings.checkboxForeground#F7F9E7
  • settings.dropdownBackground#19130B
  • settings.dropdownBorder#302312
  • settings.dropdownForeground#F7F9E7
  • settings.focusedRowBackground#1E0B1670
  • settings.focusedRowBorder#65665D
  • settings.headerBorder#302312
  • settings.headerForeground#F7F9E7
  • settings.inactiveSelectedItemBorder#65665D
  • settings.modifiedItemIndicator#DEA66D
  • settings.numberInputBackground#19130B
  • settings.numberInputBorder#65665D
  • settings.numberInputForeground#F7F9E7
  • settings.rowHoverBackground#1E0B1670
  • settings.settingsHeaderHoverForeground#F7F9E7
  • settings.textInputBackground#19130B
  • settings.textInputBorder#65665D
  • settings.textInputForeground#F7F9E7
  • sideBar.background#19130B
  • sideBarActivityBarTop.border#302312
  • sideBarSectionHeader.background#17150c
  • sideBarSectionHeader.border#302312
  • sideBarStickyScroll.background#19130B
  • sideBarStickyScroll.border#302312
  • sideBarStickyScroll.shadow#302312
  • sideBarTitle.background#19130B
  • sideBarTitle.foreground#F7F9E7
  • statusBar.background#E2AD69
  • statusBar.debuggingBackground#DEA66D
  • statusBar.debuggingForeground#0A0805
  • statusBar.foreground#0A0805
  • statusBar.noFolderBackground#F0ADD3
  • statusBar.noFolderForeground#0A0805
  • statusBarItem.activeBackground#E2AD69aa
  • statusBarItem.errorBackground#D57676
  • statusBarItem.errorForeground#0A0805
  • statusBarItem.errorHoverBackground#D57676aa
  • statusBarItem.hoverBackground#E2AD69aa
  • statusBarItem.prominentBackground#E2AD69aa
  • statusBarItem.prominentForeground#0A0805
  • statusBarItem.prominentHoverBackground#E2AD69aa
  • statusBarItem.prominentHoverForeground#0A0805
  • statusBarItem.remoteBackground#D968A7
  • statusBarItem.remoteForeground#0A0805
  • statusBarItem.remoteHoverBackground#D968A7aa
  • statusBarItem.warningBackground#DEA66D
  • statusBarItem.warningForeground#0A0805
  • statusBarItem.warningHoverBackground#DEA66Daa
  • tab.activeBackground#17150c
  • tab.activeBorderTop#D968A7
  • tab.activeForeground#F7F9E7
  • tab.border#302312
  • tab.hoverBackground#17150c80
  • tab.hoverForeground#F7F9E7
  • tab.inactiveBackground#19130B
  • tab.inactiveForeground#65665D
  • tab.selectedBackground#1E0B1670
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#5E8FC6
  • terminal.ansiBrightBlack#373737
  • terminal.ansiBrightBlue#A6CCF7
  • terminal.ansiBrightCyan#59D1AA
  • terminal.ansiBrightGreen#94F669
  • terminal.ansiBrightMagenta#C458A8
  • terminal.ansiBrightRed#CE624B
  • terminal.ansiBrightWhite#FCFCFB
  • terminal.ansiBrightYellow#CF9752
  • terminal.ansiCyan#439379
  • terminal.ansiGreen#62B83C
  • terminal.ansiMagenta#CF46AC
  • terminal.ansiRed#C6614A
  • terminal.ansiWhite#F2F1EA
  • terminal.ansiYellow#A3753C
  • terminal.background#19130B
  • terminal.border#302312
  • terminal.foreground#F7F9E7
  • terminal.inactiveSelectionBackground#48143170
  • terminal.selectionBackground#48143170
  • textBlockQuote.background#170D12
  • textBlockQuote.border#302312
  • textCodeBlock.background#170D12
  • textLink.activeForeground#79A6D3
  • textLink.foreground#E2AD69
  • textPreformat.background#170D12
  • textPreformat.foreground#F7F9E7
  • textSeparator.foreground#F7F9E7
  • titleBar.activeBackground#17150c
  • titleBar.activeForeground#F7F9E7
  • titleBar.inactiveBackground#17150c
  • titleBar.inactiveForeground#65665D
  • widget.border#302312

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#F7F9E7
meta.diff, meta.diff.header#65665D
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#F1C1DC
emphasisitalic
strongbold
invalid#D57676strikethrough
invalid.deprecated#F7F9E7underline italic
header#F1C1DC
source.ini, source.ignore, source#F0ADD3
markup.inserted#F1C1DC
markup.deleted#D57676
markup.changed#79A6D3
markup.error#D57676
markup.underlineunderline
markup.bold#DEA66Dbold
markup.heading#D968A7bold
markup.italic#F0ADD3italic
markup.inline.raw, markup.raw.restructuredtext#D968A7
markup.underline.link, markup.underline.link.image, markup.quote#79A6D3
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#E2AD69
meta.separator.markdown#D968A7
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#F0D7B8
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#DEA66D
entity.name.class, entity.name.type.class, entity.other.inherited-class#E2AD69
entity.name.tag, entity.other.attribute-name.parent-selector#F4DEC3
entity.other.attribute-name#E2AD69
entity.name.function, meta.function-call, meta.method-call, meta.method#D968A7
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#EFC8DE
support#F0C58E
entity.name, variable.other.key#D968A7
entity.name.type#F0BCD9
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#F197B0
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#F2DCC0
entity.other.attribute-name.class.css#D968A7
storage.class, storage.type#E2AD69
storage.modifier#EAEDBF
comment, punctuation.definition.comment, unused.comment, wildcard.comment#65665D
constant#F1C1DC
constant.other.color#EBCBA3
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#E1C6A3
constant.other.date, constant.other.timestamp#F2D5B1
keyword.operator#F9D2E8
keyword.other.unit#DFE49F
keyword.control, keyword.other.template, keyword.other.substitution#D7B384
keyword.other.this#F1C1DC
keyword.control.import, keyword.control.from#EDE3AB
keyword.control.new, keyword.operator.new, keyword.other.important.css#E2AD69
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#E6E4A3
meta.attribute-selector.scss#F3A5D1
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#F4DEC3
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#F3E6C3
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#E2AD69
support.constant.property-value.css, constant.numeric.css#F0ADD3
keyword.control.at-rule.apply.tailwind#EDE3AB
keyword.control.at-rule.tailwind.tailwind#D7B384
keyword.control.at-rule.layer.tailwind#E6E4A3
meta.selector#F3A5D1
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#E8ECBB
punctuation.definition.constant.restructuredtext#F1C1DC
string.quoted.docstring.multi#D968A7
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#E8ECBB
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#F3E6C3
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#F2F1EA
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#F6FDED
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#E4F0C1
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#F0F6E4
punctuation.definition.directive.restructuredtext#F1C1DC
variable#EDD7BA
variable.other.alias.yaml#EDD7BAunderline
variable.language, variable.parameter.function.language.special#E1C6A3
variable.other.constant#EFE7AE
support.variable#EDD7BA
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#E6F1B1
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#DEA66D
support.function, support.type.property-name#F0F0C7
storage#F4DAB8
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#A3753C
punctuation.definition.group.capture.regexp#C6614A
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#C6614A
punctuation.definition.character-class.regexp#CF9752
punctuation.definition.group.regexp#A6CCF7
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#C6614A
meta.assertion.look-ahead.regexp#A6CCF7
source.json meta.structure.dictionary.json support.type.property-name.json#D968A7
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#E2AD69
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#79A6D3
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#DEA66D
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#D57676
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#24A824
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#D968A7
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#E2AD69
token.info-token#79A6D3
token.warn-token#DEA66D
token.error-token#D57676
token.debug-token#DEA66D