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 The Wind Rises

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#b6ac9d
activityBar.foreground#5a3b41
activityBarBadge.background#e6e6e6
activityBarBadge.foreground#06060C
badge.background#2E303E
badge.foreground#3b2026
breadcrumbPicker.background#232530
button.background#2E303E
debugToolBar.background#f2ece2
diffEditor.insertedTextBackground#09F7A01A
diffEditor.removedTextBackground#F43E5C1A
dropdown.background#d8ccba
dropdown.listBackground#e6dac7
editor.background#f2ece2
editor.findMatchBackground#6C6F9380
editor.findMatchHighlightBackground#6C6F934D
editor.findRangeHighlightBackground#6C6F931A
editor.hoverHighlightBackground#6C6F934D
editor.lineHighlightBackground#efc7a7ab
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#f2ece2
editorCursor.foreground#b74848
editorError.foreground#F43E5C
editorGroup.border#1A1C23
editorGroup.dropBackground#6C6F934D
editorGroupHeader.tabsBackground#f2ece2
editorGutter.addedBackground#09F7A0B3
editorGutter.deletedBackground#F43E5CB3
editorGutter.modifiedBackground#21BFC2B3
editorIndentGuide.activeBackground#404252
editorIndentGuide.background#2E303E80
editorLineNumber.activeForeground#007db3
editorLineNumber.foreground#007db377
editorOverviewRuler.addedForeground#09F7A080
editorOverviewRuler.border#2E303EB3
editorOverviewRuler.bracketMatchForeground#5b3e44
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#3b2026
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#2e303e8e
list.activeSelectionForeground#3b2026
list.dropBackground#6C6F9380
list.errorForeground#F43E5CE6
list.focusBackground#2E303E80
list.focusForeground#3b2026
list.highlightForeground#908822
list.hoverBackground#2E303E80
list.hoverForeground#3b2026
list.inactiveFocusBackground#2E303E80
list.inactiveSelectionBackground#2E303E4D
list.inactiveSelectionForeground#3b2026
list.invalidItemForeground#ff0000
list.warningForeground#27D797B3
menu.background#e6dac7
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
problemsErrorIcon.foreground#ff0000
problemsInfoIcon.foreground#00f0f0
problemsWarningIcon.foreground#ff00ff
progressBar.background#908822
quickInput.background#ccc4b7
scrollbar.shadow#16161C
scrollbarSlider.activeBackground#5d5c8bb4
scrollbarSlider.background#5d5c8b4b
scrollbarSlider.hoverBackground#5d5c8b
selection.background#6C6F9380
sideBar.background#ccc4b7
sideBar.dropBackground#6C6F934D
sideBar.foreground#5b3e44
sideBarSectionHeader.background#ccc4b7
sideBarSectionHeader.border#39395565
sideBarSectionHeader.foreground#5a3b41
statusBar.background#f2ece2
statusBar.debuggingBackground#FAB38E
statusBar.debuggingForeground#06060C
statusBar.foreground#5b3e44
statusBar.noFolderBackground#f2ece2
statusBarItem.hoverBackground#2E303E
statusBarItem.prominentBackground#2E303E
statusBarItem.prominentHoverBackground#6C6F93
tab.activeBorder#b9b028
tab.border#1C1E2600
tab.inactiveBackground#f2ece2
terminal.ansiBlue#007db3
terminal.ansiBrightBlue#0096c3
terminal.ansiBrightCyan#6BE4E6
terminal.ansiBrightGreen#19aa41
terminal.ansiBrightMagenta#F075B5
terminal.ansiBrightRed#EC6A88
terminal.ansiBrightYellow#ea9055
terminal.ansiCyan#59E1E3
terminal.ansiGreen#16a13a
terminal.ansiMagenta#EE64AC
terminal.ansiRed#E95678
terminal.ansiYellow#f3853c
terminal.foreground#3b2026
terminal.selectionBackground#6C6F934D
terminalCursor.background#3b2026
terminalCursor.foreground#9b8d8d80
textLink.activeForeground#E9436D
textLink.foreground#908822
titleBar.activeBackground#bbaf9b
titleBar.inactiveBackground#f2ece2
walkThrough.embeddedEditorBackground#232530
widget.shadow#ada9a3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#b4986b	italic
constant	#0096c3	—
constant.character.escape	#16a13a	—
entity.name	#c6398b	—
entity.name.function	#16a13a	—
entity.name.tag	#ab524f	bold
entity.name.type, storage.type.cs	#c6398b	—
entity.other.attribute-name	#0096c3	bold
entity.other.inherited-class	#d87e43	—
entity.other.attribute-name.id	#16a13a	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class	#d87e43	—
entity.name.variable, variable	#3b2026	—
keyword	#3e98a3	bold
keyword.operator	#ab8a90	—
keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete	#3e98a3	—
keyword.other.unit	#0096c3	—
markup.quote	#FAB795B3	—
markup.heading, entity.name.section	#3b2026	—
markup.bold	#3e98a3	bold
markup.italic	#16a13a	italic
markup.inline.raw, markup.fenced_code.block	#0096c3	—
markup.underline.link	#d87e43	—
storage	#3e98a3	bold
string.quoted, string.template	#d87e43	—
string.regexp	#0096c3	—
string.other.link	#0096c3	—
support	#c6398b	—
support.function	#16a13a	—
support.variable	#3b2026	—
support.type.property-name, meta.object-literal.key	#0096c3	—
support.type.property-name.css	#ab8a90	—
variable.language	#c6398b	—
string.template meta.embedded	#ab8a90	—
punctuation.definition.tag	#b17570	bold
punctuation.separator	#ab8a90	—
punctuation.definition.template-expression	#3e98a3	—
punctuation.section.embedded	#3e98a3	—
punctuation.definition.list	#0096c3	—

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