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: One Piece

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#081320
activityBar.foreground#CBE0E8
activityBarBadge.background#D95E63
activityBarBadge.foreground#0B1B24
badge.background#63C8BC40
badge.foreground#97DCD4
diffEditor.insertedLineBackground#8BD5B215
diffEditor.insertedTextBackground#8BD5B222
diffEditor.removedLineBackground#D95E6315
diffEditor.removedTextBackground#D95E6322
diffEditorGutter.insertedLineBackground#8BD5B222
diffEditorGutter.removedLineBackground#D95E6322
editor.background#0B1B24
editor.findMatchBackground#A65A4A80
editor.findMatchHighlightBackground#6A4B4666
editor.foreground#DCEAF1
editor.lineHighlightBackground#0F2330
editor.selectionBackground#1F3D49
editor.selectionHighlightBackground#19323B
editor.wordHighlightBackground#2E6E7C8A
editor.wordHighlightStrongBackground#3A8F9FB0
editorBracketHighlight.foreground1#63C8BC
editorBracketHighlight.foreground2#8BD5B2
editorBracketHighlight.foreground3#97DCD4
editorBracketHighlight.foreground4#63C8BC
editorBracketHighlight.foreground5#8BD5B2
editorBracketHighlight.foreground6#97DCD4
editorBracketMatch.background#28515D55
editorBracketMatch.border#63C8BC88
editorCursor.foreground#D95E63
editorError.foreground#D95E63
editorGroupHeader.tabsBorder#0B1720
editorHoverWidget.background#0B1720
editorHoverWidget.border#1C333C
editorHoverWidget.foreground#DCEAF1
editorIndentGuide.activeBackground1#2F6270
editorIndentGuide.background1#1C333C
editorInfo.foreground#63C8BC
editorInlayHint.background#1F3D4980
editorInlayHint.foreground#6E8EAE99
editorInlayHint.parameterBackground#1F3D4980
editorInlayHint.parameterForeground#6E8EAE
editorInlayHint.typeBackground#1F3D4980
editorInlayHint.typeForeground#97DCD4
editorLineNumber.activeForeground#97B9C6
editorLineNumber.foreground#5D7D89
editorSuggestWidget.background#0B1720
editorSuggestWidget.border#1C333C
editorSuggestWidget.foreground#DCEAF1
editorSuggestWidget.selectedBackground#1F3D49
editorWarning.foreground#EDC372
focusBorder#63C8BC66
input.background#0F2330
input.border#1C333C
input.foreground#DCEAF1
list.activeSelectionBackground#1F3D49
list.activeSelectionForeground#DCEAF1
list.focusBackground#152A35
list.hoverBackground#152A35
list.inactiveSelectionBackground#152A35
minimap.background#0B1B24
panel.background#0E1C2D
scrollbarSlider.background#1C333C33
scrollbarSlider.hoverBackground#2F627055
sideBar.background#0B1720
sideBar.border#0B1720
sideBar.foreground#B3CBD4
sideBarTitle.foreground#97B9C6
statusBar.background#070F1A
statusBar.foreground#BCD3EB
tab.activeBorder#63C8BC
tab.inactiveBackground#0B1720
tab.inactiveForeground#6E8EAE
terminal.ansiBlack#0B1B24
terminal.ansiBlue#63C8BC
terminal.ansiBrightBlack#5D7D89
terminal.ansiBrightBlue#97DCD4
terminal.ansiBrightCyan#97DCD4
terminal.ansiBrightGreen#8BD5B2
terminal.ansiBrightMagenta#D95E63
terminal.ansiBrightRed#D95E63
terminal.ansiBrightWhite#DCEAF1
terminal.ansiBrightYellow#EDC372
terminal.ansiCyan#63C8BC
terminal.ansiGreen#8BD5B2
terminal.ansiMagenta#D95E63
terminal.ansiRed#D95E63
terminal.ansiWhite#DCEAF1
terminal.ansiYellow#EDC372
terminal.background#0C1827
terminal.foreground#DCEAF1
titleBar.activeBackground#070F1A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
support.type.property-name.json, meta.structure.dictionary.json > string.quoted.json	#D95E63	—
meta.structure.dictionary.value.json string.quoted.double.json, meta.structure.array.json string.quoted.double.json	#63C8BC	—
constant.numeric.json, constant.language.boolean.json, constant.language.null.json	#EDC372	—
punctuation.separator.dictionary.key-value.json, punctuation.separator.array.json	#6EA9A3	—
comment, punctuation.definition.comment	#6E8EAE	italic
keyword, storage, keyword.control	#D95E63	—
entity.name.function, support.function	#63C8BC	—
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.jsx, support.class.component, support.class.component.jsx, support.class.component.tsx	#D95E63	—
variable, meta.definition.variable.name	#E5EFFB	—
variable.parameter	#E5EFFB	—
string, constant.other.symbol	#8BD5B2	—
constant.numeric, constant.language	#EDC372	—
entity.name.type, support.type	#97DCD4	—
entity.name.section, markup.heading	#63C8BC	bold
constant.character.escape, support.constant	#EDC372	—
punctuation, meta.brace	#8EADB7	—

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