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#2C1F1170
  • activityBar.activeBorder#D36F5F
  • activityBar.background#18120C
  • activityBar.foreground#FDF8F6
  • activityBar.inactiveForeground#6B614F
  • activityBarBadge.background#D98E72
  • activityBarBadge.foreground#301F0D
  • activityBarTop.foreground#FDF8F6
  • badge.background#D98E72
  • badge.foreground#301F0D
  • breadcrumb.activeForeground#FDF8F6
  • breadcrumb.activeSelectionForeground#FDF8F6
  • breadcrumb.background#18120C
  • breadcrumb.focusForeground#FDF8F6
  • breadcrumb.foreground#6B614F
  • breadcrumbPicker.background#18120C
  • button.background#D98E72db
  • button.foreground#301F0D
  • button.hoverBackground#D98E72
  • button.secondaryBackground#D36F5Fdb
  • button.secondaryForeground#301F0D
  • button.secondaryHoverBackground#D36F5F
  • checkbox.background#1E1610
  • checkbox.foreground#FDF8F6
  • debugToolBar.background#72A6D9
  • debugToolBar.foreground#301F0D
  • descriptionForeground#F3FCF8
  • diffEditor.diagonalFill#72A6D9
  • diffEditor.insertedLineBackground#72A6D940
  • diffEditor.insertedTextBackground#72A6D950
  • diffEditor.insertedTextBorder#72A6D9
  • diffEditor.removedLineBackground#D9727240
  • diffEditor.removedTextBackground#D9727250
  • diffEditor.removedTextBorder#D97272
  • diffEditorGutter.insertedLineBackground#72A6D9
  • diffEditorGutter.removedLineBackground#D97272
  • disabledForeground#6B614F
  • dropdown.background#1E170F
  • dropdown.border#443413
  • dropdown.foreground#FDF8F6
  • editor.background#1E1610
  • editor.findMatchBackground#5C402E70
  • editor.findMatchForeground#FDF8F6
  • editor.findMatchHighlightBackground#2C1F1170
  • editor.findMatchHighlightForeground#FDF8F6
  • editor.findRangeHighlightBackground#4E342270
  • editor.foldBackground#2C1F1170
  • editor.foldPlaceholderForeground#FDF8F6
  • editor.foreground#FDF8F6
  • editor.hoverHighlightBackground#2C1F1170
  • editor.inactiveSelectionBackground#4E342270
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#F3FCF8
  • editor.rangeHighlightBackground#2C1F1170
  • editor.selectionBackground#4E342270
  • editor.selectionForeground#FDF8F6
  • editor.selectionHighlightBackground#4E342270
  • editor.snippetFinalTabstopHighlightBackground#2C1F1170
  • editor.snippetTabstopHighlightBackground#2C1F1170
  • editor.symbolHighlightBackground#2C1F1170
  • editor.wordHighlightBackground#2C1F1170
  • editor.wordHighlightStrongBackground#2C1F1150
  • editor.wordHighlightTextBackground#2C1F1170
  • editorCodeLens.foreground#6B614F
  • editorCursor.background#2C1F1170
  • editorCursor.foreground#D36F5F
  • editorError.foreground#D97272
  • editorGroup.border#443413
  • editorGroup.dropBackground#1E170F
  • editorGroup.emptyBackground#1E1610
  • editorGroupHeader.border#443413
  • editorGroupHeader.tabsBackground#1E1610
  • editorGutter.addedBackground#30AF30
  • editorGutter.background#1E1610
  • editorGutter.commentRangeForeground#6B614F
  • editorGutter.deletedBackground#D97272
  • editorGutter.modifiedBackground#72A6D9
  • editorHint.foreground#30AF30
  • editorHoverWidget.background#1E1610
  • editorHoverWidget.border#443413
  • editorHoverWidget.foreground#FDF8F6
  • editorHoverWidget.highlightForeground#FDF8F6
  • editorHoverWidget.statusBarBackground#1E1610
  • editorIndentGuide.activeBackground1#D36F5F
  • editorIndentGuide.background1#2C1F1170
  • editorInfo.foreground#72A6D9
  • editorLineNumber.activeForeground#D36F5F
  • editorLineNumber.dimmedForeground#6B614F90
  • editorLineNumber.foreground#6B614F
  • editorLink.activeForeground#72A6D9
  • editorMarkerNavigation.background#18120C
  • editorMarkerNavigationError.background#18120C
  • editorMarkerNavigationWarning.background#18120C
  • editorMultiCursor.primary.background#2C1F1170
  • editorMultiCursor.primary.foreground#D36F5F
  • editorMultiCursor.secondary.background#2C1F1170
  • editorMultiCursor.secondary.foreground#FDF8F6
  • editorOverviewRuler.addedForeground#30AF30
  • editorOverviewRuler.border#443413
  • editorOverviewRuler.commentForeground#6B614F
  • editorOverviewRuler.commonContentForeground#FDF8F6
  • editorOverviewRuler.currentContentForeground#72A6D9
  • editorOverviewRuler.deletedForeground#D97272
  • editorOverviewRuler.errorForeground#D97272
  • editorOverviewRuler.findMatchForeground#FDF8F6
  • editorOverviewRuler.incomingContentForeground#30AF30
  • editorOverviewRuler.infoForeground#72A6D9
  • editorOverviewRuler.modifiedForeground#72A6D9
  • editorOverviewRuler.rangeHighlightForeground#2C1F1170
  • editorOverviewRuler.selectionHighlightForeground#4E342270
  • editorOverviewRuler.warningForeground#D9A673
  • editorOverviewRuler.wordHighlightForeground#2C1F1170
  • editorOverviewRuler.wordHighlightStrongForeground#2C1F1170
  • editorRuler.foreground#2C1F1170
  • editorSuggestWidget.background#1E1610
  • editorSuggestWidget.border#443413
  • editorSuggestWidget.focusHighlightForeground#FDF8F6
  • editorSuggestWidget.foreground#6B614F
  • editorSuggestWidget.highlightForeground#FDF8F6
  • editorSuggestWidget.selectedBackground#D98E7280
  • editorSuggestWidget.selectedForeground#FDF8F6
  • editorUnicodeHighlight.background#2C1F1170
  • editorWarning.foreground#D9A673
  • editorWhitespace.foreground#2C1F1170
  • editorWidget.background#1E1610
  • editorWidget.border#443413
  • editorWidget.foreground#FDF8F6
  • errorForeground#D97272
  • extensionButton.prominentBackground#D98E72aa
  • extensionButton.prominentForeground#301F0D
  • extensionButton.prominentHoverBackground#D98E72
  • focusBorder#443413
  • foreground#FDF8F6
  • gitDecoration.addedResourceForeground#30AF30
  • gitDecoration.conflictingResourceForeground#D9A673
  • gitDecoration.deletedResourceForeground#D97272
  • gitDecoration.ignoredResourceForeground#6B614F
  • gitDecoration.modifiedResourceForeground#72A6D9
  • gitDecoration.renamedResourceForeground#D36F5F
  • gitDecoration.untrackedResourceForeground#F3FCF8
  • input.background#1E1610
  • input.border#6B614F
  • input.foreground#FDF8F6
  • input.placeholderForeground#6B614F
  • inputOption.activeBorder#D36F5F
  • inputValidation.errorBorder#D97272
  • inputValidation.infoBorder#72A6D9
  • inputValidation.warningBorder#D9A673
  • list.activeSelectionBackground#D98E7270
  • list.activeSelectionForeground#FDF8F6
  • list.dropBackground#1E170F
  • list.dropBetweenBackground#443413
  • list.errorForeground#D97272
  • list.focusBackground#D98E7250
  • list.focusForeground#FDF8F6
  • list.highlightForeground#D36F5F
  • list.hoverBackground#D98E7220
  • list.hoverForeground#FDF8F6
  • list.inactiveFocusBackground#18120C
  • list.inactiveSelectionBackground#D98E7260
  • list.inactiveSelectionForeground#F3FCF8
  • list.warningForeground#D9A673
  • listFilterWidget.background#1E170F
  • listFilterWidget.noMatchesOutline#D97272
  • listFilterWidget.outline#443413
  • merge.border#443413
  • merge.currentContentBackground#72A6D920
  • merge.currentHeaderBackground#72A6D940
  • merge.incomingContentBackground#30AF3020
  • merge.incomingHeaderBackground#30AF3040
  • mergeEditor.change.background#D9A673
  • notificationLink.foreground#72A6D9
  • notifications.background#18120C
  • notifications.border#443413
  • notifications.foreground#FDF8F6
  • notificationsErrorIcon.foreground#D97272
  • notificationsInfoIcon.foreground#72A6D9
  • notificationsWarningIcon.foreground#D9A673
  • panel.background#18120C
  • panel.border#D36F5F
  • panelInput.border#6B614F
  • panelTitle.activeBorder#D36F5F
  • panelTitle.activeForeground#FDF8F6
  • panelTitle.inactiveForeground#6B614F
  • peekView.border#D98E72
  • peekViewEditor.background#1E1610
  • peekViewEditor.matchHighlightBackground#5C402E70
  • peekViewResult.background#1E1610
  • peekViewResult.fileForeground#FDF8F6
  • peekViewResult.lineForeground#FDF8F6
  • peekViewResult.matchHighlightBackground#2C1F1170
  • peekViewResult.selectionBackground#18120C
  • peekViewResult.selectionForeground#FDF8F6
  • peekViewTitle.background#1E1610
  • peekViewTitleDescription.foreground#F3FCF8
  • peekViewTitleLabel.foreground#FDF8F6
  • pickerGroup.border#D98E72
  • pickerGroup.foreground#E7C6B1
  • progressBar.background#D36F5F
  • selection.background#D98E7250
  • settings.checkboxBackground#1E1610
  • settings.checkboxBorder#443413
  • settings.checkboxForeground#FDF8F6
  • settings.dropdownBackground#1E1610
  • settings.dropdownBorder#443413
  • settings.dropdownForeground#FDF8F6
  • settings.focusedRowBackground#2C1F1170
  • settings.focusedRowBorder#6B614F
  • settings.headerBorder#443413
  • settings.headerForeground#FDF8F6
  • settings.inactiveSelectedItemBorder#6B614F
  • settings.modifiedItemIndicator#D9A673
  • settings.numberInputBackground#1E1610
  • settings.numberInputBorder#6B614F
  • settings.numberInputForeground#FDF8F6
  • settings.rowHoverBackground#2C1F1170
  • settings.settingsHeaderHoverForeground#FDF8F6
  • settings.textInputBackground#1E1610
  • settings.textInputBorder#6B614F
  • settings.textInputForeground#FDF8F6
  • sideBar.background#1E1610
  • sideBarActivityBarTop.border#443413
  • sideBarSectionHeader.background#18120C
  • sideBarSectionHeader.border#443413
  • sideBarStickyScroll.background#1E1610
  • sideBarStickyScroll.border#443413
  • sideBarStickyScroll.shadow#443413
  • sideBarTitle.background#1E1610
  • sideBarTitle.foreground#FDF8F6
  • statusBar.background#D98E72
  • statusBar.debuggingBackground#D9A673
  • statusBar.debuggingForeground#301F0D
  • statusBar.foreground#301F0D
  • statusBar.noFolderBackground#F3FCF8
  • statusBar.noFolderForeground#301F0D
  • statusBarItem.activeBackground#D98E72aa
  • statusBarItem.errorBackground#D97272
  • statusBarItem.errorForeground#301F0D
  • statusBarItem.errorHoverBackground#D97272aa
  • statusBarItem.hoverBackground#D98E72aa
  • statusBarItem.prominentBackground#D98E72aa
  • statusBarItem.prominentForeground#301F0D
  • statusBarItem.prominentHoverBackground#D98E72aa
  • statusBarItem.prominentHoverForeground#301F0D
  • statusBarItem.remoteBackground#D36F5F
  • statusBarItem.remoteForeground#301F0D
  • statusBarItem.remoteHoverBackground#D36F5Faa
  • statusBarItem.warningBackground#D9A673
  • statusBarItem.warningForeground#301F0D
  • statusBarItem.warningHoverBackground#D9A673aa
  • tab.activeBackground#18120C
  • tab.activeBorderTop#D36F5F
  • tab.activeForeground#FDF8F6
  • tab.border#443413
  • tab.hoverBackground#18120C80
  • tab.hoverForeground#FDF8F6
  • tab.inactiveBackground#1E1610
  • tab.inactiveForeground#6B614F
  • tab.selectedBackground#2C1F1170
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#8D9BCB
  • terminal.ansiBrightBlack#494949
  • terminal.ansiBrightBlue#EBEEFA
  • terminal.ansiBrightCyan#85CDBF
  • terminal.ansiBrightGreen#A6D79B
  • terminal.ansiBrightMagenta#F294DE
  • terminal.ansiBrightRed#FAEBEB
  • terminal.ansiBrightWhite#FCFCFB
  • terminal.ansiBrightYellow#CFDA72
  • terminal.ansiCyan#5C8B82
  • terminal.ansiGreen#748C6F
  • terminal.ansiMagenta#D647B7
  • terminal.ansiRed#B08686
  • terminal.ansiWhite#F5F3F0
  • terminal.ansiYellow#818848
  • terminal.background#1E1610
  • terminal.border#443413
  • terminal.foreground#FDF8F6
  • terminal.inactiveSelectionBackground#4E342270
  • terminal.selectionBackground#4E342270
  • textBlockQuote.background#1E170F
  • textBlockQuote.border#443413
  • textCodeBlock.background#1E170F
  • textLink.activeForeground#72A6D9
  • textLink.foreground#D98E72
  • textPreformat.background#1E170F
  • textPreformat.foreground#FDF8F6
  • textSeparator.foreground#FDF8F6
  • titleBar.activeBackground#18120C
  • titleBar.activeForeground#FDF8F6
  • titleBar.inactiveBackground#18120C
  • titleBar.inactiveForeground#6B614F
  • widget.border#443413

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#FDF8F6
meta.diff, meta.diff.header#6B614F
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#C1ECDF
emphasisitalic
strongbold
invalid#D97272strikethrough
invalid.deprecated#FDF8F6underline italic
header#C1ECDF
source.ini, source.ignore, source#F3FCF8
markup.inserted#C1ECDF
markup.deleted#D97272
markup.changed#72A6D9
markup.error#D97272
markup.underlineunderline
markup.bold#D9A673bold
markup.heading#D36F5Fbold
markup.italic#F3FCF8italic
markup.inline.raw, markup.raw.restructuredtext#D36F5F
markup.underline.link, markup.underline.link.image, markup.quote#72A6D9
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#D98E72
meta.separator.markdown#D36F5F
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#EDD6C4
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#D9A673
entity.name.class, entity.name.type.class, entity.other.inherited-class#D98E72
entity.name.tag, entity.other.attribute-name.parent-selector#F2DCD4
entity.other.attribute-name#D98E72
entity.name.function, meta.function-call, meta.method-call, meta.method#D36F5F
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#EACBB9
support#A2E2CF
entity.name, variable.other.key#D36F5F
entity.name.type#C1ECDF
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#A9DAE5
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#F2E8D3
entity.other.attribute-name.class.css#D36F5F
storage.class, storage.type#D98E72
storage.modifier#E7CDB1
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6B614F
constant#C1ECDF
constant.other.color#E1B89D
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#E7CEB1
constant.other.date, constant.other.timestamp#EBDBBC
keyword.operator#F1D9D0
keyword.other.unit#E5B1A9
keyword.control, keyword.other.template, keyword.other.substitution#B1E7D7
keyword.other.this#C1ECDF
keyword.control.import, keyword.control.from#A1E2E2
keyword.control.new, keyword.operator.new, keyword.other.important.css#D98E72
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#A2E0E2
meta.attribute-selector.scss#E8C8B5
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#F2DCD4
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#E9CEB9
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#D98E72
support.constant.property-value.css, constant.numeric.css#F3FCF8
keyword.control.at-rule.apply.tailwind#A1E2E2
keyword.control.at-rule.tailwind.tailwind#B1E7D7
keyword.control.at-rule.layer.tailwind#A2E0E2
meta.selector#E8C8B5
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#F5EAE5
punctuation.definition.constant.restructuredtext#C1ECDF
string.quoted.docstring.multi#D36F5F
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#F5EAE5
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#E9CEB9
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#F5F3F0
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#FAF7F4
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#F8F2EC
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#EDDDD4
punctuation.definition.directive.restructuredtext#C1ECDF
variable#E8BBB5
variable.other.alias.yaml#E8BBB5underline
variable.language, variable.parameter.function.language.special#E7CEB1
variable.other.constant#E7CDB1
support.variable#E8BBB5
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#E9D7B9
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#D9A673
support.function, support.type.property-name#F1E6D0
storage#E7D4B1
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#818848
punctuation.definition.group.capture.regexp#B08686
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#B08686
punctuation.definition.character-class.regexp#CFDA72
punctuation.definition.group.regexp#EBEEFA
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#B08686
meta.assertion.look-ahead.regexp#EBEEFA
source.json meta.structure.dictionary.json support.type.property-name.json#D36F5F
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#D98E72
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#72A6D9
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#D9A673
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#D97272
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#30AF30
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#D36F5F
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#D98E72
token.info-token#72A6D9
token.warn-token#D9A673
token.error-token#D97272
token.debug-token#D9A673