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#D4F1E080
- activityBar.activeBorder#10B981
- activityBar.activeFocusBorder#00000000
- activityBar.background#E6F9ED
- activityBar.border#00000000
- activityBar.dropBorder#10B98160
- activityBar.foreground#0A3D1F
- activityBar.inactiveForeground#4A8D6F
- activityBarBadge.background#10B981
- activityBarBadge.foreground#FFFFFF
- badge.background#10B981
- badge.foreground#FFFFFF
- breadcrumb.activeSelectionForeground#10B981
- breadcrumb.background#F0FFF4
- breadcrumb.focusForeground#0A3D1F
- breadcrumb.foreground#1A5D3F
- breadcrumbPicker.background#E6F9ED
- button.background#10B981
- button.foreground#FFFFFF
- button.hoverBackground#00A56D
- button.secondaryBackground#D4F1E0
- button.secondaryForeground#0A3D1F
- button.secondaryHoverBackground#CAE7D6
- checkbox.background#ECFBF0
- checkbox.border#D4F1E0
- checkbox.foreground#1A5D3F
- debugIcon.breakpointForeground#EF4444
- debugToolBar.background#EEFDF2
- diffEditor.border#D4F1E0
- diffEditor.diagonalFill#4A8D6F30
- diffEditor.insertedLineBackground#22C55E1A
- diffEditor.insertedTextBackground#22C55E25
- diffEditor.insertedTextBorder#22C55E00
- diffEditor.removedLineBackground#EF44441A
- diffEditor.removedTextBackground#EF444425
- diffEditor.removedTextBorder#EF444400
- dropdown.background#E6F9ED
- dropdown.border#D4F1E0
- dropdown.foreground#0A3D1F
- dropdown.listBackground#F0FFF4
- editor.background#F0FFF4
- editor.findMatchBackground#F59E0B40
- editor.findMatchBorder#F59E0B
- editor.findMatchHighlightBackground#F59E0B25
- editor.findMatchHighlightBorder#F59E0B87
- editor.findRangeHighlightBackground#F59E0B15
- editor.focusedStackFrameHighlightBackground#22C55E1A
- editor.foldBackground#EEFDF280
- editor.foreground#0A3D1F
- editor.hoverHighlightBackground#3B82F620
- editor.inactiveSelectionBackground#10B98115
- editor.lineHighlightBackground#D4F1E040
- editor.lineHighlightBorder#00000000
- editor.rangeHighlightBackground#10B98110
- editor.selectionBackground#10B98130
- editor.selectionHighlightBackground#10B98120
- editor.selectionHighlightBorder#10B98154
- editor.stackFrameHighlightBackground#F59E0B1A
- editor.wordHighlightBackground#10B98125
- editor.wordHighlightStrongBackground#10B98135
- editorBracketHighlight.foreground1#10B981
- editorBracketHighlight.foreground2#F59E0B
- editorBracketHighlight.foreground3#EF4444
- editorBracketHighlight.foreground4#3B82F6
- editorBracketHighlight.foreground5#22C55E
- editorBracketHighlight.foreground6#059669
- editorBracketMatch.background#ECFBF0
- editorBracketMatch.border#F59E0B87
- editorBracketPairGuide.activeBackground1#10B98154
- editorBracketPairGuide.activeBackground2#F59E0B54
- editorBracketPairGuide.activeBackground3#EF444454
- editorBracketPairGuide.activeBackground4#3B82F654
- editorBracketPairGuide.activeBackground5#22C55E54
- editorBracketPairGuide.activeBackground6#05966954
- editorCursor.background#F0FFF4
- editorCursor.foreground#10B981
- editorError.foreground#EF4444
- editorGroup.border#D4F1E0
- editorGroup.dropBackground#D4F1E080
- editorGroupHeader.border#D4F1E0
- editorGroupHeader.noTabsBackground#E6F9ED
- editorGroupHeader.tabsBackground#E6F9ED
- editorGroupHeader.tabsBorder#00000000
- editorGutter.addedBackground#22C55EAB
- editorGutter.commentRangeForeground#4A8D6F
- editorGutter.deletedBackground#EF4444AB
- editorGutter.modifiedBackground#F59E0BAB
- editorHoverWidget.background#EAF9EE
- editorHoverWidget.border#D4F1E0
- editorIndentGuide.activeBackground#4A8D6F50
- editorIndentGuide.activeBackground1#4A8D6FB3
- editorIndentGuide.background#4A8D6F20
- editorIndentGuide.background1#ECFBF0
- editorInfo.foreground#3B82F6
- editorLineNumber.activeForeground#10B981
- editorLineNumber.dimmedForeground#5EA183
- editorLineNumber.foreground#4A8D6F
- editorLink.activeForeground#10B981
- editorOverviewRuler.addedForeground#22C55E66
- editorOverviewRuler.deletedForeground#EF444466
- editorOverviewRuler.errorForeground#EF4444AB
- editorOverviewRuler.findMatchForeground#F59E0B87
- editorOverviewRuler.infoForeground#3B82F687
- editorOverviewRuler.modifiedForeground#F59E0B66
- editorOverviewRuler.warningForeground#F59E0BAB
- editorStickyScroll.background#F0FFF4F2
- editorStickyScrollHover.background#EEFDF2
- editorUnnecessaryCode.opacity#0A3D1F40
- editorWarning.foreground#F59E0B
- editorWhitespace.foreground#4A8D6F40
- editorWidget.background#EAF9EE
- editorWidget.border#D4F1E0
- editorWidget.resizeBorder#10B981
- focusBorder#10B981B3
- gitDecoration.addedResourceForeground#22C55E
- gitDecoration.conflictingResourceForeground#EF4444
- gitDecoration.deletedResourceForeground#EF4444
- gitDecoration.ignoredResourceForeground#4A8D6F
- gitDecoration.modifiedResourceForeground#F59E0B
- gitDecoration.renamedResourceForeground#3B82F6
- gitDecoration.submoduleResourceForeground#059669
- gitDecoration.untrackedResourceForeground#3B82F6
- input.background#E6F9ED
- input.border#D4F1E0
- input.foreground#0A3D1F
- input.placeholderForeground#4A8D6F
- inputOption.activeBackground#10B98130
- inputOption.activeBorder#10B981
- inputOption.activeForeground#0A3D1F
- inputValidation.errorBackground#EF444420
- inputValidation.errorBorder#EF4444
- inputValidation.infoBackground#3B82F620
- inputValidation.infoBorder#3B82F6
- inputValidation.warningBackground#F59E0B20
- inputValidation.warningBorder#F59E0B
- list.activeSelectionBackground#10B98130
- list.activeSelectionForeground#0A3D1F
- list.dropBackground#10B98130
- list.errorForeground#EF4444
- list.focusBackground#10B98140
- list.focusForeground#0A3D1F
- list.highlightForeground#10B981
- list.hoverBackground#D4F1E060
- list.hoverForeground#0A3D1F
- list.inactiveSelectionBackground#10B98120
- list.inactiveSelectionForeground#0A3D1F
- list.warningForeground#F59E0B
- listFilterWidget.background#E6F9ED
- listFilterWidget.noMatchesOutline#EF4444
- listFilterWidget.outline#10B981
- menu.background#EAF9EE
- menu.foreground#0A3D1F
- menu.selectionBackground#ECFBF0
- menu.selectionBorder#D4F1E0
- menu.selectionForeground#0A3D1F
- menu.separatorBackground#D4F1E0
- minimap.errorHighlight#EF444499
- minimap.findMatchHighlight#F59E0B99
- minimap.selectionHighlight#10B98154
- minimap.selectionOccurrenceHighlight#10B98133
- minimap.warningHighlight#F59E0B99
- notificationCenter.border#D4F1E0
- notificationCenterHeader.background#E6F9ED
- notificationCenterHeader.foreground#0A3D1F
- notificationLink.foreground#10B981
- notifications.background#E6F9ED
- notifications.border#D4F1E0
- notifications.foreground#0A3D1F
- notificationsErrorIcon.foreground#EF4444
- notificationsInfoIcon.foreground#3B82F6
- notificationsWarningIcon.foreground#F59E0B
- notificationToast.border#D4F1E0
- panel.background#F0FFF4
- panel.border#D4F1E0
- panel.dropBorder#10B981
- panelInput.border#D4F1E0
- panelSection.border#D4F1E0
- panelSection.dropBackground#D4F1E080
- panelSectionHeader.background#E6F9ED
- panelSectionHeader.border#D4F1E0
- panelSectionHeader.foreground#0A3D1F
- panelTitle.activeBorder#10B981
- panelTitle.activeForeground#0A3D1F
- panelTitle.inactiveForeground#4A8D6F
- peekView.border#10B981
- peekViewEditor.background#F0FFF4
- peekViewEditor.matchHighlightBackground#F59E0B40
- peekViewEditor.matchHighlightBorder#F59E0B87
- peekViewResult.background#E6F9ED
- peekViewResult.fileForeground#0A3D1F
- peekViewResult.lineForeground#1A5D3F
- peekViewResult.matchHighlightBackground#F59E0B40
- peekViewResult.selectionBackground#10B98130
- peekViewResult.selectionForeground#0A3D1F
- peekViewTitle.background#D4F1E0
- peekViewTitleDescription.foreground#1A5D3F
- peekViewTitleLabel.foreground#0A3D1F
- pickerGroup.border#D4F1E0
- pickerGroup.foreground#10B981
- problemsErrorIcon.foreground#EF4444
- problemsInfoIcon.foreground#3B82F6
- problemsWarningIcon.foreground#F59E0B
- progressBar.background#10B981
- quickInput.background#F0FFF4FC
- quickInput.foreground#0A3D1F
- quickInputTitle.background#EAF9EE
- sash.hoverBorder#10B981
- scrollbar.shadow#00000030
- scrollbarSlider.activeBackground#4A8D6F80
- scrollbarSlider.background#4A8D6F40
- scrollbarSlider.hoverBackground#4A8D6F60
- selection.background#10B98126
- sideBar.background#E6F9ED
- sideBar.border#D4F1E060
- sideBar.dropBackground#D4F1E080
- sideBar.foreground#1A5D3F
- sideBarSectionHeader.background#D4F1E0
- sideBarSectionHeader.border#CAE7D6
- sideBarSectionHeader.foreground#10B981
- sideBarTitle.foreground#0A3D1F
- statusBar.background#10B981
- statusBar.border#00000000
- statusBar.debuggingBackground#059669
- statusBar.debuggingBorder#00000000
- statusBar.debuggingForeground#FFFFFF
- statusBar.foreground#FFFFFF
- statusBar.noFolderBackground#3B82F6
- statusBar.noFolderForeground#FFFFFF
- statusBarItem.activeBackground#00000040
- statusBarItem.errorBackground#EF4444
- statusBarItem.errorForeground#FFFFFF
- statusBarItem.hoverBackground#00000030
- statusBarItem.prominentBackground#F59E0B
- statusBarItem.prominentForeground#FFFFFF
- statusBarItem.prominentHoverBackground#E18A00
- statusBarItem.remoteBackground#22C55E
- statusBarItem.remoteForeground#FFFFFF
- statusBarItem.warningBackground#F59E0B
- statusBarItem.warningForeground#FFFFFF
- tab.activeBackground#F0FFF4
- tab.activeBorder#00000000
- tab.activeBorderTop#10B981
- tab.activeForeground#0A3D1F
- tab.activeModifiedBorder#F59E0B
- tab.border#00000000
- tab.hoverBackground#D4F1E0
- tab.hoverBorder#00000000
- tab.hoverForeground#0A3D1F
- tab.inactiveBackground#E6F9ED
- tab.inactiveForeground#4A8D6F
- tab.lastPinnedBorder#CAE7D6
- tab.unfocusedActiveBackground#F0FFF4
- tab.unfocusedActiveBorder#00000000
- tab.unfocusedActiveBorderTop#10B98180
- tab.unfocusedHoverBackground#D4F1E080
- tab.unfocusedInactiveBackground#E6F9ED
- tab.unfocusedInactiveForeground#5EA183
- terminal.ansiBlack#1A1A1A
- terminal.ansiBlue#10B981
- terminal.ansiBrightBlack#4A8D6F
- terminal.ansiBrightBlue#009B63
- terminal.ansiBrightCyan#00784B
- terminal.ansiBrightGreen#04A740
- terminal.ansiBrightMagenta#1D64D8
- terminal.ansiBrightRed#D12626
- terminal.ansiBrightWhite#0A3D1F
- terminal.ansiBrightYellow#D78000
- terminal.ansiCyan#059669
- terminal.ansiGreen#22C55E
- terminal.ansiMagenta#3B82F6
- terminal.ansiRed#EF4444
- terminal.ansiWhite#0A3D1F
- terminal.ansiYellow#F59E0B
- terminal.background#F0FFF4
- terminal.foreground#0A3D1F
- terminal.selectionBackground#10B98140
- terminalCursor.background#F0FFF4
- terminalCursor.foreground#10B981
- testing.iconErrored#EF4444CC
- testing.iconFailed#EF4444
- testing.iconPassed#22C55E
- testing.iconQueued#F59E0B
- testing.iconSkipped#4A8D6F
- testing.peekBorder#D4F1E0
- textBlockQuote.background#EEFDF2
- textBlockQuote.border#D4F1E0
- textCodeBlock.background#ECFBF0
- textLink.activeForeground#10B981
- textLink.foreground#10B981
- textPreformat.foreground#1A5D3F
- textSeparator.foreground#D4F1E0
- titleBar.activeBackground#E6F9ED
- titleBar.activeForeground#0A3D1F
- titleBar.border#00000000
- titleBar.inactiveBackground#F0FFF4
- titleBar.inactiveForeground#4A8D6F
- tree.indentGuidesStroke#4A8D6F40
- widget.shadow#F0FFF4DD
- window.activeBorder#10B981
- window.inactiveBorder#D4F1E0
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | — | italic |
| keyword | — | bold |
| entity.name.function | — | — |
| variable, meta.definition.variable | — | — |
| string | — | — |
| constant.numeric | — | — |
| constant.language, constant.character | — | — |
| storage.type, storage.modifier | — | — |
| entity.name.type, support.type, support.class | — | — |
| punctuation, meta.brace | — | — |
| invalid, invalid.illegal | — | underline |
| markup.bold, markup.bold.markdown | — | bold |
| markup.italic, markup.italic.markdown | — | italic |
| markup.inline.raw, markup.raw.inline, markup.inline.code | — | — |
| markup.heading, entity.name.section, punctuation.definition.heading.markdown | — | bold |
| heading.1.markdown, markup.heading.setext.1.markdown | — | bold |
| heading.2.markdown, markup.heading.setext.2.markdown | — | bold |
| heading.3.markdown | — | bold |
| heading.4.markdown | — | bold |
| heading.5.markdown | — | bold |
| heading.6.markdown | — | bold |
| entity.name.tag.html, entity.name.tag.xml | — | bold |
| entity.name.tag.structure.any.html, entity.name.tag.block.any.html | — | bold |
| entity.name.tag.inline.any.html | — | — |
| entity.name.tag.script.html, entity.name.tag.style.html | — | bold |
| entity.other.attribute-name.html, entity.other.attribute-name.xml | — | italic |
| entity.other.attribute-name.class.html, entity.other.attribute-name.class.css | — | italic bold |
| entity.other.attribute-name.id.html, entity.other.attribute-name.id.css | — | italic bold |
| entity.other.attribute-name.style.html | — | italic |
| entity.other.attribute-name.event.html | — | italic |
| string.quoted.double.html, string.quoted.single.html | — | — |
| meta.attribute-with-value.html string | — | — |
| punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html | — | — |
| punctuation.definition.tag.html, punctuation.separator.key-value.html | — | — |
| punctuation.definition.string.begin.html, punctuation.definition.string.end.html | — | — |
| comment.block.html, punctuation.definition.comment.html | — | italic |
| constant.character.entity.html, constant.character.entity.named.html | — | bold |
| punctuation.definition.entity.html | — | — |
| meta.tag.sgml.doctype.html, entity.name.tag.doctype.html | — | bold |
| keyword.doctype.xml | — | bold |
| source.css.embedded.html | — | — |
| meta.embedded.block.css | — | — |
| source.js.embedded.html, source.javascript.embedded.html | — | — |
| meta.embedded.block.javascript | — | — |
| entity.name.tag.form.html, entity.name.tag.input.html, entity.name.tag.button.html | — | bold |
| entity.other.attribute-name.form.html | — | italic |
| entity.name.tag.table.html, entity.name.tag.tr.html, entity.name.tag.td.html, entity.name.tag.th.html | — | bold |
| entity.name.tag.img.html, entity.name.tag.video.html, entity.name.tag.audio.html | — | bold |
| entity.name.tag.a.html | — | bold |
| entity.other.attribute-name.href.html | — | italic bold |
| entity.name.tag.header.html, entity.name.tag.main.html, entity.name.tag.footer.html, entity.name.tag.nav.html, entity.name.tag.aside.html, entity.name.tag.section.html, entity.name.tag.article.html, entity.name.tag.figure.html, entity.name.tag.figcaption.html | — | bold |
| text.html.basic | — | — |