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#20222C70
  • activityBar.activeBorder#7586DC
  • activityBar.background#272121
  • activityBar.foreground#EBEBEB
  • activityBar.inactiveForeground#5D667E
  • activityBarBadge.background#7587D7
  • activityBarBadge.foreground#1D1B1C
  • activityBarTop.foreground#EBEBEB
  • badge.background#7587D7
  • badge.foreground#1D1B1C
  • breadcrumb.activeForeground#EBEBEB
  • breadcrumb.activeSelectionForeground#EBEBEB
  • breadcrumb.background#272121
  • breadcrumb.focusForeground#EBEBEB
  • breadcrumb.foreground#5D667E
  • breadcrumbPicker.background#272121
  • button.background#7587D7db
  • button.foreground#1D1B1C
  • button.hoverBackground#7587D7
  • button.secondaryBackground#7586DCdb
  • button.secondaryForeground#1D1B1C
  • button.secondaryHoverBackground#7586DC
  • checkbox.background#181B1B
  • checkbox.foreground#EBEBEB
  • debugToolBar.background#9DA6AF
  • debugToolBar.foreground#1D1B1C
  • descriptionForeground#E0DCDC
  • diffEditor.diagonalFill#9DA6AF
  • diffEditor.insertedLineBackground#9DA6AF40
  • diffEditor.insertedTextBackground#9DA6AF50
  • diffEditor.insertedTextBorder#9DA6AF
  • diffEditor.removedLineBackground#DB717140
  • diffEditor.removedTextBackground#DB717150
  • diffEditor.removedTextBorder#DB7171
  • diffEditorGutter.insertedLineBackground#9DA6AF
  • diffEditorGutter.removedLineBackground#DB7171
  • disabledForeground#5D667E
  • dropdown.background#191C17
  • dropdown.border#38352E
  • dropdown.foreground#EBEBEB
  • editor.background#181B1B
  • editor.findMatchBackground#65373470
  • editor.findMatchForeground#EBEBEB
  • editor.findMatchHighlightBackground#20222C70
  • editor.findMatchHighlightForeground#EBEBEB
  • editor.findRangeHighlightBackground#4E324570
  • editor.foldBackground#20222C70
  • editor.foldPlaceholderForeground#EBEBEB
  • editor.foreground#EBEBEB
  • editor.hoverHighlightBackground#20222C70
  • editor.inactiveSelectionBackground#4E324570
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#E0DCDC
  • editor.rangeHighlightBackground#20222C70
  • editor.selectionBackground#4E324570
  • editor.selectionForeground#EBEBEB
  • editor.selectionHighlightBackground#4E324570
  • editor.snippetFinalTabstopHighlightBackground#20222C70
  • editor.snippetTabstopHighlightBackground#20222C70
  • editor.symbolHighlightBackground#20222C70
  • editor.wordHighlightBackground#20222C70
  • editor.wordHighlightStrongBackground#20222C50
  • editor.wordHighlightTextBackground#20222C70
  • editorCodeLens.foreground#5D667E
  • editorCursor.background#20222C70
  • editorCursor.foreground#7586DC
  • editorError.foreground#DB7171
  • editorGroup.border#38352E
  • editorGroup.dropBackground#191C17
  • editorGroup.emptyBackground#181B1B
  • editorGroupHeader.border#38352E
  • editorGroupHeader.tabsBackground#181B1B
  • editorGutter.addedBackground#389438
  • editorGutter.background#181B1B
  • editorGutter.commentRangeForeground#5D667E
  • editorGutter.deletedBackground#DB7171
  • editorGutter.modifiedBackground#9DA6AF
  • editorHint.foreground#389438
  • editorHoverWidget.background#181B1B
  • editorHoverWidget.border#38352E
  • editorHoverWidget.foreground#EBEBEB
  • editorHoverWidget.highlightForeground#EBEBEB
  • editorHoverWidget.statusBarBackground#181B1B
  • editorIndentGuide.activeBackground1#7586DC
  • editorIndentGuide.background1#20222C70
  • editorInfo.foreground#9DA6AF
  • editorLineNumber.activeForeground#7586DC
  • editorLineNumber.dimmedForeground#5D667E90
  • editorLineNumber.foreground#5D667E
  • editorLink.activeForeground#9DA6AF
  • editorMarkerNavigation.background#272121
  • editorMarkerNavigationError.background#272121
  • editorMarkerNavigationWarning.background#272121
  • editorMultiCursor.primary.background#20222C70
  • editorMultiCursor.primary.foreground#7586DC
  • editorMultiCursor.secondary.background#20222C70
  • editorMultiCursor.secondary.foreground#EBEBEB
  • editorOverviewRuler.addedForeground#389438
  • editorOverviewRuler.border#38352E
  • editorOverviewRuler.commentForeground#5D667E
  • editorOverviewRuler.commonContentForeground#EBEBEB
  • editorOverviewRuler.currentContentForeground#9DA6AF
  • editorOverviewRuler.deletedForeground#DB7171
  • editorOverviewRuler.errorForeground#DB7171
  • editorOverviewRuler.findMatchForeground#EBEBEB
  • editorOverviewRuler.incomingContentForeground#389438
  • editorOverviewRuler.infoForeground#9DA6AF
  • editorOverviewRuler.modifiedForeground#9DA6AF
  • editorOverviewRuler.rangeHighlightForeground#20222C70
  • editorOverviewRuler.selectionHighlightForeground#4E324570
  • editorOverviewRuler.warningForeground#D7A675
  • editorOverviewRuler.wordHighlightForeground#20222C70
  • editorOverviewRuler.wordHighlightStrongForeground#20222C70
  • editorRuler.foreground#20222C70
  • editorSuggestWidget.background#181B1B
  • editorSuggestWidget.border#38352E
  • editorSuggestWidget.focusHighlightForeground#EBEBEB
  • editorSuggestWidget.foreground#5D667E
  • editorSuggestWidget.highlightForeground#EBEBEB
  • editorSuggestWidget.selectedBackground#7587D780
  • editorSuggestWidget.selectedForeground#EBEBEB
  • editorUnicodeHighlight.background#20222C70
  • editorWarning.foreground#D7A675
  • editorWhitespace.foreground#20222C70
  • editorWidget.background#181B1B
  • editorWidget.border#38352E
  • editorWidget.foreground#EBEBEB
  • errorForeground#DB7171
  • extensionButton.prominentBackground#7587D7aa
  • extensionButton.prominentForeground#1D1B1C
  • extensionButton.prominentHoverBackground#7587D7
  • focusBorder#38352E
  • foreground#EBEBEB
  • gitDecoration.addedResourceForeground#389438
  • gitDecoration.conflictingResourceForeground#D7A675
  • gitDecoration.deletedResourceForeground#DB7171
  • gitDecoration.ignoredResourceForeground#5D667E
  • gitDecoration.modifiedResourceForeground#9DA6AF
  • gitDecoration.renamedResourceForeground#7586DC
  • gitDecoration.untrackedResourceForeground#E0DCDC
  • input.background#181B1B
  • input.border#5D667E
  • input.foreground#EBEBEB
  • input.placeholderForeground#5D667E
  • inputOption.activeBorder#7586DC
  • inputValidation.errorBorder#DB7171
  • inputValidation.infoBorder#9DA6AF
  • inputValidation.warningBorder#D7A675
  • list.activeSelectionBackground#7587D770
  • list.activeSelectionForeground#EBEBEB
  • list.dropBackground#191C17
  • list.dropBetweenBackground#38352E
  • list.errorForeground#DB7171
  • list.focusBackground#7587D750
  • list.focusForeground#EBEBEB
  • list.highlightForeground#7586DC
  • list.hoverBackground#7587D720
  • list.hoverForeground#EBEBEB
  • list.inactiveFocusBackground#272121
  • list.inactiveSelectionBackground#7587D760
  • list.inactiveSelectionForeground#E0DCDC
  • list.warningForeground#D7A675
  • listFilterWidget.background#191C17
  • listFilterWidget.noMatchesOutline#DB7171
  • listFilterWidget.outline#38352E
  • merge.border#38352E
  • merge.currentContentBackground#9DA6AF20
  • merge.currentHeaderBackground#9DA6AF40
  • merge.incomingContentBackground#38943820
  • merge.incomingHeaderBackground#38943840
  • mergeEditor.change.background#D7A675
  • notificationLink.foreground#9DA6AF
  • notifications.background#272121
  • notifications.border#38352E
  • notifications.foreground#EBEBEB
  • notificationsErrorIcon.foreground#DB7171
  • notificationsInfoIcon.foreground#9DA6AF
  • notificationsWarningIcon.foreground#D7A675
  • panel.background#272121
  • panel.border#7586DC
  • panelInput.border#5D667E
  • panelTitle.activeBorder#7586DC
  • panelTitle.activeForeground#EBEBEB
  • panelTitle.inactiveForeground#5D667E
  • peekView.border#7587D7
  • peekViewEditor.background#181B1B
  • peekViewEditor.matchHighlightBackground#65373470
  • peekViewResult.background#181B1B
  • peekViewResult.fileForeground#EBEBEB
  • peekViewResult.lineForeground#EBEBEB
  • peekViewResult.matchHighlightBackground#20222C70
  • peekViewResult.selectionBackground#272121
  • peekViewResult.selectionForeground#EBEBEB
  • peekViewTitle.background#181B1B
  • peekViewTitleDescription.foreground#E0DCDC
  • peekViewTitleLabel.foreground#EBEBEB
  • pickerGroup.border#7587D7
  • pickerGroup.foreground#E5DCB8
  • progressBar.background#7586DC
  • selection.background#7587D750
  • settings.checkboxBackground#181B1B
  • settings.checkboxBorder#38352E
  • settings.checkboxForeground#EBEBEB
  • settings.dropdownBackground#181B1B
  • settings.dropdownBorder#38352E
  • settings.dropdownForeground#EBEBEB
  • settings.focusedRowBackground#20222C70
  • settings.focusedRowBorder#5D667E
  • settings.headerBorder#38352E
  • settings.headerForeground#EBEBEB
  • settings.inactiveSelectedItemBorder#5D667E
  • settings.modifiedItemIndicator#D7A675
  • settings.numberInputBackground#181B1B
  • settings.numberInputBorder#5D667E
  • settings.numberInputForeground#EBEBEB
  • settings.rowHoverBackground#20222C70
  • settings.settingsHeaderHoverForeground#EBEBEB
  • settings.textInputBackground#181B1B
  • settings.textInputBorder#5D667E
  • settings.textInputForeground#EBEBEB
  • sideBar.background#181B1B
  • sideBarActivityBarTop.border#38352E
  • sideBarSectionHeader.background#272121
  • sideBarSectionHeader.border#38352E
  • sideBarStickyScroll.background#181B1B
  • sideBarStickyScroll.border#38352E
  • sideBarStickyScroll.shadow#38352E
  • sideBarTitle.background#181B1B
  • sideBarTitle.foreground#EBEBEB
  • statusBar.background#7587D7
  • statusBar.debuggingBackground#D7A675
  • statusBar.debuggingForeground#1D1B1C
  • statusBar.foreground#1D1B1C
  • statusBar.noFolderBackground#E0DCDC
  • statusBar.noFolderForeground#1D1B1C
  • statusBarItem.activeBackground#7587D7aa
  • statusBarItem.errorBackground#DB7171
  • statusBarItem.errorForeground#1D1B1C
  • statusBarItem.errorHoverBackground#DB7171aa
  • statusBarItem.hoverBackground#7587D7aa
  • statusBarItem.prominentBackground#7587D7aa
  • statusBarItem.prominentForeground#1D1B1C
  • statusBarItem.prominentHoverBackground#7587D7aa
  • statusBarItem.prominentHoverForeground#1D1B1C
  • statusBarItem.remoteBackground#7586DC
  • statusBarItem.remoteForeground#1D1B1C
  • statusBarItem.remoteHoverBackground#7586DCaa
  • statusBarItem.warningBackground#D7A675
  • statusBarItem.warningForeground#1D1B1C
  • statusBarItem.warningHoverBackground#D7A675aa
  • tab.activeBackground#272121
  • tab.activeBorderTop#7586DC
  • tab.activeForeground#EBEBEB
  • tab.border#38352E
  • tab.hoverBackground#27212180
  • tab.hoverForeground#EBEBEB
  • tab.inactiveBackground#181B1B
  • tab.inactiveForeground#5D667E
  • tab.selectedBackground#20222C70
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#8A8DAF
  • terminal.ansiBrightBlack#3C3C3C
  • terminal.ansiBrightBlue#C7CAEF
  • terminal.ansiBrightCyan#62D0E8
  • terminal.ansiBrightGreen#80E7A1
  • terminal.ansiBrightMagenta#F0C9DF
  • terminal.ansiBrightRed#F0AAAD
  • terminal.ansiBrightWhite#FBFBFA
  • terminal.ansiBrightYellow#F2ECDB
  • terminal.ansiCyan#3794A8
  • terminal.ansiGreen#3FB464
  • terminal.ansiMagenta#B57299
  • terminal.ansiRed#CE696D
  • terminal.ansiWhite#F7F5F3
  • terminal.ansiYellow#A29263
  • terminal.background#181B1B
  • terminal.border#38352E
  • terminal.foreground#EBEBEB
  • terminal.inactiveSelectionBackground#4E324570
  • terminal.selectionBackground#4E324570
  • textBlockQuote.background#191C17
  • textBlockQuote.border#38352E
  • textCodeBlock.background#191C17
  • textLink.activeForeground#9DA6AF
  • textLink.foreground#7587D7
  • textPreformat.background#191C17
  • textPreformat.foreground#EBEBEB
  • textSeparator.foreground#EBEBEB
  • titleBar.activeBackground#272121
  • titleBar.activeForeground#EBEBEB
  • titleBar.inactiveBackground#272121
  • titleBar.inactiveForeground#5D667E
  • widget.border#38352E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#EBEBEB
