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: Pokemon

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

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#15181C
activityBar.foreground#D9DFE8
activityBarBadge.background#E7C85A
activityBarBadge.foreground#1B1E22
badge.background#E7C85A40
badge.foreground#C2CAD6
diffEditor.insertedLineBackground#B6C1CD15
diffEditor.insertedTextBackground#B6C1CD22
diffEditor.removedLineBackground#E06B7415
diffEditor.removedTextBackground#E06B7422
diffEditorGutter.insertedLineBackground#B6C1CD22
diffEditorGutter.removedLineBackground#E06B7422
editor.background#1B1E22
editor.findMatchBackground#9E8A4C80
editor.findMatchHighlightBackground#6C665266
editor.foreground#E8EBEF
editor.lineHighlightBackground#22262B
editor.selectionBackground#313843
editor.selectionHighlightBackground#272E37
editor.wordHighlightBackground#5A65768A
editor.wordHighlightStrongBackground#7A889DB0
editorBracketHighlight.foreground1#E7C85A
editorBracketHighlight.foreground2#F4D36D
editorBracketHighlight.foreground3#C2B44E
editorBracketHighlight.foreground4#E7C85A
editorBracketHighlight.foreground5#F4D36D
editorBracketHighlight.foreground6#C2B44E
editorBracketMatch.background#38435280
editorBracketMatch.border#E7C85A88
editorCursor.foreground#E7C85A
editorError.foreground#E06B74
editorGroupHeader.tabsBorder#181B20
editorHoverWidget.background#181B20
editorHoverWidget.border#2B313A
editorHoverWidget.foreground#E8EBEF
editorIndentGuide.activeBackground1#495361
editorIndentGuide.background1#2B313A
editorInfo.foreground#72BDF5
editorInlayHint.background#31384380
editorInlayHint.foreground#7E889799
editorInlayHint.parameterBackground#31384380
editorInlayHint.parameterForeground#7E8897
editorInlayHint.typeBackground#31384380
editorInlayHint.typeForeground#C2CAD6
editorLineNumber.activeForeground#A7B1BE
editorLineNumber.foreground#76808D
editorSuggestWidget.background#181B20
editorSuggestWidget.border#2B313A
editorSuggestWidget.foreground#E8EBEF
editorSuggestWidget.selectedBackground#313843
editorWarning.foreground#E7C85A
focusBorder#E7C85A66
input.background#22262B
input.border#2B313A
input.foreground#E8EBEF
list.activeSelectionBackground#313843
list.activeSelectionForeground#E8EBEF
list.focusBackground#272E37
list.hoverBackground#272E37
list.inactiveSelectionBackground#272E37
minimap.background#1B1E22
panel.background#1E232A
scrollbarSlider.background#2B313A33
scrollbarSlider.hoverBackground#49536155
sideBar.background#181B20
sideBar.border#181B20
sideBar.foreground#C4CCD8
sideBarTitle.foreground#A7B1BE
statusBar.background#121519
statusBar.foreground#CFD7E2
tab.activeBorder#E7C85A
tab.inactiveBackground#181B20
tab.inactiveForeground#7E8897
terminal.ansiBlack#1B1E22
terminal.ansiBlue#AAB5C4
terminal.ansiBrightBlack#76808D
terminal.ansiBrightBlue#C2CAD6
terminal.ansiBrightCyan#C2CAD6
terminal.ansiBrightGreen#B6C1CD
terminal.ansiBrightMagenta#E7C85A
terminal.ansiBrightRed#E06B74
terminal.ansiBrightWhite#E8EBEF
terminal.ansiBrightYellow#F4D36D
terminal.ansiCyan#AAB5C4
terminal.ansiGreen#B6C1CD
terminal.ansiMagenta#E7C85A
terminal.ansiRed#E06B74
terminal.ansiWhite#E8EBEF
terminal.ansiYellow#E7C85A
terminal.background#1A1F25
terminal.foreground#E8EBEF
titleBar.activeBackground#121519

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
support.type.property-name.json, meta.structure.dictionary.json > string.quoted.json	#E7C85A	—
meta.structure.dictionary.value.json string.quoted.double.json, meta.structure.array.json string.quoted.double.json	#B6C1CD	—
constant.numeric.json, constant.language.boolean.json, constant.language.null.json	#E7C85A	—
punctuation.separator.dictionary.key-value.json, punctuation.separator.array.json	#8E98A6	—
comment, punctuation.definition.comment	#7E8897	italic
keyword, storage, keyword.control	#E7C85A	—
entity.name.function, support.function	#AAB5C4	—
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	#E7C85A	—
variable, meta.definition.variable.name	#F6EEF3	—
variable.parameter	#F6EEF3	—
string, constant.other.symbol	#B6C1CD	—
constant.numeric, constant.language	#F4D36D	—
entity.name.type, support.type	#C2CAD6	—
entity.name.section, markup.heading	#AAB5C4	bold
constant.character.escape, support.constant	#F4D36D	—
punctuation, meta.brace	#95A0AF	—

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