MangaMode

Name: MangaMode
Author: markonikolajevic

Publisher: markonikolajevicThemes in package: 7

A VS Code theme pack with eye-comfort anime/manga-inspired variants.

GitHub

Color themes

VS Code preview

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

MangaMode — MangaMode: Sailor Moon

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#E6E1D8
activityBar.foreground#4A3D58
activityBarBadge.background#B45679
activityBarBadge.foreground#F5F0E8
badge.background#B4567930
badge.foreground#B45679
diffEditor.insertedLineBackground#2B8C6F15
diffEditor.insertedTextBackground#2B8C6F22
diffEditor.removedLineBackground#C7485215
diffEditor.removedTextBackground#C7485222
diffEditorGutter.insertedLineBackground#2B8C6F22
diffEditorGutter.removedLineBackground#C7485222
editor.background#F0EBE3
editor.findMatchBackground#E8C8D680
editor.findMatchHighlightBackground#EAD6E066
editor.foreground#3A3248
editor.lineHighlightBackground#E9E4DB
editor.selectionBackground#D0BED980
editor.selectionHighlightBackground#DCD2E666
editor.wordHighlightBackground#C7B3D78A
editor.wordHighlightStrongBackground#B89DD0B0
editorBracketHighlight.foreground1#3D5A99
editorBracketHighlight.foreground2#536FA6
editorBracketHighlight.foreground3#6A84B3
editorBracketHighlight.foreground4#3D5A99
editorBracketHighlight.foreground5#536FA6
editorBracketHighlight.foreground6#6A84B3
editorBracketMatch.background#E0D0EA80
editorBracketMatch.border#3D5A9988
editorCursor.foreground#B45679
editorError.foreground#C74852
editorGroupHeader.tabsBorder#EBE6DD
editorHoverWidget.background#F5F0E8
editorHoverWidget.border#DED6E2
editorHoverWidget.foreground#3A3248
editorIndentGuide.activeBackground1#C0B3C6
editorIndentGuide.background1#DED6E2
editorInfo.foreground#3D5A99
editorInlayHint.background#E3DCD680
editorInlayHint.foreground#8A7E9899
editorInlayHint.parameterBackground#E3DCD680
editorInlayHint.parameterForeground#8A7E98
editorInlayHint.typeBackground#E3DCD680
editorInlayHint.typeForeground#7D6A9E
editorLineNumber.activeForeground#7D7290
editorLineNumber.foreground#B0A8BA
editorSuggestWidget.background#F5F0E8
editorSuggestWidget.border#DED6E2
editorSuggestWidget.foreground#3A3248
editorSuggestWidget.selectedBackground#DED3E6
editorWarning.foreground#B8860B
focusBorder#B4567966
input.background#F5F0E8
input.border#D6CCDC
input.foreground#3A3248
list.activeSelectionBackground#D6C6E0
list.activeSelectionForeground#3A3248
list.focusBackground#E6DEEA
list.hoverBackground#E6DEEA
list.inactiveSelectionBackground#E6DEEA
minimap.background#F0EBE3
panel.background#EBE6DD
scrollbarSlider.background#C9BCCF33
scrollbarSlider.hoverBackground#B0A0BE55
sideBar.background#EBE6DD
sideBar.border#EBE6DD
sideBar.foreground#564966
sideBarTitle.foreground#7D7290
statusBar.background#E3DED5
statusBar.foreground#4A3D58
tab.activeBorder#B45679
tab.inactiveBackground#EBE6DD
tab.inactiveForeground#8A7E98
terminal.ansiBlack#3A3248
terminal.ansiBlue#3D5A99
terminal.ansiBrightBlack#7D7290
terminal.ansiBrightBlue#536FA6
terminal.ansiBrightCyan#4D8E9C
terminal.ansiBrightGreen#389E7E
terminal.ansiBrightMagenta#C46B8E
terminal.ansiBrightRed#D4586A
terminal.ansiBrightWhite#F5F0E8
terminal.ansiBrightYellow#C89720
terminal.ansiCyan#3D7A8C
terminal.ansiGreen#2B8C6F
terminal.ansiMagenta#B45679
terminal.ansiRed#C74852
terminal.ansiWhite#F0EBE3
terminal.ansiYellow#B8860B
terminal.background#EDE8E0
terminal.foreground#3A3248
titleBar.activeBackground#E3DED5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
support.type.property-name.json, meta.structure.dictionary.json > string.quoted.json	#B45679	—
meta.structure.dictionary.value.json string.quoted.double.json, meta.structure.array.json string.quoted.double.json	#3D5A99	—
constant.numeric.json, constant.language.boolean.json, constant.language.null.json	#8B6AAE	—
punctuation.separator.dictionary.key-value.json, punctuation.separator.array.json	#7B6D94	—
comment, punctuation.definition.comment	#8A7E98	italic
keyword, storage, keyword.control	#B45679	—
entity.name.function, support.function	#3D5A99	—
entity.name.tag, entity.name.tag.js, entity.name.tag.jsx, entity.name.tag.tsx, entity.name.type.jsx, entity.name.type.tsx, meta.tag.custom.jsx entity.name.type.jsx, meta.tag.custom.tsx entity.name.type.tsx, support.class.component, support.class.component.jsx, support.class.component.tsx	#B45679	—
variable, meta.definition.variable.name	#3A3248	—
variable.parameter	#3A3248	—
string, constant.other.symbol	#2B8C6F	—
constant.numeric, constant.language	#B8860B	—
entity.name.type, support.type	#7D6A9E	—
entity.name.section, markup.heading	#3D5A99	bold
constant.character.escape, support.constant	#B8860B	—
punctuation, meta.brace	#7B6D94	—

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