Moonspell Themes

Name: Moonspell Themes
Author: Oodri

Publisher: OodriThemes in package: 5

Ethereal

GitHub

Color themes

VS Code preview

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

Moonspell Themes — Moonspell - Lavender

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.background#eff1f5
activityBar.border#e6e9ef
activityBar.foreground#403A56
activityBarBadge.background#7A64E8
activityBarBadge.foreground#eff1f5
badge.background#7A64E8
badge.foreground#eff1f5
breadcrumb.activeSelectionForeground#726b8a
breadcrumb.focusForeground#726b8a
breadcrumb.foreground#948daa
breadcrumbPicker.background#eff1f5
button.background#6A52E5
button.foreground#eff1f5
button.hoverBackground#7A64E8
debugExceptionWidget.background#eff1f5
debugExceptionWidget.border#e6e9ef
debugToolBar.background#eff1f5
debugToolBar.border#dce0e8
descriptionForeground#403A56
diffEditor.insertedTextBackground#16939210
diffEditor.removedTextBackground#E03A8110
dropdown.background#e6e9ef
dropdown.border#e6e9ef
dropdown.foreground#169392
editor.background#eff1f5
editor.findMatchBackground#eff1f5
editor.findMatchBorder#e6e9ef
editor.findMatchHighlightBackground#7A64E833
editor.findMatchHighlightBorder#7A64E899
editor.foreground#403A56
editor.hoverHighlightBackground#e6e9ef99
editor.inactiveSelectionBackground#dce0e899
editor.lineHighlightBackground#dce0e899
editor.lineHighlightBorder#dce0e8
editor.rangeHighlightBackground#dce0e899
editor.selectionBackground#6A52E555
editor.selectionHighlightBackground#dce0e899
editor.wordHighlightBackground#dce0e899
editor.wordHighlightStrongBackground#dce0e899
editorBracketHighlight.foreground1#726b8a
editorBracketHighlight.foreground2#726b8a
editorBracketHighlight.foreground3#726b8a
editorBracketHighlight.foreground4#726b8a
editorBracketHighlight.foreground5#726b8a
editorBracketHighlight.foreground6#726b8a
editorBracketMatch.background#eff1f5
editorBracketMatch.border#e6e9ef
editorCodeLens.foreground#7A64E877
editorCursor.background#eff1f5
editorCursor.foreground#9A8AF2
editorError.foreground#E03A81
editorGroup.border#e6e9ef
editorGroup.dropBackground#16939240
editorGroup.emptyBackground#eff1f5
editorGroupHeader.noTabsBackground#eff1f5
editorGroupHeader.tabsBackground#eff1f5
editorGroupHeader.tabsBorder#e6e9ef
editorGutter.addedBackground#169392
editorGutter.background#eff1f564
editorGutter.deletedBackground#E03A81
editorGutter.modifiedBackground#7A64E8
editorHoverWidget.background#e6e9ef
editorHoverWidget.border#e6e9ef
editorHoverWidget.foreground#403A56
editorIndentGuide.activeBackground1#726b8a
editorIndentGuide.background1#dce0e8
editorInlayHint.background#e6e9ef00
editorInlayHint.foreground#7A64E899
editorInlayHint.parameterBackground#e6e9ef00
editorInlayHint.parameterForeground#7A64E899
editorInlayHint.typeBackground#e6e9ef00
editorInlayHint.typeForeground#7A64E899
editorLineNumber.activeForeground#403A56
editorLineNumber.foreground#948daa
editorLink.activeForeground#7A64E8
editorMarkerNavigation.background#726b8a
editorMarkerNavigationError.background#7A64E8
editorMarkerNavigationWarning.background#DDA647
editorOverviewRuler.addedForeground#16939299
editorOverviewRuler.border#dce0e8
editorOverviewRuler.bracketMatchForeground#7A64E8
editorOverviewRuler.commonContentForeground#DDA647
editorOverviewRuler.currentContentForeground#DDA647
editorOverviewRuler.deletedForeground#7A64E899
editorOverviewRuler.errorForeground#E03A81
editorOverviewRuler.findMatchForeground#e6e9ef99
editorOverviewRuler.incomingContentForeground#DDA647
editorOverviewRuler.infoForeground#169392
editorOverviewRuler.modifiedForeground#7A64E899
editorOverviewRuler.rangeHighlightForeground#DDA64799
editorOverviewRuler.selectionHighlightForeground#DDA64799
editorOverviewRuler.warningForeground#DDA647
editorOverviewRuler.wordHighlightForeground#DDA64799
editorOverviewRuler.wordHighlightStrongForeground#DDA64799
editorRuler.foreground#403A56
editorSuggestWidget.background#dce0e8
editorSuggestWidget.border#e6e9ef
editorSuggestWidget.foreground#403A56
editorSuggestWidget.highlightForeground#403A56
editorSuggestWidget.selectedBackground#eff1f5
editorWarning.foreground#DDA647
editorWhitespace.foreground#726b8a
editorWidget.background#eff1f5
editorWidget.border#e6e9ef
editorWidget.resizeBorder#e6e9ef
errorForeground#7A64E8
extensionButton.prominentBackground#7A64E8
extensionButton.prominentForeground#403A56
extensionButton.prominentHoverBackground#9A8AF2
focusBorder#e6e9ef
foreground#726b8a
gitDecoration.addedResourceForeground#169392
gitDecoration.conflictingResourceForeground#D44FE2
gitDecoration.deletedResourceForeground#D44FE2
gitDecoration.ignoredResourceForeground#ABA8BD
gitDecoration.modifiedResourceForeground#DDA647
gitDecoration.untrackedResourceForeground#3FAD45
icon.foreground#726b8a
input.background#e6e9ef
input.border#e6e9ef
input.foreground#403A56
input.placeholderForeground#726b8a
inputOption.activeBorder#e6e9ef
inputValidation.errorBackground#E03A81
inputValidation.errorBorder#E03A81
inputValidation.infoBackground#169392
inputValidation.infoBorder#169392
inputValidation.warningBackground#DDA647
inputValidation.warningBorder#DDA647
list.activeSelectionBackground#e6e9ef
list.activeSelectionForeground#403A56
list.dropBackground#16939240
list.errorForeground#9A8AF2
list.focusBackground#dce0e8
list.focusForeground#169392
list.highlightForeground#169392
list.hoverBackground#e6e9ef
list.hoverForeground#403A56
list.inactiveSelectionBackground#eff1f5
list.inactiveSelectionForeground#403A56
list.invalidItemForeground#9A8AF2
list.warningForeground#9A8AF2
menu.background#eff1f5
menu.border#e6e9ef
menu.foreground#726b8a
menu.selectionBackground#e6e9ef
menu.selectionForeground#403A56
menu.separatorBackground#e6e9ef
menubar.selectionBackground#e6e9ef
merge.currentHeaderBackground#726b8a99
merge.incomingHeaderBackground#7A64E899
notificationCenterHeader.background#e6e9ef
notificationCenterHeader.foreground#403A56
notificationLink.foreground#169392
notifications.background#eff1f5
notifications.border#e6e9ef99
notifications.foreground#403A56
panel.background#eff1f5
panel.border#e6e9ef
panelTitle.activeBorder#e6e9ef
panelTitle.activeForeground#403A56
panelTitle.inactiveForeground#726b8a
peekView.border#e6e9ef
peekViewEditor.background#eff1f5
peekViewEditor.matchHighlightBackground#7A64E8
peekViewResult.background#e6e9ef
peekViewResult.fileForeground#403A56
peekViewResult.lineForeground#726b8a
peekViewResult.matchHighlightBackground#7A64E8
peekViewResult.selectionBackground#dce0e8
peekViewResult.selectionForeground#403A56
peekViewTitle.background#eff1f5
peekViewTitleDescription.foreground#726b8a
peekViewTitleLabel.foreground#403A56
pickerGroup.border#e6e9ef
pickerGroup.foreground#403A56
progressBar.background#7A64E8
scrollbar.shadow#e6e9ef
scrollbarSlider.activeBackground#dce0e899
scrollbarSlider.background#e6e9ef99
scrollbarSlider.hoverBackground#dce0e899
selection.background#7A64E855
settings.dropdownForeground#403A56
settings.textInputBackground#e6e9ef
settings.textInputBorder#dce0e8
sideBar.background#eff1f5
sideBar.border#e6e9ef
sideBar.dropBackground#9A8AF240
sideBar.foreground#726b8a
sideBarSectionHeader.background#eff1f5
sideBarSectionHeader.foreground#403A56
sideBarTitle.foreground#403A56
statusBar.background#eff1f5
statusBar.border#e6e9ef
statusBar.debuggingBackground#7A64E8
statusBar.debuggingBorder#7A64E8
statusBar.debuggingForeground#eff1f5
statusBar.foreground#948daa
statusBar.noFolderBackground#eff1f5
statusBar.noFolderBorder#e6e9ef
statusBarItem.activeBackground#e6e9ef
statusBarItem.hoverBackground#e6e9ef
statusBarItem.prominentBackground#e6e9ef
statusBarItem.prominentHoverBackground#e6e9ef
tab.activeBackground#eff1f5
tab.activeBorder#eff1f5
tab.activeBorderTop#7A64E8
tab.activeForeground#403A56
tab.border#eff1f5
tab.hoverBackground#e6e9ef99
tab.hoverForeground#7A64E8
tab.inactiveBackground#e6e9ef
tab.inactiveForeground#948daa
tab.unfocusedActiveForeground#726b8a
tab.unfocusedInactiveForeground#726b8a
terminal.ansiBlack#2D2840
terminal.ansiBlue#169392
terminal.ansiBrightBlack#403A56
terminal.ansiBrightBlue#169392
terminal.ansiBrightCyan#169392
terminal.ansiBrightGreen#9D5EF2
terminal.ansiBrightMagenta#D44FE2
terminal.ansiBrightRed#D44FE2
terminal.ansiBrightWhite#403A56
terminal.ansiBrightYellow#B08FF9
terminal.ansiCyan#169392
terminal.ansiGreen#9D5EF2
terminal.ansiMagenta#D44FE2
terminal.ansiRed#D44FE2
terminal.ansiWhite#403A56
terminal.ansiYellow#B08FF9
terminal.background#eff1f5
terminal.foreground#403A56
terminal.selectionBackground#7A64E833
terminalCursor.background#e6e9ef
terminalCursor.foreground#7A64E8
textLink.activeForeground#7A64E8
textLink.foreground#7A64E8
titleBar.activeBackground#eff1f5
titleBar.activeForeground#403A56cc
titleBar.inactiveBackground#eff1f5
titleBar.inactiveForeground#726b8a
tree.indentGuidesStroke#403A5633
walkThrough.embeddedEditorBackground#eff1f5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
string	#403A56	—
punctuation, constant.other.symbol	#726b8a	—
constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html	#DDA647	—
constant.language.boolean	#7A64E8	—
constant.language.null, constant.language.undefined	#7A64E899	—
constant.numeric	#7A64E8	—
variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments	#403A56	—
keyword, keyword.other, modifier	#726b8a	—
constant.language.import-export-all	#169392	—
variable.language.this, support.type.object, constant.language	#7A64E8	—
entity.name.function, support.function	#9A8AF2	—
storage.type, storage.modifier	#7A64E8	—
support.module, support.node	#7A64E8	italic
support.type, constant.other.key	#726b8a	—
entity.name.type, entity.other.inherited-class, entity.other	#726b8a	—
comment, punctuation.definition.comment	#726b8a	italic
punctuation	#726b8a	—
entity.name, entity.name.type.class, support.type, support.class, meta.use	#9A8AF2	—
variable.object.property, meta.field.declaration entity.name.function	#9A8AF2	—
meta.definition.method entity.name.function	#7A64E8	—
meta.function entity.name.function	#9A8AF2	—
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#7A64E8	—
meta.embedded, source.groovy.embedded, meta.template.expression	#403A56	—
entity.name.tag.yaml	#7A64E8	—
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json	#9A8AF2	—
constant.language.json	#7A64E8	—
entity.other.attribute-name.class	#7A64E8	—
entity.other.attribute-name.id	#7A64E8	—
source.css entity.name.tag	#7A64E8	—
support.type.property-name.css	#9A8AF2	—
meta.tag, punctuation.definition.tag	#7A64E8	—
entity.name.tag	#7A64E8	—
entity.other.attribute-name	#9A8AF2	italic
markup.heading	#726b8a	—
markup.inserted	#169392	—
markup.deleted	#E03A81	—
text.html.markdown meta.link.inline, meta.link.reference, text.html.markdown beginning.punctuation.definition.list, string.other.link.description.markdown, punctuation.definition.metadata.markdown	#D44FE2	—
markup.italic	#3FAD45	italic
markup.bold	#3FAD45	bold
markup.underline.link.image, punctuation.definition.link.description.begin.markdown, string.other.link.title.markdown, string.other.link.description.markdown meta.image.inline.markdown meta.paragraph.markdown text.html.markdown, markup.underline.link.markdown meta.link.inline.markdown meta.paragraph.markdown text.html.markdown	#D44FE2	bold
markup.bold markup.italic, markup.italic markup.bold	#3FAD45	italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown	#3FAD45	—
entity.name.section.markdown, punctuation.definition.heading.markdown	#7A64E8	bold
punctuation.definition.comment.html	#7A64E8aa	—
punctuation.definition.inserted	#169392	—
punctuation.definition.deleted	#E03A81	—
markup.inline.raw.string.markdown	#7A64E8	—
keyword.other.definition.ini	#726b8a	—
entity.name.section.group-title.ini	#726b8a	—
source.cs meta.class.identifier storage.type	#7A64E8	—
source.cs meta.method.identifier entity.name.function	#7A64E8	—
source.cs meta.method-call meta.method, source.cs entity.name.function	#9A8AF2	—
source.cs storage.type	#9A8AF2	—
source.cs meta.method.return-type	#9A8AF2	—
source.cs meta.preprocessor	#726b8a	—
source.cs entity.name.type.namespace	#403A56	—
meta.jsx.children, SXNested	#403A56	—
support.class.component	#726b8a	—
source.cpp meta.block variable.other	#403A56	—
source.python meta.member.access.python	#7A64E8	—
source.python meta.function-call.python, meta.function-call.arguments	#9A8AF2	—
meta.block	#726b8a	—
entity.name.function.call	#9A8AF2	—
source.php support.other.namespace, source.php meta.use support.class	#403A56	—
keyword.control	#726b8a	italic
keyword.operator.arithmetic	#726b8a	—
markup.quote	#169392	italic
markup.fenced_code.block	#726b8a	—
punctuation.definition.quote	#726b8a	—
meta.structure.dictionary.json support.type.property-name.json	#9A8AF2	—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#9A8AF2	—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#3FAD45	—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#3FAD45	—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json support.type.property-name.json	#7A64E8	—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json support.type.property-name.json	#9A8AF2	—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json support.type.property-name.json	#3FAD45	—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json support.type.property-name.json	#7A64E8	—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json support.type.property-name.json	#169392	—
token.info-token	#169392	—
token.warn-token	#9A8AF2	—
token.error-token	#E03A81	—
token.debug-token	#3FAD45	—
punctuation.definition.list.begin.markdown	#9A8AF2	—

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

/**
 * Fetch user data by ID
 * @param id  
 * @returns User object or null if ID is invalid
 */
export async function fetchUser(id: string): Promise<User | null> {
  if (!id) {
    return null;
  }

  const response = await fetch(`/api/users/${id}`, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return (await response.json()) as User;
}

function greet(user: User): string {
  // Simple greeting function that uses the user's name
  return `Hello, ${user.name}!`;
}