vscode-theme-elaina

Name: vscode-theme-elaina
Author: SigureMo

Publisher: SigureMoThemes in package: 1

「澄み渡った青空をゆく、そこに人がいたのなら間違いなく誰もが振り返り、ため息をこぼしてしまうほどの美貌の魔女は、いったい誰でしょう？」

GitHub

VS Code preview

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

vscode-theme-elaina — Elaina

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#26242e
activityBar.foreground#ffb7c5
activityBar.inactiveForeground#778b8a
activityBarBadge.background#ffb7c5
activityBarBadge.foreground#26242e
badge.background#ffb7c5
badge.foreground#2c2a35
button.background#f1b8ff
button.foreground#2C2A35
button.hoverBackground#f6d1ff
dropdown.background#26242e
editor.background#2C2A35
editor.foreground#E0E2F0
editor.inactiveSelectionBackground#7cb7ff1a
editor.lineHighlightBorder#ffb7c533
editor.selectionBackground#7cb7ff33
editorCursor.foreground#ffb7c5cc
editorError.foreground#ee5d43
editorGroup.dropBackground#495061d7
editorGroupHeader.tabsBackground#34313f
editorInfo.foreground#00b0ff
editorInlayHint.background#8b949e1c
editorInlayHint.foreground#8b949e
editorInlayHint.typeBackground#8b949e1c
editorInlayHint.typeForeground#8b949e
editorSuggestWidget.background#211f28
editorSuggestWidget.selectedBackground#34313f
editorWarning.foreground#FFE66D
editorWidget.background#211f28
focusBorder#ffb7c580
foreground#E0E2F0
gitDecoration.ignoredResourceForeground#778b8abf
input.background#34313f
input.border#444153
input.foreground#ffe0e7
input.placeholderForeground#778b8a
list.activeSelectionBackground#26242e
list.dropBackground#26242e
list.hoverBackground#2a2833
list.inactiveSelectionBackground#282631
minimap.background#211f28
peekView.border#2C2A35
peekViewEditor.background#1c1c1c
peekViewEditor.matchHighlightBackground#FF9F2E60
peekViewResult.background#1c1c1c
peekViewResult.matchHighlightBackground#FF9F2E60
peekViewResult.selectionBackground#2C2A35
peekViewTitle.background#1c1c1c
peekViewTitleDescription.foreground#00e8c6
progressBar.background#00b0ff
quickInput.background#211f28
quickInputList.focusBackground#2f2d39
scrollbar.shadow#ffb7c533
sideBar.background#2f2d39
sideBar.foreground#778b8a
sideBarSectionHeader.background#2C2A35
sideBarTitle.foreground#ffb7c5
statusBar.background#211f28
statusBar.debuggingBackground#FC644D
statusBar.noFolderBackground#23262E
statusBarItem.activeBackground#00e8c5cc
statusBarItem.errorBackground#ff000080
statusBarItem.hoverBackground#ffb7c580
statusBarItem.prominentBackground#07d4b5b0
statusBarItem.prominentHoverBackground#00e8c5cc
statusBarItem.remoteBackground#f1b8ff
statusBarItem.remoteForeground#211f28
statusBarItem.warningBackground#ffff0080
tab.activeBackground#2C2A35
tab.activeBorder#ffb7c5
tab.activeForeground#00e8c6
tab.inactiveBackground#34313f
tab.inactiveForeground#778b8a
terminal.ansiBlue#7cb7ff
terminal.ansiBrightBlue#7cb7ff
terminal.ansiBrightCyan#00e8c6
terminal.ansiBrightGreen#96E072
terminal.ansiBrightMagenta#ff00aa
terminal.ansiBrightRed#ee5d43
terminal.ansiBrightYellow#FFE66D
terminal.ansiCyan#00e8c6
terminal.ansiGreen#96E072
terminal.ansiMagenta#ff00aa
terminal.ansiRed#ee5d43
terminal.ansiYellow#FFE66D
terminalCursor.background#2C2A35
terminalCursor.foreground#ffb7c5
terminalStickyScrollHover.background#26242e
titleBar.activeBackground#2C2A35
widget.shadow#ffb7c533

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, markup.quote.markdown, meta.diff, meta.diff.header	#a0a1a7cc	—
meta.template.expression.js, constant.name.attribute.tag.jade, punctuation.definition.metadata.markdown, punctuation.definition.string.end.markdown, punctuation.definition.string.begin.markdown	#E0E2F0	—
string, text.html.php string, markup.inline.raw, markup.inserted, punctuation.definition.string, punctuation.definition.markdown, text.html meta.embedded source.js string, text.html.php punctuation.definition.string, text.html meta.embedded source.js punctuation.definition.string, text.html punctuation.definition.string, text.html string	#96E072	—
string.quoted.docstring punctuation.definition.string.begin.python, string.quoted.docstring, string.quoted.docstring punctuation.definition.string.end.python, comment.block.javadoc, comment.line.documentation.rust, comment.block.documentation	#8ca777	italic
source.regexp, string.regexp, string.regexp.quoted.multi punctuation.definition.string.begin.python, string.regexp.quoted.multi punctuation.definition.string.end.python	#7cb7ff	—
meta.import.js string.quoted, meta.import.ts string.quoted, meta.import.jsx string.quoted, meta.import.tsx string.quoted, storage.modifier.import.java, storage.modifier.package.java, meta.use.rust entity.name.namespace.rust, entity.name.module.rust, meta.preprocessor.include.c punctuation.definition.string.begin.c, meta.preprocessor.include.c string.quoted, meta.preprocessor.include.c punctuation.definition.string.end.c, meta.preprocessor.include.cpp punctuation.definition.string.begin.cpp, meta.preprocessor.include.cpp string.quoted, meta.preprocessor.include.cpp punctuation.definition.string.end.cpp, entity.name.import.go, entity.name.package.go	#55c9ff	—
variable, identifier	#00e8c6	—
meta.structure.dictionary.json support.type.property-name, entity.name.tag.yaml, support.type.property-name.table.toml, support.type.property-name.toml, constant.character.entity.html, source.css entity.name.tag.reference, source.css entity.other.attribute-name.parent-selector, beginning.punctuation.definition.list.markdown, meta.object-literal.key	#00e8c6	—
markup.heading, variable.language.this.js, variable.language.this.ts, variable.language.this.cpp, variable.language.self.rust, variable.language.special.self.python	#ff00aa	—
constant.numeric	#147eff	—
variable.other.property, entity.other.attribute-name, source.css keyword.other.unit, variable.other.object.property.js.jsx, variable.other.object.js	#c74ded	—
support.type.exception.python	#ee5d43	—
constant, support.constant	#f39c12	—
keyword.operator	#ee5d43	—
support.class	#0cae00	—
entity.name.function, source.css support.function, source.php support.function, meta.function-call, support.function.magic.python	#FFE66D	—
entity.name.type, support.type.python	#0cae00	—
entity.name.tag, tag.html	#f92672	—
keyword	#ff00aa	—
storage	#ff00aa	—
markup.bold	#f39c12	bold
markup.italic	#7cb7ff	italic
punctuation.definition.math.begin.markdown, punctuation.definition.math.end.markdown	#7cb7ff	—
meta.link, meta.image, source.js support.type	#c74ded	—
url, link, uri	—	underline
entity.other.inherited-class	—	underline
comment, invalid, keyword, entity.other.attribute-name	—	italic

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}!`;
}