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#000000
- activityBar.activeFocusBorder#000000
- activityBar.background#DDDDDD
- activityBar.border#808080
- activityBar.dropBorder#000000
- activityBar.foreground#000000
- activityBar.inactiveForeground#666666
- activityBarBadge.background#000000
- activityBarBadge.foreground#FFFFFF
- badge.background#000000
- badge.foreground#FFFFFF
- breadcrumb.activeSelectionForeground#000000
- breadcrumb.background#FFFFFF
- breadcrumb.focusForeground#000000
- breadcrumb.foreground#666666
- breadcrumbPicker.background#EEEEEE
- button.background#DDDDDD
- button.foreground#000000
- button.hoverBackground#CCCCCC
- button.secondaryBackground#EEEEEE
- button.secondaryForeground#000000
- button.secondaryHoverBackground#E0E0E0
- charts.blue#0000DD
- charts.foreground#000000
- charts.green#00AA00
- charts.lines#888888
- charts.orange#FF8800
- charts.purple#DD00DD
- charts.red#DD0000
- charts.yellow#FFDD00
- checkbox.background#FFFFFF
- checkbox.border#000000
- checkbox.foreground#000000
- commandCenter.activeForeground#000000
- commandCenter.background#DDDDDD
- commandCenter.border#000000
- commandCenter.foreground#000000
- contrastBorder#00000000
- debugConsole.errorForeground#DD0000
- debugConsole.infoForeground#0000DD
- debugConsole.inputIconForeground#000000
- debugConsole.sourceForeground#00AA00
- debugConsole.warningForeground#FFDD00
- debugIcon.breakpointCurrentStackframeForeground#FFDD00
- debugIcon.breakpointDisabledForeground#88888880
- debugIcon.breakpointForeground#DD0000
- debugIcon.breakpointStackframeForeground#0000DD
- debugIcon.breakpointUnverifiedForeground#FFDD0080
- debugIcon.continueForeground#00AA00
- debugIcon.disconnectForeground#000000
- debugIcon.pauseForeground#FFDD00
- debugIcon.restartForeground#0000DD
- debugIcon.startForeground#00AA00
- debugIcon.stepBackForeground#000000
- debugIcon.stepIntoForeground#000000
- debugIcon.stepOutForeground#000000
- debugIcon.stepOverForeground#000000
- debugIcon.stopForeground#DD0000
- debugToolBar.background#DDDDDD
- diffEditor.border#808080
- diffEditor.diagonalFill#E0E0E0
- diffEditor.insertedLineBackground#E6FFE6
- diffEditor.insertedTextBackground#CCFFCC
- diffEditor.insertedTextBorder#00AA00
- diffEditor.removedLineBackground#FFE6E6
- diffEditor.removedTextBackground#FFCCCC
- diffEditor.removedTextBorder#DD0000
- dropdown.background#FFFFFF
- dropdown.border#000000
- dropdown.foreground#000000
- dropdown.listBackground#FFFFFF
- editor.background#FFFFFF
- editor.findMatchBackground#FFFF00
- editor.findMatchBorder#000000
- editor.findMatchHighlightBackground#FFFFAA
- editor.findRangeHighlightBackground#FFFFDD
- editor.focusedStackFrameHighlightBackground#00FF0040
- editor.foldBackground#EEEEEE80
- editor.foreground#000000
- editor.inactiveSelectionBackground#CCCCCC
- editor.lineHighlightBackground#F0F0F0
- editor.lineHighlightBorder#00000000
- editor.rangeHighlightBackground#F0F0F0
- editor.selectionBackground#000000
- editor.selectionHighlightBackground#DDDDDD
- editor.stackFrameHighlightBackground#FFFF0040
- editor.wordHighlightBackground#E0E0E0
- editor.wordHighlightStrongBackground#D0D0D0
- editorBracketHighlight.foreground1#000000
- editorBracketHighlight.foreground2#666666
- editorBracketHighlight.foreground3#999999
- editorBracketHighlight.foreground4#000000
- editorBracketHighlight.foreground5#666666
- editorBracketHighlight.foreground6#999999
- editorBracketMatch.background#DDDDDD
- editorBracketMatch.border#000000
- editorBracketPairGuide.activeBackground1#00000040
- editorBracketPairGuide.activeBackground2#66666640
- editorBracketPairGuide.activeBackground3#99999940
- editorBracketPairGuide.activeBackground4#00000040
- editorBracketPairGuide.activeBackground5#66666640
- editorBracketPairGuide.activeBackground6#99999940
- editorCodeLens.foreground#999999
- editorCursor.foreground#000000
- editorError.foreground#DD0000
- editorGroup.border#808080
- editorGroup.dropBackground#DDDDDD
- editorGroupHeader.border#808080
- editorGroupHeader.noTabsBackground#EEEEEE
- editorGroupHeader.tabsBackground#DDDDDD
- editorGroupHeader.tabsBorder#808080
- editorGutter.addedBackground#00AA00
- editorGutter.background#F5F5F5
- editorGutter.commentRangeForeground#999999
- editorGutter.deletedBackground#DD0000
- editorGutter.modifiedBackground#0000DD
- editorHoverWidget.background#EEEEEE
- editorHoverWidget.border#000000
- editorIndentGuide.activeBackground1#808080
- editorIndentGuide.background1#E0E0E0
- editorInfo.foreground#0000DD
- editorInlayHint.background#EEEEEE
- editorInlayHint.foreground#666666
- editorInlayHint.parameterBackground#EEEEEE
- editorInlayHint.parameterForeground#666666
- editorInlayHint.typeBackground#EEEEEE
- editorInlayHint.typeForeground#666666
- editorLightBulb.foreground#FFDD00
- editorLightBulbAutoFix.foreground#00DD00
- editorLineNumber.activeForeground#000000
- editorLineNumber.dimmedForeground#BBBBBB
- editorLineNumber.foreground#999999
- editorLink.activeForeground#0000DD
- editorOverviewRuler.addedForeground#00AA00
- editorOverviewRuler.commonContentForeground#808080
- editorOverviewRuler.currentContentForeground#00AA00
- editorOverviewRuler.deletedForeground#DD0000
- editorOverviewRuler.errorForeground#DD0000
- editorOverviewRuler.findMatchForeground#FFFF00
- editorOverviewRuler.incomingContentForeground#0000DD
- editorOverviewRuler.infoForeground#0000DD
- editorOverviewRuler.modifiedForeground#0000DD
- editorOverviewRuler.warningForeground#FF6600
- editorRuler.foreground#E0E0E0
- editorStickyScroll.background#FFFFFFF0
- editorStickyScrollHover.background#F0F0F0
- editorSuggestWidget.background#FFFFFF
- editorSuggestWidget.border#000000
- editorSuggestWidget.foreground#000000
- editorSuggestWidget.highlightForeground#DD0000
- editorSuggestWidget.selectedBackground#000000
- editorSuggestWidget.selectedForeground#FFFFFF
- editorUnnecessaryCode.opacity#00000060
- editorWarning.foreground#FF6600
- editorWhitespace.foreground#E0E0E0
- editorWidget.background#EEEEEE
- editorWidget.border#000000
- editorWidget.resizeBorder#000000
- extensionBadge.remoteBackground#000000
- extensionBadge.remoteForeground#FFFFFF
- extensionButton.prominentBackground#000000
- extensionButton.prominentForeground#FFFFFF
- extensionButton.prominentHoverBackground#888888
- extensionIcon.preReleaseForeground#FF8800
- extensionIcon.starForeground#FFDD00
- extensionIcon.verifiedForeground#00AA00
- focusBorder#000000
- gitDecoration.addedResourceForeground#00AA00
- gitDecoration.conflictingResourceForeground#FF6600
- gitDecoration.deletedResourceForeground#DD0000
- gitDecoration.ignoredResourceForeground#999999
- gitDecoration.modifiedResourceForeground#0000DD
- gitDecoration.renamedResourceForeground#DD00DD
- gitDecoration.submoduleResourceForeground#00DDDD
- gitDecoration.untrackedResourceForeground#00AA00
- input.background#FFFFFF
- input.border#000000
- input.foreground#000000
- input.placeholderForeground#808080
- inputOption.activeBackground#000000
- inputOption.activeBorder#000000
- inputOption.activeForeground#FFFFFF
- inputValidation.errorBackground#FFCCCC
- inputValidation.errorBorder#DD0000
- inputValidation.infoBackground#CCDDFF
- inputValidation.infoBorder#0000DD
- inputValidation.warningBackground#FFE8CC
- inputValidation.warningBorder#FF6600
- keybindingLabel.background#FFFFFF
- keybindingLabel.border#888888
- keybindingLabel.bottomBorder#000000
- keybindingLabel.foreground#000000
- list.activeSelectionBackground#000000
- list.activeSelectionForeground#FFFFFF
- list.dropBackground#DDDDDD
- list.errorForeground#DD0000
- list.focusBackground#DDDDDD
- list.focusForeground#000000
- list.highlightForeground#000000
- list.hoverBackground#E8E8E8
- list.hoverForeground#000000
- list.inactiveSelectionBackground#CCCCCC
- list.inactiveSelectionForeground#000000
- list.warningForeground#FF6600
- listFilterWidget.background#EEEEEE
- listFilterWidget.noMatchesOutline#DD0000
- listFilterWidget.outline#000000
- menu.background#EEEEEE
- menu.foreground#000000
- menu.selectionBackground#000000
- menu.selectionBorder#000000
- menu.selectionForeground#FFFFFF
- menu.separatorBackground#808080
- merge.border#808080
- merge.commonContentBackground#F8F8F8
- merge.commonHeaderBackground#F0F0F0
- merge.currentContentBackground#E6FFE6
- merge.currentHeaderBackground#CCFFCC
- merge.incomingContentBackground#E6EEFF
- merge.incomingHeaderBackground#CCDDFF
- minimap.background#FFFFFF
- minimap.errorHighlight#DD0000
- minimap.findMatchHighlight#FFFF00
- minimap.selectionHighlight#CCCCCC
- minimap.selectionOccurrenceHighlight#E0E0E0
- minimap.warningHighlight#FF6600
- notificationCenter.border#808080
- notificationCenterHeader.background#DDDDDD
- notificationCenterHeader.foreground#000000
- notificationLink.foreground#0000DD
- notifications.background#FFFFFF
- notifications.border#000000
- notifications.foreground#000000
- notificationsErrorIcon.foreground#DD0000
- notificationsInfoIcon.foreground#0000DD
- notificationsWarningIcon.foreground#FF6600
- notificationToast.border#000000
- panel.background#FFFFFF
- panel.border#808080
- panelInput.border#808080
- panelSection.border#808080
- panelSection.dropBackground#DDDDDD
- panelSectionHeader.background#EEEEEE
- panelSectionHeader.border#808080
- panelSectionHeader.foreground#000000
- panelTitle.activeBorder#000000
- panelTitle.activeForeground#000000
- panelTitle.inactiveForeground#666666
- peekView.border#000000
- peekViewEditor.background#FFFFFF
- peekViewEditor.matchHighlightBackground#FFFF00
- peekViewEditor.matchHighlightBorder#000000
- peekViewResult.background#EEEEEE
- peekViewResult.fileForeground#000000
- peekViewResult.lineForeground#666666
- peekViewResult.matchHighlightBackground#FFFF00
- peekViewResult.selectionBackground#CCCCCC
- peekViewResult.selectionForeground#000000
- peekViewTitle.background#DDDDDD
- peekViewTitleDescription.foreground#666666
- peekViewTitleLabel.foreground#000000
- pickerGroup.border#808080
- pickerGroup.foreground#000000
- ports.iconRunningProcessForeground#00AA00
- problemsErrorIcon.foreground#DD0000
- problemsInfoIcon.foreground#0000DD
- problemsWarningIcon.foreground#FF6600
- progressBar.background#000000
- quickInput.background#FFFFFF
- quickInput.foreground#000000
- quickInputList.focusBackground#000000
- quickInputList.focusForeground#FFFFFF
- quickInputTitle.background#DDDDDD
- sash.hoverBorder#000000
- scrollbar.shadow#00000040
- scrollbarSlider.activeBackground#999999
- scrollbarSlider.background#CCCCCC80
- scrollbarSlider.hoverBackground#BBBBBB
- selection.background#00000040
- settings.checkboxBackground#FFFFFF
- settings.checkboxBorder#000000
- settings.checkboxForeground#000000
- settings.dropdownBackground#FFFFFF
- settings.dropdownBorder#000000
- settings.dropdownForeground#000000
- settings.dropdownListBorder#000000
- settings.headerForeground#000000
- settings.modifiedItemIndicator#0000DD
- settings.numberInputBackground#FFFFFF
- settings.numberInputBorder#000000
- settings.numberInputForeground#000000
- settings.textInputBackground#FFFFFF
- settings.textInputBorder#000000
- settings.textInputForeground#000000
- sideBar.background#EEEEEE
- sideBar.border#808080
- sideBar.dropBackground#DDDDDD
- sideBar.foreground#000000
- sideBarSectionHeader.background#DDDDDD
- sideBarSectionHeader.border#808080
- sideBarSectionHeader.foreground#000000
- sideBarTitle.foreground#000000
- statusBar.background#DDDDDD
- statusBar.border#000000
- statusBar.debuggingBackground#000000
- statusBar.debuggingBorder#000000
- statusBar.debuggingForeground#FFFFFF
- statusBar.foreground#000000
- statusBar.noFolderBackground#DDDDDD
- statusBar.noFolderBorder#000000
- statusBar.noFolderForeground#000000
- statusBarItem.activeBackground#CCCCCC
- statusBarItem.compactHoverBackground#CCCCCC
- statusBarItem.errorBackground#DD0000
- statusBarItem.errorForeground#FFFFFF
- statusBarItem.focusBorder#000000
- statusBarItem.hoverBackground#CCCCCC
- statusBarItem.hoverForeground#000000
- statusBarItem.prominentBackground#000000
- statusBarItem.prominentForeground#000000
- statusBarItem.prominentHoverBackground#333333
- statusBarItem.remoteBackground#000000
- statusBarItem.remoteForeground#FFFFFF
- statusBarItem.warningBackground#FF6600
- statusBarItem.warningForeground#FFFFFF
- symbolIcon.arrayForeground#0000DD
- symbolIcon.booleanForeground#DD00DD
- symbolIcon.classForeground#000000
- symbolIcon.colorForeground#FFDD00
- symbolIcon.constantForeground#DD0000
- symbolIcon.constructorForeground#000000
- symbolIcon.enumeratorForeground#0000DD
- symbolIcon.enumeratorMemberForeground#00AA00
- symbolIcon.eventForeground#FF8800
- symbolIcon.fieldForeground#0000DD
- symbolIcon.fileForeground#000000
- symbolIcon.folderForeground#000000
- symbolIcon.functionForeground#0000DD
- symbolIcon.interfaceForeground#00AA00
- symbolIcon.keyForeground#FFDD00
- symbolIcon.keywordForeground#000000
- symbolIcon.methodForeground#0000DD
- symbolIcon.moduleForeground#00AA00
- symbolIcon.namespaceForeground#000000
- symbolIcon.nullForeground#888888
- symbolIcon.numberForeground#FFDD00
- symbolIcon.objectForeground#0000DD
- symbolIcon.operatorForeground#000000
- symbolIcon.packageForeground#00AA00
- symbolIcon.propertyForeground#00AA00
- symbolIcon.referenceForeground#0000DD
- symbolIcon.snippetForeground#FF8800
- symbolIcon.stringForeground#00AA00
- symbolIcon.structForeground#000000
- symbolIcon.textForeground#000000
- symbolIcon.typeParameterForeground#DD00DD
- symbolIcon.unitForeground#888888
- symbolIcon.variableForeground#0000DD
- tab.activeBackground#FFFFFF
- tab.activeBorder#000000
- tab.activeBorderTop#000000
- tab.activeForeground#000000
- tab.border#808080
- tab.hoverBackground#E8E8E8
- tab.hoverForeground#000000
- tab.inactiveBackground#CCCCCC
- tab.inactiveForeground#666666
- tab.lastPinnedBorder#808080
- tab.unfocusedActiveBackground#FFFFFF
- tab.unfocusedActiveBorder#666666
- tab.unfocusedActiveBorderTop#666666
- tab.unfocusedInactiveBackground#CCCCCC
- tab.unfocusedInactiveForeground#808080
- terminal.ansiBlack#000000
- terminal.ansiBlue#0000DD
- terminal.ansiBrightBlack#666666
- terminal.ansiBrightBlue#6666FF
- terminal.ansiBrightCyan#66FFFF
- terminal.ansiBrightGreen#66FF66
- terminal.ansiBrightMagenta#FF66FF
- terminal.ansiBrightRed#FF6666
- terminal.ansiBrightWhite#FFFFFF
- terminal.ansiBrightYellow#FFFF66
- terminal.ansiCyan#00DDDD
- terminal.ansiGreen#00DD00
- terminal.ansiMagenta#DD00DD
- terminal.ansiRed#DD0000
- terminal.ansiWhite#DDDDDD
- terminal.ansiYellow#DDDD00
- terminal.background#000000
- terminal.foreground#00FF00
- terminal.selectionBackground#FFFFFF40
- terminalCursor.background#000000
- terminalCursor.foreground#00FF00
- testing.iconErrored#DD0000
- testing.iconFailed#DD0000
- testing.iconPassed#00AA00
- testing.iconQueued#DDDD00
- testing.iconSkipped#999999
- testing.peekBorder#808080
- textBlockQuote.background#F5F5F5
- textBlockQuote.border#808080
- textCodeBlock.background#F5F5F5
- textLink.activeForeground#DD00DD
- textLink.foreground#0000DD
- textPreformat.foreground#000000
- textSeparator.foreground#808080
- titleBar.activeBackground#DDDDDD
- titleBar.activeForeground#000000
- titleBar.border#000000
- titleBar.inactiveBackground#FFFFFF
- titleBar.inactiveForeground#808080
- tree.indentGuidesStroke#E0E0E0
- walkThrough.embeddedEditorBackground#DDDDDD
- welcomePage.background#DDDDDD
- welcomePage.progress.background#88888840
- welcomePage.progress.foreground#000000
- welcomePage.tileBackground#CCCCCC80
- widget.shadow#00000040
- window.activeBorder#000000
- window.inactiveBorder#CCCCCC
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment, string.comment | #666666 | italic |
| keyword, storage, storage.type | #000000 | bold |
| storage.modifier, storage.type.function | #000000 | bold |
| constant, variable.other.constant | #DD0000 | — |
| constant.numeric, constant.language | #DD0000 | — |
| constant.other.symbol, constant.other.enum | #DD00DD | — |
| string, string.quoted, string.interpolated | #00AA00 | — |
| string.template | #00AA00 | — |
| constant.character.escape | #0000DD | — |
| variable, meta.definition.variable | #000000 | — |
| variable.parameter, meta.function.parameter | #000000 | — |
| support.variable.property, variable.other.property | #000000 | — |
| entity.name.function, support.function | #0000DD | bold |
| meta.function-call, support.function.console | #0000DD | — |
| entity.name.type, support.class, support.type | #DD00DD | bold |
| support.type.property-name, support.type.primitive | #DD00DD | — |
| support.constant, support.constant.property-value | #DD0000 | — |
| storage.type.interface, entity.name.namespace | #00AAAA | — |
| punctuation.definition.parameters, punctuation.section.group | #000000 | — |
| punctuation.separator, punctuation.terminator | #666666 | — |
| entity.name.tag | #0000DD | bold |
| entity.name.tag.html | #0000DD | bold |
| meta.tag | #0000DD | — |
| entity.other.attribute-name | #DD00DD | — |
| meta.tag.attribute | #DD00DD | — |
| support.type.property-name.dom, support.type.property-name.css | #DD00DD | — |
| markup.heading | #000000 | bold |
| markup.bold | #000000 | bold |
| markup.italic | #000000 | italic |
| markup.inline.raw | #00AA00 | — |
| markup.list, punctuation.definition.list | #DD0000 | — |
| markup.quote | #666666 | — |
| markup.fenced_code.block, markup.raw.block | #00AA00 | — |
| meta.preprocessor, keyword.other.preprocessor | #00AAAA | — |
| constant.character.entity, punctuation.definition.entity | #DD00DD | — |
| markup.underline, markup.inserted | #00AA00 | — |
| markup.deleted, punctuation.definition.deleted | #DD0000 | — |
| markup.changed, punctuation.definition.changed | #DD00DD | — |
| invalid, invalid.illegal | #DD0000 | bold underline |