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: Jujutsu Kaisen

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#090812
activityBar.foreground#D4D0E5
activityBarBadge.background#A97CFF
activityBarBadge.foreground#100D1A
badge.background#6FE8FF40
badge.foreground#A7DFFF
diffEditor.insertedLineBackground#8CE3F215
diffEditor.insertedTextBackground#8CE3F222
diffEditor.removedLineBackground#E06B7415
diffEditor.removedTextBackground#E06B7422
diffEditorGutter.insertedLineBackground#8CE3F222
diffEditorGutter.removedLineBackground#E06B7422
editor.background#100D1A
editor.findMatchBackground#6852A180
editor.findMatchHighlightBackground#564B7066
editor.foreground#E5E2F2
editor.lineHighlightBackground#1A1528
editor.selectionBackground#332A4B
editor.selectionHighlightBackground#271F3B
editor.wordHighlightBackground#4E3B7B8A
editor.wordHighlightStrongBackground#6B4EB5B0
editorBracketHighlight.foreground1#6FE8FF
editorBracketHighlight.foreground2#8CE3F2
editorBracketHighlight.foreground3#A7DFFF
editorBracketHighlight.foreground4#6FE8FF
editorBracketHighlight.foreground5#8CE3F2
editorBracketHighlight.foreground6#A7DFFF
editorBracketMatch.background#3A306080
editorBracketMatch.border#6FE8FF88
editorCursor.foreground#6FE8FF
editorError.foreground#E06B74
editorGroupHeader.tabsBorder#0D0C17
editorHoverWidget.background#0D0C17
editorHoverWidget.border#2A2340
editorHoverWidget.foreground#E5E2F2
editorIndentGuide.activeBackground1#463873
editorIndentGuide.background1#2A2340
editorInfo.foreground#6FE8FF
editorInlayHint.background#332A4B80
editorInlayHint.foreground#8C87A799
editorInlayHint.parameterBackground#332A4B80
editorInlayHint.parameterForeground#8C87A7
editorInlayHint.typeBackground#332A4B80
editorInlayHint.typeForeground#A7DFFF
editorLineNumber.activeForeground#BBB5D3
editorLineNumber.foreground#7D7895
editorSuggestWidget.background#0D0C17
editorSuggestWidget.border#2A2340
editorSuggestWidget.foreground#E5E2F2
editorSuggestWidget.selectedBackground#332A4B
editorWarning.foreground#E7C85A
focusBorder#6FE8FF66
input.background#1A1528
input.border#2A2340
input.foreground#E5E2F2
list.activeSelectionBackground#332A4B
list.activeSelectionForeground#E5E2F2
list.focusBackground#271F3B
list.hoverBackground#271F3B
list.inactiveSelectionBackground#271F3B
minimap.background#100D1A
panel.background#141224
scrollbarSlider.background#2A234033
scrollbarSlider.hoverBackground#46387355
sideBar.background#0D0C17
sideBar.border#0D0C17
sideBar.foreground#C2BDD8
sideBarTitle.foreground#BBB5D3
statusBar.background#070710
statusBar.foreground#CBC6DF
tab.activeBorder#6FE8FF
tab.inactiveBackground#0D0C17
tab.inactiveForeground#8C87A7
terminal.ansiBlack#100D1A
terminal.ansiBlue#6FE8FF
terminal.ansiBrightBlack#7D7895
terminal.ansiBrightBlue#A7DFFF
terminal.ansiBrightCyan#A7DFFF
terminal.ansiBrightGreen#8CE3F2
terminal.ansiBrightMagenta#A97CFF
terminal.ansiBrightRed#E06B74
terminal.ansiBrightWhite#E5E2F2
terminal.ansiBrightYellow#D2B3FF
terminal.ansiCyan#6FE8FF
terminal.ansiGreen#8CE3F2
terminal.ansiMagenta#A97CFF
terminal.ansiRed#E06B74
terminal.ansiWhite#E5E2F2
terminal.ansiYellow#D2B3FF
terminal.background#110F20
terminal.foreground#E5E2F2
titleBar.activeBackground#070710

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
support.type.property-name.json, meta.structure.dictionary.json > string.quoted.json	#A97CFF	—
meta.structure.dictionary.value.json string.quoted.double.json, meta.structure.array.json string.quoted.double.json	#8CE3F2	—
constant.numeric.json, constant.language.boolean.json, constant.language.null.json	#C4A4FF	—
punctuation.separator.dictionary.key-value.json, punctuation.separator.array.json	#8D80B3	—
comment, punctuation.definition.comment	#8C87A7	italic
keyword, storage, keyword.control	#A97CFF	—
entity.name.function, support.function	#6FE8FF	—
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	#A97CFF	—
variable, meta.definition.variable.name	#ECE9F8	—
variable.parameter	#ECE9F8	—
string, constant.other.symbol	#8CE3F2	—
constant.numeric, constant.language	#D2B3FF	—
entity.name.type, support.type	#A7DFFF	—
entity.name.section, markup.heading	#6FE8FF	bold
constant.character.escape, support.constant	#D2B3FF	—
punctuation, meta.brace	#A59FC2	—

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