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.background#12121f
  • activityBar.dropBorder#9486e4
  • activityBar.foreground#daddff
  • activityBar.inactiveForeground#63658b
  • activityBarBadge.background#94aef9
  • activityBarBadge.foreground#12121f
  • badge.background#94aef9
  • badge.foreground#12121f
  • breadcrumb.activeSelectionForeground#daddff
  • breadcrumb.background#12121f
  • breadcrumb.focusForeground#daddff
  • breadcrumb.foreground#a0a3cc
  • breadcrumbPicker.background#1d1d2f
  • button.background#9486e4
  • button.foreground#12121f
  • button.hoverBackground#9f95e9
  • button.secondaryBackground#4f5071
  • button.secondaryForeground#daddff
  • button.secondaryHoverBackground#595b7e
  • debugExceptionWidget.background#1d1d2f
  • debugExceptionWidget.border#bd4277
  • debugTokenExpression.boolean#9486e4
  • debugTokenExpression.error#bd4277
  • debugTokenExpression.name#87bff7
  • debugTokenExpression.number#74d2b7
  • debugTokenExpression.string#ecdfac
  • debugTokenExpression.value#e5dca4
  • debugToolBar.background#171728
  • descriptionForeground#d0d3ff
  • diffEditor.insertedTextBackground#74d2b720
  • diffEditor.removedTextBackground#bd427720
  • disabledForeground#63658b
  • dropdown.background#1d1d2f
  • dropdown.border#4f5071
  • dropdown.foreground#daddff
  • dropdown.listBackground#222236
  • editor.background#12121f
  • editor.findMatchBackground#e5dca450
  • editor.findMatchHighlightBackground#e5dca430
  • editor.findRangeHighlightBackground#22223650
  • editor.foreground#daddff
  • editor.hoverHighlightBackground#22223680
  • editor.inactiveSelectionBackground#22223699
  • editor.lineHighlightBackground#171728
  • editor.lineHighlightBorder#22223600
  • editor.rangeHighlightBackground#17172899
  • editor.selectionBackground#29293fAA
  • editor.selectionHighlightBackground#222236AA
  • editor.snippetFinalTabstopHighlightBorder#74d2b7
  • editor.snippetTabstopHighlightBackground#22223680
  • editor.wordHighlightBackground#22223680
  • editor.wordHighlightStrongBackground#29293f80
  • editorBracketMatch.background#29293f
  • editorBracketMatch.border#9486e4
  • editorCodeLens.foreground#63658b
  • editorCursor.foreground#88a4f7
  • editorError.foreground#bd4277
  • editorGroup.border#222236
  • editorGroup.dropBackground#1d1d2fAA
  • editorGroupHeader.noTabsBackground#12121f
  • editorGroupHeader.tabsBackground#12121f
  • editorGroupHeader.tabsBorder#22223600
  • editorGutter.addedBackground#74d2b7A0
  • editorGutter.background#12121f
  • editorGutter.deletedBackground#bd4277A0
  • editorGutter.modifiedBackground#87bff7A0
  • editorHint.foreground#94aef9
  • editorHoverWidget.background#1d1d2f
  • editorHoverWidget.border#222236
  • editorIndentGuide.activeBackground#4f5071
  • editorIndentGuide.background#222236
  • editorInfo.foreground#87bff7
  • editorLineNumber.activeForeground#94aef9
  • editorLineNumber.foreground#4f5071
  • editorLink.activeForeground#88a4f7
  • editorOverviewRuler.addedForeground#74d2b7A0
  • editorOverviewRuler.border#12121f
  • editorOverviewRuler.commonContentForeground#63658b
  • editorOverviewRuler.currentContentForeground#74d2b7
  • editorOverviewRuler.deletedForeground#bd4277A0
  • editorOverviewRuler.errorForeground#bd4277
  • editorOverviewRuler.findMatchForeground#e5dca480
  • editorOverviewRuler.incomingContentForeground#87bff7
  • editorOverviewRuler.infoForeground#87bff7
  • editorOverviewRuler.modifiedForeground#87bff7A0
  • editorOverviewRuler.rangeHighlightForeground#94aef980
  • editorOverviewRuler.selectionHighlightForeground#9486e480
  • editorOverviewRuler.warningForeground#e5dca4
  • editorOverviewRuler.wordHighlightForeground#daddff80
  • editorOverviewRuler.wordHighlightStrongForeground#daddffA0
  • editorRuler.foreground#222236
  • editorSuggestWidget.background#1d1d2f
  • editorSuggestWidget.border#222236
  • editorSuggestWidget.foreground#daddff
  • editorSuggestWidget.highlightForeground#94aef9
  • editorSuggestWidget.selectedBackground#29293f
  • editorWarning.foreground#e5dca4
  • editorWhitespace.foreground#4f507140
  • editorWidget.background#171728
  • editorWidget.border#222236
  • errorForeground#bd4277
  • extensionBadge.remoteBackground#9486e4
  • extensionBadge.remoteForeground#12121f
  • extensionButton.prominentBackground#94aef9
  • extensionButton.prominentForeground#12121f
  • extensionButton.prominentHoverBackground#88a4f7
  • focusBorder#9486e4
  • foreground#daddff
  • input.background#1d1d2f
  • input.border#4f5071
  • input.foreground#daddff
  • input.placeholderForeground#63658b
  • inputOption.activeBackground#9486e460
  • inputOption.activeBorder#88a4f7
  • inputValidation.errorBackground#bd4277
  • inputValidation.errorBorder#bf4a7f
  • inputValidation.errorForeground#daddff
  • inputValidation.infoBackground#87bff7
  • inputValidation.infoBorder#8fc8fa
  • inputValidation.infoForeground#12121f
  • inputValidation.warningBackground#e5dca4
  • inputValidation.warningBorder#ecdfac
  • inputValidation.warningForeground#12121f
  • list.activeSelectionBackground#222236
  • list.activeSelectionForeground#daddff
  • list.dropBackground#1d1d2fAA
  • list.errorForeground#bd4277
  • list.focusBackground#29293FAA
  • list.focusForeground#daddff
  • list.highlightForeground#94aef9
  • list.hoverBackground#222236AA
  • list.hoverForeground#daddff
  • list.inactiveFocusBackground#222236
  • list.inactiveSelectionBackground#1d1d2f
  • list.inactiveSelectionForeground#cccfff
  • list.warningForeground#e5dca4
  • menu.background#1d1d2f
  • menu.foreground#daddff
  • menu.selectionBackground#29293f
  • menu.selectionBorder#9486e400
  • menu.selectionForeground#daddff
  • menu.separatorBackground#4f5071
  • menubar.selectionBackground#29293f
  • menubar.selectionForeground#daddff
  • merge.commonContentBackground#63658b40
  • merge.commonHeaderBackground#63658b80
  • merge.currentContentBackground#74d2b740
  • merge.currentHeaderBackground#74d2b780
  • merge.incomingContentBackground#87bff740
  • merge.incomingHeaderBackground#87bff780
  • notificationCenterHeader.background#222236
  • notificationCenterHeader.foreground#daddff
  • notificationLink.foreground#88a4f7
  • notifications.background#1d1d2f
  • notifications.border#29293f
  • notifications.foreground#daddff
  • notificationToast.border#29293f
  • panel.background#12121f
  • panel.border#222236
  • panel.dropBorder#9486e4
  • panelInput.border#4f5071
  • panelTitle.activeBorder#9486e4
  • panelTitle.activeForeground#daddff
  • panelTitle.inactiveForeground#63658b
  • peekView.border#9486e4
  • peekViewEditor.background#1d1d2f
  • peekViewEditor.matchHighlightBackground#e5dca440
  • peekViewResult.background#171728
  • peekViewResult.fileForeground#daddff
  • peekViewResult.lineForeground#d0d3ff
  • peekViewResult.matchHighlightBackground#e5dca440
  • peekViewResult.selectionBackground#29293f
  • peekViewResult.selectionForeground#daddff
  • peekViewTitle.background#222236
  • peekViewTitleDescription.foreground#d0d3ff
  • peekViewTitleLabel.foreground#daddff
  • pickerGroup.border#9486e4
  • pickerGroup.foreground#94aef9
  • problemsErrorIcon.foreground#bd4277
  • problemsInfoIcon.foreground#87bff7
  • problemsWarningIcon.foreground#e5dca4
  • progressBar.background#94aef9
  • scrollbar.shadow#12121f80
  • scrollbarSlider.activeBackground#9f95e990
  • scrollbarSlider.background#63658b90
  • scrollbarSlider.hoverBackground#9486e490
  • selection.background#9486e460
  • settings.checkboxBackground#1d1d2f
  • settings.checkboxBorder#4f5071
  • settings.dropdownBackground#1d1d2f
  • settings.dropdownListBorder#4f5071
  • settings.headerForeground#daddff
  • settings.modifiedItemIndicator#9486e4
  • settings.numberInputBackground#1d1d2f
  • settings.textInputBackground#1d1d2f
  • sideBar.background#12121f
  • sideBar.border#222236
  • sideBar.foreground#cccfff
  • sideBarSectionHeader.background#171728
  • sideBarSectionHeader.border#222236
  • sideBarSectionHeader.foreground#daddff
  • sideBarTitle.foreground#daddff
  • statusBar.background#12121f
  • statusBar.border#22223600
  • statusBar.debuggingBackground#e2b88d
  • statusBar.debuggingForeground#12121f
  • statusBar.foreground#d0d3ff
  • statusBar.noFolderBackground#12121f
  • statusBar.noFolderForeground#d0d3ff
  • statusBarItem.activeBackground#29293fCC
  • statusBarItem.errorBackground#bd4277
  • statusBarItem.errorForeground#daddff
  • statusBarItem.hoverBackground#222236CC
  • statusBarItem.prominentBackground#1d1d2f
  • statusBarItem.prominentHoverBackground#29293f
  • statusBarItem.remoteBackground#9486e4
  • statusBarItem.remoteForeground#12121f
  • tab.activeBackground#12121f
  • tab.activeBorder#88a4f7
  • tab.activeForeground#daddff
  • tab.border#222236
  • tab.inactiveBackground#12121f
  • tab.inactiveForeground#63658b
  • tab.unfocusedActiveForeground#a0a3cc
  • tab.unfocusedInactiveForeground#4f5071
  • terminal.ansiBlack#1d1d2f
  • terminal.ansiBlue#87bff7
  • terminal.ansiBrightBlack#4f5071
  • terminal.ansiBrightBlue#8fc8fa
  • terminal.ansiBrightCyan#aaecf8
  • terminal.ansiBrightGreen#7ed7c0
  • terminal.ansiBrightMagenta#9f95e9
  • terminal.ansiBrightRed#bf4a7f
  • terminal.ansiBrightWhite#daddff
  • terminal.ansiBrightYellow#ecdfac
  • terminal.ansiCyan#9be9f8
  • terminal.ansiGreen#74d2b7
  • terminal.ansiMagenta#9486e4
  • terminal.ansiRed#bd4277
  • terminal.ansiWhite#d4d7ff
  • terminal.ansiYellow#e5dca4
  • terminal.background#12121f
  • terminal.foreground#daddff
  • terminal.selectionBackground#29293fAA
  • terminalCursor.background#1d1d2f
  • terminalCursor.foreground#88a4f7
  • textBlockQuote.background#1d1d2f
  • textBlockQuote.border#9486e4
  • textCodeBlock.background#1d1d2f
  • textLink.activeForeground#88a4f7
  • textLink.foreground#94aef9
  • textPreformat.foreground#e5dca4
  • textSeparator.foreground#4f5071
  • titleBar.activeBackground#12121f
  • titleBar.activeForeground#daddff
  • titleBar.border#22223600
  • titleBar.inactiveBackground#12121f
  • titleBar.inactiveForeground#63658b
  • walkThrough.embeddedEditorBackground#1d1d2f
  • widget.shadow#12121f30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#63658bitalic
