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#D4D2E070
  • activityBar.activeBorder#431ED7
  • activityBar.background#fffbdd
  • activityBar.foreground#22311B
  • activityBar.inactiveForeground#A2AA9F
  • activityBarBadge.background#2D1782
  • activityBarBadge.foreground#22311B
  • activityBarTop.foreground#22311B
  • badge.background#2D1782
  • badge.foreground#22311B
  • breadcrumb.activeForeground#22311B
  • breadcrumb.activeSelectionForeground#22311B
  • breadcrumb.background#fffbdd
  • breadcrumb.focusForeground#22311B
  • breadcrumb.foreground#A2AA9F
  • breadcrumbPicker.background#fffbdd
  • button.background#2D1782db
  • button.foreground#22311B
  • button.hoverBackground#2D1782
  • button.secondaryBackground#431ED7db
  • button.secondaryForeground#22311B
  • button.secondaryHoverBackground#431ED7
  • checkbox.background#fffcd7
  • checkbox.foreground#22311B
  • debugToolBar.background#2A73BB
  • debugToolBar.foreground#22311B
  • descriptionForeground#2B3E23
  • diffEditor.diagonalFill#2A73BB
  • diffEditor.insertedLineBackground#2A73BB40
  • diffEditor.insertedTextBackground#2A73BB50
  • diffEditor.insertedTextBorder#2A73BB
  • diffEditor.removedLineBackground#9D161640
  • diffEditor.removedTextBackground#9D161650
  • diffEditor.removedTextBorder#9D1616
  • diffEditorGutter.insertedLineBackground#2A73BB
  • diffEditorGutter.removedLineBackground#9D1616
  • disabledForeground#A2AA9F
  • dropdown.background#cdc7bb
  • dropdown.border#D2C6D0
  • dropdown.foreground#22311B
  • editor.background#fffcd7
  • editor.findMatchBackground#CF96C470
  • editor.findMatchForeground#22311B
  • editor.findMatchHighlightBackground#D4D2E070
  • editor.findMatchHighlightForeground#22311B
  • editor.findRangeHighlightBackground#B6AFCF70
  • editor.foldBackground#D4D2E070
  • editor.foldPlaceholderForeground#22311B
  • editor.foreground#22311B
  • editor.hoverHighlightBackground#D4D2E070
  • editor.inactiveSelectionBackground#B6AFCF70
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#2B3E23
  • editor.rangeHighlightBackground#D4D2E070
  • editor.selectionBackground#B6AFCF70
  • editor.selectionForeground#22311B
  • editor.selectionHighlightBackground#B6AFCF70
  • editor.snippetFinalTabstopHighlightBackground#D4D2E070
  • editor.snippetTabstopHighlightBackground#D4D2E070
  • editor.symbolHighlightBackground#D4D2E070
  • editor.wordHighlightBackground#D4D2E070
  • editor.wordHighlightStrongBackground#D4D2E050
  • editor.wordHighlightTextBackground#D4D2E070
  • editorCodeLens.foreground#A2AA9F
  • editorCursor.background#D4D2E070
  • editorCursor.foreground#431ED7
  • editorError.foreground#9D1616
  • editorGroup.border#D2C6D0
  • editorGroup.dropBackground#cdc7bb
  • editorGroup.emptyBackground#fffcd7
  • editorGroupHeader.border#D2C6D0
  • editorGroupHeader.tabsBackground#fffcd7
  • editorGutter.addedBackground#1C641C
  • editorGutter.background#fffcd7
  • editorGutter.commentRangeForeground#A2AA9F
  • editorGutter.deletedBackground#9D1616
  • editorGutter.modifiedBackground#2A73BB
  • editorHint.foreground#1C641C
  • editorHoverWidget.background#fffcd7
  • editorHoverWidget.border#D2C6D0
  • editorHoverWidget.foreground#22311B
  • editorHoverWidget.highlightForeground#22311B
  • editorHoverWidget.statusBarBackground#fffcd7
  • editorIndentGuide.activeBackground1#431ED7
  • editorIndentGuide.background1#D4D2E070
  • editorInfo.foreground#2A73BB
  • editorLineNumber.activeForeground#431ED7
  • editorLineNumber.dimmedForeground#A2AA9F90
  • editorLineNumber.foreground#A2AA9F
  • editorLink.activeForeground#2A73BB
  • editorMarkerNavigation.background#fffbdd
  • editorMarkerNavigationError.background#fffbdd
  • editorMarkerNavigationWarning.background#fffbdd
  • editorMultiCursor.primary.background#D4D2E070
  • editorMultiCursor.primary.foreground#431ED7
  • editorMultiCursor.secondary.background#D4D2E070
  • editorMultiCursor.secondary.foreground#22311B
  • editorOverviewRuler.addedForeground#1C641C
  • editorOverviewRuler.border#D2C6D0
  • editorOverviewRuler.commentForeground#A2AA9F
  • editorOverviewRuler.commonContentForeground#22311B
  • editorOverviewRuler.currentContentForeground#2A73BB
  • editorOverviewRuler.deletedForeground#9D1616
  • editorOverviewRuler.errorForeground#9D1616
  • editorOverviewRuler.findMatchForeground#22311B
  • editorOverviewRuler.incomingContentForeground#1C641C
  • editorOverviewRuler.infoForeground#2A73BB
  • editorOverviewRuler.modifiedForeground#2A73BB
  • editorOverviewRuler.rangeHighlightForeground#D4D2E070
  • editorOverviewRuler.selectionHighlightForeground#B6AFCF70
  • editorOverviewRuler.warningForeground#97591B
  • editorOverviewRuler.wordHighlightForeground#D4D2E070
  • editorOverviewRuler.wordHighlightStrongForeground#D4D2E070
  • editorRuler.foreground#D4D2E070
  • editorSuggestWidget.background#fffcd7
  • editorSuggestWidget.border#D2C6D0
  • editorSuggestWidget.focusHighlightForeground#22311B
  • editorSuggestWidget.foreground#A2AA9F
  • editorSuggestWidget.highlightForeground#22311B
  • editorSuggestWidget.selectedBackground#2D178280
  • editorSuggestWidget.selectedForeground#22311B
  • editorUnicodeHighlight.background#D4D2E070
  • editorWarning.foreground#97591B
  • editorWhitespace.foreground#D4D2E070
  • editorWidget.background#fffcd7
  • editorWidget.border#D2C6D0
  • editorWidget.foreground#22311B
  • errorForeground#9D1616
  • extensionButton.prominentBackground#2D1782aa
  • extensionButton.prominentForeground#22311B
  • extensionButton.prominentHoverBackground#2D1782
  • focusBorder#D2C6D0
  • foreground#22311B
  • gitDecoration.addedResourceForeground#1C641C
  • gitDecoration.conflictingResourceForeground#97591B
  • gitDecoration.deletedResourceForeground#9D1616
  • gitDecoration.ignoredResourceForeground#A2AA9F
  • gitDecoration.modifiedResourceForeground#2A73BB
  • gitDecoration.renamedResourceForeground#431ED7
  • gitDecoration.untrackedResourceForeground#2B3E23
  • input.background#fffcd7
  • input.border#A2AA9F
  • input.foreground#22311B
  • input.placeholderForeground#A2AA9F
  • inputOption.activeBorder#431ED7
  • inputValidation.errorBorder#9D1616
  • inputValidation.infoBorder#2A73BB
  • inputValidation.warningBorder#97591B
  • list.activeSelectionBackground#2D178270
  • list.activeSelectionForeground#22311B
  • list.dropBackground#cdc7bb
  • list.dropBetweenBackground#D2C6D0
  • list.errorForeground#9D1616
  • list.focusBackground#2D178250
  • list.focusForeground#22311B
  • list.highlightForeground#431ED7
  • list.hoverBackground#2D178220
  • list.hoverForeground#22311B
  • list.inactiveFocusBackground#fffbdd
  • list.inactiveSelectionBackground#2D178260
  • list.inactiveSelectionForeground#2B3E23
  • list.warningForeground#97591B
  • listFilterWidget.background#cdc7bb
  • listFilterWidget.noMatchesOutline#9D1616
  • listFilterWidget.outline#D2C6D0
  • merge.border#D2C6D0
  • merge.currentContentBackground#2A73BB20
  • merge.currentHeaderBackground#2A73BB40
  • merge.incomingContentBackground#1C641C20
  • merge.incomingHeaderBackground#1C641C40
  • mergeEditor.change.background#97591B
  • notificationLink.foreground#2A73BB
  • notifications.background#fffbdd
  • notifications.border#D2C6D0
  • notifications.foreground#22311B
  • notificationsErrorIcon.foreground#9D1616
  • notificationsInfoIcon.foreground#2A73BB
  • notificationsWarningIcon.foreground#97591B
  • panel.background#fffbdd
  • panel.border#431ED7
  • panelInput.border#A2AA9F
  • panelTitle.activeBorder#431ED7
  • panelTitle.activeForeground#22311B
  • panelTitle.inactiveForeground#A2AA9F
  • peekView.border#2D1782
  • peekViewEditor.background#fffcd7
  • peekViewEditor.matchHighlightBackground#CF96C470
  • peekViewResult.background#fffcd7
  • peekViewResult.fileForeground#22311B
  • peekViewResult.lineForeground#22311B
  • peekViewResult.matchHighlightBackground#D4D2E070
  • peekViewResult.selectionBackground#fffbdd
  • peekViewResult.selectionForeground#22311B
  • peekViewTitle.background#fffcd7
  • peekViewTitleDescription.foreground#2B3E23
  • peekViewTitleLabel.foreground#22311B
  • pickerGroup.border#2D1782
  • pickerGroup.foreground#3A4E32
  • progressBar.background#431ED7
  • selection.background#2D178250
  • settings.checkboxBackground#fffcd7
  • settings.checkboxBorder#D2C6D0
  • settings.checkboxForeground#22311B
  • settings.dropdownBackground#fffcd7
  • settings.dropdownBorder#D2C6D0
  • settings.dropdownForeground#22311B
  • settings.focusedRowBackground#D4D2E070
  • settings.focusedRowBorder#A2AA9F
  • settings.headerBorder#D2C6D0
  • settings.headerForeground#22311B
  • settings.inactiveSelectedItemBorder#A2AA9F
  • settings.modifiedItemIndicator#97591B
  • settings.numberInputBackground#fffcd7
  • settings.numberInputBorder#A2AA9F
  • settings.numberInputForeground#22311B
  • settings.rowHoverBackground#D4D2E070
  • settings.settingsHeaderHoverForeground#22311B
  • settings.textInputBackground#fffcd7
  • settings.textInputBorder#A2AA9F
  • settings.textInputForeground#22311B
  • sideBar.background#fffcd7
  • sideBarActivityBarTop.border#D2C6D0
  • sideBarSectionHeader.background#fffbdd
  • sideBarSectionHeader.border#D2C6D0
  • sideBarStickyScroll.background#fffcd7
  • sideBarStickyScroll.border#D2C6D0
  • sideBarStickyScroll.shadow#D2C6D0
  • sideBarTitle.background#fffcd7
  • sideBarTitle.foreground#22311B
  • statusBar.background#2D1782
  • statusBar.debuggingBackground#97591B
  • statusBar.debuggingForeground#22311B
  • statusBar.foreground#22311B
  • statusBar.noFolderBackground#2B3E23
  • statusBar.noFolderForeground#E1DFE1
  • statusBarItem.activeBackground#2D1782aa
  • statusBarItem.errorBackground#9D1616
  • statusBarItem.errorForeground#22311B
  • statusBarItem.errorHoverBackground#9D1616aa
  • statusBarItem.hoverBackground#2D1782aa
  • statusBarItem.prominentBackground#2D1782aa
  • statusBarItem.prominentForeground#E1DFE1
  • statusBarItem.prominentHoverBackground#2D1782aa
  • statusBarItem.prominentHoverForeground#E1DFE1
  • statusBarItem.remoteBackground#431ED7
  • statusBarItem.remoteForeground#22311B
  • statusBarItem.remoteHoverBackground#431ED7aa
  • statusBarItem.warningBackground#97591B
  • statusBarItem.warningForeground#22311B
  • statusBarItem.warningHoverBackground#97591Baa
  • tab.activeBackground#fffbdd
  • tab.activeBorderTop#431ED7
  • tab.activeForeground#22311B
  • tab.border#D2C6D0
  • tab.hoverBackground#fffbdd80
  • tab.hoverForeground#22311B
  • tab.inactiveBackground#fffcd7
  • tab.inactiveForeground#A2AA9F
  • tab.selectedBackground#D4D2E070
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#665F7A
  • terminal.ansiBrightBlack#444444
  • terminal.ansiBrightBlue#9E7BFF
  • terminal.ansiBrightCyan#00AAA0
  • terminal.ansiBrightGreen#00B00B
  • terminal.ansiBrightMagenta#CE6CFF
  • terminal.ansiBrightRed#D96A00
  • terminal.ansiBrightWhite#898900
  • terminal.ansiBrightYellow#9F8600
  • terminal.ansiCyan#00A79E
  • terminal.ansiGreen#00AB08
  • terminal.ansiMagenta#C75BFF
  • terminal.ansiRed#E96600
  • terminal.ansiWhite#C47400
  • terminal.ansiYellow#AA8900
  • terminal.background#fffcd7
  • terminal.border#D2C6D0
  • terminal.foreground#22311B
  • terminal.inactiveSelectionBackground#B6AFCF70
  • terminal.selectionBackground#B6AFCF70
  • textBlockQuote.background#cdc7bb
  • textBlockQuote.border#D2C6D0
  • textCodeBlock.background#cdc7bb
  • textLink.activeForeground#2A73BB
  • textLink.foreground#2D1782
  • textPreformat.background#cdc7bb
  • textPreformat.foreground#22311B
  • textSeparator.foreground#22311B
  • titleBar.activeBackground#fffbdd
  • titleBar.activeForeground#22311B
  • titleBar.inactiveBackground#fffbdd
  • titleBar.inactiveForeground#A2AA9F
  • widget.border#D2C6D0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#22311B
