Spirited Away Color Theme

Name: Spirited Away Color Theme
Author: Maxfield Walker

Publisher: Maxfield WalkerThemes in package: 1

Color theme for VSCode inspired by Spirited Away

GitHub

VS Code preview

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

Spirited Away Color Theme — Spirited Away

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#151515
activityBar.dropBackground#CFCFCF20
activityBar.foreground#CFCFCF
activityBarBadge.background#EC5151
activityBarBadge.foreground#FFF
button.background#EC5151
button.foreground#FFF
button.hoverBackground#ef6363
debugExceptionWidget.background#000
debugExceptionWidget.border#383838
debugToolBar.background#000
diffEditor.insertedTextBackground#6d966c40
diffEditor.removedTextBackground#BD353840
dropdown.background#000
dropdown.border#383838
dropdown.foreground#CFCFCF
editor.background#151515
editor.findMatchBackground#CFCFCF50
editor.findMatchHighlightBackground#CFCFCF30
editor.findRangeHighlightBackground#000
editor.foreground#CFCFCF
editor.hoverHighlightBackground#CFCFCF1B
editor.inactiveSelectionBackground#CFCFCF1B
editor.lineHighlightBackground#222
editor.rangeHighlightBackground#CFCFCF28
editor.selectionBackground#CFCFCF28
editor.selectionHighlightBackground#CFCFCF40
editor.wordHighlightBackground#CFCFCF28
editor.wordHighlightStrongBackground#EC515180
editorCursor.foreground#BD3538
editorGroup.background#151515
editorGroup.border#000
editorGroup.dropBackground#CFCFCF20
editorGroupHeader.noTabsBackground#151515
editorGroupHeader.tabsBackground#151515
editorHoverWidget.background#000
editorHoverWidget.border#383838
editorIndentGuide.background#383838
editorLineNumber.foreground#CFCFCF50
editorMarkerNavigation.background#000
editorMarkerNavigationError.background#BD3538
editorMarkerNavigationWarning.background#e7ab65
editorSuggestWidget.background#000
editorSuggestWidget.border#383838
editorSuggestWidget.foreground#CFCFCF
editorSuggestWidget.highlightForeground#268ac3
editorSuggestWidget.selectedBackground#268ac3B0
editorWhitespace.foreground#383838
editorWidget.background#000
focusBorder#383838
foreground#FFF
input.background#151515
input.border#383838
input.foreground#CFCFCF
inputOption.activeBorder#EC5151
inputValidation.errorBackground#EC5151
inputValidation.errorBorder#EC5151
inputValidation.infoBackground#268ac3
inputValidation.infoBorder#268ac3
inputValidation.warningBackground#e7ab65
inputValidation.warningBorder#e7ab65
list.activeSelectionBackground#268ac3
list.activeSelectionForeground#FFF
list.dropBackground#CFCFCF20
list.focusBackground#268ac3B0
list.highlightForeground#268ac3
list.hoverBackground#268ac380
list.inactiveSelectionBackground#CFCFCF60
notification.background#000
notification.foreground#FFF
panel.background#151515
panel.border#383838
panelTitle.activeBorder#383838
panelTitle.activeForeground#FFF
panelTitle.inactiveForeground#CFCFCF
peekView.border#383838
peekViewEditor.background#151515
peekViewEditor.matchHighlightBackground#CFCFCF50
peekViewResult.background#000
peekViewResult.fileForeground#FFF
peekViewResult.lineForeground#CFCFCF
peekViewResult.matchHighlightBackground#CFCFCF50
peekViewResult.selectionBackground#268ac3B0
peekViewResult.selectionForeground#FFF
peekViewTitle.background#000
peekViewTitleDescription.foreground#CFCFCF
peekViewTitleLabel.foreground#FFF
pickerGroup.border#383838
pickerGroup.foreground#ef6363
scrollbar.shadow#CFCFCF1B
scrollbarSlider.activeBackground#CFCFCF60
scrollbarSlider.background#CFCFCF28
scrollbarSlider.hoverBackground#CFCFCF40
sideBar.background#000
sideBarSectionHeader.background#000
sideBarTitle.foreground#CFCFCF
statusBar.background#EC5151
statusBar.debuggingBackground#BD3538
statusBar.foreground#FFF
statusBar.noFolderBackground#151515
tab.activeBackground#000
tab.activeForeground#FFF
tab.border#38383880
tab.inactiveBackground#222
tab.inactiveForeground#CFCFCF
titleBar.activeBackground#000
titleBar.activeForeground#FFF
titleBar.inactiveBackground#151515
titleBar.inactiveForeground#CFCFCF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#CFCFCF	—
comment	#6d966c	—
string, constant.character.escape.ts, punctuation.definition.string	#e7ab65	—
constant.other.character-class.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp	#e7ab65	—
punctuation.definition.template-expression	#ef6363	—
constant.numeric	#AFC563	—
constant.language	#268ac3	—
support.constant.property-value	#e7ab65	—
constant.other.color.rgb-value.hex, support.constant.color.w3c-standard-color-name, support.constant.color.w3c-extended-color-name	#e7ab65	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class	#9977a2	—
keyword.control.at-rule	#9977a2	—
keyword	#ef6363	—
storage	#CFCFCF	—
storage.modifier	#268ac3	—
storage.modifier.import	#ef6363	—
meta.object-literal.key	#CFCFCF	—
punctuation.definition.method-parameters, punctuation.definition.seperator.parameter, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.section, punctuation.definition.block, punctuation.definition.typeparameters, punctuation.definition.begin.bracket.square, punctuation.definition.end.bracket.square, punctuation.definition.binding-pattern.object, punctuation.definition.bracket.curly, punctuation.separator.comma, punctuation.terminator, meta.method.identifier, meta.brace.round, meta.brace.square, punctuation.definition.entity	#888	—
punctuation.definition.section.case-statement	#888	—
punctuation.separator	#888	—
punctuation.accessor, punctuation.separator.pointer-access, punctuation.separator.dot-access	#888	—
punctuation.definition.tag	#777	—
variable.language	#268ac3	—
storage.type	#268ac3	—
support.type.posix-reserved, support.type.sys-types, support.type.stdint	#268ac3	—
storage.type.function.arrow	#ef6363	—
entity.name.class, entity.name.type.class, entity.other.inherited-class, storage.type.generic, storage.class	#ef6363	—
entity.name.type	#ef6363	—
entity.name.function, support.function, meta.method, meta.function-call.generic	#da846b	—
meta.method-call, meta.method.body	#CFCFCF	—
entity.name.tag	#ef6363	—
entity.other.attribute-name	#CFCFCF	—
meta.tag.sgml.doctype.html	#268ac3	—
support.constant	#CFCFCF	—
variable, variable.other.readwrite, meta.definition.variable.name	#CFCFCF	—
variable.scss	#5cafdf	—
support.variable.property, variable.property, variable.object.property, meta.definition.property, variable.other.property	#CFCFCF	—
variable.other.readwrite.alias	#CFCFCF	—
variable.other.enummember	#AFC563	—
support.type, support.class, storage.type.core	#ef6363	—
punctuation.decorator	#9977a2	—
punctuation.definition.block.tag	#268ac3	—
entity.name.function.preprocessor	#9977a2	—
invalid	—	italic
keyword.operator.type	#888	—
keyword.operator.new, keyword.control.new, keyword.operator.expression, keyword.other	#268ac3	—
keyword.operator.dereference	#CFCFCF	—
markup.heading	#ef6363	—
markup.bold	#268ac3	bold
markup.italic	#268ac3	italic
beginning.punctuation.definition.list	#ef6363	—
markup.underline.link	#5cafdf	—
markup.inline.raw, punctuation.definition.raw	#268ac3	—
punctuation.definition.markdown, fenced_code.block.language	#da846b	—
beginning.punctuation.definition.quote	#6d966c	—

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