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