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 Kiki's Delivery Service

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#222234
activityBar.foreground#D5D8DAB3
activityBarBadge.background#908822
activityBarBadge.foreground#06060C
badge.background#2E303E
badge.foreground#D5D8DA
breadcrumbPicker.background#232530
button.background#2E303E
debugToolBar.background#222234
diffEditor.insertedTextBackground#09F7A01A
diffEditor.removedTextBackground#F43E5C1A
dropdown.background#37364a
dropdown.listBackground#37364a
editor.background#222234
editor.findMatchBackground#6C6F9380
editor.findMatchHighlightBackground#6C6F934D
editor.findRangeHighlightBackground#6C6F931A
editor.hoverHighlightBackground#6C6F934D
editor.lineHighlightBackground#42445365
editor.rangeHighlightBackground#2E303E80
editor.selectionBackground#6a6d7cb6
editor.selectionHighlightBackground#6C6F934D
editor.wordHighlightBackground#6C6F9380
editor.wordHighlightStrongBackground#6C6F9380
editorBracketMatch.background#6C6F9380
editorBracketMatch.border#6C6F9300
editorCodeLens.foreground#6C6F9380
editorCursor.background#222234
editorCursor.foreground#b74848
editorError.foreground#F43E5C
editorGroup.border#1A1C23
editorGroup.dropBackground#6C6F934D
editorGroupHeader.tabsBackground#222234
editorGutter.addedBackground#09F7A0B3
editorGutter.deletedBackground#F43E5CB3
editorGutter.modifiedBackground#21BFC2B3
editorIndentGuide.activeBackground#404252
editorIndentGuide.background#2E303E80
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#d5d8daee
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#D5D8DA
list.dropBackground#6C6F9380
list.errorForeground#F43E5CE6
list.focusBackground#5c5b72
list.focusForeground#D5D8DA
list.highlightForeground#908822
list.hoverBackground#2E303E80
list.hoverForeground#D5D8DA
list.inactiveFocusBackground#2E303E80
list.inactiveSelectionBackground#2E303E4D
list.inactiveSelectionForeground#D5D8DA
list.warningForeground#27D797B3
menu.background#37364a
menu.selectionBackground#5c5b72
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
scrollbar.shadow#16161C
scrollbarSlider.activeBackground#5d5c8bb4
scrollbarSlider.background#5d5c8b4b
scrollbarSlider.hoverBackground#5d5c8b
selection.background#6C6F9380
sideBar.background#1c1c2e
sideBar.dropBackground#6C6F934D
sideBar.foreground#D5D8DA80
sideBarSectionHeader.background#1c1c2e
sideBarSectionHeader.border#39395565
sideBarSectionHeader.foreground#D5D8DAB3
statusBar.background#222234
statusBar.debuggingBackground#FAB38E
statusBar.debuggingForeground#06060C
statusBar.foreground#D5D8DA80
statusBar.noFolderBackground#222234
statusBarItem.hoverBackground#2E303E
statusBarItem.prominentBackground#2E303E
statusBarItem.prominentHoverBackground#6C6F93
tab.activeBorder#908822
tab.border#1C1E2600
tab.inactiveBackground#222234
terminal.ansiBlue#2188a7
terminal.ansiBrightBlue#3e98a3
terminal.ansiBrightCyan#6BE4E6
terminal.ansiBrightGreen#3FDAA4
terminal.ansiBrightMagenta#F075B5
terminal.ansiBrightRed#EC6A88
terminal.ansiBrightYellow#FBC3A7
terminal.ansiCyan#59E1E3
terminal.ansiGreen#29D398
terminal.ansiMagenta#EE64AC
terminal.ansiRed#E95678
terminal.ansiYellow#FAB795
terminal.foreground#D5D8DA
terminal.selectionBackground#6C6F934D
terminalCursor.background#D5D8DA
terminalCursor.foreground#fafafa80
textLink.activeForeground#E9436D
textLink.foreground#908822
titleBar.activeBackground#222234
titleBar.inactiveBackground#222234
walkThrough.embeddedEditorBackground#232530
widget.shadow#16161C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#bbbbbb56	italic
constant	#F09483E6	—
constant.character.escape	#2188a7	—
entity.name	#FAC29AE6	—
entity.name.function	#2188a7	—
entity.name.tag	#ab524f	bold
entity.name.type, storage.type.cs	#FAC29AE6	—
entity.other.attribute-name	#F09483E6	bold
entity.other.inherited-class	#FAB795E6	—
entity.other.attribute-name.id	#2188a7	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class	#FAB795E6	—
entity.name.variable, variable	#D5D8DA	—
keyword	#3e98a3	bold
keyword.operator	#cab9b2	—
keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete	#3e98a3	—
keyword.other.unit	#F09483E6	—
markup.quote	#FAB795B3	italic
markup.heading, entity.name.section	#D5D8DA	—
markup.bold	#3e98a3	bold
markup.italic	#2188a7	italic
markup.inline.raw, markup.fenced_code.block	#F09483E6	—
markup.underline.link	#FAB795E6	—
storage	#3e98a3	bold
string.quoted, string.template	#FAB795E6	—
string.regexp	#F09483E6	—
string.other.link	#F09483E6	—
support	#FAC29AE6	—
support.function	#2188a7	—
support.variable	#D5D8DA	—
support.type.property-name, meta.object-literal.key	#F09483E6	—
support.type.property-name.css	#cab9b2	—
variable.language	#FAC29AE6	italic
variable.parameter	—	italic
string.template meta.embedded	#cab9b2	—
punctuation.definition.tag	#b17570	bold
punctuation.separator	#cab9b2	—
punctuation.definition.template-expression	#3e98a3	—
punctuation.section.embedded	#3e98a3	—
punctuation.definition.list	#F09483E6	—

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