Pudding Theme

Name: Pudding Theme
Author: Bitcookies

Publisher: BitcookiesThemes in package: 5

A Pudding-inspired illustration color theme for Visual Studio Code.

Open in VS Code GitHub

Color themes

VS Code preview

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

Pudding Theme — Pudding Dark · Christmas

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#E3A366
activityBar.activeFocusBorder#E3A366
activityBar.background#7D191D
activityBar.border#6B0C10
activityBar.dropBorder#E3A366
activityBar.foreground#E3A366
activityBar.inactiveForeground#AB624A
activityBarBadge.background#6B0C10
activityBarBadge.foreground#EDC01A
badge.background#EDC01A
badge.foreground#6B0C10
banner.background#09100A
banner.foreground#EFEFEF
banner.iconForeground#4794DE
breadcrumb.activeSelectionForeground#D0D2DA
breadcrumb.background#09100A
breadcrumb.focusForeground#E1E4E8
breadcrumb.foreground#959DA5
breadcrumbPicker.background#002718
button.background#E3A366
button.foreground#6B0C10
button.hoverBackground#DB8E51
button.secondaryBackground#444D56
button.secondaryForeground#FFF
button.secondaryHoverBackground#586069
button.separator#6B0C1020
chat.requestBubbleBackground#581418
chat.requestBubbleHoverBackground#511216
checkbox.background#002718
checkbox.border#6B0C10
checkbox.foreground#E1E4E8
debugToolBar.background#6B0C10
descriptionForeground#959DA5
diffEditor.insertedTextBackground#28a74530
diffEditor.removedTextBackground#d73a4930
disabledForeground#6A737D
dropdown.background#002718
dropdown.border#7D191D
dropdown.foreground#E1E4E8
dropdown.listBackground#002718
editor.background#09100A
editor.findMatchBackground#345C39B0
editor.findMatchHighlightBackground#345C3980
editor.findRangeHighlightBackground#6A101640
editor.focusedStackFrameHighlightBackground#2B6A3033
editor.foldBackground#58606915
editor.foreground#A3C1E8
editor.inactiveSelectionBackground#F9CB7E20
editor.lineHighlightBackground#6B0C10B0
editor.lineHighlightBorder#09100A00
editor.linkedEditingBackground#3392FF22
editor.selectionBackground#F9CB7E40
editor.selectionHighlightBackground#DB8E5140
editor.selectionHighlightBorder#DB8E5100
editor.stackFrameHighlightBackground#C6902625
editor.wordHighlightBackground#17E5E600
editor.wordHighlightBorder#17E5E699
editor.wordHighlightStrongBackground#17E5E600
editor.wordHighlightStrongBorder#17E5E666
editorBracketHighlight.foreground1#79B8FF
editorBracketHighlight.foreground2#FFAB70
editorBracketHighlight.foreground3#B392F0
editorBracketHighlight.foreground4#79B8FF
editorBracketHighlight.foreground5#FFAB70
editorBracketHighlight.foreground6#B392F0
editorBracketHighlight.unexpectedBracket.foreground#F97583
editorBracketMatch.background#17E5E650
editorBracketMatch.border#17E5E600
editorCursor.foreground#c8e1ff
editorError.foreground#F97583
editorGroup.border#6B0C10
editorGroup.dropBackground#1E362190
editorGroupHeader.border#6B0C10
editorGroupHeader.noTabsBackground#6A1016
editorGroupHeader.tabsBackground#7D191D
editorGroupHeader.tabsBorder#6B0C10
editorGutter.addedBackground#28a745
editorGutter.deletedBackground#EA4A5A
editorGutter.modifiedBackground#2188FF
editorHoverWidget.background#5F0F14
editorHoverWidget.border#6B0C10
editorHoverWidget.foreground#E1E4E8
editorHoverWidget.statusBarBackground#5F0F14
editorIndentGuide.activeBackground#4C5763
editorIndentGuide.background#6A1016
editorLineNumber.activeForeground#A3C1E8
editorLineNumber.foreground#1E3621A0
editorOverviewRuler.border#011008
editorSuggestWidget.background#5F0F14
editorSuggestWidget.border#7D191D
editorSuggestWidget.foreground#E1E4E8
editorSuggestWidget.highlightForeground#E3A366
editorSuggestWidget.selectedBackground#E3A36625
editorWarning.foreground#F9C513
editorWhitespace.foreground#1E3621A0
editorWidget.background#5F0F14
editorWidget.border#7D191D
editorWidget.foreground#E1E4E8
errorForeground#F97583
focusBorder#7D191D
foreground#D0D2DA
gitDecoration.addedResourceForeground#34D058
gitDecoration.conflictingResourceForeground#FFAB70
gitDecoration.deletedResourceForeground#EA4A5A
gitDecoration.ignoredResourceForeground#6A737D
gitDecoration.modifiedResourceForeground#79B8FF
gitDecoration.submoduleResourceForeground#6A737D
gitDecoration.untrackedResourceForeground#34D058
icon.foreground#E1E4E8
input.background#002718
input.border#6B0C10
input.foreground#E1E4E8
input.placeholderForeground#959DA5
inputOption.activeBackground#E3A36640
inputOption.activeBorder#E3A366
inputValidation.errorBackground#002718
inputValidation.errorBorder#F97583
inputValidation.infoBackground#002718
inputValidation.infoBorder#79B8FF
inputValidation.warningBackground#002718
inputValidation.warningBorder#F9C513
keybindingLabel.background#7D191D
keybindingLabel.border#A51F24
keybindingLabel.bottomBorder#7D191D
keybindingLabel.foreground#FFFFFF
list.activeSelectionBackground#54090E
list.activeSelectionForeground#E1E4E8
list.activeSelectionIconForeground#E1E4E8
list.dropBackground#E3A36620
list.errorForeground#F97583
list.focusAndSelectionOutline#6B0C10
list.focusBackground#54090E
list.focusForeground#FFFFFF
list.focusOutline#6B0C10
list.highlightForeground#E3A366
list.hoverBackground#5F0F14
list.hoverForeground#E1E4E8
list.inactiveFocusBackground#1D2D3E
list.inactiveSelectionBackground#54090E
list.inactiveSelectionForeground#E1E4E8
list.invalidItemForeground#F97583
list.warningForeground#F9C513
listFilterWidget.background#002718
listFilterWidget.noMatchesOutline#F97583
listFilterWidget.outline#E3A366
menu.background#002718
menu.foreground#E1E4E8
menu.selectionBackground#E3A36625
menu.selectionForeground#E3A366
menu.separatorBackground#7D191D
menubar.selectionBackground#5B0A0D
minimap.background#0F1B11F0
minimap.errorHighlight#F97583
minimap.selectionHighlight#E3A36640
minimap.warningHighlight#F9C513
minimapSlider.activeBackground#0F1B11B0
minimapSlider.background#0F1B11B0
minimapSlider.hoverBackground#0F1B11C0
notificationCenterHeader.background#7D191D
notificationCenterHeader.foreground#959DA5
notifications.background#6A1016
notifications.border#6B0C10
notifications.foreground#E1E4E8
notificationsErrorIcon.foreground#EA4A5A
notificationsInfoIcon.foreground#79B8FF
notificationsWarningIcon.foreground#FFAB70
panel.background#040000
panel.border#003924
panelInput.border#6A1016
panelTitle.activeBorder#E3A366
panelTitle.activeForeground#E1E4E8
panelTitle.inactiveForeground#959DA5
peekView.border#E3A366
peekViewEditor.background#040000
peekViewEditor.matchHighlightBackground#E3A36640
peekViewEditorGutter.background#040000
peekViewResult.background#6A1016
peekViewResult.fileForeground#E1E4E8
peekViewResult.lineForeground#959DA5
peekViewResult.matchHighlightBackground#E3A36640
peekViewResult.selectionBackground#E3A36625
peekViewResult.selectionForeground#FFFFFF
peekViewTitle.background#6A1016
peekViewTitleDescription.foreground#959DA5
peekViewTitleLabel.foreground#E3A366
pickerGroup.border#444D56
pickerGroup.foreground#E1E4E8
progressBar.background#E3A366
quickInput.background#002718
quickInput.foreground#E1E4E8
quickInputList.focusBackground#6F1A1E
quickInputTitle.background#002718
sash.hoverBorder#E3A366
scrollbar.shadow#0008
scrollbarSlider.activeBackground#6B0C10EF
scrollbarSlider.background#6B0C1088
scrollbarSlider.hoverBackground#6B0C10EA
selection.background#6B0C1080
settings.checkboxBackground#002718
settings.dropdownBackground#002718
settings.focusedRowBackground#E3A36610
settings.headerForeground#E1E4E8
settings.modifiedItemIndicator#0366D6
settings.numberInputBackground#6A1016
settings.textInputBackground#6A1016
sideBar.background#6B191D
sideBar.border#6B0C10
sideBar.dropBackground#E3A36620
sideBar.foreground#D0D2DA
sideBarSectionHeader.background#A51F24
sideBarSectionHeader.border#6B0C10
sideBarSectionHeader.foreground#E1E4E8
sideBarTitle.foreground#E1E4E8
statusBar.background#7D191D
statusBar.border#6B0C10
statusBar.debuggingBackground#75715E
statusBar.debuggingForeground#FFF
statusBar.foreground#D0D2DA
statusBar.noFolderBackground#7D191D
statusBarItem.activeBackground#E3A36630
statusBarItem.hoverBackground#FFFFFF10
statusBarItem.prominentBackground#6B0C10
statusBarItem.remoteBackground#E3A366
statusBarItem.remoteForeground#6B0C10
tab.activeBackground#09100A
tab.activeBorder#09100A
tab.activeBorderTop#E3A366
tab.activeForeground#E1E4E8
tab.activeModifiedBorder#E3A366
tab.border#6B0C10
tab.hoverBackground#6B0C10
tab.hoverForeground#E1E4E8
tab.inactiveBackground#7D191D
tab.inactiveForeground#959DA5
tab.inactiveModifiedBorder#6A737D
tab.unfocusedActiveBackground#09100A
tab.unfocusedActiveBorder#7D191D
tab.unfocusedActiveBorderTop#6B0C10
tab.unfocusedActiveForeground#D0D2DA
tab.unfocusedHoverBackground#7D191D
tab.unfocusedInactiveForeground#6A737D
terminal.ansiBlack#586069
terminal.ansiBlue#2188FF
terminal.ansiBrightBlack#959DA5
terminal.ansiBrightBlue#79B8FF
terminal.ansiBrightCyan#56D4DD
terminal.ansiBrightGreen#85E89D
terminal.ansiBrightMagenta#B392F0
terminal.ansiBrightRed#F97583
terminal.ansiBrightWhite#fafbfc
terminal.ansiBrightYellow#FFEA7F
terminal.ansiCyan#39C5CF
terminal.ansiGreen#34D058
terminal.ansiMagenta#B392F0
terminal.ansiRed#EA4A5A
terminal.ansiWhite#D0D2DA
terminal.ansiYellow#FFEA7F
terminal.background#040000
terminal.foreground#D0D2DA
terminal.tab.activeBorder#E3A366
terminalCursor.background#586069
terminalCursor.foreground#79B8FF
textBlockQuote.background#24292E
textBlockQuote.border#7D191D
textCodeBlock.background#6A1016
textLink.activeForeground#DB8E51
textLink.foreground#E3A366
textPreformat.foreground#D0D2DA
textSeparator.foreground#586069
titleBar.activeBackground#6B0C10
titleBar.activeForeground#E1E4E8
titleBar.border#6C1317
titleBar.inactiveBackground#6C1317
titleBar.inactiveForeground#959DA5
tree.indentGuidesStroke#6A1016
tree.tableColumnsBorder#6A1016
welcomePage.buttonBackground#6A1016
welcomePage.buttonHoverBackground#444D56
widget.shadow#000000A0
window.activeBorder#6B0C10
window.inactiveBorder#6C1317

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#75715E	—
string	#f6f590	—
constant.numeric	#AE81FF	—
constant.language	#AE81FF	—
constant.character, constant.other	#AE81FF	—
variable	—
keyword	#9581e0	—
storage	#9581e0
storage.type	#66D9EF	italic
entity.name.class	#59aef2	underline
entity.other.inherited-class	#59aef2	italic underline
entity.name.function	#59aef2
variable.parameter	#fef693	italic
entity.name.tag	#9581e0
entity.other.attribute-name	#59aef2
support.function	#66D9EF
support.constant	#66D9EF
support.type, support.class	#66D9EF	italic
support.other.variable	—
invalid	#F8F8F0
invalid.deprecated	#F8F8F0	—

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