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 Funfetti

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.activeBorder#7ef9ff
activityBar.background#0F0F0F
activityBar.border#D8D8D81f
activityBar.foreground#ff69a8
activityBar.inactiveForeground#D8D8D866
activityBarBadge.background#7ef9ff
activityBarBadge.foreground#000000
activityBarTop.activeBorder#de9bff
activityBarTop.background#0F0F0F
activityBarTop.foreground#D8D8D8
activityBarTop.inactiveForeground#D8D8D866
activityErrorBadge.background#ff69a8
activityErrorBadge.foreground#000000
activityWarningBadge.background#ffe66b
activityWarningBadge.foreground#000000
badge.background#20202099
badge.foreground#D8D8D8
breadcrumb.activeSelectionForeground#de9bff
breadcrumb.background#0F0F0F
breadcrumb.focusForeground#D8D8D8
breadcrumb.foreground#595959
breadcrumbPicker.background#0F0F0F
button.background#ff69a8
button.foreground#000000
button.hoverBackground#7ef9ff
button.secondaryBackground#0F0F0F
button.secondaryForeground#D8D8D8
button.separator#00000033
chat.avatarForeground#de9bff
chat.checkpointSeparator#2A2A2A
chat.requestBorder#D8D8D800
chat.requestBubbleBackground#1a1a1a24
chat.requestBubbleHoverBackground#1a1a1a29
chat.requestCodeBorder#2a2a2a25
chat.slashCommandBackground#ffffff00
chat.slashCommandForeground#7ef9ff
commandCenter.activeBorder#ff69a8
commandCenter.activeForeground#D8D8D8
commandCenter.foreground#D8D8D899
contrastActiveBorder#0F0F0F00
contrastBorder#0F0F0F00
debugConsole.errorForeground#ff69a8
debugConsole.infoForeground#7ef9ff
debugConsole.warningForeground#ffe66b
debugToolBar.background#212121
debugToolBar.border#ffb969
descriptionForeground#D8D8D8cc
diffEditor.insertedLineBackground#b9ff6f14
diffEditor.insertedTextBackground#b9ff6f14
diffEditor.removedLineBackground#ff69a814
diffEditor.removedTextBackground#ff69a814
disabledForeground#383838ff
dropdown.background#0F0F0F
dropdown.border#D8D8D800
editor.background#0F0F0F
editor.findMatchBackground#000000ff
editor.findMatchBorder#de9bff
editor.findMatchHighlightBackground#00000080
editor.findMatchHighlightBorder#D8D8D84d
editor.findMatchHighlightForeground#d8d8d82b
editor.findRangeHighlightBackground#ffe66b4d
editor.foreground#D8D8D8
editor.lineHighlightBackground#20202000
editor.lineHighlightBorder#20202099
editor.selectionBackground#50505099
editor.selectionForeground#D8D8D8
editor.selectionHighlightBackground#ffe66b33
editor.wordHighlightBackground#ff9cac4d
editor.wordHighlightStrongBackground#b9ff6f4d
editorBracketMatch.background#0F0F0F
editorBracketMatch.border#ffe66b80
editorCodeLens.foreground#363636
editorCursor.background#ffe66b
editorCursor.foreground#ffe66b
editorError.foreground#ff69a8b3
editorGroup.border#D8D8D81f
editorGroupHeader.tabsBackground#0F0F0F
editorGutter.addedBackground#b9ff6f99
editorGutter.addedSecondaryBackground#b9ff6f99
editorGutter.deletedBackground#ff69a899
editorGutter.deletedSecondaryBackground#ff69a899
editorGutter.modifiedBackground#ffb96999
editorGutter.modifiedSecondaryBackground#ffb96999
editorHoverWidget.background#0F0F0F
editorHoverWidget.border#D8D8D820
editorIndentGuide.activeBackground1#2A2A2Ab3
editorInfo.foreground#ffb969b3
editorLineNumber.activeForeground#595959
editorLineNumber.foreground#2A2A2Aff
editorLink.activeForeground#D8D8D8
editorMarkerNavigation.background#D8D8D80d
editorOverviewRuler.border#0F0F0F
editorOverviewRuler.errorForeground#ff69a899
editorOverviewRuler.findMatchForeground#ff69a825
editorOverviewRuler.infoForeground#ffb96999
editorOverviewRuler.warningForeground#ffe66b99
editorRuler.foreground#2A2A2A
editorStickyScrollHover.background#3030304d
editorSuggestWidget.background#0F0F0F
editorSuggestWidget.border#D8D8D800
editorSuggestWidget.foreground#D8D8D8
editorSuggestWidget.highlightForeground#ff69a8
editorSuggestWidget.selectedBackground#20202099
editorWarning.foreground#ffe66bb3
editorWhitespace.foreground#2A2A2Aff
editorWidget.background#0F0F0F
editorWidget.border#7ef9ff
editorWidget.resizeBorder#ff69a8
extensionBadge.remoteForeground#D8D8D8
extensionButton.background#ff69a814
extensionButton.foreground#ff69a8
extensionButton.hoverBackground#ff69a833
extensionButton.prominentBackground#ff69a814
extensionButton.prominentForeground#7ef9ff
extensionButton.prominentHoverBackground#ff69a833
extensionButton.separator#ff69a833
extensionIcon.preReleaseForeground#ffffff1a
extensionIcon.verifiedForeground#b9ff6f
focusBorder#D8D8D800
foreground#D8D8D8
gitDecoration.conflictingResourceForeground#ffe66be6
gitDecoration.deletedResourceForeground#ff69a8e6
gitDecoration.ignoredResourceForeground#59595980
gitDecoration.modifiedResourceForeground#ffb969e6
gitDecoration.untrackedResourceForeground#b9ff6fe6
icon.foreground#D8D8D8b3
input.background#1A1A1A
input.border#D8D8D800
input.foreground#D8D8D8
input.placeholderForeground#D8D8D899
inputOption.activeBackground#D8D8D84d
inputOption.activeBorder#D8D8D84d
inputValidation.errorBorder#ff69a8
inputValidation.infoBorder#ffb969
inputValidation.warningBorder#ffe66b
keybindingLabel.border#0F0F0F
keybindingLabel.bottomBorder#0F0F0F
list.activeSelectionBackground#0F0F0Fff
list.activeSelectionForeground#ff69a8
list.activeSelectionIconForeground#ffb969
list.dropBackground#D8D8D81a
list.dropBetweenBackground#D8D8D81a
list.focusBackground#D8D8D426
list.focusForeground#D8D8D8
list.highlightForeground#de9bff
list.hoverBackground#0F0F0F
list.hoverForeground#FFFFFF
list.inactiveSelectionBackground#0000004d
list.inactiveSelectionForeground#7ef9ff
list.inactiveSelectionIconForeground#ff69a8
listFilterWidget.background#0000004d
listFilterWidget.noMatchesOutline#0000004d
listFilterWidget.outline#0000004d
menu.background#0F0F0F
menu.foreground#D8D8D8
menu.selectionBackground#20202099
menu.selectionBorder#0000004d
menu.selectionForeground#ff69a8
menu.separatorBackground#D8D8D8
menubar.selectionBackground#0000004d
menubar.selectionBorder#0000004d
menubar.selectionForeground#ffb969
merge.border#0F0F0F00
merge.currentHeaderBackground#b9ff6f4d
merge.incomingHeaderBackground#ffb9694d
notebook.focusedCellBorder#de9bff
notebook.inactiveFocusedCellBorder#ff69a880
notificationLink.foreground#ff69a8
notifications.background#0F0F0F
notifications.foreground#D8D8D8
notificationsWarningIcon.foreground#ffe66b
notificationToast.border#D8D8D81f
panel.background#0F0F0Fff
panel.border#D8D8D81f
panelTitle.activeBorder#ff69a8
panelTitle.activeForeground#D8D8D8
panelTitle.inactiveForeground#D8D8D866
peekView.border#0000004d
peekViewEditor.background#1A1A1A
peekViewEditor.matchHighlightBackground#303030
peekViewEditorGutter.background#1A1A1A
peekViewResult.background#1A1A1A
peekViewResult.matchHighlightBackground#303030
peekViewResult.selectionBackground#595959b3
peekViewTitle.background#1A1A1A
peekViewTitleDescription.foreground#D8D8D899
pickerGroup.border#0F0F0F
pickerGroup.foreground#ff69a8
progressBar.background#7ef9ff
quickInput.background#0F0F0Fff
quickInput.foreground#595959
quickInputList.focusBackground#D8D8D426
quickInputList.focusIconForeground#D8D8D8
quickInputTitle.background#0F0F0F
sash.hoverBorder#ff69a880
scrollbar.shadow#0000004d
scrollbarSlider.activeBackground#ff69a8
scrollbarSlider.background#EEFFFF20
scrollbarSlider.hoverBackground#EEFFFF10
selection.background#ff69a8
settings.checkboxBackground#0F0F0F
settings.checkboxForeground#D8D8D8
settings.dropdownBackground#0F0F0F
settings.dropdownForeground#D8D8D8
settings.headerForeground#D8D8D8
settings.modifiedItemIndicator#de9bff
settings.numberInputBackground#0F0F0F
settings.numberInputForeground#D8D8D8
settings.textInputBackground#0F0F0F
settings.textInputForeground#D8D8D8
sideBar.background#0F0F0F
sideBar.border#D8D8D81f
sideBar.foreground#595959
sideBarActivityBarTop.border#D8D8D81f
sideBarSectionHeader.background#0F0F0F
sideBarSectionHeader.border#0F0F0F00
sideBarStickyScroll.border#0F0F0F00
sideBarTitle.foreground#D8D8D8
statusBar.background#0F0F0F
statusBar.border#D8D8D81f
statusBar.debuggingBackground#ff69a81a
statusBar.debuggingForeground#ff69a8
statusBar.foreground#4D4D4D
statusBar.noFolderBackground#0F0F0F
statusBarItem.hoverBackground#36363633
statusBarItem.remoteBackground#ff69a814
statusBarItem.remoteForeground#ff69a8
statusBarItem.remoteHoverBackground#7ef9ff
statusBarItem.remoteHoverForeground#000000
tab.activeBackground#0F0F0F
tab.activeBorder#de9bff
tab.activeBorderTop#ff69a800
tab.activeForeground#FFFFFF
tab.activeModifiedBorder#ff69a800
tab.border#D8D8D81f
tab.inactiveBackground#0F0F0F
tab.inactiveForeground#595959
tab.unfocusedActiveBorder#7ef9ff
tab.unfocusedActiveBorderTop#36363600
tab.unfocusedActiveForeground#D8D8D8
terminal.ansiBlack#000000
terminal.ansiBlue#ffb969
terminal.ansiBrightBlack#363636
terminal.ansiBrightBlue#ffb969
terminal.ansiBrightCyan#7ef9ff
terminal.ansiBrightGreen#b9ff6f
terminal.ansiBrightMagenta#de9bff
terminal.ansiBrightRed#ff69a8
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffe66b
terminal.ansiCyan#7ef9ff
terminal.ansiGreen#b9ff6f
terminal.ansiMagenta#de9bff
terminal.ansiRed#ff69a8
terminal.ansiWhite#ffffff
terminal.ansiYellow#ffe66b
terminalCommandGuide.foreground#2A2A2A
terminalCursor.background#000000
terminalCursor.foreground#ffe66b
textLink.activeForeground#D8D8D8
textLink.foreground#ffb969
textPreformat.background#20202099
textPreformat.foreground#D8D8D8b3
titleBar.activeBackground#0F0F0F
titleBar.activeForeground#D8D8D8
titleBar.border#D8D8D81f
titleBar.inactiveBackground#0F0F0F
titleBar.inactiveForeground#595959
toolbar.activeBackground#ff69a826
toolbar.hoverBackground#D8D8D81a
tree.indentGuidesStroke#2A2A2A
widget.border#D8D8D81f
widget.shadow#0000004d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
Global settings	#D8D8D8	—
string	#b9ff6f	—
punctuation, constant.other.symbol	#7ef9ff	—
constant.character.escape, text.html constant.character.entity.named	#D8D8D8	—
constant.language.boolean	#de9bff	—
constant.numeric	#b9ff6f	—
variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments	#ff8cbc	—
keyword.other	#b9ff6f	—
keyword, modifier, variable.language.this, support.type.object, constant.language	#7ef9ff	—
entity.name.function, support.function	#ffb969	—
storage.type, storage.modifier, storage.control	#de9bff	—
support.module, support.node	#ff69a8	italic
support.type, constant.other.key	#ffe66b	—
entity.name.type, entity.other.inherited-class, entity.other	#ffe66b	—
comment	#3D3D3D	italic
comment punctuation.definition.comment	#3D3D3D	italic
punctuation	#7ef9ff	—
entity.name, entity.name.type.class, support.type, support.class, meta.use	#ffe66b	—
variable.object.property, meta.field.declaration entity.name.function	#de9bff	—
meta.definition.method entity.name.function	#ff69a8	—
meta.function entity.name.function	#ffb969	—
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#7ef9ff	—
meta.embedded, source.groovy.embedded, meta.template.expression	#D8D8D8	—
entity.name.tag.yaml	#ff69a8	—
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json	#ff69a8	—
constant.language.json	#7ef9ff	—
meta.structure.dictionary.json support.type.property-name.json	#de9bff	—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ffe66b	—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#F78C6C	—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ff69a8	—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#916b53	—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ffb969	—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ffb969	—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#de9bff	—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#b9ff6f	—
entity.other.attribute-name.class	#de9bff	—
entity.other.attribute-name.id	#ffb969	—
source.css entity.name.tag	#ffe66b	—
support.type.property-name.css	#B2CCD6	—
meta.tag, punctuation.definition.tag	#7ef9ff	—
entity.name.tag	#ff69a8	—
entity.other.attribute-name	#de9bff	—
punctuation.definition.entity.html	#D8D8D8	—
markup.heading	#b9ff6f	—
text.html.markdown meta.link.inline, meta.link.reference	#ff69a8	—
text.html.markdown beginning.punctuation.definition.list	#ffb969	—
markup.italic	#b9ff6f	italic
markup.bold	#de9bff	bold
markup.bold markup.italic, markup.italic markup.bold	#ff69a8	italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown	#ffb969	—
markup.inline.raw.string.markdown	#b9ff6f	—
markup.quote	#7ef9ff	italic
punctuation.definition.quote	#ff9cac	—
keyword.other.definition.ini	#ff69a8	—
entity.name.section.group-title.ini	#7ef9ff	—
source.cs meta.class.identifier storage.type	#ffe66b	—
source.cs meta.method.identifier entity.name.function	#ff69a8	—
source.cs meta.method-call meta.method, source.cs entity.name.function	#ffb969	—
source.cs storage.type	#de9bff	—
source.cs meta.method.return-type	#ffe66b	—
source.cs meta.preprocessor	#363636	—
source.cs entity.name.type.namespace	#ff8cbc	—
meta.jsx.children, SXNested	#de9bff	—
support.class.component	#ffe66b	—
source.cpp meta.block variable.other	#b9ff6f	—
source.python meta.member.access.python	#ff69a8	—
source.python meta.function-call.python, meta.function-call.arguments	#b9ff6f	—
meta.block	#de9bff	—
entity.name.function.call, support.function.builtin	#b9ff6f	—
source.php support.other.namespace, source.php meta.use support.class	#ff8cbc	—
constant.keyword	#7ef9ff	italic
entity.name.function	#b9ff6f	—
constant.other.placeholder	#ff69a8	—
markup.deleted	#de9bff	—
markup.inserted	#b9ff6f	—
markup.underline	—	underline
keyword.control	#7ef9ff	italic
variable.parameter	—	italic
variable.parameter.function.language.special.self.python	#D8D8D8	italic
constant.character.format.placeholder.other.python	#b9ff6f	—
markup.fenced_code.block	#D8D8D8e6	—

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