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 My Neighbor Totoro

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#191919
activityBar.foreground#D5D8DAB3
activityBarBadge.background#ddd014
activityBarBadge.foreground#06060C
badge.background#2E303E
badge.foreground#5d9dc7
breadcrumbPicker.background#232530
button.background#2E303E
debugToolBar.background#191919
diffEditor.insertedTextBackground#09F7A01A
diffEditor.removedTextBackground#F43E5C1A
dropdown.background#2e2e2e
dropdown.foreground#fefc8d
dropdown.listBackground#353535
editor.background#191919
editor.findMatchBackground#6C6F9380
editor.findMatchHighlightBackground#6C6F934D
editor.findRangeHighlightBackground#6C6F931A
editor.hoverHighlightBackground#6C6F934D
editor.lineHighlightBackground#5a5a5a31
editor.rangeHighlightBackground#2E303E80
editor.selectionBackground#2E303EB3
editor.selectionHighlightBackground#6C6F934D
editor.wordHighlightBackground#72737c63
editor.wordHighlightStrongBackground#6C6F9380
editorBracketMatch.background#6C6F9380
editorBracketMatch.border#6C6F9300
editorCodeLens.foreground#6C6F9380
editorCursor.background#191919
editorCursor.foreground#f1f0f0
editorError.foreground#F43E5C
editorGroup.border#1A1C23
editorGroup.dropBackground#edeef84d
editorGroupHeader.tabsBackground#191919
editorGutter.addedBackground#09F7A0B3
editorGutter.deletedBackground#F43E5CB3
editorGutter.modifiedBackground#21BFC2B3
editorIndentGuide.activeBackground#473535
editorIndentGuide.background#352c2c8e
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.background#353535
editorSuggestWidget.highlightForeground#908822
editorWarning.foreground#d77c27d3
editorWidget.background#232530
editorWidget.border#232530
errorForeground#F43E5C
extensionButton.prominentBackground#908822
extensionButton.prominentHoverBackground#E9436D
focusBorder#1A1C23
foreground#5d9dc7
gitDecoration.addedResourceForeground#27D797B3
gitDecoration.deletedResourceForeground#F43E5C
gitDecoration.ignoredResourceForeground#D5D8DA4D
gitDecoration.modifiedResourceForeground#FAB38E
gitDecoration.untrackedResourceForeground#27D797
input.background#2E303E
input.foreground#f38524
inputOption.activeBorder#E9436D80
inputValidation.errorBackground#F43E5C80
inputValidation.errorBorder#F43E5C00
list.activeSelectionBackground#2E303E80
list.activeSelectionForeground#5d9dc7
list.dropBackground#2e2e2e
list.errorForeground#F43E5CE6
list.focusBackground#2E303E80
list.focusForeground#e6e214d8
list.highlightForeground#908822
list.hoverBackground#fafa5e75
list.hoverForeground#bebe59
list.inactiveFocusBackground#2E303E80
list.inactiveSelectionBackground#2E303E4D
list.inactiveSelectionForeground#c75d5d
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
quickInput.foreground#fefc8d
scrollbar.shadow#16161C
scrollbarSlider.activeBackground#6C6F9380
scrollbarSlider.background#6C6F931A
scrollbarSlider.hoverBackground#6C6F934D
selection.background#6C6F9380
sideBar.background#191919
sideBar.dropBackground#6C6F934D
sideBar.foreground#D5D8DA80
sideBarSectionHeader.background#191919
sideBarSectionHeader.foreground#D5D8DAB3
statusBar.background#191919
statusBar.debuggingBackground#FAB38E
statusBar.debuggingForeground#06060C
statusBar.foreground#D5D8DA80
statusBar.noFolderBackground#191919
statusBarItem.hoverBackground#2E303E
statusBarItem.prominentBackground#2E303E
statusBarItem.prominentHoverBackground#6C6F93
tab.activeBorder#908822
tab.border#1C1E2600
tab.inactiveBackground#191919
terminal.ansiBlue#4a8fe2
terminal.ansiBrightBlue#688ec8
terminal.ansiBrightCyan#6BE4E6
terminal.ansiBrightGreen#6fc437
terminal.ansiBrightMagenta#F075B5
terminal.ansiBrightRed#EC6A88
terminal.ansiBrightYellow#f8ab84
terminal.ansiCyan#59E1E3
terminal.ansiGreen#668451
terminal.ansiMagenta#EE64AC
terminal.ansiRed#E95678
terminal.ansiYellow#f09162
terminal.foreground#5d9dc7
terminal.selectionBackground#6C6F934D
terminalCursor.background#5d9dc7
terminalCursor.foreground#fafafa80
textLink.activeForeground#E9436D
textLink.foreground#908822
titleBar.activeBackground#191919
titleBar.inactiveBackground#191919
walkThrough.embeddedEditorBackground#232530
widget.shadow#16161C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#876c57	italic
constant	#d7935f	—
constant.character.escape	#56772e	—
entity.name	#FAC29AE6	—
entity.name.function	#56772e	—
entity.name.tag	#f38524	bold
entity.name.type, storage.type.cs	#FAC29AE6	—
entity.other.attribute-name	#d7935f	bold
entity.other.inherited-class	#fefc8d	—
entity.other.attribute-name.id	#56772e	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class	#fefc8d	—
entity.name.variable, variable	#5d9dc7	—
keyword	#5d9dc7	bold
keyword.operator	#cab9b2	—
keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete	#5d9dc7	—
keyword.other.unit	#d7935f	—
markup.quote	#FAB795B3	italic
markup.heading, entity.name.section	#5d9dc7	—
markup.bold	#5d9dc7	bold
markup.italic	#56772e	italic
markup.inline.raw, markup.fenced_code.block	#d7935f	—
markup.underline.link	#fefc8d	—
storage	#5d9dc7	bold
string.quoted, string.template	#fefc8d	—
string.regexp	#d7935f	—
string.other.link	#d7935f	—
support	#FAC29AE6	—
support.function	#56772e	—
support.variable	#5d9dc7	—
support.type.property-name, meta.object-literal.key	#5d9dc7	—
support.type.property-name.css	#cab9b2	—
variable.language	#FAC29AE6	—
string.template meta.embedded	#cab9b2	—
punctuation.definition.tag	#fefec2	bold
punctuation.separator	#cab9b2	—
punctuation.definition.template-expression	#5d9dc7	—
punctuation.section.embedded	#5d9dc7	—
punctuation.definition.list	#d7935f	—

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