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#0A142040
- activityBar.activeBorder#2B5DAA
- activityBar.activeFocusBorder#4B8AB8
- activityBar.background#001A3D
- activityBar.border#2B5DAA
- activityBar.dropBorder#4B8AB8
- activityBar.foreground#4D8FCC
- activityBar.inactiveForeground#3A5F7D
- activityBarBadge.background#2B5DAA
- activityBarBadge.foreground#FFFFFF
- badge.background#2B5DAA
- badge.foreground#FFFFFF
- breadcrumb.activeSelectionForeground#7AB8E8
- breadcrumb.background#0A1420
- breadcrumb.focusForeground#B8C8D8
- breadcrumb.foreground#7A9AB5
- breadcrumbPicker.background#1A2837
- button.background#2B5DAA
- button.foreground#FFFFFF
- button.hoverBackground#3D6BBC
- button.secondaryBackground#1A2837
- button.secondaryForeground#B8C8D8
- button.secondaryHoverBackground#25364A
- charts.blue#7AB8E8
- charts.foreground#F4F0E6
- charts.green#6FA67B
- charts.lines#2B5DAA
- charts.orange#FF8800
- charts.purple#8E7CC3
- charts.red#E84545
- charts.yellow#FDB863
- checkbox.background#1A2837
- checkbox.border#2B5DAA
- checkbox.foreground#D8E0E8
- commandCenter.activeForeground#7AB8E8
- commandCenter.background#1A2837E0
- commandCenter.border#2B5DAA
- commandCenter.foreground#D8E0E8
- contrastBorder#00000000
- debugConsole.errorForeground#E84545
- debugConsole.infoForeground#7AB8E8
- debugConsole.inputIconForeground#F4F0E6
- debugConsole.sourceForeground#6FA67B
- debugConsole.warningForeground#FDB863
- debugIcon.breakpointCurrentStackframeForeground#FDB863
- debugIcon.breakpointDisabledForeground#7AB8E880
- debugIcon.breakpointForeground#E84545
- debugIcon.breakpointStackframeForeground#7AB8E8
- debugIcon.breakpointUnverifiedForeground#FDB86380
- debugIcon.continueForeground#6FA67B
- debugIcon.disconnectForeground#F4F0E6
- debugIcon.pauseForeground#FDB863
- debugIcon.restartForeground#7AB8E8
- debugIcon.startForeground#6FA67B
- debugIcon.stepBackForeground#F4F0E6
- debugIcon.stepIntoForeground#F4F0E6
- debugIcon.stepOutForeground#F4F0E6
- debugIcon.stepOverForeground#F4F0E6
- debugIcon.stopForeground#E84545
- debugToolBar.background#1A2837
- diffEditor.border#2B5DAA
- diffEditor.diagonalFill#1F2F42
- diffEditor.insertedLineBackground#2E8B5710
- diffEditor.insertedTextBackground#2E8B5720
- diffEditor.insertedTextBorder#2E8B5700
- diffEditor.removedLineBackground#C6404010
- diffEditor.removedTextBackground#C6404020
- diffEditor.removedTextBorder#C6404000
- dropdown.background#1A2837
- dropdown.border#2B5DAA
- dropdown.foreground#D8E0E8
- dropdown.listBackground#1A2837
- editor.background#001129
- editor.findMatchBackground#F5C24D
- editor.findMatchBorder#FFB700
- editor.findMatchHighlightBackground#F5C24D50
- editor.findRangeHighlightBackground#003D6B30
- editor.focusedStackFrameHighlightBackground#4AB37140
- editor.foldBackground#1A283780
- editor.foreground#D0DCE8
- editor.inactiveSelectionBackground#00305A30
- editor.lineHighlightBackground#001A3D
- editor.lineHighlightBorder#00000000
- editor.rangeHighlightBackground#003D6B20
- editor.selectionBackground#2B5DAA50
- editor.selectionHighlightBackground#003D6B30
- editor.stackFrameHighlightBackground#CC990040
- editor.wordHighlightBackground#003D6B40
- editor.wordHighlightStrongBackground#2B5DAA50
- editorBracketHighlight.foreground1#7AB8E8
- editorBracketHighlight.foreground2#4AB371
- editorBracketHighlight.foreground3#C097C7
- editorBracketHighlight.foreground4#D4A76A
- editorBracketHighlight.foreground5#60C0C0
- editorBracketHighlight.foreground6#E85757
- editorBracketMatch.background#2B5DAA40
- editorBracketMatch.border#4D8FCC
- editorBracketPairGuide.activeBackground1#7AB8E860
- editorBracketPairGuide.activeBackground2#4AB37160
- editorBracketPairGuide.activeBackground3#C097C760
- editorBracketPairGuide.activeBackground4#D4A76A60
- editorBracketPairGuide.activeBackground5#60C0C060
- editorBracketPairGuide.activeBackground6#E8575760
- editorCodeLens.foreground#6A8AA0
- editorCursor.foreground#4D8FCC
- editorError.foreground#FF6B6B
- editorGroup.border#2B5DAA
- editorGroup.dropBackground#2B5DAA40
- editorGroupHeader.border#003366
- editorGroupHeader.noTabsBackground#002147
- editorGroupHeader.tabsBackground#001A3D
- editorGroupHeader.tabsBorder#003366
- editorGutter.addedBackground#3B9E5C
- editorGutter.background#001129
- editorGutter.commentRangeForeground#2D4D6B
- editorGutter.deletedBackground#D64545
- editorGutter.modifiedBackground#F5C24D
- editorHoverWidget.background#002147
- editorHoverWidget.border#2B5DAA
- editorIndentGuide.activeBackground1#2D4D6B
- editorIndentGuide.background1#002A4D
- editorInfo.foreground#4D8FCC
- editorInlayHint.background#1A2837E0
- editorInlayHint.foreground#7A9AB5
- editorInlayHint.parameterBackground#1A2837E0
- editorInlayHint.parameterForeground#7A9AB5
- editorInlayHint.typeBackground#1A2837E0
- editorInlayHint.typeForeground#7A9AB5
- editorLightBulb.foreground#D4A76A
- editorLightBulbAutoFix.foreground#4AB371
- editorLineNumber.activeForeground#4D8FCC
- editorLineNumber.dimmedForeground#1A3552
- editorLineNumber.foreground#2D4D6B
- editorLink.activeForeground#7AB8E8
- editorOverviewRuler.addedForeground#4AB371
- editorOverviewRuler.commonContentForeground#7A9AB5
- editorOverviewRuler.currentContentForeground#4AB371
- editorOverviewRuler.deletedForeground#E85757
- editorOverviewRuler.errorForeground#E85757
- editorOverviewRuler.findMatchForeground#CC9900
- editorOverviewRuler.incomingContentForeground#7AB8E8
- editorOverviewRuler.infoForeground#7AB8E8
- editorOverviewRuler.modifiedForeground#D4A76A
- editorOverviewRuler.warningForeground#D4A76A
- editorRuler.foreground#1F2F42
- editorStickyScroll.background#0A1420F0
- editorStickyScrollHover.background#141E2B
- editorSuggestWidget.background#1A2837
- editorSuggestWidget.border#2B5DAA
- editorSuggestWidget.foreground#D8E0E8
- editorSuggestWidget.highlightForeground#7AB8E8
- editorSuggestWidget.selectedBackground#2B5DAA
- editorSuggestWidget.selectedForeground#FFFFFF
- editorUnnecessaryCode.opacity#D8E0E860
- editorWarning.foreground#F5C24D
- editorWhitespace.foreground#1F2F42
- editorWidget.background#002147
- editorWidget.border#2B5DAA
- editorWidget.resizeBorder#4D8FCC
- extensionBadge.remoteBackground#2B5DAA
- extensionBadge.remoteForeground#F4F0E6
- extensionButton.prominentBackground#2B5DAA
- extensionButton.prominentForeground#F4F0E6
- extensionButton.prominentHoverBackground#7AB8E8
- extensionIcon.preReleaseForeground#FF8800
- extensionIcon.starForeground#FDB863
- extensionIcon.verifiedForeground#6FA67B
- focusBorder#4B8AB899
- gitDecoration.addedResourceForeground#4AB371
- gitDecoration.conflictingResourceForeground#D4A76A
- gitDecoration.deletedResourceForeground#E85757
- gitDecoration.ignoredResourceForeground#6A8AA0
- gitDecoration.modifiedResourceForeground#D4A76A
- gitDecoration.renamedResourceForeground#C097C7
- gitDecoration.submoduleResourceForeground#60C0C0
- gitDecoration.untrackedResourceForeground#4AB371
- input.background#1A2837
- input.border#2B5DAA
- input.foreground#D8E0E8
- input.placeholderForeground#7A9AB5
- inputOption.activeBackground#2B5DAA40
- inputOption.activeBorder#2B5DAA
- inputOption.activeForeground#E8ECF0
- inputValidation.errorBackground#4D2020
- inputValidation.errorBorder#C64040
- inputValidation.infoBackground#1A2837
- inputValidation.infoBorder#4B8AB8
- inputValidation.warningBackground#4D3D20
- inputValidation.warningBorder#D4A76A
- keybindingLabel.background#2B5DAA80
- keybindingLabel.border#7AB8E8
- keybindingLabel.bottomBorder#2B5DAA
- keybindingLabel.foreground#F4F0E6
- list.activeSelectionBackground#2B5DAA
- list.activeSelectionForeground#FFFFFF
- list.dropBackground#2B5DAA40
- list.errorForeground#E85757
- list.focusBackground#1F2F42
- list.focusForeground#E8ECF0
- list.highlightForeground#7AB8E8
- list.hoverBackground#1F2F42
- list.hoverForeground#E8ECF0
- list.inactiveSelectionBackground#1A2837
- list.inactiveSelectionForeground#B8C8D8
- list.warningForeground#D4A76A
- listFilterWidget.background#1A2837
- listFilterWidget.noMatchesOutline#E85757
- listFilterWidget.outline#4B8AB8
- menu.background#1A2837
- menu.foreground#D8E0E8
- menu.selectionBackground#2B5DAA
- menu.selectionBorder#3D6BBC
- menu.selectionForeground#FFFFFF
- menu.separatorBackground#3D5A75
- merge.border#2B5DAA
- merge.commonContentBackground#1F2F4220
- merge.commonHeaderBackground#1F2F4230
- merge.currentContentBackground#2E8B5720
- merge.currentHeaderBackground#2E8B5730
- merge.incomingContentBackground#2B5DAA20
- merge.incomingHeaderBackground#2B5DAA30
- minimap.background#0A1420
- minimap.errorHighlight#E85757
- minimap.findMatchHighlight#CC9900
- minimap.selectionHighlight#2B5DAA60
- minimap.selectionOccurrenceHighlight#1A283740
- minimap.warningHighlight#D4A76A
- notificationCenter.border#2B5DAA
- notificationCenterHeader.background#1A2837
- notificationCenterHeader.foreground#7AB8E8
- notificationLink.foreground#7AB8E8
- notifications.background#1A2837
- notifications.border#2B5DAA
- notifications.foreground#D8E0E8
- notificationsErrorIcon.foreground#E85757
- notificationsInfoIcon.foreground#7AB8E8
- notificationsWarningIcon.foreground#D4A76A
- notificationToast.border#2B5DAA
- panel.background#00162E
- panel.border#003366
- panelInput.border#2B5DAA
- panelSection.border#2B5DAA
- panelSection.dropBackground#2B5DAA40
- panelSectionHeader.background#1A2837
- panelSectionHeader.border#2B5DAA
- panelSectionHeader.foreground#7AB8E8
- panelTitle.activeBorder#2B5DAA
- panelTitle.activeForeground#5A9CC9
- panelTitle.inactiveForeground#4A6680
- peekView.border#4B8AB8
- peekViewEditor.background#141E2B
- peekViewEditor.matchHighlightBackground#CC990080
- peekViewEditor.matchHighlightBorder#FFB700
- peekViewResult.background#0F1B28
- peekViewResult.fileForeground#B8C8D8
- peekViewResult.lineForeground#7A9AB5
- peekViewResult.matchHighlightBackground#CC990080
- peekViewResult.selectionBackground#1A2837
- peekViewResult.selectionForeground#E8ECF0
- peekViewTitle.background#1A2837
- peekViewTitleDescription.foreground#7A9AB5
- peekViewTitleLabel.foreground#7AB8E8
- pickerGroup.border#2B5DAA
- pickerGroup.foreground#7AB8E8
- ports.iconRunningProcessForeground#6FA67B
- problemsErrorIcon.foreground#E85757
- problemsInfoIcon.foreground#7AB8E8
- problemsWarningIcon.foreground#D4A76A
- progressBar.background#2B5DAA
- quickInput.background#1A2837
- quickInput.foreground#D8E0E8
- quickInputList.focusBackground#2B5DAA
- quickInputList.focusForeground#FFFFFF
- quickInputTitle.background#0F1B28
- sash.hoverBorder#4B8AB8
- scrollbar.shadow#00000040
- scrollbarSlider.activeBackground#2D4D6BC0
- scrollbarSlider.background#2D4D6B60
- scrollbarSlider.hoverBackground#2D4D6B90
- selection.background#2B5DAA40
- settings.checkboxBackground#1A2837
- settings.checkboxBorder#2B5DAA
- settings.checkboxForeground#D8E0E8
- settings.dropdownBackground#1A2837
- settings.dropdownBorder#2B5DAA
- settings.dropdownForeground#D8E0E8
- settings.dropdownListBorder#2B5DAA
- settings.headerForeground#7AB8E8
- settings.modifiedItemIndicator#D4A76A
- settings.numberInputBackground#1A2837
- settings.numberInputBorder#2B5DAA
- settings.numberInputForeground#D8E0E8
- settings.textInputBackground#1A2837
- settings.textInputBorder#2B5DAA
- settings.textInputForeground#D8E0E8
- sideBar.background#002147
- sideBar.border#003366
- sideBar.dropBackground#2B5DAA40
- sideBar.foreground#9DB8D0
- sideBarSectionHeader.background#00305A
- sideBarSectionHeader.border#2B5DAA
- sideBarSectionHeader.foreground#4D8FCC
- sideBarTitle.foreground#5A9CC9
- statusBar.background#001A3D
- statusBar.border#003366
- statusBar.debuggingBackground#2B5DAA
- statusBar.debuggingBorder#3D6BBC
- statusBar.debuggingForeground#FFFFFF
- statusBar.foreground#9DB8D0
- statusBar.noFolderBackground#002147
- statusBar.noFolderBorder#2B5DAA
- statusBar.noFolderForeground#9DB8D0
- statusBarItem.activeBackground#3D5A7540
- statusBarItem.compactHoverBackground#3D5A7560
- statusBarItem.errorBackground#C64040
- statusBarItem.errorForeground#FFFFFF
- statusBarItem.focusBorder#4B8AB8
- statusBarItem.hoverBackground#3D5A7560
- statusBarItem.hoverForeground#E8ECF0
- statusBarItem.prominentBackground#2B5DAA
- statusBarItem.prominentForeground#7AB8E8
- statusBarItem.prominentHoverBackground#3D6BBC
- statusBarItem.remoteBackground#2B5DAA
- statusBarItem.remoteForeground#FFFFFF
- statusBarItem.warningBackground#D4A76A
- statusBarItem.warningForeground#FFFFFF
- symbolIcon.arrayForeground#7AB8E8
- symbolIcon.booleanForeground#FDB863
- symbolIcon.classForeground#2B5DAA
- symbolIcon.colorForeground#FF8800
- symbolIcon.constantForeground#E84545
- symbolIcon.constructorForeground#2B5DAA
- symbolIcon.enumeratorForeground#7AB8E8
- symbolIcon.enumeratorMemberForeground#6FA67B
- symbolIcon.eventForeground#FF8800
- symbolIcon.fieldForeground#7AB8E8
- symbolIcon.fileForeground#6FA67B
- symbolIcon.folderForeground#2B5DAA
- symbolIcon.functionForeground#7AB8E8
- symbolIcon.interfaceForeground#8E7CC3
- symbolIcon.keyForeground#FDB863
- symbolIcon.keywordForeground#2B5DAA
- symbolIcon.methodForeground#7AB8E8
- symbolIcon.moduleForeground#8E7CC3
- symbolIcon.namespaceForeground#2B5DAA
- symbolIcon.nullForeground#F4F0E6
- symbolIcon.numberForeground#FDB863
- symbolIcon.objectForeground#7AB8E8
- symbolIcon.operatorForeground#F4F0E6
- symbolIcon.packageForeground#8E7CC3
- symbolIcon.propertyForeground#6FA67B
- symbolIcon.referenceForeground#7AB8E8
- symbolIcon.snippetForeground#FF8800
- symbolIcon.stringForeground#6FA67B
- symbolIcon.structForeground#2B5DAA
- symbolIcon.textForeground#F4F0E6
- symbolIcon.typeParameterForeground#8E7CC3
- symbolIcon.unitForeground#FDB863
- symbolIcon.variableForeground#7AB8E8
- tab.activeBackground#00305A
- tab.activeBorder#2B5DAA
- tab.activeBorderTop#2B5DAA
- tab.activeForeground#E0EAF4
- tab.border#003366
- tab.hoverBackground#003D6B
- tab.hoverForeground#D8E4F0
- tab.inactiveBackground#001A3D
- tab.inactiveForeground#6A8AA8
- tab.lastPinnedBorder#2B5DAA
- tab.unfocusedActiveBackground#002A4D
- tab.unfocusedActiveBorder#3A5F7D
- tab.unfocusedActiveBorderTop#3A5F7D
- tab.unfocusedInactiveBackground#001A3D
- tab.unfocusedInactiveForeground#4A6680
- terminal.ansiBlack#0A1420
- terminal.ansiBlue#7AB8E8
- terminal.ansiBrightBlack#5A7D9A
- terminal.ansiBrightBlue#9CD4FF
- terminal.ansiBrightCyan#80E0E0
- terminal.ansiBrightGreen#66D88C
- terminal.ansiBrightMagenta#E0B0E0
- terminal.ansiBrightRed#FF6B6B
- terminal.ansiBrightWhite#FFFFFF
- terminal.ansiBrightYellow#FFD966
- terminal.ansiCyan#60C0C0
- terminal.ansiGreen#4AB371
- terminal.ansiMagenta#C097C7
- terminal.ansiRed#E85757
- terminal.ansiWhite#D8E0E8
- terminal.ansiYellow#EFC985
- terminal.background#0A1420
- terminal.foreground#D8E0E8
- terminal.selectionBackground#2B5DAA40
- terminalCursor.background#0A1420
- terminalCursor.foreground#7AB8E8
- testing.iconErrored#E85757
- testing.iconFailed#E85757
- testing.iconPassed#4AB371
- testing.iconQueued#D4A76A
- testing.iconSkipped#7A9AB5
- testing.peekBorder#2B5DAA
- textBlockQuote.background#1A2837
- textBlockQuote.border#2B5DAA
- textCodeBlock.background#141E2B
- textLink.activeForeground#9CD4FF
- textLink.foreground#7AB8E8
- textPreformat.foreground#D8E0E8
- textSeparator.foreground#3D5A75
- titleBar.activeBackground#001A3D
- titleBar.activeForeground#4D8FCC
- titleBar.border#2B5DAA
- titleBar.inactiveBackground#00122A
- titleBar.inactiveForeground#3A5F7D
- tree.indentGuidesStroke#1F2F42
- walkThrough.embeddedEditorBackground#1A2837
- welcomePage.background#1A2837
- welcomePage.progress.background#2B5DAA40
- welcomePage.progress.foreground#7AB8E8
- welcomePage.tileBackground#23344D80
- widget.shadow#00000060
- window.activeBorder#4B8AB8
- window.inactiveBorder#2D4558
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #7A9AB5 | italic |
| keyword, storage, storage.type | #7AB8E8 | bold |
| storage.modifier, storage.type.function | #7AB8E8 | bold |
| constant, variable.other.constant | #E85757 | — |
| constant.numeric, constant.language | #E85757 | — |
| constant.other.symbol, constant.other.enum | #EFC985 | — |
| string, string.quoted, string.interpolated | #4AB371 | — |
| string.template | #4AB371 | — |
| constant.character.escape | #60C0C0 | — |
| variable, meta.definition.variable | #D8E0E8 | — |
| variable.parameter, meta.function.parameter | #B8C8D8 | — |
| support.variable.property, variable.other.property | #B8C8D8 | — |
| entity.name.function, support.function | #9CD4FF | bold |
| meta.function-call, support.function.console | #9CD4FF | — |
| entity.name.type, support.class, support.type | #C097C7 | bold |
| support.type.property-name, support.type.primitive | #C097C7 | — |
| support.constant, support.constant.property-value | #E85757 | — |
| storage.type.interface, entity.name.namespace | #60C0C0 | — |
| punctuation.definition.parameters, punctuation.section.group | #B8C8D8 | — |
| punctuation.separator, punctuation.terminator | #7A9AB5 | — |
| entity.name.tag | #7AB8E8 | bold |
| entity.name.tag.html | #7AB8E8 | bold |
| meta.tag | #7AB8E8 | — |
| entity.other.attribute-name | #9CD4FF | — |
| meta.tag.attribute | #9CD4FF | — |
| support.type.property-name.dom, support.type.property-name.css | #9CD4FF | — |
| markup.heading | #7AB8E8 | bold |
| markup.bold | #7AB8E8 | bold |
| markup.italic | #7AB8E8 | italic |
| markup.inline.raw | #4AB371 | — |
| markup.list, punctuation.definition.list | #E85757 | — |
| markup.quote | #7A9AB5 | — |
| markup.fenced_code.block, markup.raw.block | #4AB371 | — |
| meta.preprocessor, keyword.other.preprocessor | #60C0C0 | — |
| constant.character.entity, punctuation.definition.entity | #EFC985 | — |
| markup.underline, markup.inserted | #4AB371 | — |
| markup.deleted, punctuation.definition.deleted | #E85757 | — |
| markup.changed, punctuation.definition.changed | #D4A76A | — |
| invalid, invalid.illegal | #FF6B6B | bold underline |