XELA Themes
Publisher: cybrdelicThemes in package: 196
A meticulously curated collection of 180+ high-quality XELA color themes for VS Code. Cleaned, optimized, and contrast-verified for professional coding environments.
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#0A142080
- activityBar.activeBorder#0099FF
- activityBar.activeFocusBorder#00000000
- activityBar.background#000000
- activityBar.border#00000000
- activityBar.dropBorder#5A9CC960
- activityBar.foreground#00D1FF
- activityBar.inactiveForeground#0066AA
- activityBarBadge.background#0099FF
- activityBarBadge.foreground#000000
- badge.background#0099FF
- badge.foreground#000000
- breadcrumb.activeSelectionForeground#7AB8E8
- breadcrumb.background#000000
- breadcrumb.focusForeground#8BA6C0
- breadcrumb.foreground#334455
- breadcrumbPicker.background#0A1015
- button.background#0099FF
- button.foreground#000000
- button.hoverBackground#00D1FF
- button.secondaryBackground#1A2835
- button.secondaryForeground#5A9CC9
- button.secondaryHoverBackground#2A4560
- charts.blue#7AB8E8
- charts.foreground#8BA6C0
- charts.green#80C0A0
- charts.lines#5A9CC9
- charts.orange#E8B570
- charts.purple#B586D4
- charts.red#C64040
- charts.yellow#D4A76A
- checkbox.background#0A1015
- checkbox.border#1A2835
- checkbox.foreground#8BA6C0
- commandCenter.activeForeground#5A9CC9
- commandCenter.background#050A10E0
- commandCenter.border#0A1420
- commandCenter.foreground#8BA6C0
- contrastBorder#00000000
- debugConsole.errorForeground#C64040
- debugConsole.infoForeground#7AB8E8
- debugConsole.sourceForeground#5A9CC9
- debugConsole.warningForeground#D4A76A
- debugConsoleInputIcon.foreground#7AB8E8
- debugIcon.breakpointForeground#D47A9A
- debugIcon.continueForeground#80C0A0
- debugIcon.disconnectForeground#D4A76A
- debugIcon.pauseForeground#D4A76A
- debugIcon.restartForeground#9ACCE0
- debugIcon.stepBackForeground#7AB8E8
- debugIcon.stepIntoForeground#5A9CC9
- debugIcon.stepOutForeground#6A9AC0
- debugIcon.stepOverForeground#7AB8E8
- debugIcon.stopForeground#C64040
- debugToolBar.background#0A1015
- diffEditor.border#1A2835
- diffEditor.diagonalFill#2A456030
- diffEditor.insertedLineBackground#80C0A01A
- diffEditor.insertedTextBackground#80C0A025
- diffEditor.insertedTextBorder#80C0A000
- diffEditor.removedLineBackground#D47A9A1A
- diffEditor.removedTextBackground#D47A9A25
- diffEditor.removedTextBorder#D47A9A00
- dropdown.background#001A33
- dropdown.border#0099FF
- dropdown.foreground#FFFFFF
- dropdown.listBackground#0A1015
- editor.background#000000
- editor.findMatchBackground#B586D440
- editor.findMatchBorder#B586D4
- editor.findMatchHighlightBackground#B586D425
- editor.findRangeHighlightBackground#B586D415
- editor.focusedStackFrameHighlightBackground#80C0A01A
- editor.foldBackground#0A101580
- editor.foreground#FFFFFF
- editor.inactiveSelectionBackground#0099FF20
- editor.lineHighlightBackground#001A3380
- editor.lineHighlightBorder#00000000
- editor.rangeHighlightBackground#5A9CC910
- editor.selectionBackground#0099FF50
- editor.selectionHighlightBackground#9966FF30
- editor.stackFrameHighlightBackground#E8B5701A
- editor.wordHighlightBackground#0099FF25
- editor.wordHighlightStrongBackground#0099FF40
- editorBracketHighlight.foreground1#7AB8E8
- editorBracketHighlight.foreground2#B586D4
- editorBracketHighlight.foreground3#80C0A0
- editorBracketHighlight.foreground4#6AB0D0
- editorBracketHighlight.foreground5#E8B570
- editorBracketHighlight.foreground6#D47A9A
- editorBracketMatch.background#0099FF40
- editorBracketMatch.border#00D1FF
- editorBracketPairGuide.activeBackground1#7AB8E854
- editorBracketPairGuide.activeBackground2#B586D454
- editorBracketPairGuide.activeBackground3#80C0A054
- editorBracketPairGuide.activeBackground4#6AB0D054
- editorBracketPairGuide.activeBackground5#E8B57054
- editorBracketPairGuide.activeBackground6#D47A9A54
- editorCodeLens.foreground#334455
- editorCursor.background#000000
- editorCursor.foreground#00D1FF
- editorError.foreground#D47A9A
- editorGroup.border#1A2835
- editorGroup.dropBackground#5A9CC920
- editorGroupHeader.border#0A1420
- editorGroupHeader.noTabsBackground#050A10
- editorGroupHeader.tabsBackground#050A10
- editorGroupHeader.tabsBorder#0A1420
- editorGutter.addedBackground#80C0A0A0
- editorGutter.background#050A10
- editorGutter.commentRangeForeground#334455
- editorGutter.deletedBackground#D47A9AE0
- editorGutter.modifiedBackground#5A9CC9A0
- editorHoverWidget.background#001A33
- editorHoverWidget.border#0099FF
- editorIndentGuide.activeBackground1#0099FF
- editorIndentGuide.background1#00336660
- editorInfo.foreground#00D1FF
- editorInlayHint.background#0A101580
- editorInlayHint.foreground#334455
- editorInlayHint.parameterBackground#0A101580
- editorInlayHint.parameterForeground#334455
- editorInlayHint.typeBackground#0A101580
- editorInlayHint.typeForeground#334455
- editorLightBulb.foreground#E8B570
- editorLightBulbAutoFix.foreground#80C0A0
- editorLineNumber.activeForeground#00D1FF
- editorLineNumber.dimmedForeground#1A2835
- editorLineNumber.foreground#0066AA
- editorLink.activeForeground#7AB8E8
- editorOverviewRuler.addedForeground#80C0A066
- editorOverviewRuler.commonContentForeground#334455
- editorOverviewRuler.currentContentForeground#80C0A0
- editorOverviewRuler.deletedForeground#D47A9A66
- editorOverviewRuler.errorForeground#D47A9AAB
- editorOverviewRuler.findMatchForeground#B586D487
- editorOverviewRuler.incomingContentForeground#5A9CC9
- editorOverviewRuler.infoForeground#5A9CC987
- editorOverviewRuler.modifiedForeground#5A9CC966
- editorOverviewRuler.warningForeground#E8B570AB
- editorRuler.foreground#1A2835
- editorStickyScroll.background#000000F2
- editorStickyScrollHover.background#0A1015
- editorSuggestWidget.background#0A1015
- editorSuggestWidget.border#1A2835
- editorSuggestWidget.foreground#8BA6C0
- editorSuggestWidget.highlightForeground#7AB8E8
- editorSuggestWidget.selectedBackground#0A1420
- editorSuggestWidget.selectedForeground#8BA6C0
- editorUnnecessaryCode.opacity#8BA6C040
- editorWarning.foreground#E8B570
- editorWhitespace.foreground#2A456040
- editorWidget.background#001A33
- editorWidget.border#0099FF
- editorWidget.resizeBorder#5A9CC9
- extensionBadge.remoteBackground#5A9CC9
- extensionBadge.remoteForeground#000000
- extensionButton.prominentBackground#7AB8E8
- extensionButton.prominentForeground#000000
- extensionButton.prominentHoverBackground#5A9CC9
- extensionIcon.preReleaseForeground#E8B570
- extensionIcon.sponsorForeground#D47A9A
- extensionIcon.starForeground#D4A76A
- extensionIcon.verifiedForeground#80C0A0
- focusBorder#0099FF
- gitDecoration.addedResourceForeground#80C0A0
- gitDecoration.conflictingResourceForeground#D47A9ACC
- gitDecoration.deletedResourceForeground#D47A9A
- gitDecoration.ignoredResourceForeground#334455
- gitDecoration.modifiedResourceForeground#0099FF
- gitDecoration.renamedResourceForeground#B586D4
- gitDecoration.submoduleResourceForeground#E8B570CC
- gitDecoration.untrackedResourceForeground#80C0A0
- input.background#001A33
- input.border#0099FF
- input.foreground#8BA6C0
- input.placeholderForeground#334455
- inputOption.activeBackground#5A9CC930
- inputOption.activeBorder#5A9CC999
- inputOption.activeForeground#7AB8E8
- inputValidation.errorBackground#D47A9A20
- inputValidation.errorBorder#D47A9A
- inputValidation.infoBackground#5A9CC920
- inputValidation.infoBorder#5A9CC9
- inputValidation.warningBackground#E8B57020
- inputValidation.warningBorder#E8B570
- keybindingLabel.background#0A142080
- keybindingLabel.border#5A9CC980
- keybindingLabel.bottomBorder#7AB8E880
- keybindingLabel.foreground#7AB8E8
- keybindingTable.headerBackground#0A1015
- keybindingTable.rowsBackground#05080C80
- list.activeSelectionBackground#0A1420
- list.activeSelectionForeground#8BA6C0
- list.dropBackground#5A9CC930
- list.errorForeground#D47A9A
- list.focusBackground#0A1420
- list.focusForeground#8BA6C0
- list.highlightForeground#00D1FF
- list.hoverBackground#0A1015
- list.hoverForeground#8BA6C0
- list.inactiveSelectionBackground#0A1015
- list.inactiveSelectionForeground#8BA6C0
- list.warningForeground#E8B570
- listFilterWidget.background#0A1015
- listFilterWidget.noMatchesOutline#D47A9A99
- listFilterWidget.outline#5A9CC999
- menu.background#0A1015
- menu.foreground#8BA6C0
- menu.selectionBackground#0A1420
- menu.selectionBorder#1A2835
- menu.selectionForeground#7AB8E8
- menu.separatorBackground#1A2835
- merge.border#1A2835
- merge.commonContentBackground#33445520
- merge.commonHeaderBackground#33445540
- merge.currentContentBackground#80C0A020
- merge.currentHeaderBackground#80C0A040
- merge.incomingContentBackground#5A9CC920
- merge.incomingHeaderBackground#5A9CC940
- minimap.background#000000
- minimap.errorHighlight#D47A9A99
- minimap.findMatchHighlight#B586D470
- minimap.selectionHighlight#5A9CC950
- minimap.selectionOccurrenceHighlight#5A9CC933
- minimap.warningHighlight#E8B57099
- notificationCenter.border#1A2835
- notificationCenterHeader.background#0A1015
- notificationCenterHeader.foreground#5A9CC9
- notificationLink.foreground#5A9CC9
- notifications.border#1A2835
- notifications.foreground#8BA6C0
- notificationsErrorIcon.foreground#D47A9A
- notificationsInfoIcon.foreground#5A9CC9
- notificationsWarningIcon.foreground#E8B570
- notificationToast.border#1A2835
- panel.background#000000
- panel.border#0066AA
- panelInput.border#1A2835
- panelSection.border#1A2835
- panelSection.dropBackground#5A9CC920
- panelSectionHeader.background#0A1015
- panelSectionHeader.border#1A2835
- panelSectionHeader.foreground#5A9CC9
- panelTitle.activeBorder#0099FF
- panelTitle.activeForeground#00D1FF
- panelTitle.inactiveForeground#666666
- peekViewEditor.matchHighlightBackground#B586D440
- peekViewEditor.matchHighlightBorder#B586D487
- peekViewResult.fileForeground#8BA6C0
- peekViewResult.lineForeground#8BA6C0
- peekViewResult.matchHighlightBackground#B586D440
- peekViewResult.selectionBackground#5A9CC930
- peekViewResult.selectionForeground#8BA6C0
- pickerGroup.border#1A2835
- pickerGroup.foreground#5A9CC9
- ports.iconRunningProcessForeground#80C0A0
- problemsErrorIcon.foreground#D47A9A
- problemsInfoIcon.foreground#5A9CC9
- problemsWarningIcon.foreground#E8B570
- progressBar.background#5A9CC9
- quickInput.foreground#8BA6C0
- quickInputList.focusBackground#0A1420
- quickInputList.focusForeground#8BA6C0
- quickInputTitle.background#0A1015
- sash.hoverBorder#00D1FF
- scrollbar.shadow#00000060
- scrollbarSlider.activeBackground#00D1FF70
- scrollbarSlider.background#0099FF30
- scrollbarSlider.hoverBackground#0099FF50
- selection.background#0099FF50
- settings.checkboxBackground#0A1015
- settings.checkboxBorder#1A2835
- settings.checkboxForeground#8BA6C0
- settings.dropdownBackground#0A1015
- settings.dropdownBorder#1A2835
- settings.dropdownForeground#8BA6C0
- settings.dropdownListBorder#1A2835
- settings.headerForeground#7AB8E8
- settings.modifiedItemIndicator#5A9CC9
- settings.numberInputBackground#0A1015
- settings.numberInputBorder#1A2835
- settings.numberInputForeground#8BA6C0
- settings.textInputBackground#0A1015
- settings.textInputBorder#1A2835
- settings.textInputForeground#8BA6C0
- sideBar.background#000000
- sideBar.border#0066AA
- sideBar.dropBackground#5A9CC920
- sideBar.foreground#AACCEE
- sideBarSectionHeader.background#0A1015
- sideBarSectionHeader.border#0A1420
- sideBarSectionHeader.foreground#5A9CC9
- sideBarTitle.foreground#00D1FF
- statusBar.background#000000
- statusBar.border#0066AA
- statusBar.debuggingBackground#9966FF
- statusBar.debuggingBorder#00000000
- statusBar.debuggingForeground#000000
- statusBar.foreground#00D1FF
- statusBar.noFolderBackground#000000
- statusBar.noFolderBorder#00000000
- statusBar.noFolderForeground#00D1FF
- statusBarItem.activeBackground#5A9CC940
- statusBarItem.compactHoverBackground#5A9CC930
- statusBarItem.errorBackground#D47A9A
- statusBarItem.errorForeground#000000
- statusBarItem.focusBorder#5A9CC9
- statusBarItem.hoverBackground#5A9CC930
- statusBarItem.hoverForeground#7AB8E8
- statusBarItem.prominentBackground#7AB8E8
- statusBarItem.prominentForeground#7AB8E8
- statusBarItem.prominentHoverBackground#5A9CC9
- statusBarItem.remoteBackground#5A9CC9
- statusBarItem.remoteForeground#000000
- statusBarItem.warningBackground#E8B570
- statusBarItem.warningForeground#000000
- symbolIcon.arrayForeground#7AB8E8
- symbolIcon.booleanForeground#9ACCE0
- symbolIcon.classForeground#5A9CC9
- symbolIcon.colorForeground#B586D4
- symbolIcon.constantForeground#C64040
- symbolIcon.constructorForeground#7AB8E8
- symbolIcon.enumeratorForeground#5A9CC9
- symbolIcon.enumeratorMemberForeground#80C0A0
- symbolIcon.eventForeground#D4A76A
- symbolIcon.fieldForeground#8BA6C0
- symbolIcon.fileForeground#6A9AC0
- symbolIcon.folderForeground#5A9CC9
- symbolIcon.functionForeground#7AB8E8
- symbolIcon.interfaceForeground#9ACCE0
- symbolIcon.keyForeground#D4A76A
- symbolIcon.keywordForeground#5A9CC9
- symbolIcon.methodForeground#7AB8E8
- symbolIcon.moduleForeground#6A9AC0
- symbolIcon.namespaceForeground#5A9CC9
- symbolIcon.nullForeground#4A6E92
- symbolIcon.numberForeground#C64040
- symbolIcon.objectForeground#5A9CC9
- symbolIcon.operatorForeground#8BA6C0
- symbolIcon.packageForeground#6A9AC0
- symbolIcon.propertyForeground#8BA6C0
- symbolIcon.referenceForeground#7AB8E8
- symbolIcon.snippetForeground#80C0A0
- symbolIcon.stringForeground#80C0A0
- symbolIcon.structForeground#5A9CC9
- symbolIcon.textForeground#8BA6C0
- symbolIcon.typeParameterForeground#9ACCE0
- symbolIcon.unitForeground#5A9CC9
- symbolIcon.variableForeground#8BA6C0
- tab.activeBackground#000000
- tab.activeBorder#00000000
- tab.activeBorderTop#0099FF
- tab.activeForeground#FFFFFF
- tab.border#000000
- tab.hoverBackground#001A33
- tab.hoverForeground#00D1FF
- tab.inactiveBackground#000000
- tab.inactiveForeground#666666
- tab.lastPinnedBorder#1A2835
- tab.unfocusedActiveBackground#0A1015
- tab.unfocusedActiveBorder#00000000
- tab.unfocusedActiveBorderTop#0066AA
- tab.unfocusedInactiveBackground#000000
- tab.unfocusedInactiveForeground#2A4560
- terminal.ansiBlack#000000
- terminal.ansiBlue#0099FF
- terminal.ansiBrightBlack#1A2835
- terminal.ansiBrightBlue#00D1FF
- terminal.ansiBrightCyan#66EEFF
- terminal.ansiBrightGreen#A0D0B8
- terminal.ansiBrightMagenta#CC99FF
- terminal.ansiBrightRed#E89AB0
- terminal.ansiBrightWhite#D0D8E0
- terminal.ansiBrightYellow#F0C888
- terminal.ansiCyan#00D1FF
- terminal.ansiGreen#80C0A0
- terminal.ansiMagenta#9966FF
- terminal.ansiRed#D47A9A
- terminal.ansiWhite#B0C0D0
- terminal.ansiYellow#E8B570
- terminal.background#000000
- terminal.foreground#AACCEE
- terminal.selectionBackground#5A9CC940
- terminalCursor.background#000000
- terminalCursor.foreground#00D1FF
- testing.iconErrored#D47A9ACC
- testing.iconFailed#D47A9A
- testing.iconPassed#80C0A0
- testing.iconQueued#E8B570
- testing.iconSkipped#334455
- testing.peekBorder#1A2835
- textBlockQuote.background#0A1015
- textBlockQuote.border#1A2835
- textCodeBlock.background#0A1015
- textLink.activeForeground#00D1FF
- textLink.foreground#0099FF
- textPreformat.foreground#AACCEE
- textSeparator.foreground#1A2835
- titleBar.activeBackground#000000
- titleBar.activeForeground#00D1FF
- titleBar.border#0A1420
- titleBar.inactiveBackground#000000
- titleBar.inactiveForeground#444444
- tree.indentGuidesStroke#2A456040
- walkThrough.embeddedEditorBackground#050A10
- walkthrough.stepTitle.foreground#5A9CC9
- welcomePage.background#000000
- welcomePage.tileBackground#0A1015
- welcomePage.tileBorder#0A1420
- welcomePage.tileHoverBackground#0F1A25
- widget.shadow#00000080
- window.activeBorder#5A9CC9
- window.inactiveBorder#1A2835
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment, string.comment | #445566 | italic |
| keyword, storage, storage.type | #9966FF | bold |
| storage.modifier, storage.type.function | #9966FF | bold |
| constant, variable.other.constant | #6AB0D0 | — |
| constant.numeric, constant.language | #6AB0D0 | — |
| constant.other.symbol, constant.other.enum | #E8B570 | — |
| string, string.quoted, string.interpolated | #80C0A0 | — |
| string.template | #80C0A0 | — |
| constant.character.escape | #6AB0D0 | — |
| variable, meta.definition.variable | #FFFFFF | — |
| variable.parameter, meta.function.parameter | #AACCEE | — |
| support.variable.property, variable.other.property | #AACCEE | — |
| entity.name.function, support.function | #00D1FF | bold |
| meta.function-call, support.function.console | #00D1FF | — |
| entity.name.type, support.class, support.type | #E8B570 | — |
| support.type.property-name, support.type.primitive | #E8B570 | — |
| support.constant, support.constant.property-value | #6AB0D0 | — |
| storage.type.interface, entity.name.namespace | #D0A0E8 | — |
| punctuation.definition.parameters, punctuation.section.group | #9AC0D8 | — |
| punctuation.separator, punctuation.terminator | #5A7A8A | — |
| entity.name.tag | #9966FF | bold |
| entity.name.tag.html | #9966FF | bold |
| meta.tag | #9966FF | — |
| entity.other.attribute-name | #00D1FF | italic |
| meta.tag.attribute | #00D1FF | — |
| support.type.property-name.dom, support.type.property-name.css | #00D1FF | — |
| markup.heading | #00D1FF | bold |
| markup.bold | #9966FF | bold |
| markup.italic | #9966FF | italic |
| markup.inline.raw | #80C0A0 | — |
| markup.list, punctuation.definition.list | #6AB0D0 | — |
| markup.quote | #445566 | — |
| markup.fenced_code.block, markup.raw.block | #80C0A0 | — |
| meta.preprocessor, keyword.other.preprocessor | #D0A0E8 | — |
| constant.character.entity, punctuation.definition.entity | #6AB0D0 | — |
| markup.underline, markup.inserted | #80C0A0 | — |
| markup.deleted, punctuation.definition.deleted | #D47A9A | — |
| markup.changed, punctuation.definition.changed | #E8B570 | — |
| invalid, invalid.illegal | #D47A9A | bold underline |
| entity.name.tag.html, entity.name.tag.xml | #B586D4 | bold |
| entity.name.tag.structure.any.html, entity.name.tag.block.any.html | #B586D4 | bold |
| entity.name.tag.inline.any.html | #D0A0E8 | — |
| entity.name.tag.script.html, entity.name.tag.style.html | #7AB8E8 | bold |
| entity.other.attribute-name.html, entity.other.attribute-name.xml | #7AB8E8 | italic |
| entity.other.attribute-name.class.html, entity.other.attribute-name.class.css | #E8B570 | italic bold |
| entity.other.attribute-name.id.html, entity.other.attribute-name.id.css | #6AB0D0 | italic bold |
| entity.other.attribute-name.style.html | #D0A0E8 | italic |
| entity.other.attribute-name.event.html | #B586D4 | italic |
| string.quoted.double.html, string.quoted.single.html | #80C0A0 | — |
| meta.attribute-with-value.html string | #80C0A0 | — |
| punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html | #5A7A8A | — |
| punctuation.definition.tag.html, punctuation.separator.key-value.html | #5A7A8A | — |
| punctuation.definition.string.begin.html, punctuation.definition.string.end.html | #5A7A8A | — |
| comment.block.html, punctuation.definition.comment.html | #445566 | italic |
| constant.character.entity.html, constant.character.entity.named.html | #6AB0D0 | bold |
| punctuation.definition.entity.html | #6AB0D0 | — |
| meta.tag.sgml.doctype.html, entity.name.tag.doctype.html | #D0A0E8 | bold |
| keyword.doctype.xml | #D0A0E8 | bold |
| source.css.embedded.html | #9AC0D8 | — |
| meta.embedded.block.css | #9AC0D8 | — |
| source.js.embedded.html, source.javascript.embedded.html | #9AC0D8 | — |
| meta.embedded.block.javascript | #8BA6C0 | — |
| entity.name.tag.form.html, entity.name.tag.input.html, entity.name.tag.button.html | #80C0A0 | bold |
| entity.other.attribute-name.form.html | #7AB8E8 | italic |
| entity.name.tag.table.html, entity.name.tag.tr.html, entity.name.tag.td.html, entity.name.tag.th.html | #B586D4 | bold |
| entity.name.tag.img.html, entity.name.tag.video.html, entity.name.tag.audio.html | #E8B570 | bold |
| entity.name.tag.a.html | #7AB8E8 | bold |
| entity.other.attribute-name.href.html | #7AB8E8 | italic bold |
| entity.name.tag.header.html, entity.name.tag.main.html, entity.name.tag.footer.html, entity.name.tag.nav.html, entity.name.tag.aside.html, entity.name.tag.section.html, entity.name.tag.article.html, entity.name.tag.figure.html, entity.name.tag.figcaption.html | #D0A0E8 | bold |
| text.html.basic | #FFFFFF | — |