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#3B362B70
  • activityBar.activeBorder#E66F6B
  • activityBar.background#2C2C25
  • activityBar.foreground#DFECE4
  • activityBar.inactiveForeground#797170
  • activityBarBadge.background#71DB74
  • activityBarBadge.foreground#2A2829
  • activityBarTop.foreground#DFECE4
  • badge.background#71DB74
  • badge.foreground#2A2829
  • breadcrumb.activeForeground#DFECE4
  • breadcrumb.activeSelectionForeground#DFECE4
  • breadcrumb.background#2C2C25
  • breadcrumb.focusForeground#DFECE4
  • breadcrumb.foreground#797170
  • breadcrumbPicker.background#2C2C25
  • button.background#71DB74db
  • button.foreground#2A2829
  • button.hoverBackground#71DB74
  • button.secondaryBackground#E66F6Bdb
  • button.secondaryForeground#2A2829
  • button.secondaryHoverBackground#E66F6B
  • checkbox.background#282624
  • checkbox.foreground#DFECE4
  • debugToolBar.background#76A6D6
  • debugToolBar.foreground#2A2829
  • descriptionForeground#ECF3EF
  • diffEditor.diagonalFill#76A6D6
  • diffEditor.insertedLineBackground#76A6D640
  • diffEditor.insertedTextBackground#76A6D650
  • diffEditor.insertedTextBorder#76A6D6
  • diffEditor.removedLineBackground#E06C6C40
  • diffEditor.removedTextBackground#E06C6C50
  • diffEditor.removedTextBorder#E06C6C
  • diffEditorGutter.insertedLineBackground#76A6D6
  • diffEditorGutter.removedLineBackground#E06C6C
  • disabledForeground#797170
  • dropdown.background#222A25
  • dropdown.border#473942
  • dropdown.foreground#DFECE4
  • editor.background#282624
  • editor.findMatchBackground#763E3C70
  • editor.findMatchForeground#DFECE4
  • editor.findMatchHighlightBackground#3B362B70
  • editor.findMatchHighlightForeground#DFECE4
  • editor.findRangeHighlightBackground#5D3C5170
  • editor.foldBackground#3B362B70
  • editor.foldPlaceholderForeground#DFECE4
  • editor.foreground#DFECE4
  • editor.hoverHighlightBackground#3B362B70
  • editor.inactiveSelectionBackground#5D3C5170
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#ECF3EF
  • editor.rangeHighlightBackground#3B362B70
  • editor.selectionBackground#5D3C5170
  • editor.selectionForeground#DFECE4
  • editor.selectionHighlightBackground#5D3C5170
  • editor.snippetFinalTabstopHighlightBackground#3B362B70
  • editor.snippetTabstopHighlightBackground#3B362B70
  • editor.symbolHighlightBackground#3B362B70
  • editor.wordHighlightBackground#3B362B70
  • editor.wordHighlightStrongBackground#3B362B50
  • editor.wordHighlightTextBackground#3B362B70
  • editorCodeLens.foreground#797170
  • editorCursor.background#3B362B70
  • editorCursor.foreground#E66F6B
  • editorError.foreground#E06C6C
  • editorGroup.border#473942
  • editorGroup.dropBackground#222A25
  • editorGroup.emptyBackground#282624
  • editorGroupHeader.border#473942
  • editorGroupHeader.tabsBackground#282624
  • editorGutter.addedBackground#34A234
  • editorGutter.background#282624
  • editorGutter.commentRangeForeground#797170
  • editorGutter.deletedBackground#E06C6C
  • editorGutter.modifiedBackground#76A6D6
  • editorHint.foreground#34A234
  • editorHoverWidget.background#282624
  • editorHoverWidget.border#473942
  • editorHoverWidget.foreground#DFECE4
  • editorHoverWidget.highlightForeground#DFECE4
  • editorHoverWidget.statusBarBackground#282624
  • editorIndentGuide.activeBackground1#E66F6B
  • editorIndentGuide.background1#3B362B70
  • editorInfo.foreground#76A6D6
  • editorLineNumber.activeForeground#E66F6B
  • editorLineNumber.dimmedForeground#79717090
  • editorLineNumber.foreground#797170
  • editorLink.activeForeground#76A6D6
  • editorMarkerNavigation.background#2C2C25
  • editorMarkerNavigationError.background#2C2C25
  • editorMarkerNavigationWarning.background#2C2C25
  • editorMultiCursor.primary.background#3B362B70
  • editorMultiCursor.primary.foreground#E66F6B
  • editorMultiCursor.secondary.background#3B362B70
  • editorMultiCursor.secondary.foreground#DFECE4
  • editorOverviewRuler.addedForeground#34A234
  • editorOverviewRuler.border#473942
  • editorOverviewRuler.commentForeground#797170
  • editorOverviewRuler.commonContentForeground#DFECE4
  • editorOverviewRuler.currentContentForeground#76A6D6
  • editorOverviewRuler.deletedForeground#E06C6C
  • editorOverviewRuler.errorForeground#E06C6C
  • editorOverviewRuler.findMatchForeground#DFECE4
  • editorOverviewRuler.incomingContentForeground#34A234
  • editorOverviewRuler.infoForeground#76A6D6
  • editorOverviewRuler.modifiedForeground#76A6D6
  • editorOverviewRuler.rangeHighlightForeground#3B362B70
  • editorOverviewRuler.selectionHighlightForeground#5D3C5170
  • editorOverviewRuler.warningForeground#DBA671
  • editorOverviewRuler.wordHighlightForeground#3B362B70
  • editorOverviewRuler.wordHighlightStrongForeground#3B362B70
  • editorRuler.foreground#3B362B70
  • editorSuggestWidget.background#282624
  • editorSuggestWidget.border#473942
  • editorSuggestWidget.focusHighlightForeground#DFECE4
  • editorSuggestWidget.foreground#797170
  • editorSuggestWidget.highlightForeground#DFECE4
  • editorSuggestWidget.selectedBackground#71DB7480
  • editorSuggestWidget.selectedForeground#DFECE4
  • editorUnicodeHighlight.background#3B362B70
  • editorWarning.foreground#DBA671
  • editorWhitespace.foreground#3B362B70
  • editorWidget.background#282624
  • editorWidget.border#473942
  • editorWidget.foreground#DFECE4
  • errorForeground#E06C6C
  • extensionButton.prominentBackground#71DB74aa
  • extensionButton.prominentForeground#2A2829
  • extensionButton.prominentHoverBackground#71DB74
  • focusBorder#473942
  • foreground#DFECE4
  • gitDecoration.addedResourceForeground#34A234
  • gitDecoration.conflictingResourceForeground#DBA671
  • gitDecoration.deletedResourceForeground#E06C6C
  • gitDecoration.ignoredResourceForeground#797170
  • gitDecoration.modifiedResourceForeground#76A6D6
  • gitDecoration.renamedResourceForeground#E66F6B
  • gitDecoration.untrackedResourceForeground#ECF3EF
  • input.background#282624
  • input.border#797170
  • input.foreground#DFECE4
  • input.placeholderForeground#797170
  • inputOption.activeBorder#E66F6B
  • inputValidation.errorBorder#E06C6C
  • inputValidation.infoBorder#76A6D6
  • inputValidation.warningBorder#DBA671
  • list.activeSelectionBackground#71DB7470
  • list.activeSelectionForeground#DFECE4
  • list.dropBackground#222A25
  • list.dropBetweenBackground#473942
  • list.errorForeground#E06C6C
  • list.focusBackground#71DB7450
  • list.focusForeground#DFECE4
  • list.highlightForeground#E66F6B
  • list.hoverBackground#71DB7420
  • list.hoverForeground#DFECE4
  • list.inactiveFocusBackground#2C2C25
  • list.inactiveSelectionBackground#71DB7460
  • list.inactiveSelectionForeground#ECF3EF
  • list.warningForeground#DBA671
  • listFilterWidget.background#222A25
  • listFilterWidget.noMatchesOutline#E06C6C
  • listFilterWidget.outline#473942
  • merge.border#473942
  • merge.currentContentBackground#76A6D620
  • merge.currentHeaderBackground#76A6D640
  • merge.incomingContentBackground#34A23420
  • merge.incomingHeaderBackground#34A23440
  • mergeEditor.change.background#DBA671
  • notificationLink.foreground#76A6D6
  • notifications.background#2C2C25
  • notifications.border#473942
  • notifications.foreground#DFECE4
  • notificationsErrorIcon.foreground#E06C6C
  • notificationsInfoIcon.foreground#76A6D6
  • notificationsWarningIcon.foreground#DBA671
  • panel.background#2C2C25
  • panel.border#E66F6B
  • panelInput.border#797170
  • panelTitle.activeBorder#E66F6B
  • panelTitle.activeForeground#DFECE4
  • panelTitle.inactiveForeground#797170
  • peekView.border#71DB74
  • peekViewEditor.background#282624
  • peekViewEditor.matchHighlightBackground#763E3C70
  • peekViewResult.background#282624
  • peekViewResult.fileForeground#DFECE4
  • peekViewResult.lineForeground#DFECE4
  • peekViewResult.matchHighlightBackground#3B362B70
  • peekViewResult.selectionBackground#2C2C25
  • peekViewResult.selectionForeground#DFECE4
  • peekViewTitle.background#282624
  • peekViewTitleDescription.foreground#ECF3EF
  • peekViewTitleLabel.foreground#DFECE4
  • pickerGroup.border#71DB74
  • pickerGroup.foreground#CAEDBA
  • progressBar.background#E66F6B
  • selection.background#71DB7450
  • settings.checkboxBackground#282624
  • settings.checkboxBorder#473942
  • settings.checkboxForeground#DFECE4
  • settings.dropdownBackground#282624
  • settings.dropdownBorder#473942
  • settings.dropdownForeground#DFECE4
  • settings.focusedRowBackground#3B362B70
  • settings.focusedRowBorder#797170
  • settings.headerBorder#473942
  • settings.headerForeground#DFECE4
  • settings.inactiveSelectedItemBorder#797170
  • settings.modifiedItemIndicator#DBA671
  • settings.numberInputBackground#282624
  • settings.numberInputBorder#797170
  • settings.numberInputForeground#DFECE4
  • settings.rowHoverBackground#3B362B70
  • settings.settingsHeaderHoverForeground#DFECE4
  • settings.textInputBackground#282624
  • settings.textInputBorder#797170
  • settings.textInputForeground#DFECE4
  • sideBar.background#282624
  • sideBarActivityBarTop.border#473942
  • sideBarSectionHeader.background#2C2C25
  • sideBarSectionHeader.border#473942
  • sideBarStickyScroll.background#282624
  • sideBarStickyScroll.border#473942
  • sideBarStickyScroll.shadow#473942
  • sideBarTitle.background#282624
  • sideBarTitle.foreground#DFECE4
  • statusBar.background#71DB74
  • statusBar.debuggingBackground#DBA671
  • statusBar.debuggingForeground#2A2829
  • statusBar.foreground#2A2829
  • statusBar.noFolderBackground#ECF3EF
  • statusBar.noFolderForeground#2A2829
  • statusBarItem.activeBackground#71DB74aa
  • statusBarItem.errorBackground#E06C6C
  • statusBarItem.errorForeground#2A2829
  • statusBarItem.errorHoverBackground#E06C6Caa
  • statusBarItem.hoverBackground#71DB74aa
  • statusBarItem.prominentBackground#71DB74aa
  • statusBarItem.prominentForeground#2A2829
  • statusBarItem.prominentHoverBackground#71DB74aa
  • statusBarItem.prominentHoverForeground#2A2829
  • statusBarItem.remoteBackground#E66F6B
  • statusBarItem.remoteForeground#2A2829
  • statusBarItem.remoteHoverBackground#E66F6Baa
  • statusBarItem.warningBackground#DBA671
  • statusBarItem.warningForeground#2A2829
  • statusBarItem.warningHoverBackground#DBA671aa
  • tab.activeBackground#2C2C25
  • tab.activeBorderTop#E66F6B
  • tab.activeForeground#DFECE4
  • tab.border#473942
  • tab.hoverBackground#2C2C2580
  • tab.hoverForeground#DFECE4
  • tab.inactiveBackground#282624
  • tab.inactiveForeground#797170
  • tab.selectedBackground#3B362B70
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#8F7CEF
  • terminal.ansiBrightBlack#424242
  • terminal.ansiBrightBlue#A293F1
  • terminal.ansiBrightCyan#4BE2E6
  • terminal.ansiBrightGreen#34F22B
  • terminal.ansiBrightMagenta#FC91D2
  • terminal.ansiBrightRed#ED8E72
  • terminal.ansiBrightWhite#FBFBFA
  • terminal.ansiBrightYellow#E7A081
  • terminal.ansiCyan#2D9FA2
  • terminal.ansiGreen#04AA00
  • terminal.ansiMagenta#E45FB0
  • terminal.ansiRed#E07050
  • terminal.ansiWhite#F4F3F0
  • terminal.ansiYellow#CC7853
  • terminal.background#282624
  • terminal.border#473942
  • terminal.foreground#DFECE4
  • terminal.inactiveSelectionBackground#5D3C5170
  • terminal.selectionBackground#5D3C5170
  • textBlockQuote.background#222A25
  • textBlockQuote.border#473942
  • textCodeBlock.background#222A25
  • textLink.activeForeground#76A6D6
  • textLink.foreground#71DB74
  • textPreformat.background#222A25
  • textPreformat.foreground#DFECE4
  • textSeparator.foreground#DFECE4
  • titleBar.activeBackground#2C2C25
  • titleBar.activeForeground#DFECE4
  • titleBar.inactiveBackground#2C2C25
  • titleBar.inactiveForeground#797170
  • widget.border#473942

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#DFECE4
meta.diff, meta.diff.header#797170
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#EDEFBD
emphasisitalic
strongbold
invalid#E06C6Cstrikethrough
invalid.deprecated#DFECE4underline italic
header#EDEFBD
source.ini, source.ignore, source#ECF3EF
markup.inserted#EDEFBD
markup.deleted#E06C6C
markup.changed#76A6D6
markup.error#E06C6C
markup.underlineunderline
markup.bold#DBA671bold
markup.heading#E66F6Bbold
markup.italic#ECF3EFitalic
markup.inline.raw, markup.raw.restructuredtext#E66F6B
markup.underline.link, markup.underline.link.image, markup.quote#76A6D6
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#71DB74
meta.separator.markdown#E66F6B
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#EAECBC
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#DBA671
entity.name.class, entity.name.type.class, entity.other.inherited-class#71DB74
entity.name.tag, entity.other.attribute-name.parent-selector#F0C6E1
entity.other.attribute-name#71DB74
entity.name.function, meta.function-call, meta.method-call, meta.method#E66F6B
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#EEDACE
support#E6E8A1
entity.name, variable.other.key#E66F6B
entity.name.type#DAECBC
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#B1E2A1
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#D1F0D2
entity.other.attribute-name.class.css#E66F6B
storage.class, storage.type#71DB74
storage.modifier#E7B3B1
comment, punctuation.definition.comment, unused.comment, wildcard.comment#797170
constant#EDEFBD
constant.other.color#E7E9AA
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#E7CE93
constant.other.date, constant.other.timestamp#C4EAB4
keyword.operator#D6E2C0
keyword.other.unit#BAE8A6
keyword.control, keyword.other.template, keyword.other.substitution#78DE7B
keyword.other.this#EDEFBD
keyword.control.import, keyword.control.from#A9DAB7
keyword.control.new, keyword.operator.new, keyword.other.important.css#71DB74
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#AEEAC5
meta.attribute-selector.scss#EED3C3
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#F0C6E1
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#E9B9CA
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#71DB74
support.constant.property-value.css, constant.numeric.css#ECF3EF
keyword.control.at-rule.apply.tailwind#A9DAB7
keyword.control.at-rule.tailwind.tailwind#78DE7B
keyword.control.at-rule.layer.tailwind#AEEAC5
meta.selector#EED3C3
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#E9F1EC
punctuation.definition.constant.restructuredtext#EDEFBD
string.quoted.docstring.multi#E66F6B
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#E9F1EC
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#E9B9CA
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#F4F3F0
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#D4E3DE
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#E9F1ED
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#EDEFBD
variable#E7DABB
variable.other.alias.yaml#E7DABBunderline
variable.language, variable.parameter.function.language.special#E7CE93
variable.other.constant#E6E3B2
support.variable#E7DABB
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#DCE4B9
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#DBA671
support.function, support.type.property-name#E7EFCC
storage#C3EED3
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#CC7853
punctuation.definition.group.capture.regexp#E07050
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#E07050
punctuation.definition.character-class.regexp#E7A081
punctuation.definition.group.regexp#A293F1
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#E07050
meta.assertion.look-ahead.regexp#A293F1
source.json meta.structure.dictionary.json support.type.property-name.json#E66F6B
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#71DB74
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#76A6D6
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#DBA671
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#E06C6C
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#34A234
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#E66F6B
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#71DB74
token.info-token#76A6D6
token.warn-token#DBA671
token.error-token#E06C6C
token.debug-token#DBA671