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#05101C40
- activityBar.activeBorder#5B9DD9
- activityBar.activeFocusBorder#5A8AC6
- activityBar.background#4C4C4C
- activityBar.border#2A4E68E0
- activityBar.dropBorder#5A8AC6
- activityBar.foreground#E8E8E8
- activityBar.inactiveForeground#8E8E8E
- activityBarBadge.background#5B9DD9
- activityBarBadge.foreground#FFFFFF
- badge.background#5B9DD9
- badge.foreground#FFFFFF
- breadcrumb.activeSelectionForeground#9DC4E0
- breadcrumb.background#05101CE0
- breadcrumb.focusForeground#B8D0E5
- breadcrumb.foreground#7A9AB8
- breadcrumbPicker.background#1E3A52E8
- button.background#5B9DD9
- button.foreground#FFFFFF
- button.hoverBackground#4A8AC6
- button.secondaryBackground#4C4C4C
- button.secondaryForeground#E8E8E8
- button.secondaryHoverBackground#6E6E6E
- charts.blue#9DC4E0
- charts.foreground#E8F4F8
- charts.green#2ECC71
- charts.lines#5A8AC6
- charts.orange#E67E22
- charts.purple#9B59B6
- charts.red#E74C3C
- charts.yellow#F39C12
- checkbox.background#1E3A52E8
- checkbox.border#2A4E68E0
- checkbox.foreground#D0E0F0
- commandCenter.activeForeground#9DC4E0
- commandCenter.background#1E3A52E0
- commandCenter.border#2A4E68E0
- commandCenter.foreground#D0E0F0
- contrastBorder#00000000
- debugConsole.errorForeground#E74C3C
- debugConsole.infoForeground#9DC4E0
- debugConsole.inputIconForeground#E8F4F8
- debugConsole.sourceForeground#2ECC71
- debugConsole.warningForeground#F39C12
- debugIcon.breakpointCurrentStackframeForeground#F39C12
- debugIcon.breakpointDisabledForeground#9DC4E080
- debugIcon.breakpointForeground#E74C3C
- debugIcon.breakpointStackframeForeground#9DC4E0
- debugIcon.breakpointUnverifiedForeground#F39C1280
- debugIcon.continueForeground#2ECC71
- debugIcon.disconnectForeground#E8F4F8
- debugIcon.pauseForeground#F39C12
- debugIcon.restartForeground#9DC4E0
- debugIcon.startForeground#2ECC71
- debugIcon.stepBackForeground#E8F4F8
- debugIcon.stepIntoForeground#E8F4F8
- debugIcon.stepOutForeground#E8F4F8
- debugIcon.stepOverForeground#E8F4F8
- debugIcon.stopForeground#E74C3C
- debugToolBar.background#1E3A52E8
- diffEditor.border#2A4E68E0
- diffEditor.diagonalFill#1A3048
- diffEditor.insertedLineBackground#40B07010
- diffEditor.insertedTextBackground#40B07020
- diffEditor.insertedTextBorder#40B07000
- diffEditor.removedLineBackground#E85C7010
- diffEditor.removedTextBackground#E85C7020
- diffEditor.removedTextBorder#E85C7000
- dropdown.background#3A3A3A
- dropdown.border#5B9DD9
- dropdown.foreground#D4D4D4
- dropdown.listBackground#3A3A3A
- editor.background#1C1C1C
- editor.findMatchBackground#FFFF00
- editor.findMatchBorder#FFAA00
- editor.findMatchHighlightBackground#FFFF0080
- editor.findRangeHighlightBackground#5B9DD920
- editor.focusedStackFrameHighlightBackground#40B07040
- editor.foldBackground#1E3A5280
- editor.foreground#D4D4D4
- editor.inactiveSelectionBackground#5B9DD930
- editor.lineHighlightBackground#2D2D2D40
- editor.lineHighlightBorder#00000000
- editor.rangeHighlightBackground#4C4C4C40
- editor.selectionBackground#5B9DD950
- editor.selectionHighlightBackground#5B9DD930
- editor.stackFrameHighlightBackground#CC990040
- editor.wordHighlightBackground#4C4C4C40
- editor.wordHighlightStrongBackground#5B9DD940
- editorBracketHighlight.foreground1#9DC4E0
- editorBracketHighlight.foreground2#40B070
- editorBracketHighlight.foreground3#C090D0
- editorBracketHighlight.foreground4#F0B070
- editorBracketHighlight.foreground5#60C0D0
- editorBracketHighlight.foreground6#FF7080
- editorBracketMatch.background#5B9DD940
- editorBracketMatch.border#5B9DD9
- editorBracketPairGuide.activeBackground1#9DC4E060
- editorBracketPairGuide.activeBackground2#40B07060
- editorBracketPairGuide.activeBackground3#C090D060
- editorBracketPairGuide.activeBackground4#F0B07060
- editorBracketPairGuide.activeBackground5#60C0D060
- editorBracketPairGuide.activeBackground6#FF708060
- editorCodeLens.foreground#6A8AA5
- editorCursor.foreground#5B9DD9
- editorError.foreground#FF0000
- editorGroup.border#2D2D2D
- editorGroup.dropBackground#2E5A8C40
- editorGroupHeader.border#2D2D2D
- editorGroupHeader.noTabsBackground#3A3A3A
- editorGroupHeader.tabsBackground#4C4C4C
- editorGroupHeader.tabsBorder#2D2D2D
- editorGutter.addedBackground#00AA00
- editorGutter.background#1C1C1C
- editorGutter.commentRangeForeground#6E6E6E
- editorGutter.deletedBackground#DD0000
- editorGutter.modifiedBackground#0088DD
- editorHoverWidget.background#3A3A3A
- editorHoverWidget.border#5B9DD9
- editorIndentGuide.activeBackground1#6E6E6E
- editorIndentGuide.background1#3A3A3A
- editorInfo.foreground#5B9DD9
- editorInlayHint.background#1E3A52E0
- editorInlayHint.foreground#7A9AB8
- editorInlayHint.parameterBackground#1E3A52E0
- editorInlayHint.parameterForeground#7A9AB8
- editorInlayHint.typeBackground#1E3A52E0
- editorInlayHint.typeForeground#7A9AB8
- editorLightBulb.foreground#F0B070
- editorLightBulbAutoFix.foreground#40B070
- editorLineNumber.activeForeground#5B9DD9
- editorLineNumber.dimmedForeground#4C4C4C
- editorLineNumber.foreground#6E6E6E
- editorLink.activeForeground#7AB0D8
- editorOverviewRuler.addedForeground#40B070
- editorOverviewRuler.commonContentForeground#7A9AB8
- editorOverviewRuler.currentContentForeground#40B070
- editorOverviewRuler.deletedForeground#FF7080
- editorOverviewRuler.errorForeground#FF7080
- editorOverviewRuler.findMatchForeground#CC9900
- editorOverviewRuler.incomingContentForeground#7AB0D8
- editorOverviewRuler.infoForeground#7AB0D8
- editorOverviewRuler.modifiedForeground#F0B070
- editorOverviewRuler.warningForeground#F0B070
- editorRuler.foreground#1A3048
- editorStickyScroll.background#05101CF0
- editorStickyScrollHover.background#0F1F32E8
- editorSuggestWidget.background#1E3A52E8
- editorSuggestWidget.border#2A4E68E0
- editorSuggestWidget.foreground#D0E0F0
- editorSuggestWidget.highlightForeground#9DC4E0
- editorSuggestWidget.selectedBackground#2E5A8C
- editorSuggestWidget.selectedForeground#FFFFFF
- editorUnnecessaryCode.opacity#D0E0F060
- editorWarning.foreground#FF8800
- editorWhitespace.foreground#1A3048
- editorWidget.background#3A3A3A
- editorWidget.border#5B9DD9
- editorWidget.resizeBorder#5B9DD9
- extensionBadge.remoteBackground#5A8AC6
- extensionBadge.remoteForeground#E8F4F8
- extensionButton.prominentBackground#5A8AC6
- extensionButton.prominentForeground#E8F4F8
- extensionButton.prominentHoverBackground#9DC4E0
- extensionIcon.preReleaseForeground#E67E22
- extensionIcon.starForeground#F39C12
- extensionIcon.verifiedForeground#2ECC71
- focusBorder#5B9DD9
- gitDecoration.addedResourceForeground#40B070
- gitDecoration.conflictingResourceForeground#F0B070
- gitDecoration.deletedResourceForeground#FF7080
- gitDecoration.ignoredResourceForeground#6A8AA5
- gitDecoration.modifiedResourceForeground#F0B070
- gitDecoration.renamedResourceForeground#C090D0
- gitDecoration.submoduleResourceForeground#60C0D0
- gitDecoration.untrackedResourceForeground#40B070
- input.background#3A3A3A
- input.border#5B9DD9
- input.foreground#D4D4D4
- input.placeholderForeground#8E8E8E
- inputOption.activeBackground#5B9DD940
- inputOption.activeBorder#5B9DD9
- inputOption.activeForeground#FFFFFF
- inputValidation.errorBackground#3A0000
- inputValidation.errorBorder#FF0000
- inputValidation.infoBackground#00253A
- inputValidation.infoBorder#5B9DD9
- inputValidation.warningBackground#3A2A00
- inputValidation.warningBorder#FF8800
- keybindingLabel.background#2A4E68E0
- keybindingLabel.border#9DC4E0
- keybindingLabel.bottomBorder#5A8AC6
- keybindingLabel.foreground#E8F4F8
- list.activeSelectionBackground#5B9DD9
- list.activeSelectionForeground#FFFFFF
- list.dropBackground#5B9DD940
- list.errorForeground#FF0000
- list.focusBackground#4C4C4C
- list.focusForeground#FFFFFF
- list.highlightForeground#5B9DD9
- list.hoverBackground#4C4C4C
- list.hoverForeground#FFFFFF
- list.inactiveSelectionBackground#4C4C4C
- list.inactiveSelectionForeground#E8E8E8
- list.warningForeground#FF8800
- listFilterWidget.background#1E3A52E8
- listFilterWidget.noMatchesOutline#FF7080
- listFilterWidget.outline#5A8AC6
- menu.background#1E3A52E8
- menu.foreground#D0E0F0
- menu.selectionBackground#2E5A8C
- menu.selectionBorder#3E6AA0
- menu.selectionForeground#FFFFFF
- menu.separatorBackground#3A5570
- merge.border#2A4E68E0
- merge.commonContentBackground#1E3A5220
- merge.commonHeaderBackground#1E3A5230
- merge.currentContentBackground#40B07020
- merge.currentHeaderBackground#40B07030
- merge.incomingContentBackground#2E5A8C20
- merge.incomingHeaderBackground#2E5A8C30
- minimap.background#05101CE0
- minimap.errorHighlight#FF7080
- minimap.findMatchHighlight#CC9900
- minimap.selectionHighlight#2E5A8C60
- minimap.selectionOccurrenceHighlight#1E3A5240
- minimap.warningHighlight#F0B070
- notificationCenter.border#2A4E68E0
- notificationCenterHeader.background#1E3A52E0
- notificationCenterHeader.foreground#9DC4E0
- notificationLink.foreground#7AB0D8
- notifications.background#1E3A52E8
- notifications.border#2A4E68E0
- notifications.foreground#D0E0F0
- notificationsErrorIcon.foreground#FF7080
- notificationsInfoIcon.foreground#7AB0D8
- notificationsWarningIcon.foreground#F0B070
- notificationToast.border#2A4E68E0
- panel.background#2D2D2D
- panel.border#1C1C1C
- panelInput.border#2A4E68E0
- panelSection.border#2A4E68E0
- panelSection.dropBackground#2E5A8C40
- panelSectionHeader.background#1E3A52E0
- panelSectionHeader.border#2A4E68E0
- panelSectionHeader.foreground#9DC4E0
- panelTitle.activeBorder#5B9DD9
- panelTitle.activeForeground#E8E8E8
- panelTitle.inactiveForeground#8E8E8E
- peekView.border#5A8AC6
- peekViewEditor.background#0A1A2AE8
- peekViewEditor.matchHighlightBackground#CC990080
- peekViewEditor.matchHighlightBorder#FFB700
- peekViewResult.background#142A3DE0
- peekViewResult.fileForeground#B8D0E5
- peekViewResult.lineForeground#7A9AB8
- peekViewResult.matchHighlightBackground#CC990080
- peekViewResult.selectionBackground#1E3A52
- peekViewResult.selectionForeground#E0ECF5
- peekViewTitle.background#1E3A52E0
- peekViewTitleDescription.foreground#7A9AB8
- peekViewTitleLabel.foreground#9DC4E0
- pickerGroup.border#2A4E68E0
- pickerGroup.foreground#9DC4E0
- ports.iconRunningProcessForeground#2ECC71
- problemsErrorIcon.foreground#FF7080
- problemsInfoIcon.foreground#7AB0D8
- problemsWarningIcon.foreground#F0B070
- progressBar.background#2E5A8C
- quickInput.background#1E3A52E8
- quickInput.foreground#D0E0F0
- quickInputList.focusBackground#2E5A8C
- quickInputList.focusForeground#FFFFFF
- quickInputTitle.background#142A3DE0
- sash.hoverBorder#5A8AC6
- scrollbar.shadow#00000080
- scrollbarSlider.activeBackground#5B9DD9C0
- scrollbarSlider.background#5B9DD960
- scrollbarSlider.hoverBackground#5B9DD980
- selection.background#2E5A8C40
- settings.checkboxBackground#1E3A52E8
- settings.checkboxBorder#2A4E68E0
- settings.checkboxForeground#D0E0F0
- settings.dropdownBackground#1E3A52E8
- settings.dropdownBorder#2A4E68E0
- settings.dropdownForeground#D0E0F0
- settings.dropdownListBorder#2A4E68E0
- settings.headerForeground#9DC4E0
- settings.modifiedItemIndicator#F0B070
- settings.numberInputBackground#1E3A52E8
- settings.numberInputBorder#2A4E68E0
- settings.numberInputForeground#D0E0F0
- settings.textInputBackground#1E3A52E8
- settings.textInputBorder#2A4E68E0
- settings.textInputForeground#D0E0F0
- sideBar.background#3A3A3A
- sideBar.border#2D2D2D
- sideBar.dropBackground#2E5A8C40
- sideBar.foreground#D4D4D4
- sideBarSectionHeader.background#4C4C4C
- sideBarSectionHeader.border#2D2D2D
- sideBarSectionHeader.foreground#E8E8E8
- sideBarTitle.foreground#E8E8E8
- statusBar.background#4C4C4C
- statusBar.border#2D2D2D
- statusBar.debuggingBackground#5B9DD9
- statusBar.debuggingBorder#3E6AA0
- statusBar.debuggingForeground#FFFFFF
- statusBar.foreground#E8E8E8
- statusBar.noFolderBackground#4C4C4C
- statusBar.noFolderBorder#2A4E68E0
- statusBar.noFolderForeground#E8E8E8
- statusBarItem.activeBackground#3A557040
- statusBarItem.compactHoverBackground#3A557060
- statusBarItem.errorBackground#E85C70
- statusBarItem.errorForeground#FFFFFF
- statusBarItem.focusBorder#5A8AC6
- statusBarItem.hoverBackground#3A557060
- statusBarItem.hoverForeground#E0ECF5
- statusBarItem.prominentBackground#2E5A8C
- statusBarItem.prominentForeground#9DC4E0
- statusBarItem.prominentHoverBackground#3E6AA0
- statusBarItem.remoteBackground#2E5A8C
- statusBarItem.remoteForeground#FFFFFF
- statusBarItem.warningBackground#F0B070
- statusBarItem.warningForeground#FFFFFF
- symbolIcon.arrayForeground#9DC4E0
- symbolIcon.booleanForeground#9B59B6
- symbolIcon.classForeground#5A8AC6
- symbolIcon.colorForeground#F39C12
- symbolIcon.constantForeground#E74C3C
- symbolIcon.constructorForeground#5A8AC6
- symbolIcon.enumeratorForeground#9DC4E0
- symbolIcon.enumeratorMemberForeground#2ECC71
- symbolIcon.eventForeground#E67E22
- symbolIcon.fieldForeground#9DC4E0
- symbolIcon.fileForeground#7F8C8D
- symbolIcon.folderForeground#5A8AC6
- symbolIcon.functionForeground#9DC4E0
- symbolIcon.interfaceForeground#2ECC71
- symbolIcon.keyForeground#F39C12
- symbolIcon.keywordForeground#5A8AC6
- symbolIcon.methodForeground#9DC4E0
- symbolIcon.moduleForeground#2ECC71
- symbolIcon.namespaceForeground#5A8AC6
- symbolIcon.nullForeground#95A5A6
- symbolIcon.numberForeground#F39C12
- symbolIcon.objectForeground#9DC4E0
- symbolIcon.operatorForeground#E8F4F8
- symbolIcon.packageForeground#2ECC71
- symbolIcon.propertyForeground#2ECC71
- symbolIcon.referenceForeground#9DC4E0
- symbolIcon.snippetForeground#E67E22
- symbolIcon.stringForeground#2ECC71
- symbolIcon.structForeground#5A8AC6
- symbolIcon.textForeground#E8F4F8
- symbolIcon.typeParameterForeground#9B59B6
- symbolIcon.unitForeground#95A5A6
- symbolIcon.variableForeground#9DC4E0
- tab.activeBackground#2D2D2D
- tab.activeBorder#00000000
- tab.activeBorderTop#5B9DD9
- tab.activeForeground#FFFFFF
- tab.border#1C1C1C
- tab.hoverBackground#4C4C4C
- tab.hoverForeground#FFFFFF
- tab.inactiveBackground#3A3A3A
- tab.inactiveForeground#8E8E8E
- tab.lastPinnedBorder#5B9DD9
- tab.unfocusedActiveBackground#2D2D2D
- tab.unfocusedActiveBorder#00000000
- tab.unfocusedActiveBorderTop#4C4C4C
- tab.unfocusedInactiveBackground#3A3A3A
- tab.unfocusedInactiveForeground#6E6E6E
- terminal.ansiBlack#1C1C1C
- terminal.ansiBlue#5B9DD9
- terminal.ansiBrightBlack#6E6E6E
- terminal.ansiBrightBlue#88CCFF
- terminal.ansiBrightCyan#66FFFF
- terminal.ansiBrightGreen#66DD66
- terminal.ansiBrightMagenta#FF88FF
- terminal.ansiBrightRed#FF6666
- terminal.ansiBrightWhite#FFFFFF
- terminal.ansiBrightYellow#FFDD66
- terminal.ansiCyan#00CCCC
- terminal.ansiGreen#00AA00
- terminal.ansiMagenta#CC66DD
- terminal.ansiRed#FF0000
- terminal.ansiWhite#D4D4D4
- terminal.ansiYellow#FFAA00
- terminal.background#1C1C1C
- terminal.foreground#D4D4D4
- terminal.selectionBackground#5B9DD950
- terminalCursor.background#1C1C1C
- terminalCursor.foreground#5B9DD9
- testing.iconErrored#FF7080
- testing.iconFailed#FF7080
- testing.iconPassed#40B070
- testing.iconQueued#F0B070
- testing.iconSkipped#7A9AB8
- testing.peekBorder#2A4E68E0
- textBlockQuote.background#1E3A52E0
- textBlockQuote.border#2A4E68E0
- textCodeBlock.background#0F1F32E8
- textLink.activeForeground#9DC4E0
- textLink.foreground#7AB0D8
- textPreformat.foreground#D0E0F0
- textSeparator.foreground#3A5570
- titleBar.activeBackground#4C4C4C
- titleBar.activeForeground#E8E8E8
- titleBar.border#2D2D2D
- titleBar.inactiveBackground#3A3A3A
- titleBar.inactiveForeground#8E8E8E
- tree.indentGuidesStroke#1A3048
- walkThrough.embeddedEditorBackground#1E3A52
- welcomePage.background#1E3A52
- welcomePage.progress.background#2A4E6840
- welcomePage.progress.foreground#9DC4E0
- welcomePage.tileBackground#25435C80
- widget.shadow#00000080
- window.activeBorder#5A8AC6
- window.inactiveBorder#2A4E68
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #7A9AB8 | italic |
| keyword, storage, storage.type | #9DC4E0 | bold |
| storage.modifier, storage.type.function | #9DC4E0 | bold |
| constant, variable.other.constant | #FF7080 | — |
| constant.numeric, constant.language | #FF7080 | — |
| constant.other.symbol, constant.other.enum | #F0B070 | — |
| string, string.quoted, string.interpolated | #40B070 | — |
| string.template | #40B070 | — |
| constant.character.escape | #60C0D0 | — |
| variable, meta.definition.variable | #D0E0F0 | — |
| variable.parameter, meta.function.parameter | #B8D0E5 | — |
| support.variable.property, variable.other.property | #B8D0E5 | — |
| entity.name.function, support.function | #7AB0D8 | bold |
| meta.function-call, support.function.console | #7AB0D8 | — |
| entity.name.type, support.class, support.type | #C090D0 | bold |
| support.type.property-name, support.type.primitive | #C090D0 | — |
| support.constant, support.constant.property-value | #FF7080 | — |
| storage.type.interface, entity.name.namespace | #60C0D0 | — |
| punctuation.definition.parameters, punctuation.section.group | #B8D0E5 | — |
| punctuation.separator, punctuation.terminator | #7A9AB8 | — |
| entity.name.tag | #9DC4E0 | bold |
| entity.name.tag.html | #9DC4E0 | bold |
| meta.tag | #9DC4E0 | — |
| entity.other.attribute-name | #7AB0D8 | — |
| meta.tag.attribute | #7AB0D8 | — |
| support.type.property-name.dom, support.type.property-name.css | #7AB0D8 | — |
| markup.heading | #9DC4E0 | bold |
| markup.bold | #9DC4E0 | bold |
| markup.italic | #9DC4E0 | italic |
| markup.inline.raw | #40B070 | — |
| markup.list, punctuation.definition.list | #FF7080 | — |
| markup.quote | #7A9AB8 | — |
| markup.fenced_code.block, markup.raw.block | #40B070 | — |
| meta.preprocessor, keyword.other.preprocessor | #60C0D0 | — |
| constant.character.entity, punctuation.definition.entity | #F0B070 | — |
| markup.underline, markup.inserted | #40B070 | — |
| markup.deleted, punctuation.definition.deleted | #FF7080 | — |
| markup.changed, punctuation.definition.changed | #F0B070 | — |
| invalid, invalid.illegal | #FF8898 | bold underline |