meta.diff, meta.diff.header#5D667E
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#EECDE5
emphasisitalic
strongbold
invalid#DB7171strikethrough
invalid.deprecated#EBEBEBunderline italic
header#EECDE5
source.ini, source.ignore, source#E0DCDC
markup.inserted#EECDE5
markup.deleted#DB7171
markup.changed#9DA6AF
markup.error#DB7171
markup.underlineunderline
markup.bold#D7A675bold
markup.heading#7586DCbold
markup.italic#E0DCDCitalic
markup.inline.raw, markup.raw.restructuredtext#7586DC
markup.underline.link, markup.underline.link.image, markup.quote#9DA6AF
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#7587D7
meta.separator.markdown#7586DC
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#E7DFC1
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#D7A675
entity.name.class, entity.name.type.class, entity.other.inherited-class#7587D7
entity.name.tag, entity.other.attribute-name.parent-selector#EAC7E0
entity.other.attribute-name#7587D7
entity.name.function, meta.function-call, meta.method-call, meta.method#7586DC
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#BCC2E1
support#99A5DB
entity.name, variable.other.key#7586DC
entity.name.type#E7C1DA
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#E0B3C2
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#DCCDEA
entity.other.attribute-name.class.css#7586DC
storage.class, storage.type#7587D7
storage.modifier#C1E6CC
comment, punctuation.definition.comment, unused.comment, wildcard.comment#5D667E
constant#EECDE5
constant.other.color#E4DBB4
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#BA90DA
constant.other.date, constant.other.timestamp#E4DCB9
keyword.operator#C0DDC9
keyword.other.unit#B1BAE2
keyword.control, keyword.other.template, keyword.other.substitution#E1A8CE
keyword.other.this#EECDE5
keyword.control.import, keyword.control.from#DFAEC5
keyword.control.new, keyword.operator.new, keyword.other.important.css#7587D7
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#DDA1B9
meta.attribute-selector.scss#E0CFED
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#EAC7E0
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#E4BECF
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#7587D7
support.constant.property-value.css, constant.numeric.css#E0DCDC
keyword.control.at-rule.apply.tailwind#DFAEC5
keyword.control.at-rule.tailwind.tailwind#E1A8CE
keyword.control.at-rule.layer.tailwind#DDA1B9
meta.selector#E0CFED
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#D8DBE4
punctuation.definition.constant.restructuredtext#EECDE5
string.quoted.docstring.multi#7586DC
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#D8DBE4
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#E4BECF
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#F7F5F3
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#E2E1EA
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#FFFFFF
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#DBDDE6
punctuation.definition.directive.restructuredtext#EECDE5
variable#E2C0D8
variable.other.alias.yaml#E2C0D8underline
variable.language, variable.parameter.function.language.special#BA90DA
variable.other.constant#EACDD6
support.variable#E2C0D8
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#E0BDC1
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#D7A675
support.function, support.type.property-name#E7EDD4
storage#E2B9B6
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#A29263
punctuation.definition.group.capture.regexp#CE696D
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#CE696D
punctuation.definition.character-class.regexp#F2ECDB
punctuation.definition.group.regexp#C7CAEF
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#CE696D
meta.assertion.look-ahead.regexp#C7CAEF
source.json meta.structure.dictionary.json support.type.property-name.json#7586DC
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#7587D7
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#9DA6AF
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#D7A675
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#DB7171
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#389438
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#7586DC
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#7587D7
token.info-token#9DA6AF
token.warn-token#D7A675
token.error-token#DB7171
token.debug-token#D7A675