Pink Pixel Sweet Themes

Name: Pink Pixel Sweet Themes
Author: Pink Pixel

Publisher: Pink PixelThemes in package: 10

Candy-coated and contrast-heavy dark themes for Visual Studio Code by Pink Pixel.

GitHub

Color themes

VS Code preview

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

Pink Pixel Sweet Themes — Pink Pixel Pixy Stix

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.activeBorder#B9FF6A
activityBar.background#0D0D14
activityBar.border#67F5FF
activityBar.foreground#ff69b4
activityBar.inactiveForeground#7A7F95
activityBarBadge.background#67F5FF
activityBarBadge.foreground#0A0A0F
breadcrumb.activeSelectionForeground#B9FF6A
breadcrumb.background#111119
breadcrumb.foreground#8C91A8
button.background#67F5FF
button.foreground#0A0A0F
button.hoverBackground#B9FF6A
button.secondaryBackground#161722
button.secondaryForeground#F5F7FF
contrastActiveBorder#B9FF6A
contrastBorder#ca59ff
descriptionForeground#C9CEDC
dropdown.background#161722
dropdown.border#67F5FF
dropdown.foreground#F5F7FF
editor.background#0A0A0F
editor.findMatchBackground#fdec30
editor.findMatchBorder#67F5FF
editor.findMatchForeground#0A0A0F
editor.findMatchHighlightBackground#fdec3024
editor.foreground#F5F7FF
editor.lineHighlightBackground#15151D
editor.lineHighlightBorder#67F5FF66
editor.selectionBackground#ff69b438
editor.selectionHighlightBackground#fdec3020
editor.wordHighlightBackground#67F5FF18
editor.wordHighlightStrongBackground#ff69b424
editorBracketMatch.background#B9FF6A14
editorBracketMatch.border#B9FF6A
editorCursor.foreground#fdec30
editorGroup.border#ca59ff
editorGroupHeader.noTabsBackground#111119
editorGroupHeader.tabsBackground#111119
editorHoverWidget.background#101018
editorHoverWidget.border#67F5FF
editorIndentGuide.activeBackground1#B9FF6A
editorIndentGuide.background1#20222D
editorLineNumber.activeForeground#fdec30
editorLineNumber.foreground#7A7F95
editorRuler.foreground#2A2D3A
editorSuggestWidget.background#101018
editorSuggestWidget.border#67F5FF
editorSuggestWidget.foreground#F5F7FF
editorSuggestWidget.highlightForeground#B9FF6A
editorSuggestWidget.selectedBackground#1C1D28
editorWhitespace.foreground#2E3140
editorWidget.background#101018
editorWidget.border#ca59ff
errorForeground#FF5C8A
focusBorder#67F5FF
foreground#F5F7FF
gitDecoration.addedResourceForeground#B9FF6A
gitDecoration.deletedResourceForeground#FF5C8A
gitDecoration.modifiedResourceForeground#67F5FF
gitDecoration.untrackedResourceForeground#fdec30
icon.foreground#F5F7FF
input.background#161722
input.border#ca59ff
input.foreground#F5F7FF
input.placeholderForeground#8C91A8
list.activeSelectionBackground#ff69b4
list.activeSelectionForeground#0A0A0F
list.focusBackground#1B1D2A
list.focusForeground#F5F7FF
list.highlightForeground#B9FF6A
list.hoverBackground#171925
list.hoverForeground#F5F7FF
list.inactiveSelectionBackground#421427
list.inactiveSelectionForeground#F5F7FF
menubar.selectionBackground#161722
menubar.selectionForeground#B9FF6A
minimapSlider.activeBackground#67F5FF88
minimapSlider.background#ff69b444
minimapSlider.hoverBackground#ff69b466
notificationLink.foreground#B9FF6A
notifications.background#111119
notifications.foreground#F5F7FF
panel.background#111119
panel.border#ca59ff
panelTitle.activeBorder#fdec30
panelTitle.activeForeground#B9FF6A
panelTitle.inactiveForeground#8C91A8
peekView.border#67F5FF
peekViewEditor.background#111119
peekViewResult.background#111119
peekViewTitle.background#161722
pickerGroup.border#67F5FF
pickerGroup.foreground#B9FF6A
quickInput.background#111119
quickInput.foreground#F5F7FF
quickInputTitle.background#111119
scrollbarSlider.activeBackground#B9FF6A
scrollbarSlider.background#ff69b450
scrollbarSlider.hoverBackground#ff69b47A
selection.background#ff69b4
sideBar.background#12121A
sideBar.border#ff69b4
sideBar.foreground#F5F7FF
sideBarSectionHeader.background#12121A
sideBarSectionHeader.border#ca59ff
sideBarSectionHeader.foreground#B9FF6A
sideBarTitle.foreground#B9FF6A
statusBar.background#12121A
statusBar.border#67F5FF
statusBar.debuggingBackground#67F5FF
statusBar.debuggingForeground#0A0A0F
statusBar.foreground#fdec30
tab.activeBackground#ff69b4
tab.activeBorder#B9FF6A
tab.activeBorderTop#fdec30
tab.activeForeground#0A0A0F
tab.border#ca59ff
tab.hoverBackground#1C1D28
tab.inactiveBackground#0A0A0F
tab.inactiveForeground#F5F7FF
tab.unfocusedActiveBorder#67F5FF
terminal.ansiBlack#0A0A0F
terminal.ansiBlue#67F5FF
terminal.ansiBrightBlack#7A7F95
terminal.ansiBrightBlue#A5FBFF
terminal.ansiBrightCyan#A5FBFF
terminal.ansiBrightGreen#D3FFA5
terminal.ansiBrightMagenta#fb98ca
terminal.ansiBrightRed#FF8EB4
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFF27A
terminal.ansiCyan#67F5FF
terminal.ansiGreen#B9FF6A
terminal.ansiMagenta#fe76ba
terminal.ansiRed#FF5C8A
terminal.ansiWhite#F5F7FF
terminal.ansiYellow#fdec30
terminal.background#0A0A0F
terminal.foreground#F5F7FF
terminal.selectionBackground#ff69b430
terminalCursor.foreground#ff69b4
textLink.activeForeground#A5FBFF
textLink.foreground#67F5FF
titleBar.activeBackground#050507
titleBar.activeForeground#B9FF6A
titleBar.border#67F5FF
titleBar.inactiveBackground#0D0D14
titleBar.inactiveForeground#7A7F95
widget.shadow#00000099

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#F5F7FF	—
comment	#7A7F95	italic
keyword, storage, storage.type	#67F5FF	—
string, markup.inline.raw	#FF7DB7	—
constant.numeric, constant.language, constant.character	#B9FF6A	—
entity.name.function, support.function, variable.function	#ca59ff	—
entity.name.type, entity.name.class, support.type	#fdec30	—
variable, meta.definition.variable.name, entity.name.tag	#F5F7FF	—
variable.other.property, meta.object-literal.key, support.type.property-name	#67F5FF	—
punctuation, meta.brace, meta.delimiter	#8C91A8	—

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