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!

Open in VS Code GitHub

Color themes

VS Code preview

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

Cyber Pastel Theme Pack — Cyber Pastel - Sunset Orange

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#f97316
activityBar.inactiveForeground#9ca3af
activityBarBadge.background#f97316
activityBarBadge.foreground#ffffff
badge.background#f97316
badge.foreground#ffffff
button.background#f97316
button.foreground#ffffff
button.hoverBackground#ea580c
editor.background#fefeff
editor.findMatchBackground#fbbf24
editor.findMatchHighlightBackground#fef3c7
editor.foreground#374151
editor.lineHighlightBackground#fffbeb
editor.selectionBackground#fed7aa
editor.selectionHighlightBackground#fff7ed
editor.wordHighlightBackground#fed7aa
editor.wordHighlightStrongBackground#fde68a
editorBracketMatch.background#fed7aa
editorBracketMatch.border#f97316
editorCursor.foreground#f97316
editorLineNumber.activeForeground#f97316
editorLineNumber.foreground#fb923c
explorer.decorations.badges#f97316
explorer.decorations.colors#f97316
explorer.decorations.errorForeground#ef4444
explorer.decorations.infoForeground#3b82f6
explorer.decorations.warningForeground#f59e0b
explorerItem.fileForeground#374151
explorerItem.fileHoverForeground#6b7280
explorerItem.fileSelectedForeground#6b7280
explorerItem.folderForeground#f97316
explorerItem.folderHoverForeground#ea580c
explorerItem.folderSelectedForeground#ea580c
explorerItem.resourceForeground#374151
explorerItem.resourceGroupForeground#6b7280
explorerItem.resourceGroupIconForeground#f97316
explorerItem.resourceHoverForeground#f97316
explorerItem.resourceSelectedForeground#f97316
list.activeSelectionBackground#fed7aa
list.activeSelectionForeground#374151
list.focusBackground#fed7aa
list.hoverBackground#fff7ed
progressBar.background#f97316
sideBar.background#ffffff
sideBar.border#e5e7eb
sideBar.foreground#374151
sideBarSectionHeader.background#f9fafb
sideBarSectionHeader.border#e5e7eb
sideBarSectionHeader.foreground#374151
sideBarTitle.foreground#f97316
statusBar.background#fed7aa
statusBar.border#fdba74
statusBar.debuggingBackground#f97316
statusBar.debuggingForeground#ffffff
statusBar.foreground#9a3412
statusBar.noFolderBackground#fef3c7
tab.activeBackground#fefeff
tab.activeBorder#f97316
tab.activeBorderTop#f97316
tab.activeForeground#374151
tab.border#e5e7eb
tab.inactiveBackground#ffffff
tab.inactiveForeground#6b7280
titleBar.activeBackground#ffffff
titleBar.activeForeground#374151
titleBar.border#e5e7eb
titleBar.inactiveBackground#f9fafb
titleBar.inactiveForeground#6b7280

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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