XELA Themes

Name: XELA Themes
Author: cybrdelic

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.

Open in VS Code GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

XELA Themes — XELA Dove Grey — Soft Neutral

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#666666
activityBar.background#F0F0F0
activityBar.border#D0D0D0
activityBar.foreground#333333
activityBar.inactiveForeground#808080
activityBarBadge.background#666666
activityBarBadge.foreground#FFFFFF
badge.background#666666
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#666666
breadcrumb.background#F7F7F7
breadcrumb.focusForeground#333333
breadcrumb.foreground#808080
breadcrumbPicker.background#E0E0E0
button.background#666666
button.foreground#FFFFFF
button.hoverBackground#7A7A7A
checkbox.background#E8E8E8
checkbox.border#D0D0D0
checkbox.foreground#4D4D4D
debugIcon.breakpointForeground#C75450
debugToolBar.background#F0F0F0
diffEditor.insertedLineBackground#66A3661A
diffEditor.insertedTextBackground#66A36621
diffEditor.removedLineBackground#C754501A
diffEditor.removedTextBackground#C7545021
dropdown.background#E8E8E8
dropdown.border#D0D0D0
dropdown.foreground#333333
editor.background#F7F7F7
editor.findMatchBackground#00000000
editor.findMatchBorder#D4A036
editor.findMatchHighlightBackground#E8E8E880
editor.findMatchHighlightBorder#D4A03687
editor.focusedStackFrameHighlightBackground#66A3661A
editor.foldBackground#F0F0F080
editor.foreground#333333
editor.hoverHighlightBackground#E8E8E880
editor.inactiveSelectionBackground#66666699
editor.lineHighlightBackground#E8E8E8
editor.selectionBackground#66666633
editor.selectionHighlightBackground#66666699
editor.selectionHighlightBorder#66666654
editor.stackFrameHighlightBackground#D4A0361A
editor.wordHighlightBackground#6666661A
editor.wordHighlightStrongBackground#6666662B
editorBracketHighlight.foreground1#666666
editorBracketHighlight.foreground2#D4A036
editorBracketHighlight.foreground3#C75450
editorBracketHighlight.foreground4#5C97BF
editorBracketHighlight.foreground5#66A366
editorBracketHighlight.foreground6#7A7A7A
editorBracketMatch.background#E8E8E8
editorBracketMatch.border#D4A03687
editorBracketPairGuide.activeBackground1#66666654
editorBracketPairGuide.activeBackground2#D4A03654
editorBracketPairGuide.activeBackground3#C7545054
editorBracketPairGuide.activeBackground4#5C97BF54
editorBracketPairGuide.activeBackground5#66A36654
editorBracketPairGuide.activeBackground6#7A7A7A54
editorCursor.foreground#666666
editorError.foreground#C75450
editorGroup.dropBackground#66666621
editorGroupHeader.tabsBackground#E8E8E8
editorGroupHeader.tabsBorder#D0D0D0
editorGutter.addedBackground#66A366AB
editorGutter.commentRangeForeground#808080
editorGutter.deletedBackground#C75450AB
editorGutter.modifiedBackground#D4A036AB
editorHoverWidget.background#E0E0E0
editorHoverWidget.border#D0D0D0
editorIndentGuide.activeBackground1#808080B3
editorIndentGuide.background1#E8E8E8
editorInfo.foreground#5C97BF
editorLineNumber.activeForeground#4D4D4D
editorLineNumber.foreground#808080
editorLink.activeForeground#5C97BF
editorOverviewRuler.addedForeground#66A36666
editorOverviewRuler.deletedForeground#C7545066
editorOverviewRuler.errorForeground#C75450AB
editorOverviewRuler.findMatchForeground#D4A03687
editorOverviewRuler.infoForeground#5C97BF87
editorOverviewRuler.modifiedForeground#D4A03666
editorOverviewRuler.warningForeground#D4A036AB
editorStickyScroll.background#F7F7F7F2
editorStickyScrollHover.background#F0F0F0
editorUnnecessaryCode.opacity#33333340
editorWarning.foreground#D4A036
editorWidget.background#E0E0E0
editorWidget.border#D0D0D0
editorWidget.resizeBorder#666666
focusBorder#666666B3
gitDecoration.addedResourceForeground#66A366
gitDecoration.conflictingResourceForeground#C75450CC
gitDecoration.deletedResourceForeground#C75450
gitDecoration.ignoredResourceForeground#808080
gitDecoration.modifiedResourceForeground#D4A036
gitDecoration.renamedResourceForeground#5C97BF
gitDecoration.submoduleResourceForeground#D4A036CC
gitDecoration.untrackedResourceForeground#66A366CC
input.background#E8E8E8
input.border#D0D0D0
input.foreground#333333
input.placeholderForeground#808080
inputOption.activeBorder#666666AB
inputValidation.errorBackground#C754501A
inputValidation.errorBorder#C75450
inputValidation.infoBackground#5C97BF1A
inputValidation.infoBorder#5C97BF
inputValidation.warningBackground#D4A0361A
inputValidation.warningBorder#D4A036
list.activeSelectionBackground#E8E8E8
list.activeSelectionForeground#333333
list.dropBackground#66666621
list.errorForeground#C75450
list.focusBackground#F0F0F0
list.highlightForeground#666666
list.hoverBackground#E8E8E8
list.inactiveSelectionBackground#F0F0F0
list.warningForeground#D4A036
listFilterWidget.background#E8E8E8
listFilterWidget.noMatchesOutline#C75450AB
listFilterWidget.outline#666666AB
menu.background#E0E0E0
menu.foreground#333333
menu.selectionBackground#E8E8E8
menu.selectionBorder#D0D0D0
menu.selectionForeground#333333
menu.separatorBackground#D0D0D0
minimap.errorHighlight#C7545099
minimap.findMatchHighlight#D4A03699
minimap.selectionHighlight#66666654
minimap.selectionOccurrenceHighlight#66666633
minimap.warningHighlight#D4A03699
notificationCenterHeader.foreground#333333
notifications.background#E0E0E0
notifications.border#D0D0D0
panel.background#F9F9F9
panel.border#D0D0D0
panel.dropBorder#666666
panelTitle.activeBorder#666666
panelTitle.activeForeground#333333
panelTitle.inactiveForeground#4D4D4D
peekView.border#D0D0D0
peekViewEditor.background#E0E0E0
peekViewEditor.matchHighlightBackground#D4A03621
peekViewEditor.matchHighlightBorder#D4A03687
peekViewResult.background#E8E8E8
peekViewResult.matchHighlightBackground#E0E0E0
peekViewTitle.background#E8E8E8
peekViewTitleDescription.foreground#808080
peekViewTitleLabel.foreground#333333
pickerGroup.border#D0D0D0
pickerGroup.foreground#666666
problemsErrorIcon.foreground#C75450
problemsInfoIcon.foreground#5C97BF
problemsWarningIcon.foreground#D4A036
progressBar.background#666666
quickInput.background#F7F7F7F2
quickInput.foreground#333333
quickInputTitle.background#E0E0E0
sash.hoverBorder#666666
scrollbar.shadow#F7F7F799
scrollbarSlider.activeBackground#E0E0E0FF
scrollbarSlider.background#E0E0E0
scrollbarSlider.hoverBackground#E0E0E0FF
selection.background#66666633
sideBar.background#F0F0F0
sideBar.border#D0D0D0
sideBar.dropBackground#66666621
sideBar.foreground#333333
sideBarSectionHeader.background#E8E8E8
sideBarTitle.foreground#4D4D4D
statusBar.background#F0F0F0
statusBar.border#D0D0D0
statusBar.debuggingBackground#D4A036
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#333333
statusBar.noFolderBackground#E8E8E8
statusBar.noFolderForeground#4D4D4D
statusBarItem.errorBackground#C75450
statusBarItem.errorForeground#FFFFFF
statusBarItem.hoverBackground#E8E8E8
statusBarItem.prominentBackground#E8E8E8
statusBarItem.prominentHoverBackground#E0E0E0
statusBarItem.remoteBackground#5C97BF
statusBarItem.remoteForeground#FFFFFF
statusBarItem.warningBackground#D4A036
statusBarItem.warningForeground#FFFFFF
tab.activeBackground#F7F7F7
tab.activeBorderTop#666666
tab.activeForeground#333333
tab.activeModifiedBorder#D4A036
tab.border#E8E8E8
tab.hoverBackground#E0E0E0
tab.hoverBorder#E0E0E0
tab.hoverForeground#333333
tab.inactiveBackground#E8E8E8
tab.inactiveForeground#808080
tab.lastPinnedBorder#D0D0D0
tab.unfocusedActiveBorderTop#D4A03687
tab.unfocusedHoverBackground#E0E0E0
terminal.ansiBlack#F7F7F7
terminal.ansiBlue#5C97BF
terminal.ansiBrightBlack#808080
terminal.ansiBrightBlue#5C97BFCC
terminal.ansiBrightCyan#7A7A7A
terminal.ansiBrightGreen#66A366CC
terminal.ansiBrightMagenta#C75450CC
terminal.ansiBrightRed#C75450CC
terminal.ansiBrightWhite#333333
terminal.ansiBrightYellow#D4A036CC
terminal.ansiCyan#666666
terminal.ansiGreen#66A366
terminal.ansiMagenta#C75450
terminal.ansiRed#C75450
terminal.ansiWhite#4D4D4D
terminal.ansiYellow#D4A036
terminal.background#F7F7F7
terminal.foreground#333333
terminalCursor.foreground#666666
testing.iconErrored#C75450CC
testing.iconFailed#C75450
testing.iconPassed#66A366
testing.iconQueued#D4A036
testing.iconSkipped#808080
testing.peekBorder#D0D0D0
textBlockQuote.background#F0F0F0
textBlockQuote.border#D0D0D0
textCodeBlock.background#E8E8E8
textLink.activeForeground#666666
textLink.foreground#5C97BF
textPreformat.foreground#4D4D4D
textSeparator.foreground#D0D0D0
titleBar.activeBackground#F0F0F0
titleBar.activeForeground#333333
titleBar.border#D0D0D0
titleBar.inactiveBackground#F0F0F0
titleBar.inactiveForeground#808080
widget.shadow#F7F7F799
window.activeBorder#666666
window.inactiveBorder#D0D0D0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#999999	italic
keyword	#7A7A7A	bold
entity.name.function	#5C97BF	—
variable, meta.definition.variable	#333333	—
string	#66A366	—
constant.numeric	#D4A036	—
constant.language, constant.character	#8B5C8B	—
storage.type, storage.modifier	#7A7A7A	—
entity.name.type, support.type, support.class	#5C97BF	—
punctuation, meta.brace	#4D4D4D	—
invalid, invalid.illegal	#C75450	underline
markup.bold, markup.bold.markdown	#333333	bold
markup.italic, markup.italic.markdown	#333333	italic
markup.inline.raw, markup.raw.inline, markup.inline.code	#333333	—
markup.heading, entity.name.section, punctuation.definition.heading.markdown	#666666	bold
heading.1.markdown, markup.heading.setext.1.markdown	#333333	bold
heading.2.markdown, markup.heading.setext.2.markdown	#5C97BF	bold
heading.3.markdown	#66A366	bold
heading.4.markdown	#D4A036	bold
heading.5.markdown	#8B5C8B	bold
heading.6.markdown	#808080	bold
entity.name.tag.html, entity.name.tag.xml	#F7B883	bold
entity.name.tag.structure.any.html, entity.name.tag.block.any.html	#FFD166	bold
entity.name.tag.inline.any.html	#EADCB2	—
entity.name.tag.script.html, entity.name.tag.style.html	#FF3CAC	bold
entity.other.attribute-name.html, entity.other.attribute-name.xml	#EADCB2	italic
entity.other.attribute-name.class.html, entity.other.attribute-name.class.css	#C8B0FF	italic bold
entity.other.attribute-name.id.html, entity.other.attribute-name.id.css	#4CFFCA	italic bold
entity.other.attribute-name.style.html	#FF8BDA	italic
entity.other.attribute-name.event.html	#D8C8FF	italic
string.quoted.double.html, string.quoted.single.html	#00F5A0	—
meta.attribute-with-value.html string	#98FF66	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#A6AAB4	—
punctuation.definition.tag.html, punctuation.separator.key-value.html	#8E93A6	—
punctuation.definition.string.begin.html, punctuation.definition.string.end.html	#9AA0B4	—
comment.block.html, punctuation.definition.comment.html	#8E93A6	italic
constant.character.entity.html, constant.character.entity.named.html	#F2C97D	bold
punctuation.definition.entity.html	#FFD166	—
meta.tag.sgml.doctype.html, entity.name.tag.doctype.html	#FF3CAC	bold
keyword.doctype.xml	#FF3CAC	bold
source.css.embedded.html	#E0CCFF	—
meta.embedded.block.css	#D7C7FF	—
source.js.embedded.html, source.javascript.embedded.html	#F7B883	—
meta.embedded.block.javascript	#EADCB2	—
entity.name.tag.form.html, entity.name.tag.input.html, entity.name.tag.button.html	#79E49A	bold
entity.other.attribute-name.form.html	#98FF66	italic
entity.name.tag.table.html, entity.name.tag.tr.html, entity.name.tag.td.html, entity.name.tag.th.html	#4CFFCA	bold
entity.name.tag.img.html, entity.name.tag.video.html, entity.name.tag.audio.html	#FFD166	bold
entity.name.tag.a.html	#4CFFCA	bold
entity.other.attribute-name.href.html	#00F5A0	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	#C8B0FF	bold
text.html.basic	#F7F8FA	—