string, punctuation.definition.string#e5dca4
string.regexp#e2b88d
constant.numeric#74d2b7
constant.language, constant.other.enum.php#9486e4
constant.character, constant.other#94aef9
variable#d4d7ff
variable.language.this#c45a99italic
keyword, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.word#9f95e9
keyword.operator#88a4f7
keyword.control.import#9f95e9
keyword.control#9f95e9italic
storage.type, storage.modifier#c45a99
storage.modifier.package, storage.modifier.import#daddff
entity.name.type, entity.other.inherited-class, support.class, support.type.primitive#88a4f7
entity.name.function#87bff7
variable.parameter#d0d3ffitalic
support.function#8fc8fa
support.constant#94aef9
punctuation#a0a3cc
source.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.array.json support.type.property-name.json#87bff7
source.json meta.structure.dictionary.value.json string.quoted.double.json#e5dca4
source.json meta.structure.dictionary.json constant.language.json#9486e4
punctuation.definition.heading.markdown#9f95e9
markup.inline.raw.string.markdown#e5dca4
markup.bold#e2b88dbold
markup.italic#9486e4italic
markup.heading#87bff7bold
markup.underline.link#88a4f7
markup.inserted#74d2b7
markup.deleted#bd4277
markup.changed#e2b88d
entity.name.tag.html, entity.name.tag.xml, entity.name.tag.jsx, entity.name.tag.tsx#bd4277
support.class.component.jsx, support.class.component.tsx#88a4f7
entity.other.attribute-name.html, entity.other.attribute-name.xml, entity.other.attribute-name.id.html, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx#d864aa
text.html.basic string.quoted.double.html, text.html.basic string.quoted.single.html, string.quoted.double.html, string.quoted.single.html, string.unquoted.html, text.html.basic meta.tag string.quoted.double, text.html.basic meta.tag string.quoted.single, text.html.derivative meta.tag string.quoted.double, text.html.derivative meta.tag string.quoted.single, source.js.jsx meta.tag.jsx string.quoted, source.ts.tsx meta.tag.tsx string.quoted, meta.tag string.quoted.double, meta.tag string.quoted.single#87bff7
punctuation.definition.string.begin.html, punctuation.definition.string.end.html, punctuation.definition.string.begin.xml, punctuation.definition.string.end.xml, text.html.derivative punctuation.definition.string.begin, text.html.derivative punctuation.definition.string.end, source.js.jsx meta.tag.jsx punctuation.definition.string.begin, source.js.jsx meta.tag.jsx punctuation.definition.string.end, source.ts.tsx meta.tag.tsx punctuation.definition.string.begin, source.ts.tsx meta.tag.tsx punctuation.definition.string.end, meta.tag punctuation.definition.string.begin, meta.tag punctuation.definition.string.end#87bff7
comment.block.html#63658bitalic
entity.name.tag.css#bd4277
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#d864aa
support.type.property-name.css, meta.property-name.css#9be9f8
support.constant.property-value.css, meta.property-value.css, support.constant.color.w3c-standard-color-name.css#87bff7
constant.numeric.css#e2b88d
keyword.other.unit.css#e2b88d
source.css string.quoted.single, source.css string.quoted.double#87bff7
source.css punctuation.definition.string.begin, source.css punctuation.definition.string.end#87bff7
comment.block.css#63658bitalic
entity.name.function.macro.rust#8fc8fa
entity.name.type.rust#88a4f7
entity.name.module.rust#94aef9
entity.name.type.struct.rust#88a4f7
entity.name.type.enum.rust#88a4f7
entity.name.type.trait.rust#9be9f8
entity.name.lifetime.rust#d0d3ffitalic
keyword.other.crate.rust#c45a99
entity.name.type.self.rust#c45a99italic
entity.name.super.rust#c45a99
keyword.operator.comparison.rust, keyword.operator.arithmetic.rust, keyword.operator.bitwise.rust, keyword.operator.logical.rust, keyword.operator.misc.rust, punctuation.operator.assignment.rust#88a4f7
punctuation.separator.colon.rust, punctuation.separator.comma.rust, punctuation.separator.type-classification.rust, keyword.operator.arrow.skinny.rust#a0a3cc
meta.attribute.rust punctuation.definition.attribute.rust#7ed7c0
string.interpolated.rust constant.other.placeholder.rust#e2b88d
Eidolon Theme by Eurico Magalhães Neto - VS Code Theme