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: Dragon Ball

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#090F1A
activityBar.foreground#CBD8EE
activityBarBadge.background#F3A251
activityBarBadge.foreground#0E1320
badge.background#59C7F540
badge.foreground#8DD8F7
diffEditor.insertedLineBackground#8EDBB515
diffEditor.insertedTextBackground#8EDBB522
diffEditor.removedLineBackground#E06B7415
diffEditor.removedTextBackground#E06B7422
diffEditorGutter.insertedLineBackground#8EDBB522
diffEditorGutter.removedLineBackground#E06B7422
editor.background#0E1320
editor.findMatchBackground#B86F2F80
editor.findMatchHighlightBackground#75594166
editor.foreground#E2E9F5
editor.lineHighlightBackground#141D2E
editor.selectionBackground#283953
editor.selectionHighlightBackground#1F2E45
editor.wordHighlightBackground#2C5B8F8A
editor.wordHighlightStrongBackground#3A79BCB0
editorBracketHighlight.foreground1#59C7F5
editorBracketHighlight.foreground2#7FD7F7
editorBracketHighlight.foreground3#8DD8F7
editorBracketHighlight.foreground4#59C7F5
editorBracketHighlight.foreground5#7FD7F7
editorBracketHighlight.foreground6#8DD8F7
editorBracketMatch.background#2B476A80
editorBracketMatch.border#60B6F088
editorCursor.foreground#F3A251
editorError.foreground#E06B74
editorGroupHeader.tabsBorder#0C1320
editorHoverWidget.background#0C1320
editorHoverWidget.border#223249
editorHoverWidget.foreground#E2E9F5
editorIndentGuide.activeBackground1#365274
editorIndentGuide.background1#223249
editorInfo.foreground#59C7F5
editorInlayHint.background#28395380
editorInlayHint.foreground#7A8FB299
editorInlayHint.parameterBackground#28395380
editorInlayHint.parameterForeground#7A8FB2
editorInlayHint.typeBackground#28395380
editorInlayHint.typeForeground#8DD8F7
editorLineNumber.activeForeground#9CB3D8
editorLineNumber.foreground#667A9D
editorSuggestWidget.background#0C1320
editorSuggestWidget.border#223249
editorSuggestWidget.foreground#E2E9F5
editorSuggestWidget.selectedBackground#283953
editorWarning.foreground#F3A251
focusBorder#59C7F566
input.background#141D2E
input.border#223249
input.foreground#E2E9F5
list.activeSelectionBackground#283953
list.activeSelectionForeground#E2E9F5
list.focusBackground#1F2E45
list.hoverBackground#1F2E45
list.inactiveSelectionBackground#1F2E45
minimap.background#0E1320
panel.background#101928
scrollbarSlider.background#22324933
scrollbarSlider.hoverBackground#36527455
sideBar.background#0C1320
sideBar.border#0C1320
sideBar.foreground#B4C7E4
sideBarTitle.foreground#9CB3D8
statusBar.background#070D16
statusBar.foreground#C0D0EA
tab.activeBorder#59C7F5
tab.inactiveBackground#0C1320
tab.inactiveForeground#7A8FB2
terminal.ansiBlack#0E1320
terminal.ansiBlue#59C7F5
terminal.ansiBrightBlack#667A9D
terminal.ansiBrightBlue#8DD8F7
terminal.ansiBrightCyan#8DD8F7
terminal.ansiBrightGreen#8EDBB5
terminal.ansiBrightMagenta#F3A251
terminal.ansiBrightRed#E06B74
terminal.ansiBrightWhite#E2E9F5
terminal.ansiBrightYellow#F8C66E
terminal.ansiCyan#59C7F5
terminal.ansiGreen#8EDBB5
terminal.ansiMagenta#F3A251
terminal.ansiRed#E06B74
terminal.ansiWhite#E2E9F5
terminal.ansiYellow#F3A251
terminal.background#0E1624
terminal.foreground#E2E9F5
titleBar.activeBackground#070D16

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
support.type.property-name.json, meta.structure.dictionary.json > string.quoted.json	#F3A251	—
meta.structure.dictionary.value.json string.quoted.double.json, meta.structure.array.json string.quoted.double.json	#7FD7F7	—
constant.numeric.json, constant.language.boolean.json, constant.language.null.json	#F8C66E	—
punctuation.separator.dictionary.key-value.json, punctuation.separator.array.json	#6FA4D4	—
comment, punctuation.definition.comment	#7A8FB2	italic
keyword, storage, keyword.control	#F29A49	—
entity.name.function, support.function	#59C7F5	—
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	#F3A251	—
variable, meta.definition.variable.name	#E9F0FC	—
variable.parameter	#E9F0FC	—
string, constant.other.symbol	#8EDBB5	—
constant.numeric, constant.language	#F8C66E	—
entity.name.type, support.type	#8DD8F7	—
entity.name.section, markup.heading	#59C7F5	bold
constant.character.escape, support.constant	#F8C66E	—
punctuation, meta.brace	#91A6C7	—

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