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#DFD9D770
  • activityBar.activeBorder#3F1C18
  • activityBar.background#fff6d8
  • activityBar.foreground#1B1413
  • activityBar.inactiveForeground#D2A9A1
  • activityBarBadge.background#8D4B3A
  • activityBarBadge.foreground#1B1413
  • activityBarTop.foreground#1B1413
  • badge.background#8D4B3A
  • badge.foreground#1B1413
  • breadcrumb.activeForeground#1B1413
  • breadcrumb.activeSelectionForeground#1B1413
  • breadcrumb.background#fff6d8
  • breadcrumb.focusForeground#1B1413
  • breadcrumb.foreground#D2A9A1
  • breadcrumbPicker.background#fff6d8
  • button.background#8D4B3Adb
  • button.foreground#1B1413
  • button.hoverBackground#8D4B3A
  • button.secondaryBackground#3F1C18db
  • button.secondaryForeground#1B1413
  • button.secondaryHoverBackground#3F1C18
  • checkbox.background#fffae2
  • checkbox.foreground#1B1413
  • debugToolBar.background#47739E
  • debugToolBar.foreground#1B1413
  • descriptionForeground#302522
  • diffEditor.diagonalFill#47739E
  • diffEditor.insertedLineBackground#47739E40
  • diffEditor.insertedTextBackground#47739E50
  • diffEditor.insertedTextBorder#47739E
  • diffEditor.removedLineBackground#82313140
  • diffEditor.removedTextBackground#82313150
  • diffEditor.removedTextBorder#823131
  • diffEditorGutter.insertedLineBackground#47739E
  • diffEditorGutter.removedLineBackground#823131
  • disabledForeground#D2A9A1
  • dropdown.background#cdc7bb
  • dropdown.border#D2CCCB
  • dropdown.foreground#1B1413
  • editor.background#fffae2
  • editor.findMatchBackground#C6A9A470
  • editor.findMatchForeground#1B1413
  • editor.findMatchHighlightBackground#DFD9D770
  • editor.findMatchHighlightForeground#1B1413
  • editor.findRangeHighlightBackground#CBBAB870
  • editor.foldBackground#DFD9D770
  • editor.foldPlaceholderForeground#1B1413
  • editor.foreground#1B1413
  • editor.hoverHighlightBackground#DFD9D770
  • editor.inactiveSelectionBackground#CBBAB870
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#302522
  • editor.rangeHighlightBackground#DFD9D770
  • editor.selectionBackground#CBBAB870
  • editor.selectionForeground#1B1413
  • editor.selectionHighlightBackground#CBBAB870
  • editor.snippetFinalTabstopHighlightBackground#DFD9D770
  • editor.snippetTabstopHighlightBackground#DFD9D770
  • editor.symbolHighlightBackground#DFD9D770
  • editor.wordHighlightBackground#DFD9D770
  • editor.wordHighlightStrongBackground#DFD9D750
  • editor.wordHighlightTextBackground#DFD9D770
  • editorCodeLens.foreground#D2A9A1
  • editorCursor.background#DFD9D770
  • editorCursor.foreground#3F1C18
  • editorError.foreground#823131
  • editorGroup.border#D2CCCB
  • editorGroup.dropBackground#cdc7bb
  • editorGroup.emptyBackground#fffae2
  • editorGroupHeader.border#D2CCCB
  • editorGroupHeader.tabsBackground#fffae2
  • editorGutter.addedBackground#2A562A
  • editorGutter.background#fffae2
  • editorGutter.commentRangeForeground#D2A9A1
  • editorGutter.deletedBackground#823131
  • editorGutter.modifiedBackground#47739E
  • editorHint.foreground#2A562A
  • editorHoverWidget.background#fffae2
  • editorHoverWidget.border#D2CCCB
  • editorHoverWidget.foreground#1B1413
  • editorHoverWidget.highlightForeground#1B1413
  • editorHoverWidget.statusBarBackground#fffae2
  • editorIndentGuide.activeBackground1#3F1C18
  • editorIndentGuide.background1#DFD9D770
  • editorInfo.foreground#47739E
  • editorLineNumber.activeForeground#3F1C18
  • editorLineNumber.dimmedForeground#D2A9A190
  • editorLineNumber.foreground#D2A9A1
  • editorLink.activeForeground#47739E
  • editorMarkerNavigation.background#fff6d8
  • editorMarkerNavigationError.background#fff6d8
  • editorMarkerNavigationWarning.background#fff6d8
  • editorMultiCursor.primary.background#DFD9D770
  • editorMultiCursor.primary.foreground#3F1C18
  • editorMultiCursor.secondary.background#DFD9D770
  • editorMultiCursor.secondary.foreground#1B1413
  • editorOverviewRuler.addedForeground#2A562A
  • editorOverviewRuler.border#D2CCCB
  • editorOverviewRuler.commentForeground#D2A9A1
  • editorOverviewRuler.commonContentForeground#1B1413
  • editorOverviewRuler.currentContentForeground#47739E
  • editorOverviewRuler.deletedForeground#823131
  • editorOverviewRuler.errorForeground#823131
  • editorOverviewRuler.findMatchForeground#1B1413
  • editorOverviewRuler.incomingContentForeground#2A562A
  • editorOverviewRuler.infoForeground#47739E
  • editorOverviewRuler.modifiedForeground#47739E
  • editorOverviewRuler.rangeHighlightForeground#DFD9D770
  • editorOverviewRuler.selectionHighlightForeground#CBBAB870
  • editorOverviewRuler.warningForeground#7F5934
  • editorOverviewRuler.wordHighlightForeground#DFD9D770
  • editorOverviewRuler.wordHighlightStrongForeground#DFD9D770
  • editorRuler.foreground#DFD9D770
  • editorSuggestWidget.background#fffae2
  • editorSuggestWidget.border#D2CCCB
  • editorSuggestWidget.focusHighlightForeground#1B1413
  • editorSuggestWidget.foreground#D2A9A1
  • editorSuggestWidget.highlightForeground#1B1413
  • editorSuggestWidget.selectedBackground#8D4B3A80
  • editorSuggestWidget.selectedForeground#1B1413
  • editorUnicodeHighlight.background#DFD9D770
  • editorWarning.foreground#7F5934
  • editorWhitespace.foreground#DFD9D770
  • editorWidget.background#fffae2
  • editorWidget.border#D2CCCB
  • editorWidget.foreground#1B1413
  • errorForeground#823131
  • extensionButton.prominentBackground#8D4B3Aaa
  • extensionButton.prominentForeground#1B1413
  • extensionButton.prominentHoverBackground#8D4B3A
  • focusBorder#D2CCCB
  • foreground#1B1413
  • gitDecoration.addedResourceForeground#2A562A
  • gitDecoration.conflictingResourceForeground#7F5934
  • gitDecoration.deletedResourceForeground#823131
  • gitDecoration.ignoredResourceForeground#D2A9A1
  • gitDecoration.modifiedResourceForeground#47739E
  • gitDecoration.renamedResourceForeground#3F1C18
  • gitDecoration.untrackedResourceForeground#302522
  • input.background#fffae2
  • input.border#D2A9A1
  • input.foreground#1B1413
  • input.placeholderForeground#D2A9A1
  • inputOption.activeBorder#3F1C18
  • inputValidation.errorBorder#823131
  • inputValidation.infoBorder#47739E
  • inputValidation.warningBorder#7F5934
  • list.activeSelectionBackground#8D4B3A70
  • list.activeSelectionForeground#1B1413
  • list.dropBackground#cdc7bb
  • list.dropBetweenBackground#D2CCCB
  • list.errorForeground#823131
  • list.focusBackground#8D4B3A50
  • list.focusForeground#1B1413
  • list.highlightForeground#3F1C18
  • list.hoverBackground#8D4B3A20
  • list.hoverForeground#1B1413
  • list.inactiveFocusBackground#fff6d8
  • list.inactiveSelectionBackground#8D4B3A60
  • list.inactiveSelectionForeground#302522
  • list.warningForeground#7F5934
  • listFilterWidget.background#cdc7bb
  • listFilterWidget.noMatchesOutline#823131
  • listFilterWidget.outline#D2CCCB
  • merge.border#D2CCCB
  • merge.currentContentBackground#47739E20
  • merge.currentHeaderBackground#47739E40
  • merge.incomingContentBackground#2A562A20
  • merge.incomingHeaderBackground#2A562A40
  • mergeEditor.change.background#7F5934
  • notificationLink.foreground#47739E
  • notifications.background#fff6d8
  • notifications.border#D2CCCB
  • notifications.foreground#1B1413
  • notificationsErrorIcon.foreground#823131
  • notificationsInfoIcon.foreground#47739E
  • notificationsWarningIcon.foreground#7F5934
  • panel.background#fff6d8
  • panel.border#3F1C18
  • panelInput.border#D2A9A1
  • panelTitle.activeBorder#3F1C18
  • panelTitle.activeForeground#1B1413
  • panelTitle.inactiveForeground#D2A9A1
  • peekView.border#8D4B3A
  • peekViewEditor.background#fffae2
  • peekViewEditor.matchHighlightBackground#C6A9A470
  • peekViewResult.background#fffae2
  • peekViewResult.fileForeground#1B1413
  • peekViewResult.lineForeground#1B1413
  • peekViewResult.matchHighlightBackground#DFD9D770
  • peekViewResult.selectionBackground#fff6d8
  • peekViewResult.selectionForeground#1B1413
  • peekViewTitle.background#fffae2
  • peekViewTitleDescription.foreground#302522
  • peekViewTitleLabel.foreground#1B1413
  • pickerGroup.border#8D4B3A
  • pickerGroup.foreground#652E24
  • progressBar.background#3F1C18
  • selection.background#8D4B3A50
  • settings.checkboxBackground#fffae2
  • settings.checkboxBorder#D2CCCB
  • settings.checkboxForeground#1B1413
  • settings.dropdownBackground#fffae2
  • settings.dropdownBorder#D2CCCB
  • settings.dropdownForeground#1B1413
  • settings.focusedRowBackground#DFD9D770
  • settings.focusedRowBorder#D2A9A1
  • settings.headerBorder#D2CCCB
  • settings.headerForeground#1B1413
  • settings.inactiveSelectedItemBorder#D2A9A1
  • settings.modifiedItemIndicator#7F5934
  • settings.numberInputBackground#fffae2
  • settings.numberInputBorder#D2A9A1
  • settings.numberInputForeground#1B1413
  • settings.rowHoverBackground#DFD9D770
  • settings.settingsHeaderHoverForeground#1B1413
  • settings.textInputBackground#fffae2
  • settings.textInputBorder#D2A9A1
  • settings.textInputForeground#1B1413
  • sideBar.background#fffae2
  • sideBarActivityBarTop.border#D2CCCB
  • sideBarSectionHeader.background#fff6d8
  • sideBarSectionHeader.border#D2CCCB
  • sideBarStickyScroll.background#fffae2
  • sideBarStickyScroll.border#D2CCCB
  • sideBarStickyScroll.shadow#D2CCCB
  • sideBarTitle.background#fffae2
  • sideBarTitle.foreground#1B1413
  • statusBar.background#8D4B3A
  • statusBar.debuggingBackground#7F5934
  • statusBar.debuggingForeground#1B1413
  • statusBar.foreground#1B1413
  • statusBar.noFolderBackground#302522
  • statusBar.noFolderForeground#E3E3E2
  • statusBarItem.activeBackground#8D4B3Aaa
  • statusBarItem.errorBackground#823131
  • statusBarItem.errorForeground#1B1413
  • statusBarItem.errorHoverBackground#823131aa
  • statusBarItem.hoverBackground#8D4B3Aaa
  • statusBarItem.prominentBackground#8D4B3Aaa
  • statusBarItem.prominentForeground#E3E3E2
  • statusBarItem.prominentHoverBackground#8D4B3Aaa
  • statusBarItem.prominentHoverForeground#E3E3E2
  • statusBarItem.remoteBackground#3F1C18
  • statusBarItem.remoteForeground#1B1413
  • statusBarItem.remoteHoverBackground#3F1C18aa
  • statusBarItem.warningBackground#7F5934
  • statusBarItem.warningForeground#1B1413
  • statusBarItem.warningHoverBackground#7F5934aa
  • tab.activeBackground#fff6d8
  • tab.activeBorderTop#3F1C18
  • tab.activeForeground#1B1413
  • tab.border#D2CCCB
  • tab.hoverBackground#fff6d880
  • tab.hoverForeground#1B1413
  • tab.inactiveBackground#fffae2
  • tab.inactiveForeground#D2A9A1
  • tab.selectedBackground#DFD9D770
  • 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#D2CCCB
  • terminal.foreground#1B1413
  • terminal.inactiveSelectionBackground#CBBAB870
  • terminal.selectionBackground#CBBAB870
  • textBlockQuote.background#cdc7bb
  • textBlockQuote.border#D2CCCB
  • textCodeBlock.background#cdc7bb
  • textLink.activeForeground#47739E
  • textLink.foreground#8D4B3A
  • textPreformat.background#cdc7bb
  • textPreformat.foreground#1B1413
  • textSeparator.foreground#1B1413
  • titleBar.activeBackground#fff6d8
  • titleBar.activeForeground#1B1413
  • titleBar.inactiveBackground#fff6d8
  • titleBar.inactiveForeground#D2A9A1
  • widget.border#D2CCCB

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#1B1413
meta.diff, meta.diff.header#D2A9A1
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#6B2E24
emphasisitalic
strongbold
invalid#823131strikethrough
invalid.deprecated#1B1413underline italic
header#6B2E24
source.ini, source.ignore, source#302522
markup.inserted#6B2E24
markup.deleted#823131
markup.changed#47739E
markup.error#823131
markup.underlineunderline
markup.bold#7F5934bold
markup.heading#3F1C18bold
markup.italic#302522italic
markup.inline.raw, markup.raw.restructuredtext#3F1C18
markup.underline.link, markup.underline.link.image, markup.quote#47739E
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#8D4B3A
meta.separator.markdown#3F1C18
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#763C2D
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#7F5934
entity.name.class, entity.name.type.class, entity.other.inherited-class#8D4B3A
entity.name.tag, entity.other.attribute-name.parent-selector#78332B
entity.other.attribute-name#8D4B3A
entity.name.function, meta.function-call, meta.method-call, meta.method#3F1C18
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#67362D
support#452017
entity.name, variable.other.key#3F1C18
entity.name.type#5D2B23
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#49341D
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#733931
entity.other.attribute-name.class.css#3F1C18
storage.class, storage.type#8D4B3A
storage.modifier#663129
comment, punctuation.definition.comment, unused.comment, wildcard.comment#D2A9A1
constant#6B2E24
constant.other.color#5E2E21
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#5C241E
constant.other.date, constant.other.timestamp#6F342A
keyword.operator#71423D
keyword.other.unit#5E2A21
keyword.control, keyword.other.template, keyword.other.substitution#411C16
keyword.other.this#6B2E24
keyword.control.import, keyword.control.from#4E331D
keyword.control.new, keyword.operator.new, keyword.other.important.css#8D4B3A
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#5A3820
meta.attribute-selector.scss#682E27
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#78332B
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#72412D
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#8D4B3A
support.constant.property-value.css, constant.numeric.css#302522
keyword.control.at-rule.apply.tailwind#4E331D
keyword.control.at-rule.tailwind.tailwind#411C16
keyword.control.at-rule.layer.tailwind#5A3820
meta.selector#682E27
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#57403D
punctuation.definition.constant.restructuredtext#6B2E24
string.quoted.docstring.multi#3F1C18
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#57403D
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#72412D
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#725D50
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#FF6E0E
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#684946
punctuation.definition.directive.restructuredtext#6B2E24
variable#5C3329
variable.other.alias.yaml#5C3329underline
variable.language, variable.parameter.function.language.special#5C241E
variable.other.constant#7A5733
support.variable#5C3329
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#5B462A
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#7F5934
support.function, support.type.property-name#805533
storage#5D2923
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#3F1C18
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8D4B3A
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#47739E
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#7F5934
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#823131
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#2A562A
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#3F1C18
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#8D4B3A
token.info-token#47739E
token.warn-token#7F5934
token.error-token#823131
token.debug-token#7F5934