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 Arctic Night — Northern Calm

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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...
~/my-project

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#7DCFFF
activityBar.background#242A38
activityBar.border#3D4454
activityBar.foreground#C8D3E0
activityBar.inactiveForeground#6B7A8F
activityBarBadge.background#7DCFFF
activityBarBadge.foreground#1E2430
badge.background#7DCFFF
badge.foreground#1E2430
breadcrumb.activeSelectionForeground#7DCFFF
breadcrumb.background#1E2430
breadcrumb.focusForeground#C8D3E0
breadcrumb.foreground#6B7A8F
breadcrumbPicker.background#343B4A
button.background#7DCFFF
button.foreground#1E2430
button.hoverBackground#9FDBFF
checkbox.background#2B3240
checkbox.border#3D4454
checkbox.foreground#B4BFD0
debugIcon.breakpointForeground#FF757F
debugToolBar.background#242A38
diffEditor.insertedLineBackground#82E2A21A
diffEditor.insertedTextBackground#82E2A221
diffEditor.removedLineBackground#FF757F1A
diffEditor.removedTextBackground#FF757F21
dropdown.background#2B3240
dropdown.border#3D4454
dropdown.foreground#C8D3E0
editor.background#1E2430
editor.findMatchBackground#00000000
editor.findMatchBorder#FFC777
editor.findMatchHighlightBackground#2B324080
editor.findMatchHighlightBorder#FFC77787
editor.focusedStackFrameHighlightBackground#82E2A21A
editor.foldBackground#242A3880
editor.foreground#C8D3E0
editor.hoverHighlightBackground#2B324080
editor.inactiveSelectionBackground#7DCFFF99
editor.lineHighlightBackground#2B3240
editor.selectionBackground#7DCFFF33
editor.selectionHighlightBackground#7DCFFF99
editor.selectionHighlightBorder#7DCFFF54
editor.stackFrameHighlightBackground#FFC7771A
editor.wordHighlightBackground#7DCFFF1A
editor.wordHighlightStrongBackground#7DCFFF2B
editorBracketHighlight.foreground1#7DCFFF
editorBracketHighlight.foreground2#FFC777
editorBracketHighlight.foreground3#FF757F
editorBracketHighlight.foreground4#7AA2F7
editorBracketHighlight.foreground5#82E2A2
editorBracketHighlight.foreground6#9FDBFF
editorBracketMatch.background#2B3240
editorBracketMatch.border#FFC77787
editorBracketPairGuide.activeBackground1#7DCFFF54
editorBracketPairGuide.activeBackground2#FFC77754
editorBracketPairGuide.activeBackground3#FF757F54
editorBracketPairGuide.activeBackground4#7AA2F754
editorBracketPairGuide.activeBackground5#82E2A254
editorBracketPairGuide.activeBackground6#9FDBFF54
editorCursor.foreground#7DCFFF
editorError.foreground#FF757F
editorGroup.dropBackground#7DCFFF21
editorGroupHeader.tabsBackground#2B3240
editorGroupHeader.tabsBorder#3D4454
editorGutter.addedBackground#82E2A2AB
editorGutter.commentRangeForeground#6B7A8F
editorGutter.deletedBackground#FF757FAB
editorGutter.modifiedBackground#FFC777AB
editorHoverWidget.background#343B4A
editorHoverWidget.border#3D4454
editorIndentGuide.activeBackground1#6B7A8FB3
editorIndentGuide.background1#2B3240
editorInfo.foreground#7AA2F7
editorLineNumber.activeForeground#B4BFD0
editorLineNumber.foreground#6B7A8F
editorLink.activeForeground#9FDBFF
editorOverviewRuler.addedForeground#82E2A266
editorOverviewRuler.deletedForeground#FF757F66
editorOverviewRuler.errorForeground#FF757FAB
editorOverviewRuler.findMatchForeground#FFC77787
editorOverviewRuler.infoForeground#7AA2F787
editorOverviewRuler.modifiedForeground#FFC77766
editorOverviewRuler.warningForeground#FFC777AB
editorStickyScroll.background#1E2430F2
editorStickyScrollHover.background#242A38
editorUnnecessaryCode.opacity#C8D3E040
editorWarning.foreground#FFC777
editorWidget.background#343B4A
editorWidget.border#3D4454
editorWidget.resizeBorder#7DCFFF
focusBorder#7DCFFFB3
gitDecoration.addedResourceForeground#82E2A2
gitDecoration.conflictingResourceForeground#FF757FCC
gitDecoration.deletedResourceForeground#FF757F
gitDecoration.ignoredResourceForeground#6B7A8F
gitDecoration.modifiedResourceForeground#FFC777
gitDecoration.renamedResourceForeground#7AA2F7
gitDecoration.submoduleResourceForeground#FFC777CC
gitDecoration.untrackedResourceForeground#82E2A2CC
input.background#2B3240
input.border#3D4454
input.foreground#C8D3E0
input.placeholderForeground#6B7A8F
inputOption.activeBorder#7DCFFFAB
inputValidation.errorBackground#FF757F1A
inputValidation.errorBorder#FF757F
inputValidation.infoBackground#7AA2F71A
inputValidation.infoBorder#7AA2F7
inputValidation.warningBackground#FFC7771A
inputValidation.warningBorder#FFC777
list.activeSelectionBackground#2B3240
list.activeSelectionForeground#C8D3E0
list.dropBackground#7DCFFF21
list.errorForeground#FF757F
list.focusBackground#242A38
list.highlightForeground#7DCFFF
list.hoverBackground#2B3240
list.inactiveSelectionBackground#242A38
list.warningForeground#FFC777
listFilterWidget.background#2B3240
listFilterWidget.noMatchesOutline#FF757FAB
listFilterWidget.outline#7DCFFFAB
menu.background#343B4A
menu.foreground#C8D3E0
menu.selectionBackground#2B3240
menu.selectionBorder#3D4454
menu.selectionForeground#C8D3E0
menu.separatorBackground#3D4454
minimap.errorHighlight#FF757F99
minimap.findMatchHighlight#FFC77799
minimap.selectionHighlight#7DCFFF54
minimap.selectionOccurrenceHighlight#7DCFFF33
minimap.warningHighlight#FFC77799
notificationCenterHeader.foreground#C8D3E0
notifications.background#343B4A
notifications.border#3D4454
panel.background#1E2430
panel.border#3D4454
panel.dropBorder#7DCFFF
panelTitle.activeBorder#7DCFFF
panelTitle.activeForeground#C8D3E0
panelTitle.inactiveForeground#B4BFD0
peekView.border#3D4454
peekViewEditor.background#343B4A
peekViewEditor.matchHighlightBackground#FFC77721
peekViewEditor.matchHighlightBorder#FFC77787
peekViewResult.background#2B3240
peekViewResult.matchHighlightBackground#343B4A
peekViewTitle.background#2B3240
peekViewTitleDescription.foreground#6B7A8F
peekViewTitleLabel.foreground#C8D3E0
pickerGroup.border#3D4454
pickerGroup.foreground#7DCFFF
problemsErrorIcon.foreground#FF757F
problemsInfoIcon.foreground#7AA2F7
problemsWarningIcon.foreground#FFC777
progressBar.background#7DCFFF
quickInput.background#1E2430F2
quickInput.foreground#C8D3E0
quickInputTitle.background#343B4A
sash.hoverBorder#7DCFFF
scrollbar.shadow#00000099
scrollbarSlider.activeBackground#343B4AFF
scrollbarSlider.background#343B4A
scrollbarSlider.hoverBackground#343B4AFF
selection.background#7DCFFF33
sideBar.background#242A38
sideBar.border#3D4454
sideBar.dropBackground#7DCFFF21
sideBar.foreground#C8D3E0
sideBarSectionHeader.background#2B3240
sideBarTitle.foreground#B4BFD0
statusBar.background#242A38
statusBar.border#3D4454
statusBar.debuggingBackground#FFC777
statusBar.debuggingForeground#1E2430
statusBar.foreground#C8D3E0
statusBar.noFolderBackground#2B3240
statusBar.noFolderForeground#B4BFD0
statusBarItem.errorBackground#FF757F
statusBarItem.errorForeground#1E2430
statusBarItem.hoverBackground#2B3240
statusBarItem.prominentBackground#2B3240
statusBarItem.prominentHoverBackground#343B4A
statusBarItem.remoteBackground#7AA2F7
statusBarItem.remoteForeground#1E2430
statusBarItem.warningBackground#FFC777
statusBarItem.warningForeground#1E2430
tab.activeBackground#1E2430
tab.activeBorderTop#7DCFFF
tab.activeForeground#C8D3E0
tab.activeModifiedBorder#FFC777
tab.border#2B3240
tab.hoverBackground#343B4A
tab.hoverBorder#343B4A
tab.hoverForeground#C8D3E0
tab.inactiveBackground#2B3240
tab.inactiveForeground#6B7A8F
tab.lastPinnedBorder#3D4454
tab.unfocusedActiveBorderTop#FFC77787
tab.unfocusedHoverBackground#343B4A
terminal.ansiBlack#1E2430
terminal.ansiBlue#7AA2F7
terminal.ansiBrightBlack#6B7A8F
terminal.ansiBrightBlue#7AA2F7CC
terminal.ansiBrightCyan#9FDBFF
terminal.ansiBrightGreen#82E2A2CC
terminal.ansiBrightMagenta#FF757FCC
terminal.ansiBrightRed#FF757FCC
terminal.ansiBrightWhite#C8D3E0
terminal.ansiBrightYellow#FFC777CC
terminal.ansiCyan#7DCFFF
terminal.ansiGreen#82E2A2
terminal.ansiMagenta#FF757F
terminal.ansiRed#FF757F
terminal.ansiWhite#B4BFD0
terminal.ansiYellow#FFC777
terminal.background#1E2430
terminal.foreground#C8D3E0
terminalCursor.foreground#7DCFFF
testing.iconErrored#FF757FCC
testing.iconFailed#FF757F
testing.iconPassed#82E2A2
testing.iconQueued#FFC777
testing.iconSkipped#6B7A8F
testing.peekBorder#3D4454
textBlockQuote.background#242A38
textBlockQuote.border#3D4454
textCodeBlock.background#2B3240
textLink.activeForeground#7DCFFF
textLink.foreground#9FDBFF
textPreformat.foreground#B4BFD0
textSeparator.foreground#3D4454
titleBar.activeBackground#242A38
titleBar.activeForeground#C8D3E0
titleBar.border#3D4454
titleBar.inactiveBackground#242A38
titleBar.inactiveForeground#6B7A8F
widget.shadow#00000099
window.activeBorder#7DCFFF
window.inactiveBorder#3D4454

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#5A6881	italic
keyword	#BB9AF7	bold
entity.name.function	#7AA2F7	—
variable, meta.definition.variable	#C8D3E0	—
string	#C3E88D	—
constant.numeric	#FF9E64	—
constant.language, constant.character	#FFC777	—
storage.type, storage.modifier	#BB9AF7	—
entity.name.type, support.type, support.class	#7DCFFF	—
punctuation, meta.brace	#B4BFD0	—
invalid, invalid.illegal	#FF757F	underline
markup.bold, markup.bold.markdown	#C8D3E0	bold
markup.italic, markup.italic.markdown	#C8D3E0	italic
markup.inline.raw, markup.raw.inline, markup.inline.code	#C8D3E0	—
markup.heading, entity.name.section, punctuation.definition.heading.markdown	#7DCFFF	bold
heading.1.markdown, markup.heading.setext.1.markdown	#7DCFFF	bold
heading.2.markdown, markup.heading.setext.2.markdown	#BB9AF7	bold
heading.3.markdown	#C3E88D	bold
heading.4.markdown	#FFC777	bold
heading.5.markdown	#7AA2F7	bold
heading.6.markdown	#6B7A8F	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	—