Cyberpunk Return Theme

Name: Cyberpunk Return Theme
Author: Abdul Haseeb

Publisher: Abdul HaseebThemes in package: 6

A stunning cyberpunk-inspired VS Code theme with neon colors and futuristic vibes

Open in VS Code GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Cyberpunk Return Theme — Cyberpunk Return

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...
~/my-project

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#050A30
activityBar.foreground#00FFFF
dropdown.background#0D0221
dropdown.foreground#F8F8F2
editor.background#0D0221
editor.findMatchBackground#FF007F33
editor.findMatchHighlightBackground#00FFFF33
editor.foreground#F8F8F2
editor.lineHighlightBackground#FF007F0D
editor.selectionBackground#FF007F33
editor.wordHighlightBackground#00FFFF33
editor.wordHighlightStrongBackground#FF007F33
editorBracketMatch.background#FF007F33
editorBracketMatch.border#00FFFF
editorCursor.foreground#00FFFF
editorGroupHeader.tabsBackground#050A30
editorGutter.addedBackground#00E8C6
editorGutter.deletedBackground#FF007F
editorGutter.modifiedBackground#FFD700
editorIndentGuide.background#6D6D6D33
editorLineNumber.activeForeground#00FFFF
editorLineNumber.foreground#6D6D6D
editorWhitespace.foreground#6D6D6D
input.background#0D0221
input.border#FF007F
input.foreground#F8F8F2
list.activeSelectionBackground#FF007F33
list.activeSelectionForeground#00FFFF
list.hoverBackground#FF007F19
sideBar.background#050A30
sideBar.foreground#F8F8F2
statusBar.background#050A30
statusBar.foreground#00FFFF
tab.activeBackground#0D0221
tab.activeForeground#00FFFF
tab.inactiveBackground#050A30
tab.inactiveForeground#6D6D6D
titleBar.activeBackground#050A30
titleBar.activeForeground#00FFFF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6D6D6D	italic
string, string.quoted	#00E8C6	—
constant.numeric, constant.language, constant.character, constant.other	#FF00FF	—
variable, variable.other	#00F7FF	—
keyword, storage.type, storage.modifier	#FF007F	—
entity.name.function, support.function	#FFD700	—
entity.name.type, support.type, support.class	#00E8C6	—
string.regexp, constant.character.escape	#FF00FF	—
punctuation.definition, punctuation.separator, punctuation.terminator	#F8F8F2	—
entity.name.tag, punctuation.definition.tag	#FF007F	—
markup.heading	#FFD700	bold
markup.inline.raw, markup.fenced_code	#00E8C6	—
markup.bold	#FF007F	bold
markup.italic	#00F7FF	italic
markup.list	#FF00FF	—

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