Studio Ghibli Inspired Themes

Name: Studio Ghibli Inspired Themes
Author: heyitschun

Publisher: heyitschunThemes in package: 4

A set of syntax themes inspired by Studio Ghibli's movies for Visual Studio Code.

GitHub

Color themes

VS Code preview

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

Studio Ghibli Inspired Themes — Ghibli's Spirited Away

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.background#161616
activityBar.foreground#D5D8DAB3
activityBarBadge.background#908822
activityBarBadge.foreground#06060C
badge.background#2E303E
badge.foreground#ece3d4
breadcrumbPicker.background#232530
button.background#2E303E
debugToolBar.background#161616
diffEditor.insertedTextBackground#09F7A01A
diffEditor.removedTextBackground#F43E5C1A
dropdown.background#232323
dropdown.listBackground#232323
editor.background#161616
editor.findMatchBackground#6C6F9380
editor.findMatchHighlightBackground#6C6F934D
editor.findRangeHighlightBackground#6C6F931A
editor.hoverHighlightBackground#6C6F934D
editor.lineHighlightBackground#2E303E4D
editor.rangeHighlightBackground#2E303E80
editor.selectionBackground#2E303EB3
editor.selectionHighlightBackground#6C6F934D
editor.wordHighlightBackground#6C6F9380
editor.wordHighlightStrongBackground#6C6F9380
editorBracketMatch.background#6C6F9380
editorBracketMatch.border#6C6F9300
editorCodeLens.foreground#6C6F9380
editorCursor.background#161616
editorCursor.foreground#f1d4d4
editorError.foreground#F43E5C
editorGroup.border#1A1C23
editorGroup.dropBackground#6C6F934D
editorGroupHeader.tabsBackground#161616
editorGutter.addedBackground#09F7A0B3
editorGutter.deletedBackground#F43E5CB3
editorGutter.modifiedBackground#21BFC2B3
editorIndentGuide.activeBackground#4d4d4d
editorIndentGuide.background#323232
editorLineNumber.activeForeground#D5D8DA80
editorLineNumber.foreground#D5D8DA1A
editorOverviewRuler.addedForeground#09F7A080
editorOverviewRuler.border#2E303EB3
editorOverviewRuler.bracketMatchForeground#D5D8DA80
editorOverviewRuler.deletedForeground#F43E5C80
editorOverviewRuler.errorForeground#F43E5CE6
editorOverviewRuler.findMatchForeground#6C6F93
editorOverviewRuler.modifiedForeground#21BFC280
editorOverviewRuler.warningForeground#27D79780
editorRuler.foreground#6C6F934D
editorSuggestWidget.highlightForeground#908822
editorWarning.foreground#27D797B3
editorWidget.background#232530
editorWidget.border#232530
errorForeground#F43E5C
extensionButton.prominentBackground#908822
extensionButton.prominentHoverBackground#E9436D
focusBorder#1A1C23
foreground#ece3d4
gitDecoration.addedResourceForeground#27D797B3
gitDecoration.deletedResourceForeground#F43E5C
gitDecoration.ignoredResourceForeground#D5D8DA4D
gitDecoration.modifiedResourceForeground#FAB38E
gitDecoration.untrackedResourceForeground#27D797
input.background#2E303E
inputOption.activeBorder#E9436D80
inputValidation.errorBackground#F43E5C80
inputValidation.errorBorder#F43E5C00
list.activeSelectionBackground#2E303E80
list.activeSelectionForeground#ece3d4
list.dropBackground#232323
list.errorForeground#F43E5CE6
list.focusBackground#2E303E80
list.focusForeground#ece3d4
list.highlightForeground#908822
list.hoverBackground#2E303E80
list.hoverForeground#ece3d4
list.inactiveFocusBackground#2E303E80
list.inactiveSelectionBackground#2E303E4D
list.inactiveSelectionForeground#ece3d4
list.warningForeground#27D797B3
panelTitle.activeBorder#908822
peekView.border#1A1C23
peekViewEditor.background#232530
peekViewEditor.matchHighlightBackground#6C6F9380
peekViewResult.background#232530
peekViewResult.matchHighlightBackground#6C6F9380
peekViewResult.selectionBackground#2E303E80
peekViewTitle.background#232530
pickerGroup.foreground#E95378E6
progressBar.background#908822
quickInput.background#232323
scrollbar.shadow#16161C
scrollbarSlider.activeBackground#6C6F9380
scrollbarSlider.background#6C6F931A
scrollbarSlider.hoverBackground#6C6F934D
selection.background#6C6F9380
sideBar.background#161616
sideBar.dropBackground#6C6F934D
sideBar.foreground#D5D8DA80
sideBarSectionHeader.background#161616
sideBarSectionHeader.foreground#D5D8DAB3
statusBar.background#161616
statusBar.debuggingBackground#FAB38E
statusBar.debuggingForeground#06060C
statusBar.foreground#D5D8DA80
statusBar.noFolderBackground#161616
statusBarItem.hoverBackground#2E303E
statusBarItem.prominentBackground#2E303E
statusBarItem.prominentHoverBackground#6C6F93
tab.activeBorder#908822
tab.border#1C1E2600
tab.inactiveBackground#161616
terminal.ansiBlue#325f83
terminal.ansiBrightBlue#499ae7
terminal.ansiBrightCyan#6BE4E6
terminal.ansiBrightGreen#58a557
terminal.ansiBrightMagenta#7591e6
terminal.ansiBrightRed#EC6A88
terminal.ansiBrightYellow#FBC3A7
terminal.ansiCyan#59E1E3
terminal.ansiGreen#2d9b8e
terminal.ansiMagenta#6a7ebc
terminal.ansiRed#E95678
terminal.ansiYellow#FAB795
terminal.foreground#ece3d4
terminal.selectionBackground#6C6F934D
terminalCursor.background#ece3d4
terminalCursor.foreground#fafafa80
textLink.activeForeground#E9436D
textLink.foreground#908822
titleBar.activeBackground#161616
titleBar.inactiveBackground#161616
walkThrough.embeddedEditorBackground#232530
widget.shadow#16161C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#73787b	italic
constant	#b93d47	—
constant.character.escape	#e06168	—
entity.name	#FAC29AE6	—
entity.name.function	#e06168	—
entity.name.tag	#af7251	bold
entity.name.type, storage.type.cs	#FAC29AE6	—
entity.other.attribute-name	#b93d47	bold
entity.other.inherited-class	#FAB795E6	—
entity.other.attribute-name.id	#e06168	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class	#FAB795E6	—
entity.name.variable, variable	#ece3d4	—
keyword	#2d9b8e	bold
keyword.operator	#cab9b2	—
keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete	#2d9b8e	—
keyword.other.unit	#b93d47	—
markup.quote	#FAB795B3	italic
markup.heading, entity.name.section	#ece3d4	—
markup.bold	#2d9b8e	bold
markup.italic	#e06168	italic
markup.inline.raw, markup.fenced_code.block	#b93d47	—
markup.underline.link	#FAB795E6	—
storage	#2d9b8e	bold
string.quoted, string.template	#FAB795E6	—
string.regexp	#b93d47	—
string.other.link	#b93d47	—
support	#FAC29AE6	—
support.function	#e06168	—
support.variable	#ece3d4	—
support.type.property-name, meta.object-literal.key	#6a7ebc	—
support.type.property-name.css	#cab9b2	—
variable.language	#FAC29AE6	—
string.template meta.embedded	#cab9b2	—
punctuation.definition.tag	#825148	bold
punctuation.separator	#cab9b2	—
punctuation.definition.template-expression	#2d9b8e	—
punctuation.section.embedded	#2d9b8e	—
punctuation.definition.list	#b93d47	—

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