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#FFFFFF40
- activityBar.activeBorder#003087
- activityBar.activeFocusBorder#5A9CC9
- activityBar.background#C0C0C0
- activityBar.border#7AB8E8
- activityBar.dropBorder#5A9CC9
- activityBar.foreground#003087
- activityBar.inactiveForeground#606060
- activityBarBadge.background#003087
- activityBarBadge.foreground#FFFFFF
- badge.background#1A3E5C
- badge.foreground#FFFFFF
- breadcrumb.activeSelectionForeground#5A9CC9
- breadcrumb.background#FAFCFE
- breadcrumb.focusForeground#2D5370
- breadcrumb.foreground#7A9AB5
- breadcrumbPicker.background#FFFFFF
- button.background#5A9CC9
- button.foreground#FFFFFF
- button.hoverBackground#4B8AB8
- button.secondaryBackground#D8E8F5
- button.secondaryForeground#1A3E5C
- button.secondaryHoverBackground#B8D8F0
- charts.blue#5A9CC9
- charts.foreground#1A3E5C
- charts.green#6FA8DC
- charts.lines#7AB8E8
- charts.orange#E67E22
- charts.purple#8E7CC3
- charts.red#C74040
- charts.yellow#FFD966
- checkbox.background#FFFFFF
- checkbox.border#7AB8E8
- checkbox.foreground#2D5370
- commandCenter.activeForeground#1A3E5C
- commandCenter.background#D8E8F5E0
- commandCenter.border#7AB8E8
- commandCenter.foreground#2D5370
- contrastBorder#00000000
- debugConsole.errorForeground#C74040
- debugConsole.infoForeground#1A3E5C
- debugConsole.inputIconForeground#1A3E5C
- debugConsole.sourceForeground#6FA8DC
- debugConsole.warningForeground#E67E22
- debugIcon.breakpointCurrentStackframeForeground#FFD966
- debugIcon.breakpointDisabledForeground#7AB8E880
- debugIcon.breakpointForeground#C74040
- debugIcon.breakpointStackframeForeground#7AB8E8
- debugIcon.breakpointUnverifiedForeground#E67E2280
- debugIcon.continueForeground#6FA8DC
- debugIcon.disconnectForeground#1A3E5C
- debugIcon.pauseForeground#E67E22
- debugIcon.restartForeground#7AB8E8
- debugIcon.startForeground#6FA8DC
- debugIcon.stepBackForeground#1A3E5C
- debugIcon.stepIntoForeground#1A3E5C
- debugIcon.stepOutForeground#1A3E5C
- debugIcon.stepOverForeground#1A3E5C
- debugIcon.stopForeground#C74040
- debugToolBar.background#FFFFFF
- diffEditor.border#7AB8E8
- diffEditor.diagonalFill#E0ECF5
- diffEditor.insertedLineBackground#F0FFF5
- diffEditor.insertedTextBackground#E0FFE9
- diffEditor.insertedTextBorder#2E8B5700
- diffEditor.removedLineBackground#FFF0F0
- diffEditor.removedTextBackground#FFE0E0
- diffEditor.removedTextBorder#C6404000
- dropdown.background#FFFFFF
- dropdown.border#7AB8E8
- dropdown.foreground#2D5370
- dropdown.listBackground#FFFFFF
- editor.background#FFFFFF
- editor.findMatchBackground#FFD700
- editor.findMatchBorder#FFB700
- editor.findMatchHighlightBackground#FFED80
- editor.findRangeHighlightBackground#FFF8DC
- editor.focusedStackFrameHighlightBackground#D4EFC040
- editor.foldBackground#D8E8F580
- editor.foreground#000000
- editor.inactiveSelectionBackground#00308730
- editor.lineHighlightBackground#F5F5F5
- editor.lineHighlightBorder#00000000
- editor.rangeHighlightBackground#E5F0FA
- editor.selectionBackground#00308750
- editor.selectionHighlightBackground#00308730
- editor.stackFrameHighlightBackground#FFE68040
- editor.wordHighlightBackground#A0A0A040
- editor.wordHighlightStrongBackground#00308750
- editorBracketHighlight.foreground1#5A9CC9
- editorBracketHighlight.foreground2#2E8B57
- editorBracketHighlight.foreground3#9B7BA1
- editorBracketHighlight.foreground4#D4A76A
- editorBracketHighlight.foreground5#4A9E9E
- editorBracketHighlight.foreground6#C64040
- editorBracketMatch.background#B8D8F060
- editorBracketMatch.border#5A9CC9
- editorBracketPairGuide.activeBackground1#5A9CC960
- editorBracketPairGuide.activeBackground2#2E8B5760
- editorBracketPairGuide.activeBackground3#9B7BA160
- editorBracketPairGuide.activeBackground4#D4A76A60
- editorBracketPairGuide.activeBackground5#4A9E9E60
- editorBracketPairGuide.activeBackground6#C6404060
- editorCodeLens.foreground#7A9AB5
- editorCursor.foreground#003087
- editorError.foreground#C64040
- editorGroup.border#A0A0A0
- editorGroup.dropBackground#B8D8F060
- editorGroupHeader.border#A0A0A0
- editorGroupHeader.noTabsBackground#D0D0D0
- editorGroupHeader.tabsBackground#C0C0C0
- editorGroupHeader.tabsBorder#A0A0A0
- editorGutter.addedBackground#2E8B57
- editorGutter.background#F0F6FB
- editorGutter.commentRangeForeground#7AB8E8
- editorGutter.deletedBackground#C64040
- editorGutter.modifiedBackground#D4A76A
- editorHoverWidget.background#FFFFFF
- editorHoverWidget.border#7AB8E8
- editorIndentGuide.activeBackground1#7AB8E8
- editorIndentGuide.background1#E0ECF5
- editorInfo.foreground#5A9CC9
- editorInlayHint.background#D8E8F5E0
- editorInlayHint.foreground#5A7D9A
- editorInlayHint.parameterBackground#D8E8F5E0
- editorInlayHint.parameterForeground#5A7D9A
- editorInlayHint.typeBackground#D8E8F5E0
- editorInlayHint.typeForeground#5A7D9A
- editorLightBulb.foreground#D4A76A
- editorLightBulbAutoFix.foreground#2E8B57
- editorLineNumber.activeForeground#003087
- editorLineNumber.dimmedForeground#D0D0D0
- editorLineNumber.foreground#A0A0A0
- editorLink.activeForeground#5A9CC9
- editorOverviewRuler.addedForeground#2E8B57
- editorOverviewRuler.commonContentForeground#7A9AB5
- editorOverviewRuler.currentContentForeground#2E8B57
- editorOverviewRuler.deletedForeground#C64040
- editorOverviewRuler.errorForeground#C64040
- editorOverviewRuler.findMatchForeground#FFD700
- editorOverviewRuler.incomingContentForeground#5A9CC9
- editorOverviewRuler.infoForeground#5A9CC9
- editorOverviewRuler.modifiedForeground#D4A76A
- editorOverviewRuler.warningForeground#D4A76A
- editorRuler.foreground#E0ECF5
- editorStickyScroll.background#FAFCFEF0
- editorStickyScrollHover.background#F0F6FB
- editorSuggestWidget.background#FFFFFF
- editorSuggestWidget.border#7AB8E8
- editorSuggestWidget.foreground#2D5370
- editorSuggestWidget.highlightForeground#1A3E5C
- editorSuggestWidget.selectedBackground#5A9CC9
- editorSuggestWidget.selectedForeground#FFFFFF
- editorUnnecessaryCode.opacity#2D537060
- editorWarning.foreground#D4A76A
- editorWhitespace.foreground#E0ECF5
- editorWidget.background#FFFFFF
- editorWidget.border#7AB8E8
- editorWidget.resizeBorder#5A9CC9
- extensionBadge.remoteBackground#1A3E5C
- extensionBadge.remoteForeground#FFFFFF
- extensionButton.prominentBackground#7AB8E8
- extensionButton.prominentForeground#FFFFFF
- extensionButton.prominentHoverBackground#5A9CC9
- extensionIcon.preReleaseForeground#E67E22
- extensionIcon.starForeground#FFD966
- extensionIcon.verifiedForeground#6FA8DC
- focusBorder#5A9CC999
- gitDecoration.addedResourceForeground#2E8B57
- gitDecoration.conflictingResourceForeground#D4A76A
- gitDecoration.deletedResourceForeground#C64040
- gitDecoration.ignoredResourceForeground#7A9AB5
- gitDecoration.modifiedResourceForeground#D4A76A
- gitDecoration.renamedResourceForeground#9B7BA1
- gitDecoration.submoduleResourceForeground#4A9E9E
- gitDecoration.untrackedResourceForeground#2E8B57
- input.background#FFFFFF
- input.border#7AB8E8
- input.foreground#2D5370
- input.placeholderForeground#7A9AB5
- inputOption.activeBackground#5A9CC940
- inputOption.activeBorder#5A9CC9
- inputOption.activeForeground#1A3E5C
- inputValidation.errorBackground#FFE9E9
- inputValidation.errorBorder#C64040
- inputValidation.infoBackground#E5F0FA
- inputValidation.infoBorder#5A9CC9
- inputValidation.warningBackground#FFF8DC
- inputValidation.warningBorder#D4A76A
- keybindingLabel.background#7AB8E880
- keybindingLabel.border#7AB8E8
- keybindingLabel.bottomBorder#1A3E5C
- keybindingLabel.foreground#1A3E5C
- list.activeSelectionBackground#5A9CC9
- list.activeSelectionForeground#FFFFFF
- list.dropBackground#B8D8F060
- list.errorForeground#C64040
- list.focusBackground#D8E8F5
- list.focusForeground#1A3E5C
- list.highlightForeground#1A3E5C
- list.hoverBackground#E5F0FA
- list.hoverForeground#1A3E5C
- list.inactiveSelectionBackground#B8D8F0
- list.inactiveSelectionForeground#1A3E5C
- list.warningForeground#D4A76A
- listFilterWidget.background#FFFFFF
- listFilterWidget.noMatchesOutline#C64040
- listFilterWidget.outline#5A9CC9
- menu.background#FFFFFF
- menu.foreground#2D5370
- menu.selectionBackground#5A9CC9
- menu.selectionBorder#4B8AB8
- menu.selectionForeground#FFFFFF
- menu.separatorBackground#7AB8E8
- merge.border#7AB8E8
- merge.commonContentBackground#FAFAFA
- merge.commonHeaderBackground#F5F5F5
- merge.currentContentBackground#F0FFF5
- merge.currentHeaderBackground#E0FFE9
- merge.incomingContentBackground#F0F6FB
- merge.incomingHeaderBackground#E5F0FA
- minimap.background#FAFCFE
- minimap.errorHighlight#C64040
- minimap.findMatchHighlight#FFD700
- minimap.selectionHighlight#B8D8F0
- minimap.selectionOccurrenceHighlight#D8E8F5
- minimap.warningHighlight#D4A76A
- notificationCenter.border#7AB8E8
- notificationCenterHeader.background#D8E8F5
- notificationCenterHeader.foreground#1A3E5C
- notificationLink.foreground#5A9CC9
- notifications.background#FFFFFF
- notifications.border#7AB8E8
- notifications.foreground#2D5370
- notificationsErrorIcon.foreground#C64040
- notificationsInfoIcon.foreground#5A9CC9
- notificationsWarningIcon.foreground#D4A76A
- notificationToast.border#7AB8E8
- panel.background#FFFFFF
- panel.border#A0A0A0
- panelInput.border#7AB8E8
- panelSection.border#7AB8E8
- panelSection.dropBackground#B8D8F060
- panelSectionHeader.background#D8E8F5
- panelSectionHeader.border#7AB8E8
- panelSectionHeader.foreground#1A3E5C
- panelTitle.activeBorder#003087
- panelTitle.activeForeground#003087
- panelTitle.inactiveForeground#606060
- peekView.border#5A9CC9
- peekViewEditor.background#FFFFFF
- peekViewEditor.matchHighlightBackground#FFD70080
- peekViewEditor.matchHighlightBorder#FFB700
- peekViewResult.background#F0F6FB
- peekViewResult.fileForeground#2D5370
- peekViewResult.lineForeground#5A7D9A
- peekViewResult.matchHighlightBackground#FFD70080
- peekViewResult.selectionBackground#B8D8F0
- peekViewResult.selectionForeground#1A3E5C
- peekViewTitle.background#D8E8F5
- peekViewTitleDescription.foreground#5A7D9A
- peekViewTitleLabel.foreground#1A3E5C
- pickerGroup.border#7AB8E8
- pickerGroup.foreground#5A9CC9
- ports.iconRunningProcessForeground#6FA8DC
- problemsErrorIcon.foreground#C64040
- problemsInfoIcon.foreground#5A9CC9
- problemsWarningIcon.foreground#D4A76A
- progressBar.background#5A9CC9
- quickInput.background#FFFFFF
- quickInput.foreground#2D5370
- quickInputList.focusBackground#5A9CC9
- quickInputList.focusForeground#FFFFFF
- quickInputTitle.background#D8E8F5
- sash.hoverBorder#5A9CC9
- scrollbar.shadow#00000020
- scrollbarSlider.activeBackground#7AB8E8C0
- scrollbarSlider.background#7AB8E860
- scrollbarSlider.hoverBackground#7AB8E890
- selection.background#5A9CC940
- settings.checkboxBackground#FFFFFF
- settings.checkboxBorder#7AB8E8
- settings.checkboxForeground#2D5370
- settings.dropdownBackground#FFFFFF
- settings.dropdownBorder#7AB8E8
- settings.dropdownForeground#2D5370
- settings.dropdownListBorder#7AB8E8
- settings.headerForeground#1A3E5C
- settings.modifiedItemIndicator#D4A76A
- settings.numberInputBackground#FFFFFF
- settings.numberInputBorder#7AB8E8
- settings.numberInputForeground#2D5370
- settings.textInputBackground#FFFFFF
- settings.textInputBorder#7AB8E8
- settings.textInputForeground#2D5370
- sideBar.background#E0E0E0
- sideBar.border#A0A0A0
- sideBar.dropBackground#B8D8F060
- sideBar.foreground#202020
- sideBarSectionHeader.background#C0C0C0
- sideBarSectionHeader.border#A0A0A0
- sideBarSectionHeader.foreground#003087
- sideBarTitle.foreground#003087
- statusBar.background#C0C0C0
- statusBar.border#A0A0A0
- statusBar.debuggingBackground#003087
- statusBar.debuggingBorder#2D5370
- statusBar.debuggingForeground#FFFFFF
- statusBar.foreground#003087
- statusBar.noFolderBackground#C0C0C0
- statusBar.noFolderBorder#7AB8E8
- statusBar.noFolderForeground#003087
- statusBarItem.activeBackground#7AB8E840
- statusBarItem.compactHoverBackground#7AB8E860
- statusBarItem.errorBackground#C64040
- statusBarItem.errorForeground#FFFFFF
- statusBarItem.focusBorder#5A9CC9
- statusBarItem.hoverBackground#7AB8E860
- statusBarItem.hoverForeground#1A3E5C
- statusBarItem.prominentBackground#1A3E5C
- statusBarItem.prominentForeground#1A3E5C
- statusBarItem.prominentHoverBackground#2D5370
- statusBarItem.remoteBackground#5A9CC9
- statusBarItem.remoteForeground#FFFFFF
- statusBarItem.warningBackground#D4A76A
- statusBarItem.warningForeground#FFFFFF
- symbolIcon.arrayForeground#7AB8E8
- symbolIcon.booleanForeground#6FA8DC
- symbolIcon.classForeground#1A3E5C
- symbolIcon.colorForeground#FFD966
- symbolIcon.constantForeground#C74040
- symbolIcon.constructorForeground#1A3E5C
- symbolIcon.enumeratorForeground#7AB8E8
- symbolIcon.enumeratorMemberForeground#6FA8DC
- symbolIcon.eventForeground#E67E22
- symbolIcon.fieldForeground#7AB8E8
- symbolIcon.fileForeground#6FA8DC
- symbolIcon.folderForeground#1A3E5C
- symbolIcon.functionForeground#5A9CC9
- symbolIcon.interfaceForeground#7AB8E8
- symbolIcon.keyForeground#FFD966
- symbolIcon.keywordForeground#1A3E5C
- symbolIcon.methodForeground#5A9CC9
- symbolIcon.moduleForeground#7AB8E8
- symbolIcon.namespaceForeground#1A3E5C
- symbolIcon.nullForeground#6FA8DC
- symbolIcon.numberForeground#FFD966
- symbolIcon.objectForeground#7AB8E8
- symbolIcon.operatorForeground#1A3E5C
- symbolIcon.packageForeground#7AB8E8
- symbolIcon.propertyForeground#6FA8DC
- symbolIcon.referenceForeground#5A9CC9
- symbolIcon.snippetForeground#E67E22
- symbolIcon.stringForeground#6FA8DC
- symbolIcon.structForeground#1A3E5C
- symbolIcon.textForeground#1A3E5C
- symbolIcon.typeParameterForeground#7AB8E8
- symbolIcon.unitForeground#6FA8DC
- symbolIcon.variableForeground#7AB8E8
- tab.activeBackground#FFFFFF
- tab.activeBorder#003087
- tab.activeBorderTop#003087
- tab.activeForeground#000000
- tab.border#A0A0A0
- tab.hoverBackground#D8D8D8
- tab.hoverForeground#000000
- tab.inactiveBackground#C0C0C0
- tab.inactiveForeground#606060
- tab.lastPinnedBorder#003087
- tab.unfocusedActiveBackground#FFFFFF
- tab.unfocusedActiveBorder#808080
- tab.unfocusedActiveBorderTop#808080
- tab.unfocusedInactiveBackground#C0C0C0
- tab.unfocusedInactiveForeground#808080
- terminal.ansiBlack#2D5370
- terminal.ansiBlue#5A9CC9
- terminal.ansiBrightBlack#5A7D9A
- terminal.ansiBrightBlue#7AB8E8
- terminal.ansiBrightCyan#60C0C0
- terminal.ansiBrightGreen#4AB371
- terminal.ansiBrightMagenta#C097C7
- terminal.ansiBrightRed#E85757
- terminal.ansiBrightWhite#FFFFFF
- terminal.ansiBrightYellow#EFC985
- terminal.ansiCyan#4A9E9E
- terminal.ansiGreen#2E8B57
- terminal.ansiMagenta#9B7BA1
- terminal.ansiRed#C64040
- terminal.ansiWhite#E5F0FA
- terminal.ansiYellow#D4A76A
- terminal.background#FAFCFE
- terminal.foreground#2D5370
- terminal.selectionBackground#5A9CC940
- terminalCursor.background#FAFCFE
- terminalCursor.foreground#5A9CC9
- testing.iconErrored#C64040
- testing.iconFailed#C64040
- testing.iconPassed#2E8B57
- testing.iconQueued#D4A76A
- testing.iconSkipped#7A9AB5
- testing.peekBorder#7AB8E8
- textBlockQuote.background#FFFFFF
- textBlockQuote.border#7AB8E8
- textCodeBlock.background#F0F6FB
- textLink.activeForeground#4B8AB8
- textLink.foreground#5A9CC9
- textPreformat.foreground#2D5370
- textSeparator.foreground#7AB8E8
- titleBar.activeBackground#C0C0C0
- titleBar.activeForeground#003087
- titleBar.border#A0A0A0
- titleBar.inactiveBackground#D0D0D0
- titleBar.inactiveForeground#606060
- tree.indentGuidesStroke#E0ECF5
- walkThrough.embeddedEditorBackground#D8E8F5
- welcomePage.background#D8E8F5
- welcomePage.progress.background#7AB8E840
- welcomePage.progress.foreground#1A3E5C
- welcomePage.tileBackground#C5D9F080
- widget.shadow#00000020
- window.activeBorder#5A9CC9
- window.inactiveBorder#B8D8F0
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #7A9AB5 | italic |
| keyword, storage, storage.type | #5A9CC9 | bold |
| storage.modifier, storage.type.function | #5A9CC9 | bold |
| constant, variable.other.constant | #C64040 | — |
| constant.numeric, constant.language | #C64040 | — |
| constant.other.symbol, constant.other.enum | #D4A76A | — |
| string, string.quoted, string.interpolated | #2E8B57 | — |
| string.template | #2E8B57 | — |
| constant.character.escape | #4A9E9E | — |
| variable, meta.definition.variable | #2D5370 | — |
| variable.parameter, meta.function.parameter | #5A7D9A | — |
| support.variable.property, variable.other.property | #5A7D9A | — |
| entity.name.function, support.function | #4B8AB8 | bold |
| meta.function-call, support.function.console | #4B8AB8 | — |
| entity.name.type, support.class, support.type | #9B7BA1 | bold |
| support.type.property-name, support.type.primitive | #9B7BA1 | — |
| support.constant, support.constant.property-value | #C64040 | — |
| storage.type.interface, entity.name.namespace | #4A9E9E | — |
| punctuation.definition.parameters, punctuation.section.group | #5A7D9A | — |
| punctuation.separator, punctuation.terminator | #7A9AB5 | — |
| entity.name.tag | #5A9CC9 | bold |
| entity.name.tag.html | #5A9CC9 | bold |
| meta.tag | #5A9CC9 | — |
| entity.other.attribute-name | #4B8AB8 | — |
| meta.tag.attribute | #4B8AB8 | — |
| support.type.property-name.dom, support.type.property-name.css | #4B8AB8 | — |
| markup.heading | #5A9CC9 | bold |
| markup.bold | #5A9CC9 | bold |
| markup.italic | #5A9CC9 | italic |
| markup.inline.raw | #2E8B57 | — |
| markup.list, punctuation.definition.list | #C64040 | — |
| markup.quote | #7A9AB5 | — |
| markup.fenced_code.block, markup.raw.block | #2E8B57 | — |
| meta.preprocessor, keyword.other.preprocessor | #4A9E9E | — |
| constant.character.entity, punctuation.definition.entity | #D4A76A | — |
| markup.underline, markup.inserted | #2E8B57 | — |
| markup.deleted, punctuation.definition.deleted | #C64040 | — |
| markup.changed, punctuation.definition.changed | #D4A76A | — |
| invalid, invalid.illegal | #C64040 | bold underline |