Pink Pixel Sweet Themes

Color themes

• 

  Pink Pixel Bubblegum

• 

  Pink Pixel Cotton Candy

• 

  Pink Pixel Cupcake

• 

  Pink Pixel Funfetti

VS Code preview

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

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

• activityBar.activeBorder#8cf7c9
• activityBar.background#08070a
• activityBar.border#ff4f9a
• activityBar.foreground#ff8db8
• activityBar.inactiveForeground#7c6570
• activityBarBadge.background#ff6ba8
• activityBarBadge.foreground#060507
• breadcrumb.activeSelectionForeground#8cf7c9
• breadcrumb.background#0d0b10
• breadcrumb.foreground#8f7480
• button.background#ff6ba8
• button.foreground#060507
• button.hoverBackground#ff8db8
• button.secondaryBackground#171118
• button.secondaryForeground#e0a4fe
• descriptionForeground#caa5b6
• dropdown.background#120d13
• dropdown.border#ff4f9a
• dropdown.foreground#e0a4fe
• editor.background#060507
• editor.findMatchBackground#ff8db8
• editor.findMatchBorder#8cf7c9
• editor.findMatchForeground#060507
• editor.findMatchHighlightBackground#ff8db824
• editor.foreground#e0a4fe
• editor.lineHighlightBackground#121015
• editor.lineHighlightBorder#ff6ba844
• editor.selectionBackground#ff4f9a2e
• editor.selectionHighlightBackground#ff8db824
• editor.wordHighlightBackground#ff4f9a18
• editor.wordHighlightStrongBackground#8cf7c924
• editorBracketMatch.background#ff8db814
• editorBracketMatch.border#ff8db8
• editorCursor.foreground#ffc2d8
• editorGroup.border#ff4f9a
• editorGroupHeader.noTabsBackground#09080b
• editorGroupHeader.tabsBackground#09080b
• editorHoverWidget.background#0f0c11
• editorHoverWidget.border#ff6ba8
• editorIndentGuide.activeBackground1#ff6ba8
• editorIndentGuide.background1#241b22
• editorLineNumber.activeForeground#ff8db8
• editorLineNumber.foreground#7c6570
• editorRuler.foreground#2a2028
• editorSuggestWidget.background#0f0c11
• editorSuggestWidget.border#ff6ba8
• editorSuggestWidget.foreground#e0a4fe
• editorSuggestWidget.highlightForeground#57dffd
• editorSuggestWidget.selectedBackground#1b141a
• editorWhitespace.foreground#332730
• editorWidget.background#0f0c11
• editorWidget.border#ff6ba8
• errorForeground#ff8db8
• focusBorder#ff6ba8
• foreground#e0a4fe
• gitDecoration.addedResourceForeground#8cf7c9
• gitDecoration.deletedResourceForeground#ff7fae
• gitDecoration.modifiedResourceForeground#57dffd
• gitDecoration.untrackedResourceForeground#ffe96c
• icon.foreground#e0a4fe
• input.background#120d13
• input.border#ff4f9a
• input.foreground#e0a4fe
• input.taffyForeground#8f7480
• list.activeSelectionBackground#ff4f9a
• list.activeSelectionForeground#060507
• list.focusBackground#23151e
• list.focusForeground#e0a4fe
• list.highlightForeground#8cf7c9
• list.hoverBackground#191219
• list.hoverForeground#e0a4fe
• list.inactiveSelectionBackground#351925
• list.inactiveSelectionForeground#e0a4fe
• menu.background#0b090d
• menu.border#ff4f9a
• menu.foreground#e0a4fe
• menu.selectionBackground#20141c
• menu.selectionForeground#ffc2d8
• menubar.selectionBackground#171118
• menubar.selectionForeground#8cf7c9
• minimapSlider.activeBackground#ff8db87a
• minimapSlider.background#ff4f9a3d
• minimapSlider.hoverBackground#ff6ba85c
• notificationLink.foreground#ff8db8
• notifications.background#0d0b10
• notifications.foreground#e0a4fe
• panel.background#0d0b10
• panel.border#ff4f9a
• panelTitle.activeBorder#ff8db8
• panelTitle.activeForeground#8cf7c9
• panelTitle.inactiveForeground#8f7480
• peekView.border#ff4f9a
• peekViewEditor.background#0d0b10
• peekViewResult.background#0d0b10
• peekViewTitle.background#171118
• pickerGroup.border#ff4f9a
• pickerGroup.foreground#ff8db8
• quickInput.background#0d0b10
• quickInput.foreground#e0a4fe
• quickInputTitle.background#0d0b10
• scrollbarSlider.activeBackground#ff8db8
• scrollbarSlider.background#ff4f9a42
• scrollbarSlider.hoverBackground#ff6ba866
• selection.background#ff4f9a30
• sideBar.background#0a090c
• sideBar.border#ff4f9a
• sideBar.foreground#e0a4fe
• sideBarSectionHeader.background#0d0b10
• sideBarSectionHeader.border#ff4f9a
• sideBarSectionHeader.foreground#ffc2d8
• sideBarTitle.foreground#8cf7c9
• statusBar.background#0d0b10
• statusBar.border#ff4f9a
• statusBar.debuggingBackground#ff6ba8
• statusBar.debuggingForeground#060507
• statusBar.foreground#e0a4fe
• tab.activeBackground#190f15
• tab.activeBorder#ff8db8
• tab.activeBorderTop#ff4f9a
• tab.activeForeground#8cf7c9
• tab.border#ff4f9a
• tab.hoverBackground#140d12
• tab.inactiveBackground#09080b
• tab.inactiveForeground#c49aaa
• tab.unfocusedActiveBorder#ff6ba8
• terminal.ansiBlack#060507
• terminal.ansiBlue#57dffd
• terminal.ansiBrightBlack#7c6570
• terminal.ansiBrightBlue#57dffd
• terminal.ansiBrightCyan#68ffff
• terminal.ansiBrightGreen#bdfce0
• terminal.ansiBrightMagenta#ff8db8
• terminal.ansiBrightRed#8cf7c9
• terminal.ansiBrightWhite#fffafc
• terminal.ansiBrightYellow#ffe2a2
• terminal.ansiCyan#68ffff
• terminal.ansiGreen#8cf7c9
• terminal.ansiMagenta#ff4f9a
• terminal.ansiRed#ff7fae
• terminal.ansiWhite#e0a4fe
• terminal.ansiYellow#ffe96c
• terminal.background#060507
• terminal.foreground#e0a4fe
• terminal.selectionBackground#ff4f9a2b
• terminalCursor.foreground#8cf7c9
• textLink.activeForeground#ffc2d8
• textLink.foreground#ff8db8
• titleBar.activeBackground#050407
• titleBar.activeForeground#ffc2d8
• titleBar.border#ff4f9a
• titleBar.inactiveBackground#08070a
• titleBar.inactiveForeground#7c6570
• widget.shadow#ff4f9a55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...