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: Demon Slayer

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#0A0E0D
activityBar.foreground#CCD6D2
activityBarBadge.background#E1676D
activityBarBadge.foreground#0F1312
badge.background#72BDF540
badge.foreground#A4D2F6
diffEditor.insertedLineBackground#99CDEE15
diffEditor.insertedTextBackground#99CDEE22
diffEditor.removedLineBackground#E1676D15
diffEditor.removedTextBackground#E1676D22
diffEditorGutter.insertedLineBackground#99CDEE22
diffEditorGutter.removedLineBackground#E1676D22
editor.background#0F1312
editor.findMatchBackground#9E455280
editor.findMatchHighlightBackground#66474B66
editor.foreground#DEE5E2
editor.lineHighlightBackground#151C1A
editor.selectionBackground#233432
editor.selectionHighlightBackground#1B2927
editor.wordHighlightBackground#3156748A
editor.wordHighlightStrongBackground#447AA8B0
editorBracketHighlight.foreground1#72BDF5
editorBracketHighlight.foreground2#99CDEE
editorBracketHighlight.foreground3#A4D2F6
editorBracketHighlight.foreground4#72BDF5
editorBracketHighlight.foreground5#99CDEE
editorBracketHighlight.foreground6#A4D2F6
editorBracketMatch.background#2A4F4780
editorBracketMatch.border#72BDF588
editorCursor.foreground#E1676D
editorError.foreground#E1676D
editorGroupHeader.tabsBorder#0D1110
editorHoverWidget.background#0D1110
editorHoverWidget.border#22332F
editorHoverWidget.foreground#DEE5E2
editorIndentGuide.activeBackground1#346053
editorIndentGuide.background1#22332F
editorInfo.foreground#72BDF5
editorInlayHint.background#23343280
editorInlayHint.foreground#7F979099
editorInlayHint.parameterBackground#23343280
editorInlayHint.parameterForeground#7F9790
editorInlayHint.typeBackground#23343280
editorInlayHint.typeForeground#A4D2F6
editorLineNumber.activeForeground#A5BCB5
editorLineNumber.foreground#6B817B
editorSuggestWidget.background#0D1110
editorSuggestWidget.border#22332F
editorSuggestWidget.foreground#DEE5E2
editorSuggestWidget.selectedBackground#233432
editorWarning.foreground#E7C85A
focusBorder#72BDF566
input.background#151C1A
input.border#22332F
input.foreground#DEE5E2
list.activeSelectionBackground#233432
list.activeSelectionForeground#DEE5E2
list.focusBackground#1B2927
list.hoverBackground#1B2927
list.inactiveSelectionBackground#1B2927
minimap.background#0F1312
panel.background#111716
scrollbarSlider.background#22332F33
scrollbarSlider.hoverBackground#34605355
sideBar.background#0D1110
sideBar.border#0D1110
sideBar.foreground#B4C4BE
sideBarTitle.foreground#A5BCB5
statusBar.background#080A0A
statusBar.foreground#C2CEC9
tab.activeBorder#72BDF5
tab.inactiveBackground#0D1110
tab.inactiveForeground#7F9790
terminal.ansiBlack#0F1312
terminal.ansiBlue#72BDF5
terminal.ansiBrightBlack#6B817B
terminal.ansiBrightBlue#A4D2F6
terminal.ansiBrightCyan#A4D2F6
terminal.ansiBrightGreen#99CDEE
terminal.ansiBrightMagenta#E1676D
terminal.ansiBrightRed#E1676D
terminal.ansiBrightWhite#DEE5E2
terminal.ansiBrightYellow#F197A0
terminal.ansiCyan#72BDF5
terminal.ansiGreen#99CDEE
terminal.ansiMagenta#E1676D
terminal.ansiRed#E1676D
terminal.ansiWhite#DEE5E2
terminal.ansiYellow#F197A0
terminal.background#0F1514
terminal.foreground#DEE5E2
titleBar.activeBackground#080A0A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
support.type.property-name.json, meta.structure.dictionary.json > string.quoted.json	#E1676D	—
meta.structure.dictionary.value.json string.quoted.double.json, meta.structure.array.json string.quoted.double.json	#7BC3F7	—
constant.numeric.json, constant.language.boolean.json, constant.language.null.json	#F2A1A8	—
punctuation.separator.dictionary.key-value.json, punctuation.separator.array.json	#77B8AE	—
comment, punctuation.definition.comment	#7F9790	italic
keyword, storage, keyword.control	#E1676D	—
entity.name.function, support.function	#72BDF5	—
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	#E1676D	—
variable, meta.definition.variable.name	#E8EFEC	—
variable.parameter	#E8EFEC	—
string, constant.other.symbol	#99CDEE	—
constant.numeric, constant.language	#F197A0	—
entity.name.type, support.type	#A4D2F6	—
entity.name.section, markup.heading	#72BDF5	bold
constant.character.escape, support.constant	#F197A0	—
punctuation, meta.brace	#96AAA4	—

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