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#0A0A0A40
- activityBar.activeBorder#D0D0D0
- activityBar.activeFocusBorder#C0C0C0
- activityBar.background#2A2A2A
- activityBar.border#000000
- activityBar.dropBorder#C0C0C0
- activityBar.foreground#D0D0D0
- activityBar.inactiveForeground#808080
- activityBarBadge.background#000000
- activityBarBadge.foreground#FFFFFF
- badge.background#000000
- badge.foreground#FFFFFF
- breadcrumb.activeSelectionForeground#D0D0D0
- breadcrumb.background#0A0A0A
- breadcrumb.focusForeground#C0C0C0
- breadcrumb.foreground#909090
- breadcrumbPicker.background#2A2A2A
- button.background#000000
- button.foreground#FFFFFF
- button.hoverBackground#404040
- button.secondaryBackground#2A2A2A
- button.secondaryForeground#C0C0C0
- button.secondaryHoverBackground#353535
- charts.blue#5555FF
- charts.foreground#D0D0D0
- charts.green#55DD55
- charts.lines#888888
- charts.orange#FF9955
- charts.purple#FF55FF
- charts.red#FF5555
- charts.yellow#FFEE55
- checkbox.background#2A2A2A
- checkbox.border#000000
- checkbox.foreground#D8D8D8
- commandCenter.activeForeground#D0D0D0
- commandCenter.background#2A2A2AE0
- commandCenter.border#000000
- commandCenter.foreground#D8D8D8
- contrastBorder#00000000
- debugConsole.errorForeground#FF5555
- debugConsole.infoForeground#5555FF
- debugConsole.inputIconForeground#D0D0D0
- debugConsole.sourceForeground#55DD55
- debugConsole.warningForeground#FFEE55
- debugIcon.breakpointCurrentStackframeForeground#FFEE55
- debugIcon.breakpointDisabledForeground#88888880
- debugIcon.breakpointForeground#FF5555
- debugIcon.breakpointStackframeForeground#5555FF
- debugIcon.breakpointUnverifiedForeground#FFEE5580
- debugIcon.continueForeground#55DD55
- debugIcon.disconnectForeground#D0D0D0
- debugIcon.pauseForeground#FFEE55
- debugIcon.restartForeground#5555FF
- debugIcon.startForeground#55DD55
- debugIcon.stepBackForeground#D0D0D0
- debugIcon.stepIntoForeground#D0D0D0
- debugIcon.stepOutForeground#D0D0D0
- debugIcon.stepOverForeground#D0D0D0
- debugIcon.stopForeground#FF5555
- debugToolBar.background#2A2A2A
- diffEditor.border#000000
- diffEditor.diagonalFill#252525
- diffEditor.insertedLineBackground#00AA0010
- diffEditor.insertedTextBackground#00AA0020
- diffEditor.insertedTextBorder#00AA0000
- diffEditor.removedLineBackground#CC000010
- diffEditor.removedTextBackground#CC000020
- diffEditor.removedTextBorder#CC000000
- dropdown.background#2A2A2A
- dropdown.border#000000
- dropdown.foreground#D8D8D8
- dropdown.listBackground#2A2A2A
- editor.background#0A0A0A
- editor.findMatchBackground#FFD700
- editor.findMatchBorder#FFB700
- editor.findMatchHighlightBackground#FFD70060
- editor.findRangeHighlightBackground#35353540
- editor.focusedStackFrameHighlightBackground#00CC0040
- editor.foldBackground#2A2A2A80
- editor.foreground#D8D8D8
- editor.inactiveSelectionBackground#30303040
- editor.lineHighlightBackground#151515
- editor.lineHighlightBorder#00000000
- editor.rangeHighlightBackground#30303030
- editor.selectionBackground#40404060
- editor.selectionHighlightBackground#35353540
- editor.stackFrameHighlightBackground#FFBB0040
- editor.wordHighlightBackground#30303040
- editor.wordHighlightStrongBackground#40404040
- editorBracketHighlight.foreground1#D0D0D0
- editorBracketHighlight.foreground2#00CC00
- editorBracketHighlight.foreground3#6699FF
- editorBracketHighlight.foreground4#CC66CC
- editorBracketHighlight.foreground5#FFBB00
- editorBracketHighlight.foreground6#FF4444
- editorBracketMatch.background#40404040
- editorBracketMatch.border#C0C0C0
- editorBracketPairGuide.activeBackground1#D0D0D060
- editorBracketPairGuide.activeBackground2#00CC0060
- editorBracketPairGuide.activeBackground3#6699FF60
- editorBracketPairGuide.activeBackground4#CC66CC60
- editorBracketPairGuide.activeBackground5#FFBB0060
- editorBracketPairGuide.activeBackground6#FF444460
- editorCodeLens.foreground#707070
- editorCursor.foreground#D0D0D0
- editorError.foreground#FF4444
- editorGroup.border#000000
- editorGroup.dropBackground#40404040
- editorGroupHeader.border#000000
- editorGroupHeader.noTabsBackground#1A1A1A
- editorGroupHeader.tabsBackground#2A2A2A
- editorGroupHeader.tabsBorder#000000
- editorGutter.addedBackground#00AA00
- editorGutter.background#0A0A0A
- editorGutter.commentRangeForeground#505050
- editorGutter.deletedBackground#CC0000
- editorGutter.modifiedBackground#CCAA00
- editorHoverWidget.background#2A2A2A
- editorHoverWidget.border#000000
- editorIndentGuide.activeBackground1#505050
- editorIndentGuide.background1#252525
- editorInfo.foreground#C0C0C0
- editorInlayHint.background#2A2A2AE0
- editorInlayHint.foreground#909090
- editorInlayHint.parameterBackground#2A2A2AE0
- editorInlayHint.parameterForeground#909090
- editorInlayHint.typeBackground#2A2A2AE0
- editorInlayHint.typeForeground#909090
- editorLightBulb.foreground#FFBB00
- editorLightBulbAutoFix.foreground#00CC00
- editorLineNumber.activeForeground#C0C0C0
- editorLineNumber.dimmedForeground#404040
- editorLineNumber.foreground#505050
- editorLink.activeForeground#6699FF
- editorOverviewRuler.addedForeground#00CC00
- editorOverviewRuler.commonContentForeground#909090
- editorOverviewRuler.currentContentForeground#00CC00
- editorOverviewRuler.deletedForeground#FF4444
- editorOverviewRuler.errorForeground#FF4444
- editorOverviewRuler.findMatchForeground#FFD700
- editorOverviewRuler.incomingContentForeground#6699FF
- editorOverviewRuler.infoForeground#C0C0C0
- editorOverviewRuler.modifiedForeground#CCAA00
- editorOverviewRuler.warningForeground#FFBB00
- editorRuler.foreground#252525
- editorStickyScroll.background#0A0A0AF0
- editorStickyScrollHover.background#151515
- editorSuggestWidget.background#2A2A2A
- editorSuggestWidget.border#000000
- editorSuggestWidget.foreground#D8D8D8
- editorSuggestWidget.highlightForeground#D0D0D0
- editorSuggestWidget.selectedBackground#000000
- editorSuggestWidget.selectedForeground#FFFFFF
- editorUnnecessaryCode.opacity#D8D8D860
- editorWarning.foreground#FFBB00
- editorWhitespace.foreground#252525
- editorWidget.background#2A2A2A
- editorWidget.border#000000
- editorWidget.resizeBorder#C0C0C0
- extensionBadge.remoteBackground#888888
- extensionBadge.remoteForeground#FFFFFF
- extensionButton.prominentBackground#888888
- extensionButton.prominentForeground#FFFFFF
- extensionButton.prominentHoverBackground#D0D0D0
- extensionIcon.preReleaseForeground#FF9955
- extensionIcon.starForeground#FFEE55
- extensionIcon.verifiedForeground#55DD55
- focusBorder#C0C0C099
- gitDecoration.addedResourceForeground#00CC00
- gitDecoration.conflictingResourceForeground#FFBB00
- gitDecoration.deletedResourceForeground#FF4444
- gitDecoration.ignoredResourceForeground#707070
- gitDecoration.modifiedResourceForeground#FFBB00
- gitDecoration.renamedResourceForeground#CC66CC
- gitDecoration.submoduleResourceForeground#00CCCC
- gitDecoration.untrackedResourceForeground#00CC00
- input.background#2A2A2A
- input.border#000000
- input.foreground#D8D8D8
- input.placeholderForeground#808080
- inputOption.activeBackground#40404040
- inputOption.activeBorder#C0C0C0
- inputOption.activeForeground#E0E0E0
- inputValidation.errorBackground#4D1010
- inputValidation.errorBorder#CC0000
- inputValidation.infoBackground#2A2A2A
- inputValidation.infoBorder#C0C0C0
- inputValidation.warningBackground#4D3D10
- inputValidation.warningBorder#CCAA00
- keybindingLabel.background#444444
- keybindingLabel.border#888888
- keybindingLabel.bottomBorder#000000
- keybindingLabel.foreground#D0D0D0
- list.activeSelectionBackground#000000
- list.activeSelectionForeground#FFFFFF
- list.dropBackground#40404040
- list.errorForeground#FF4444
- list.focusBackground#353535
- list.focusForeground#E0E0E0
- list.highlightForeground#D0D0D0
- list.hoverBackground#353535
- list.hoverForeground#E0E0E0
- list.inactiveSelectionBackground#2A2A2A
- list.inactiveSelectionForeground#C0C0C0
- list.warningForeground#FFBB00
- listFilterWidget.background#2A2A2A
- listFilterWidget.noMatchesOutline#FF4444
- listFilterWidget.outline#C0C0C0
- menu.background#2A2A2A
- menu.foreground#D8D8D8
- menu.selectionBackground#000000
- menu.selectionBorder#404040
- menu.selectionForeground#FFFFFF
- menu.separatorBackground#505050
- merge.border#000000
- merge.commonContentBackground#35353520
- merge.commonHeaderBackground#35353530
- merge.currentContentBackground#00AA0020
- merge.currentHeaderBackground#00AA0030
- merge.incomingContentBackground#6699FF20
- merge.incomingHeaderBackground#6699FF30
- minimap.background#0A0A0A
- minimap.errorHighlight#FF4444
- minimap.findMatchHighlight#FFD700
- minimap.selectionHighlight#40404060
- minimap.selectionOccurrenceHighlight#30303040
- minimap.warningHighlight#FFBB00
- notificationCenter.border#000000
- notificationCenterHeader.background#2A2A2A
- notificationCenterHeader.foreground#D0D0D0
- notificationLink.foreground#6699FF
- notifications.background#2A2A2A
- notifications.border#000000
- notifications.foreground#D8D8D8
- notificationsErrorIcon.foreground#FF4444
- notificationsInfoIcon.foreground#C0C0C0
- notificationsWarningIcon.foreground#FFBB00
- notificationToast.border#000000
- panel.background#0F0F0F
- panel.border#000000
- panelInput.border#000000
- panelSection.border#000000
- panelSection.dropBackground#40404040
- panelSectionHeader.background#2A2A2A
- panelSectionHeader.border#000000
- panelSectionHeader.foreground#D0D0D0
- panelTitle.activeBorder#C0C0C0
- panelTitle.activeForeground#D0D0D0
- panelTitle.inactiveForeground#808080
- peekView.border#C0C0C0
- peekViewEditor.background#0F0F0F
- peekViewEditor.matchHighlightBackground#FFD70080
- peekViewEditor.matchHighlightBorder#FFB700
- peekViewResult.background#1A1A1A
- peekViewResult.fileForeground#C0C0C0
- peekViewResult.lineForeground#909090
- peekViewResult.matchHighlightBackground#FFD70080
- peekViewResult.selectionBackground#2A2A2A
- peekViewResult.selectionForeground#E0E0E0
- peekViewTitle.background#2A2A2A
- peekViewTitleDescription.foreground#909090
- peekViewTitleLabel.foreground#D0D0D0
- pickerGroup.border#000000
- pickerGroup.foreground#D0D0D0
- ports.iconRunningProcessForeground#55DD55
- problemsErrorIcon.foreground#FF4444
- problemsInfoIcon.foreground#C0C0C0
- problemsWarningIcon.foreground#FFBB00
- progressBar.background#000000
- quickInput.background#2A2A2A
- quickInput.foreground#D8D8D8
- quickInputList.focusBackground#000000
- quickInputList.focusForeground#FFFFFF
- quickInputTitle.background#1A1A1A
- sash.hoverBorder#C0C0C0
- scrollbar.shadow#00000060
- scrollbarSlider.activeBackground#505050C0
- scrollbarSlider.background#50505060
- scrollbarSlider.hoverBackground#50505090
- selection.background#40404040
- settings.checkboxBackground#2A2A2A
- settings.checkboxBorder#000000
- settings.checkboxForeground#D8D8D8
- settings.dropdownBackground#2A2A2A
- settings.dropdownBorder#000000
- settings.dropdownForeground#D8D8D8
- settings.dropdownListBorder#000000
- settings.headerForeground#D0D0D0
- settings.modifiedItemIndicator#CCAA00
- settings.numberInputBackground#2A2A2A
- settings.numberInputBorder#000000
- settings.numberInputForeground#D8D8D8
- settings.textInputBackground#2A2A2A
- settings.textInputBorder#000000
- settings.textInputForeground#D8D8D8
- sideBar.background#1A1A1A
- sideBar.border#000000
- sideBar.dropBackground#40404040
- sideBar.foreground#C0C0C0
- sideBarSectionHeader.background#2A2A2A
- sideBarSectionHeader.border#000000
- sideBarSectionHeader.foreground#D0D0D0
- sideBarTitle.foreground#D0D0D0
- statusBar.background#2A2A2A
- statusBar.border#000000
- statusBar.debuggingBackground#000000
- statusBar.debuggingBorder#404040
- statusBar.debuggingForeground#FFFFFF
- statusBar.foreground#C0C0C0
- statusBar.noFolderBackground#2A2A2A
- statusBar.noFolderBorder#000000
- statusBar.noFolderForeground#C0C0C0
- statusBarItem.activeBackground#50505040
- statusBarItem.compactHoverBackground#50505060
- statusBarItem.errorBackground#CC0000
- statusBarItem.errorForeground#FFFFFF
- statusBarItem.focusBorder#C0C0C0
- statusBarItem.hoverBackground#50505060
- statusBarItem.hoverForeground#E0E0E0
- statusBarItem.prominentBackground#000000
- statusBarItem.prominentForeground#D0D0D0
- statusBarItem.prominentHoverBackground#404040
- statusBarItem.remoteBackground#000000
- statusBarItem.remoteForeground#FFFFFF
- statusBarItem.warningBackground#CCAA00
- statusBarItem.warningForeground#FFFFFF
- symbolIcon.arrayForeground#5555FF
- symbolIcon.booleanForeground#FF55FF
- symbolIcon.classForeground#D0D0D0
- symbolIcon.colorForeground#FFEE55
- symbolIcon.constantForeground#FF5555
- symbolIcon.constructorForeground#D0D0D0
- symbolIcon.enumeratorForeground#5555FF
- symbolIcon.enumeratorMemberForeground#55DD55
- symbolIcon.eventForeground#FF9955
- symbolIcon.fieldForeground#5555FF
- symbolIcon.fileForeground#A0A0A0
- symbolIcon.folderForeground#D0D0D0
- symbolIcon.functionForeground#5555FF
- symbolIcon.interfaceForeground#55DD55
- symbolIcon.keyForeground#FFEE55
- symbolIcon.keywordForeground#D0D0D0
- symbolIcon.methodForeground#5555FF
- symbolIcon.moduleForeground#55DD55
- symbolIcon.namespaceForeground#D0D0D0
- symbolIcon.nullForeground#888888
- symbolIcon.numberForeground#FFEE55
- symbolIcon.objectForeground#5555FF
- symbolIcon.operatorForeground#D0D0D0
- symbolIcon.packageForeground#55DD55
- symbolIcon.propertyForeground#55DD55
- symbolIcon.referenceForeground#5555FF
- symbolIcon.snippetForeground#FF9955
- symbolIcon.stringForeground#55DD55
- symbolIcon.structForeground#D0D0D0
- symbolIcon.textForeground#D0D0D0
- symbolIcon.typeParameterForeground#FF55FF
- symbolIcon.unitForeground#888888
- symbolIcon.variableForeground#5555FF
- tab.activeBackground#0F0F0F
- tab.activeBorder#C0C0C0
- tab.activeBorderTop#C0C0C0
- tab.activeForeground#E0E0E0
- tab.border#000000
- tab.hoverBackground#353535
- tab.hoverForeground#E0E0E0
- tab.inactiveBackground#1A1A1A
- tab.inactiveForeground#909090
- tab.lastPinnedBorder#000000
- tab.unfocusedActiveBackground#0F0F0F
- tab.unfocusedActiveBorder#808080
- tab.unfocusedActiveBorderTop#808080
- tab.unfocusedInactiveBackground#1A1A1A
- tab.unfocusedInactiveForeground#707070
- terminal.ansiBlack#0A0A0A
- terminal.ansiBlue#6699FF
- terminal.ansiBrightBlack#808080
- terminal.ansiBrightBlue#88BBFF
- terminal.ansiBrightCyan#00FFFF
- terminal.ansiBrightGreen#00FF00
- terminal.ansiBrightMagenta#EE88EE
- terminal.ansiBrightRed#FF6666
- terminal.ansiBrightWhite#FFFFFF
- terminal.ansiBrightYellow#FFDD00
- terminal.ansiCyan#00CCCC
- terminal.ansiGreen#00CC00
- terminal.ansiMagenta#CC66CC
- terminal.ansiRed#FF4444
- terminal.ansiWhite#D8D8D8
- terminal.ansiYellow#FFBB00
- terminal.background#0A0A0A
- terminal.foreground#D8D8D8
- terminal.selectionBackground#40404040
- terminalCursor.background#0A0A0A
- terminalCursor.foreground#D0D0D0
- testing.iconErrored#FF4444
- testing.iconFailed#FF4444
- testing.iconPassed#00CC00
- testing.iconQueued#FFBB00
- testing.iconSkipped#808080
- testing.peekBorder#000000
- textBlockQuote.background#2A2A2A
- textBlockQuote.border#000000
- textCodeBlock.background#151515
- textLink.activeForeground#88BBFF
- textLink.foreground#6699FF
- textPreformat.foreground#D8D8D8
- textSeparator.foreground#505050
- titleBar.activeBackground#2A2A2A
- titleBar.activeForeground#D0D0D0
- titleBar.border#000000
- titleBar.inactiveBackground#1A1A1A
- titleBar.inactiveForeground#808080
- tree.indentGuidesStroke#252525
- walkThrough.embeddedEditorBackground#2A2A2A
- welcomePage.background#2A2A2A
- welcomePage.progress.background#88888840
- welcomePage.progress.foreground#D0D0D0
- welcomePage.tileBackground#44444480
- widget.shadow#00000080
- window.activeBorder#C0C0C0
- window.inactiveBorder#404040
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #909090 | italic |
| keyword, storage, storage.type | #D0D0D0 | bold |
| storage.modifier, storage.type.function | #D0D0D0 | bold |
| constant, variable.other.constant | #FF4444 | — |
| constant.numeric, constant.language | #FF4444 | — |
| constant.other.symbol, constant.other.enum | #FFBB00 | — |
| string, string.quoted, string.interpolated | #00CC00 | — |
| string.template | #00CC00 | — |
| constant.character.escape | #00CCCC | — |
| variable, meta.definition.variable | #D8D8D8 | — |
| variable.parameter, meta.function.parameter | #C0C0C0 | — |
| support.variable.property, variable.other.property | #C0C0C0 | — |
| entity.name.function, support.function | #88BBFF | bold |
| meta.function-call, support.function.console | #88BBFF | — |
| entity.name.type, support.class, support.type | #CC66CC | bold |
| support.type.property-name, support.type.primitive | #CC66CC | — |
| support.constant, support.constant.property-value | #FF4444 | — |
| storage.type.interface, entity.name.namespace | #00CCCC | — |
| punctuation.definition.parameters, punctuation.section.group | #C0C0C0 | — |
| punctuation.separator, punctuation.terminator | #909090 | — |
| entity.name.tag | #D0D0D0 | bold |
| entity.name.tag.html | #D0D0D0 | bold |
| meta.tag | #D0D0D0 | — |
| entity.other.attribute-name | #88BBFF | — |
| meta.tag.attribute | #88BBFF | — |
| support.type.property-name.dom, support.type.property-name.css | #88BBFF | — |
| markup.heading | #D0D0D0 | bold |
| markup.bold | #D0D0D0 | bold |
| markup.italic | #D0D0D0 | italic |
| markup.inline.raw | #00CC00 | — |
| markup.list, punctuation.definition.list | #FF4444 | — |
| markup.quote | #909090 | — |
| markup.fenced_code.block, markup.raw.block | #00CC00 | — |
| meta.preprocessor, keyword.other.preprocessor | #00CCCC | — |
| constant.character.entity, punctuation.definition.entity | #FFBB00 | — |
| markup.underline, markup.inserted | #00CC00 | — |
| markup.deleted, punctuation.definition.deleted | #FF4444 | — |
| markup.changed, punctuation.definition.changed | #FFBB00 | — |
| invalid, invalid.illegal | #FF6666 | bold underline |