Cyber Pastel Theme Pack

Name: Cyber Pastel Theme Pack
Author: cyber-pastel-themes

Publisher: cyber-pastel-themesThemes in package: 4

🚀 A futuristic light theme pack with 4 accent colors: Violet, Matrix Green, Sunset Orange & Cyber Cyan. Optimized for Space Mono font!

GitHub

Color themes

VS Code preview

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

Cyber Pastel Theme Pack — Cyber Pastel - Violet

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#ffffff
activityBar.border#e5e7eb
activityBar.foreground#8b5cf6
activityBar.inactiveForeground#9ca3af
activityBarBadge.background#8b5cf6
activityBarBadge.foreground#ffffff
badge.background#8b5cf6
badge.foreground#ffffff
button.background#8b5cf6
button.foreground#ffffff
button.hoverBackground#7c3aed
editor.background#fefeff
editor.findMatchBackground#fbbf24
editor.findMatchHighlightBackground#fef3c7
editor.foreground#374151
editor.lineHighlightBackground#f8faff
editor.selectionBackground#e0e7ff
editor.selectionHighlightBackground#f3e8ff
editor.wordHighlightBackground#e0e7ff
editor.wordHighlightStrongBackground#ddd6fe
editorBracketMatch.background#e0e7ff
editorBracketMatch.border#8b5cf6
editorCursor.foreground#8b5cf6
editorGroup.border#e1e8ff
editorGroupHeader.tabsBackground#f8faff
editorGroupHeader.tabsBorder#e1e8ff
editorIndentGuide.activeBackground#d1d5db
editorIndentGuide.background#f3f4f6
editorLineNumber.activeForeground#8b5cf6
editorLineNumber.foreground#a78bfa
editorRuler.foreground#e5e7eb
editorWhitespace.foreground#e5e7eb
explorer.decorations.badges#8b5cf6
explorer.decorations.colors#8b5cf6
explorer.decorations.errorForeground#ef4444
explorer.decorations.infoForeground#3b82f6
explorer.decorations.warningForeground#f59e0b
explorerItem.fileForeground#374151
explorerItem.fileHoverForeground#6b7280
explorerItem.fileSelectedForeground#6b7280
explorerItem.folderForeground#8b5cf6
explorerItem.folderHoverForeground#7c3aed
explorerItem.folderSelectedForeground#7c3aed
explorerItem.resourceForeground#374151
explorerItem.resourceGroupForeground#6b7280
explorerItem.resourceGroupIconForeground#8b5cf6
explorerItem.resourceHoverForeground#8b5cf6
explorerItem.resourceSelectedForeground#8b5cf6
gitDecoration.addedResourceForeground#10b981
gitDecoration.conflictingResourceForeground#8b5cf6
gitDecoration.deletedResourceForeground#ef4444
gitDecoration.ignoredResourceForeground#9ca3af
gitDecoration.modifiedResourceForeground#f59e0b
gitDecoration.untrackedResourceForeground#06b6d4
input.background#ffffff
input.border#d1d5db
input.foreground#374151
input.placeholderForeground#9ca3af
inputOption.activeBackground#e0e7ff
inputOption.activeForeground#8b5cf6
list.activeSelectionBackground#e0e7ff
list.activeSelectionForeground#374151
list.dropBackground#ddd6fe
list.errorForeground#ef4444
list.focusAndSelectionBackground#e0e7ff
list.focusAndSelectionForeground#374151
list.focusBackground#e0e7ff
list.focusForeground#374151
list.highlightForeground#8b5cf6
list.hoverBackground#f8faff
list.hoverForeground#374151
list.inactiveSelectionBackground#f3f4f6
list.inactiveSelectionForeground#374151
list.invalidItemForeground#ef4444
list.warningForeground#f59e0b
listFilterWidget.background#ffffff
listFilterWidget.noMatchesOutline#ef4444
listFilterWidget.outline#8b5cf6
listFilterWidget.shadowrgba(0,0,0,0.1)
panel.background#fefeff
panel.border#e1e8ff
panelTitle.activeBorder#8b5cf6
panelTitle.activeForeground#8b5cf6
panelTitle.inactiveForeground#6b7280
progressBar.background#8b5cf6
sideBar.background#ffffff
sideBar.border#e5e7eb
sideBar.foreground#374151
sideBarSectionHeader.background#f9fafb
sideBarSectionHeader.border#e5e7eb
sideBarSectionHeader.foreground#374151
sideBarTitle.foreground#8b5cf6
statusBar.background#e0e7ff
statusBar.border#c7d2fe
statusBar.debuggingBackground#8b5cf6
statusBar.debuggingForeground#ffffff
statusBar.foreground#8b5cf6
statusBar.noFolderBackground#f3e8ff
tab.activeBackground#fefeff
tab.activeBorder#8b5cf6
tab.activeBorderTop#8b5cf6
tab.activeForeground#374151
tab.border#e1e8ff
tab.hoverBackground#f0f4ff
tab.hoverForeground#374151
tab.inactiveBackground#f8faff
tab.inactiveForeground#6b7280
terminal.ansiBlack#374151
terminal.ansiBlue#3b82f6
terminal.ansiCyan#06b6d4
terminal.ansiGreen#10b981
terminal.ansiMagenta#8b5cf6
terminal.ansiRed#ef4444
terminal.ansiWhite#f9fafb
terminal.ansiYellow#f59e0b
terminal.background#fefeff
terminal.foreground#374151
titleBar.activeBackground#f8faff
titleBar.activeForeground#374151
titleBar.border#e1e8ff
titleBar.inactiveBackground#f0f4ff
titleBar.inactiveForeground#6b7280
tree.indentGuidesStroke#e5e7eb
tree.tableColumnsBorder#e5e7eb
tree.tableOddRowsBackground#f9fafb

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#a78bfa	italic
keyword, storage.type, storage.modifier	#8b5cf6	bold
string, punctuation.definition.string	#10b981	—
constant.numeric	#f59e0b	—
entity.name.function, meta.function-call, support.function	#3b82f6	—
entity.name.type, entity.name.class, support.type, support.class	#ec4899	—
keyword.operator	#06b6d4	—

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