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#2E313370
  • activityBar.activeBorder#A4BF73
  • activityBar.background#383D3D
  • activityBar.foreground#E6E5E5
  • activityBar.inactiveForeground#607482
  • activityBarBadge.background#87C4BD
  • activityBarBadge.foreground#232424
  • activityBarTop.foreground#E6E5E5
  • badge.background#87C4BD
  • badge.foreground#232424
  • breadcrumb.activeForeground#E6E5E5
  • breadcrumb.activeSelectionForeground#E6E5E5
  • breadcrumb.background#383D3D
  • breadcrumb.focusForeground#E6E5E5
  • breadcrumb.foreground#607482
  • breadcrumbPicker.background#383D3D
  • button.background#87C4BDdb
  • button.foreground#232424
  • button.hoverBackground#87C4BD
  • button.secondaryBackground#A4BF73db
  • button.secondaryForeground#232424
  • button.secondaryHoverBackground#A4BF73
  • checkbox.background#252825
  • checkbox.foreground#E6E5E5
  • debugToolBar.background#A0A6AB
  • debugToolBar.foreground#232424
  • descriptionForeground#D3D5D5
  • diffEditor.diagonalFill#A0A6AB
  • diffEditor.insertedLineBackground#A0A6AB40
  • diffEditor.insertedTextBackground#A0A6AB50
  • diffEditor.insertedTextBorder#A0A6AB
  • diffEditor.removedLineBackground#C7858540
  • diffEditor.removedTextBackground#C7858550
  • diffEditor.removedTextBorder#C78585
  • diffEditorGutter.insertedLineBackground#A0A6AB
  • diffEditorGutter.removedLineBackground#C78585
  • disabledForeground#607482
  • dropdown.background#262222
  • dropdown.border#413D39
  • dropdown.foreground#E6E5E5
  • editor.background#252825
  • editor.findMatchBackground#4F5F5570
  • editor.findMatchForeground#E6E5E5
  • editor.findMatchHighlightBackground#2E313370
  • editor.findMatchHighlightForeground#E6E5E5
  • editor.findRangeHighlightBackground#4E4D4670
  • editor.foldBackground#2E313370
  • editor.foldPlaceholderForeground#E6E5E5
  • editor.foreground#E6E5E5
  • editor.hoverHighlightBackground#2E313370
  • editor.inactiveSelectionBackground#4E4D4670
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#D3D5D5
  • editor.rangeHighlightBackground#2E313370
  • editor.selectionBackground#4E4D4670
  • editor.selectionForeground#E6E5E5
  • editor.selectionHighlightBackground#4E4D4670
  • editor.snippetFinalTabstopHighlightBackground#2E313370
  • editor.snippetTabstopHighlightBackground#2E313370
  • editor.symbolHighlightBackground#2E313370
  • editor.wordHighlightBackground#2E313370
  • editor.wordHighlightStrongBackground#2E313350
  • editor.wordHighlightTextBackground#2E313370
  • editorCodeLens.foreground#607482
  • editorCursor.background#2E313370
  • editorCursor.foreground#A4BF73
  • editorError.foreground#C78585
  • editorGroup.border#413D39
  • editorGroup.dropBackground#262222
  • editorGroup.emptyBackground#252825
  • editorGroupHeader.border#413D39
  • editorGroupHeader.tabsBackground#252825
  • editorGutter.addedBackground#539453
  • editorGutter.background#252825
  • editorGutter.commentRangeForeground#607482
  • editorGutter.deletedBackground#C78585
  • editorGutter.modifiedBackground#A0A6AB
  • editorHint.foreground#539453
  • editorHoverWidget.background#252825
  • editorHoverWidget.border#413D39
  • editorHoverWidget.foreground#E6E5E5
  • editorHoverWidget.highlightForeground#E6E5E5
  • editorHoverWidget.statusBarBackground#252825
  • editorIndentGuide.activeBackground1#A4BF73
  • editorIndentGuide.background1#2E313370
  • editorInfo.foreground#A0A6AB
  • editorLineNumber.activeForeground#A4BF73
  • editorLineNumber.dimmedForeground#60748290
  • editorLineNumber.foreground#607482
  • editorLink.activeForeground#A0A6AB
  • editorMarkerNavigation.background#383D3D
  • editorMarkerNavigationError.background#383D3D
  • editorMarkerNavigationWarning.background#383D3D
  • editorMultiCursor.primary.background#2E313370
  • editorMultiCursor.primary.foreground#A4BF73
  • editorMultiCursor.secondary.background#2E313370
  • editorMultiCursor.secondary.foreground#E6E5E5
  • editorOverviewRuler.addedForeground#539453
  • editorOverviewRuler.border#413D39
  • editorOverviewRuler.commentForeground#607482
  • editorOverviewRuler.commonContentForeground#E6E5E5
  • editorOverviewRuler.currentContentForeground#A0A6AB
  • editorOverviewRuler.deletedForeground#C78585
  • editorOverviewRuler.errorForeground#C78585
  • editorOverviewRuler.findMatchForeground#E6E5E5
  • editorOverviewRuler.incomingContentForeground#539453
  • editorOverviewRuler.infoForeground#A0A6AB
  • editorOverviewRuler.modifiedForeground#A0A6AB
  • editorOverviewRuler.rangeHighlightForeground#2E313370
  • editorOverviewRuler.selectionHighlightForeground#4E4D4670
  • editorOverviewRuler.warningForeground#C4A687
  • editorOverviewRuler.wordHighlightForeground#2E313370
  • editorOverviewRuler.wordHighlightStrongForeground#2E313370
  • editorRuler.foreground#2E313370
  • editorSuggestWidget.background#252825
  • editorSuggestWidget.border#413D39
  • editorSuggestWidget.focusHighlightForeground#E6E5E5
  • editorSuggestWidget.foreground#607482
  • editorSuggestWidget.highlightForeground#E6E5E5
  • editorSuggestWidget.selectedBackground#87C4BD80
  • editorSuggestWidget.selectedForeground#E6E5E5
  • editorUnicodeHighlight.background#2E313370
  • editorWarning.foreground#C4A687
  • editorWhitespace.foreground#2E313370
  • editorWidget.background#252825
  • editorWidget.border#413D39
  • editorWidget.foreground#E6E5E5
  • errorForeground#C78585
  • extensionButton.prominentBackground#87C4BDaa
  • extensionButton.prominentForeground#232424
  • extensionButton.prominentHoverBackground#87C4BD
  • focusBorder#413D39
  • foreground#E6E5E5
  • gitDecoration.addedResourceForeground#539453
  • gitDecoration.conflictingResourceForeground#C4A687
  • gitDecoration.deletedResourceForeground#C78585
  • gitDecoration.ignoredResourceForeground#607482
  • gitDecoration.modifiedResourceForeground#A0A6AB
  • gitDecoration.renamedResourceForeground#A4BF73
  • gitDecoration.untrackedResourceForeground#D3D5D5
  • input.background#252825
  • input.border#607482
  • input.foreground#E6E5E5
  • input.placeholderForeground#607482
  • inputOption.activeBorder#A4BF73
  • inputValidation.errorBorder#C78585
  • inputValidation.infoBorder#A0A6AB
  • inputValidation.warningBorder#C4A687
  • list.activeSelectionBackground#87C4BD70
  • list.activeSelectionForeground#E6E5E5
  • list.dropBackground#262222
  • list.dropBetweenBackground#413D39
  • list.errorForeground#C78585
  • list.focusBackground#87C4BD50
  • list.focusForeground#E6E5E5
  • list.highlightForeground#A4BF73
  • list.hoverBackground#87C4BD20
  • list.hoverForeground#E6E5E5
  • list.inactiveFocusBackground#383D3D
  • list.inactiveSelectionBackground#87C4BD60
  • list.inactiveSelectionForeground#D3D5D5
  • list.warningForeground#C4A687
  • listFilterWidget.background#262222
  • listFilterWidget.noMatchesOutline#C78585
  • listFilterWidget.outline#413D39
  • merge.border#413D39
  • merge.currentContentBackground#A0A6AB20
  • merge.currentHeaderBackground#A0A6AB40
  • merge.incomingContentBackground#53945320
  • merge.incomingHeaderBackground#53945340
  • mergeEditor.change.background#C4A687
  • notificationLink.foreground#A0A6AB
  • notifications.background#383D3D
  • notifications.border#413D39
  • notifications.foreground#E6E5E5
  • notificationsErrorIcon.foreground#C78585
  • notificationsInfoIcon.foreground#A0A6AB
  • notificationsWarningIcon.foreground#C4A687
  • panel.background#383D3D
  • panel.border#A4BF73
  • panelInput.border#607482
  • panelTitle.activeBorder#A4BF73
  • panelTitle.activeForeground#E6E5E5
  • panelTitle.inactiveForeground#607482
  • peekView.border#87C4BD
  • peekViewEditor.background#252825
  • peekViewEditor.matchHighlightBackground#4F5F5570
  • peekViewResult.background#252825
  • peekViewResult.fileForeground#E6E5E5
  • peekViewResult.lineForeground#E6E5E5
  • peekViewResult.matchHighlightBackground#2E313370
  • peekViewResult.selectionBackground#383D3D
  • peekViewResult.selectionForeground#E6E5E5
  • peekViewTitle.background#252825
  • peekViewTitleDescription.foreground#D3D5D5
  • peekViewTitleLabel.foreground#E6E5E5
  • pickerGroup.border#87C4BD
  • pickerGroup.foreground#C5E7C0
  • progressBar.background#A4BF73
  • selection.background#87C4BD50
  • settings.checkboxBackground#252825
  • settings.checkboxBorder#413D39
  • settings.checkboxForeground#E6E5E5
  • settings.dropdownBackground#252825
  • settings.dropdownBorder#413D39
  • settings.dropdownForeground#E6E5E5
  • settings.focusedRowBackground#2E313370
  • settings.focusedRowBorder#607482
  • settings.headerBorder#413D39
  • settings.headerForeground#E6E5E5
  • settings.inactiveSelectedItemBorder#607482
  • settings.modifiedItemIndicator#C4A687
  • settings.numberInputBackground#252825
  • settings.numberInputBorder#607482
  • settings.numberInputForeground#E6E5E5
  • settings.rowHoverBackground#2E313370
  • settings.settingsHeaderHoverForeground#E6E5E5
  • settings.textInputBackground#252825
  • settings.textInputBorder#607482
  • settings.textInputForeground#E6E5E5
  • sideBar.background#252825
  • sideBarActivityBarTop.border#413D39
  • sideBarSectionHeader.background#383D3D
  • sideBarSectionHeader.border#413D39
  • sideBarStickyScroll.background#252825
  • sideBarStickyScroll.border#413D39
  • sideBarStickyScroll.shadow#413D39
  • sideBarTitle.background#252825
  • sideBarTitle.foreground#E6E5E5
  • statusBar.background#87C4BD
  • statusBar.debuggingBackground#C4A687
  • statusBar.debuggingForeground#232424
  • statusBar.foreground#232424
  • statusBar.noFolderBackground#D3D5D5
  • statusBar.noFolderForeground#232424
  • statusBarItem.activeBackground#87C4BDaa
  • statusBarItem.errorBackground#C78585
  • statusBarItem.errorForeground#232424
  • statusBarItem.errorHoverBackground#C78585aa
  • statusBarItem.hoverBackground#87C4BDaa
  • statusBarItem.prominentBackground#87C4BDaa
  • statusBarItem.prominentForeground#232424
  • statusBarItem.prominentHoverBackground#87C4BDaa
  • statusBarItem.prominentHoverForeground#232424
  • statusBarItem.remoteBackground#A4BF73
  • statusBarItem.remoteForeground#232424
  • statusBarItem.remoteHoverBackground#A4BF73aa
  • statusBarItem.warningBackground#C4A687
  • statusBarItem.warningForeground#232424
  • statusBarItem.warningHoverBackground#C4A687aa
  • tab.activeBackground#383D3D
  • tab.activeBorderTop#A4BF73
  • tab.activeForeground#E6E5E5
  • tab.border#413D39
  • tab.hoverBackground#383D3D80
  • tab.hoverForeground#E6E5E5
  • tab.inactiveBackground#252825
  • tab.inactiveForeground#607482
  • tab.selectedBackground#2E313370
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#9C7CFF
  • terminal.ansiBrightBlack#343434
  • terminal.ansiBrightBlue#997BFC
  • terminal.ansiBrightCyan#59EFFA
  • terminal.ansiBrightGreen#A4E682
  • terminal.ansiBrightMagenta#FF20D7
  • terminal.ansiBrightRed#F89BB5
  • terminal.ansiBrightWhite#FEFEFE
  • terminal.ansiBrightYellow#ECD699
  • terminal.ansiCyan#209CA6
  • terminal.ansiGreen#50A126
  • terminal.ansiMagenta#FF18D7
  • terminal.ansiRed#FC487B
  • terminal.ansiWhite#F3F2ED
  • terminal.ansiYellow#B88700
  • terminal.background#252825
  • terminal.border#413D39
  • terminal.foreground#E6E5E5
  • terminal.inactiveSelectionBackground#4E4D4670
  • terminal.selectionBackground#4E4D4670
  • textBlockQuote.background#262222
  • textBlockQuote.border#413D39
  • textCodeBlock.background#262222
  • textLink.activeForeground#A0A6AB
  • textLink.foreground#87C4BD
  • textPreformat.background#262222
  • textPreformat.foreground#E6E5E5
  • textSeparator.foreground#E6E5E5
  • titleBar.activeBackground#383D3D
  • titleBar.activeForeground#E6E5E5
  • titleBar.inactiveBackground#383D3D
  • titleBar.inactiveForeground#607482
  • widget.border#413D39

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#E6E5E5
meta.diff, meta.diff.header#607482
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#B8BDE5
emphasisitalic
strongbold
invalid#C78585strikethrough
invalid.deprecated#E6E5E5underline italic
header#B8BDE5
source.ini, source.ignore, source#D3D5D5
markup.inserted#B8BDE5
markup.deleted#C78585
markup.changed#A0A6AB
markup.error#C78585
markup.underlineunderline
markup.bold#C4A687bold
markup.heading#A4BF73bold
markup.italic#D3D5D5italic
markup.inline.raw, markup.raw.restructuredtext#A4BF73
markup.underline.link, markup.underline.link.image, markup.quote#A0A6AB
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#87C4BD
meta.separator.markdown#A4BF73
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#C1D9E7
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#C4A687
entity.name.class, entity.name.type.class, entity.other.inherited-class#87C4BD
entity.name.tag, entity.other.attribute-name.parent-selector#DAF0D6
entity.other.attribute-name#87C4BD
entity.name.function, meta.function-call, meta.method-call, meta.method#A4BF73
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#E0C9BD
support#9DA5DC
entity.name, variable.other.key#A4BF73
entity.name.type#E3C9BA
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#E1D8B7
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#EEDFD8
entity.other.attribute-name.class.css#A4BF73
storage.class, storage.type#87C4BD
storage.modifier#C5CAE7
comment, punctuation.definition.comment, unused.comment, wildcard.comment#607482
constant#B8BDE5
constant.other.color#AAB1DF
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#ABE2DB
constant.other.date, constant.other.timestamp#D9E7C1
keyword.operator#DDEBDB
keyword.other.unit#D0E2B1
keyword.control, keyword.other.template, keyword.other.substitution#83D3C8
keyword.other.this#B8BDE5
keyword.control.import, keyword.control.from#B2DCE1
keyword.control.new, keyword.operator.new, keyword.other.important.css#87C4BD
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#A3CBDC
meta.attribute-selector.scss#CCD0EA
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#DAF0D6
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#BEE4BF
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#87C4BD
support.constant.property-value.css, constant.numeric.css#D3D5D5
keyword.control.at-rule.apply.tailwind#B2DCE1
keyword.control.at-rule.tailwind.tailwind#83D3C8
keyword.control.at-rule.layer.tailwind#A3CBDC
meta.selector#CCD0EA
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#F0F1F4
punctuation.definition.constant.restructuredtext#B8BDE5
string.quoted.docstring.multi#A4BF73
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#F0F1F4
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#BEE4BF
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#F3F2ED
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#E8E7EE
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#D8D8E4
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#B8BDE5
variable#B9DFC7
variable.other.alias.yaml#B9DFC7underline
variable.language, variable.parameter.function.language.special#ABE2DB
variable.other.constant#D8EEEA
support.variable#B9DFC7
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#C8E4E2
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#C4A687
support.function, support.type.property-name#D4DAED
storage#C9CCE9
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#B88700
punctuation.definition.group.capture.regexp#FC487B
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#FC487B
punctuation.definition.character-class.regexp#ECD699
punctuation.definition.group.regexp#997BFC
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#FC487B
meta.assertion.look-ahead.regexp#997BFC
source.json meta.structure.dictionary.json support.type.property-name.json#A4BF73
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#87C4BD
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#A0A6AB
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#C4A687
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#C78585
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#539453
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#A4BF73
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#87C4BD
token.info-token#A0A6AB
token.warn-token#C4A687
token.error-token#C78585
token.debug-token#C4A687