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 E-Ink Pro — Grayscale Perfect

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#000000
activityBar.background#F0F0F0
activityBar.border#CCCCCC
activityBar.foreground#000000
activityBar.inactiveForeground#999999
activityBarBadge.background#000000
activityBarBadge.foreground#FFFFFF
badge.background#000000
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#000000
breadcrumb.background#FFFFFF
breadcrumb.focusForeground#000000
breadcrumb.foreground#999999
breadcrumbPicker.background#FFFFFF
button.background#000000
button.foreground#FFFFFF
button.hoverBackground#1A1A1A
checkbox.background#FFFFFF
checkbox.border#CCCCCC
checkbox.foreground#4D4D4D
debugIcon.breakpointForeground#000000
debugToolBar.background#F0F0F0
diffEditor.insertedLineBackground#0000001A
diffEditor.insertedTextBackground#00000021
diffEditor.removedLineBackground#0000001A
diffEditor.removedTextBackground#00000021
dropdown.background#FFFFFF
dropdown.border#CCCCCC
dropdown.foreground#000000
editor.background#FFFFFF
editor.findMatchBackground#00000000
editor.findMatchBorder#666666
editor.findMatchHighlightBackground#FFFFFF80
editor.findMatchHighlightBorder#66666687
editor.focusedStackFrameHighlightBackground#0000001A
editor.foldBackground#F0F0F080
editor.foreground#000000
editor.hoverHighlightBackground#FFFFFF80
editor.inactiveSelectionBackground#00000099
editor.lineHighlightBackground#F0F0F040
editor.selectionBackground#00000014
editor.selectionHighlightBackground#00000099
editor.selectionHighlightBorder#00000054
editor.stackFrameHighlightBackground#6666661A
editor.wordHighlightBackground#0000001A
editor.wordHighlightStrongBackground#0000002B
editorBracketHighlight.foreground1#000000
editorBracketHighlight.foreground2#666666
editorBracketHighlight.foreground3#000000
editorBracketHighlight.foreground4#333333
editorBracketHighlight.foreground5#000000
editorBracketHighlight.foreground6#1A1A1A
editorBracketMatch.background#FFFFFF
editorBracketMatch.border#66666687
editorBracketPairGuide.activeBackground1#00000054
editorBracketPairGuide.activeBackground2#66666654
editorBracketPairGuide.activeBackground3#00000054
editorBracketPairGuide.activeBackground4#33333354
editorBracketPairGuide.activeBackground5#00000054
editorBracketPairGuide.activeBackground6#1A1A1A54
editorCursor.foreground#000000
editorError.foreground#000000
editorGroup.dropBackground#00000021
editorGroupHeader.tabsBackground#FFFFFF
editorGroupHeader.tabsBorder#CCCCCC
editorGutter.addedBackground#000000AB
editorGutter.commentRangeForeground#999999
editorGutter.deletedBackground#000000AB
editorGutter.modifiedBackground#666666AB
editorHoverWidget.background#FFFFFF
editorHoverWidget.border#CCCCCC
editorIndentGuide.activeBackground1#999999B3
editorIndentGuide.background1#FFFFFF
editorInfo.foreground#333333
editorLineNumber.activeForeground#999999
editorLineNumber.foreground#CCCCCC
editorLink.activeForeground#000000
editorOverviewRuler.addedForeground#00000066
editorOverviewRuler.deletedForeground#00000066
editorOverviewRuler.errorForeground#000000AB
editorOverviewRuler.findMatchForeground#66666687
editorOverviewRuler.infoForeground#33333387
editorOverviewRuler.modifiedForeground#66666666
editorOverviewRuler.warningForeground#666666AB
editorStickyScroll.background#FFFFFFF2
editorStickyScrollHover.background#F0F0F0
editorUnnecessaryCode.opacity#00000040
editorWarning.foreground#666666
editorWhitespace.foreground#CCCCCC30
editorWidget.background#FFFFFF
editorWidget.border#CCCCCC
editorWidget.resizeBorder#000000
focusBorder#0000004D
gitDecoration.addedResourceForeground#000000
gitDecoration.conflictingResourceForeground#000000CC
gitDecoration.deletedResourceForeground#000000
gitDecoration.ignoredResourceForeground#999999
gitDecoration.modifiedResourceForeground#666666
gitDecoration.renamedResourceForeground#333333
gitDecoration.submoduleResourceForeground#666666CC
gitDecoration.untrackedResourceForeground#000000CC
input.background#FFFFFF
input.border#CCCCCC
input.foreground#000000
input.placeholderForeground#999999
inputOption.activeBorder#000000AB
inputValidation.errorBackground#0000001A
inputValidation.errorBorder#000000
inputValidation.infoBackground#3333331A
inputValidation.infoBorder#333333
inputValidation.warningBackground#6666661A
inputValidation.warningBorder#666666
list.activeSelectionBackground#FFFFFF
list.activeSelectionForeground#000000
list.dropBackground#00000021
list.errorForeground#000000
list.focusBackground#F0F0F0
list.highlightForeground#000000
list.hoverBackground#FFFFFF
list.inactiveSelectionBackground#F0F0F0
list.warningForeground#666666
listFilterWidget.background#FFFFFF
listFilterWidget.noMatchesOutline#000000AB
listFilterWidget.outline#000000AB
menu.background#FFFFFF
menu.foreground#000000
menu.selectionBackground#FFFFFF
menu.selectionBorder#CCCCCC
menu.selectionForeground#000000
menu.separatorBackground#CCCCCC
minimap.errorHighlight#00000099
minimap.findMatchHighlight#66666699
minimap.selectionHighlight#00000054
minimap.selectionOccurrenceHighlight#00000033
minimap.warningHighlight#66666699
notificationCenterHeader.foreground#000000
notifications.background#FFFFFF
notifications.border#CCCCCC
panel.background#F8F8F8
panel.border#CCCCCC
panel.dropBorder#000000
panelTitle.activeBorder#000000
panelTitle.activeForeground#000000
panelTitle.inactiveForeground#4D4D4D
peekView.border#CCCCCC
peekViewEditor.background#FFFFFF
peekViewEditor.matchHighlightBackground#66666621
peekViewEditor.matchHighlightBorder#66666687
peekViewResult.background#FFFFFF
peekViewResult.matchHighlightBackground#FFFFFF
peekViewTitle.background#FFFFFF
peekViewTitleDescription.foreground#999999
peekViewTitleLabel.foreground#000000
pickerGroup.border#CCCCCC
pickerGroup.foreground#000000
problemsErrorIcon.foreground#000000
problemsInfoIcon.foreground#333333
problemsWarningIcon.foreground#666666
progressBar.background#000000
quickInput.background#FFFFFFF8
quickInput.foreground#000000
quickInputTitle.background#FFFFFF
sash.hoverBorder#000000
scrollbar.shadow#00000005
scrollbarSlider.activeBackground#FFFFFFFF
scrollbarSlider.background#FFFFFF
scrollbarSlider.hoverBackground#FFFFFFFF
selection.background#00000014
sideBar.background#F0F0F0
sideBar.border#CCCCCC
sideBar.dropBackground#00000021
sideBar.foreground#000000
sideBarSectionHeader.background#FFFFFF
sideBarTitle.foreground#4D4D4D
statusBar.background#FFFFFF
statusBar.border#CCCCCC
statusBar.debuggingBackground#666666
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#000000
statusBar.noFolderBackground#FFFFFF
statusBar.noFolderForeground#4D4D4D
statusBarItem.errorBackground#000000
statusBarItem.errorForeground#FFFFFF
statusBarItem.hoverBackground#FFFFFF
statusBarItem.prominentBackground#FFFFFF
statusBarItem.prominentHoverBackground#FFFFFF
statusBarItem.remoteBackground#333333
statusBarItem.remoteForeground#FFFFFF
statusBarItem.warningBackground#666666
statusBarItem.warningForeground#FFFFFF
tab.activeBackground#FFFFFF
tab.activeBorder#000000
tab.activeBorderTop#000000
tab.activeForeground#000000
tab.activeModifiedBorder#666666
tab.border#FFFFFF
tab.hoverBackground#FFFFFF
tab.hoverBorder#FFFFFF
tab.hoverForeground#000000
tab.inactiveBackground#FFFFFF
tab.inactiveForeground#999999
tab.lastPinnedBorder#CCCCCC
tab.unfocusedActiveBorderTop#66666687
tab.unfocusedHoverBackground#FFFFFF
terminal.ansiBlack#FFFFFF
terminal.ansiBlue#333333
terminal.ansiBrightBlack#999999
terminal.ansiBrightBlue#333333CC
terminal.ansiBrightCyan#1A1A1A
terminal.ansiBrightGreen#000000CC
terminal.ansiBrightMagenta#000000CC
terminal.ansiBrightRed#000000CC
terminal.ansiBrightWhite#000000
terminal.ansiBrightYellow#666666CC
terminal.ansiCyan#000000
terminal.ansiGreen#000000
terminal.ansiMagenta#000000
terminal.ansiRed#000000
terminal.ansiWhite#4D4D4D
terminal.ansiYellow#666666
terminal.background#FFFFFF
terminal.foreground#000000
terminalCursor.foreground#000000
testing.iconErrored#000000CC
testing.iconFailed#000000
testing.iconPassed#000000
testing.iconQueued#666666
testing.iconSkipped#999999
testing.peekBorder#CCCCCC
textBlockQuote.background#F0F0F0
textBlockQuote.border#CCCCCC
textCodeBlock.background#FFFFFF
textLink.activeForeground#000000
textLink.foreground#000000
textPreformat.foreground#4D4D4D
textSeparator.foreground#CCCCCC
titleBar.activeBackground#F0F0F0
titleBar.activeForeground#000000
titleBar.border#CCCCCC
titleBar.inactiveBackground#F0F0F0
titleBar.inactiveForeground#999999
widget.shadow#00000005
window.activeBorder#000000
window.inactiveBorder#CCCCCC

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#999999	italic
keyword	#000000	bold
entity.name.function	#333333	—
variable, meta.definition.variable	#000000	—
string	#4D4D4D	—
constant.numeric	#666666	—
constant.language, constant.character	#000000	—
storage.type, storage.modifier	#000000	—
entity.name.type, support.type, support.class	#333333	—
punctuation, meta.brace	#4D4D4D	—
invalid, invalid.illegal	#000000	underline
markup.bold, markup.bold.markdown	#000000	bold
markup.italic, markup.italic.markdown	#000000	italic
markup.inline.raw, markup.raw.inline, markup.inline.code	#000000	—
markup.heading, entity.name.section, punctuation.definition.heading.markdown	#000000	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	#D84315	bold
entity.name.tag.structure.any.html, entity.name.tag.block.any.html	#BF360C	bold
entity.name.tag.inline.any.html	#FF5722	—
entity.name.tag.script.html, entity.name.tag.style.html	#E91E63	bold
entity.other.attribute-name.html, entity.other.attribute-name.xml	#1976D2	italic
entity.other.attribute-name.class.html, entity.other.attribute-name.class.css	#303F9F	italic bold
entity.other.attribute-name.id.html, entity.other.attribute-name.id.css	#0288D1	italic bold
entity.other.attribute-name.style.html	#7B1FA2	italic
entity.other.attribute-name.event.html	#512DA8	italic
string.quoted.double.html, string.quoted.single.html	#2E7D32	—
meta.attribute-with-value.html string	#388E3C	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#616161	—
punctuation.definition.tag.html, punctuation.separator.key-value.html	#757575	—
punctuation.definition.string.begin.html, punctuation.definition.string.end.html	#424242	—
comment.block.html, punctuation.definition.comment.html	#9E9E9E	italic
constant.character.entity.html, constant.character.entity.named.html	#F57C00	bold
punctuation.definition.entity.html	#FF9800	—
meta.tag.sgml.doctype.html, entity.name.tag.doctype.html	#C62828	bold
keyword.doctype.xml	#C62828	bold
source.css.embedded.html	#4A148C	—
meta.embedded.block.css	#6A1B9A	—
source.js.embedded.html, source.javascript.embedded.html	#E65100	—
meta.embedded.block.javascript	#F57C00	—
entity.name.tag.form.html, entity.name.tag.input.html, entity.name.tag.button.html	#1B5E20	bold
entity.other.attribute-name.form.html	#2E7D32	italic
entity.name.tag.table.html, entity.name.tag.tr.html, entity.name.tag.td.html, entity.name.tag.th.html	#0D47A1	bold
entity.name.tag.img.html, entity.name.tag.video.html, entity.name.tag.audio.html	#E65100	bold
entity.name.tag.a.html	#01579B	bold
entity.other.attribute-name.href.html	#0277BD	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	#4A148C	bold
text.html.basic	#212121	—