meta.diff, meta.diff.header#A2AA9F
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#5E3B57
emphasisitalic
strongbold
invalid#9D1616strikethrough
invalid.deprecated#22311Bunderline italic
header#5E3B57
source.ini, source.ignore, source#2B3E23
markup.inserted#5E3B57
markup.deleted#9D1616
markup.changed#2A73BB
markup.error#9D1616
markup.underlineunderline
markup.bold#97591Bbold
markup.heading#431ED7bold
markup.italic#2B3E23italic
markup.inline.raw, markup.raw.restructuredtext#431ED7
markup.underline.link, markup.underline.link.image, markup.quote#2A73BB
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#2D1782
meta.separator.markdown#431ED7
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#3A4D32
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#97591B
entity.name.class, entity.name.type.class, entity.other.inherited-class#2D1782
entity.name.tag, entity.other.attribute-name.parent-selector#4B446A
entity.other.attribute-name#2D1782
entity.name.function, meta.function-call, meta.method-call, meta.method#431ED7
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#573D52
support#33452B
entity.name, variable.other.key#431ED7
entity.name.type#3C3653
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#3E2F46
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#4E6444
entity.other.attribute-name.class.css#431ED7
storage.class, storage.type#2D1782
storage.modifier#3D5035
comment, punctuation.definition.comment, unused.comment, wildcard.comment#A2AA9F
constant#5E3B57
constant.other.color#2A263B
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#25331F
constant.other.date, constant.other.timestamp#415638
keyword.operator#544050
keyword.other.unit#35482E
keyword.control, keyword.other.template, keyword.other.substitution#382334
keyword.other.this#5E3B57
keyword.control.import, keyword.control.from#43323C
keyword.control.new, keyword.operator.new, keyword.other.important.css#2D1782
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#3E2831
meta.attribute-selector.scss#4B6340
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#4B446A
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#483D5C
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#2D1782
support.constant.property-value.css, constant.numeric.css#2B3E23
keyword.control.at-rule.apply.tailwind#43323C
keyword.control.at-rule.tailwind.tailwind#382334
keyword.control.at-rule.layer.tailwind#3E2831
meta.selector#4B6340
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#515B4D
punctuation.definition.constant.restructuredtext#5E3B57
string.quoted.docstring.multi#431ED7
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#515B4D
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#483D5C
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#C47400
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#07B300
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#566756
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#4C5648
punctuation.definition.directive.restructuredtext#5E3B57
variable#543B4F
variable.other.alias.yaml#543B4Funderline
variable.language, variable.parameter.function.language.special#25331F
variable.other.constant#4C3441
support.variable#543B4F
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#5A3F4C
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#97591B
support.function, support.type.property-name#3D5C3E
storage#415638
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#AA8900
punctuation.definition.group.capture.regexp#E96600
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#E96600
punctuation.definition.character-class.regexp#9F8600
punctuation.definition.group.regexp#9E7BFF
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#E96600
meta.assertion.look-ahead.regexp#9E7BFF
source.json meta.structure.dictionary.json support.type.property-name.json#431ED7
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#2D1782
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#2A73BB
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#97591B
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#9D1616
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#1C641C
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#431ED7
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#2D1782
token.info-token#2A73BB
token.warn-token#97591B
token.error-token#9D1616
token.debug-token#97591B