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 Light

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.activeBorder#EFDB59
activityBar.activeFocusBorder#EFDB59
activityBar.background#DC975A
activityBar.border#E59B60
activityBar.dropBorder#EFDB59
activityBar.foreground#EFDB59
activityBar.inactiveForeground#B27948
activityBarBadge.background#C4534C
activityBarBadge.foreground#E8D34D
badge.background#E8D34D
badge.foreground#C4534C
banner.background#56516D
banner.foreground#EFEFEF
banner.iconForeground#F7B6B7
breadcrumb.activeSelectionForeground#586069
breadcrumb.background#F9ECDD
breadcrumb.focusForeground#2F363D
breadcrumb.foreground#6A737D
breadcrumbPicker.background#FDF0E9
button.background#945226
button.foreground#FAFBFC
button.hoverBackground#803618
button.secondaryBackground#BEA07F
button.secondaryForeground#FAFBFC
button.secondaryHoverBackground#A48A6E
button.separator#E59B6020
chat.requestBubbleBackground#F1BD86
chat.requestBubbleHoverBackground#F1B576
checkbox.background#FDF0E9
checkbox.border#EDC89F
checkbox.foreground#2F363D
debugToolBar.background#FFF
descriptionForeground#6A737D
diffEditor.insertedTextBackground#28a74530
diffEditor.removedTextBackground#d73a4930
disabledForeground#959DA5
dropdown.background#FDF0E9
dropdown.border#E59B60
dropdown.foreground#945226
dropdown.listBackground#FDF0E9
editor.background#F9ECDD
editor.findMatchBackground#FFDF5DB0
editor.findMatchHighlightBackground#FFDF5D80
editor.findRangeHighlightBackground#EDC89F40
editor.focusedStackFrameHighlightBackground#28A74525
editor.foldBackground#C5BBAFA0
editor.foreground#A88809
editor.inactiveSelectionBackground#F9CB7E50
editor.lineHighlightBackground#F9CB7EB0
editor.lineHighlightBorder#F9ECDD00
editor.linkedEditingBackground#80361830
editor.selectionBackground#F9CB7E80
editor.selectionHighlightBackground#DB8E5150
editor.selectionHighlightBorder#DB8E5100
editor.stackFrameHighlightBackground#FFD33D33
editor.wordHighlightBackground#94522600
editor.wordHighlightBorder#24943e99
editor.wordHighlightStrongBackground#94522600
editor.wordHighlightStrongBorder#24943e50
editorBracketHighlight.foreground1#005CC5
editorBracketHighlight.foreground2#E36209
editorBracketHighlight.foreground3#5A32A3
editorBracketHighlight.foreground4#005CC5
editorBracketHighlight.foreground5#E36209
editorBracketHighlight.foreground6#5A32A3
editorBracketHighlight.unexpectedBracket.foreground#CB2431
editorBracketMatch.background#94522640
editorBracketMatch.border#94522600
editorCursor.foreground#044289
editorError.foreground#CB2431
editorGroup.border#E59B60
editorGroup.dropBackground#DC975A90
editorGroupHeader.border#E59B60
editorGroupHeader.noTabsBackground#F1CBA2
editorGroupHeader.tabsBackground#EDC89F
editorGroupHeader.tabsBorder#E59B60
editorGutter.addedBackground#28A745
editorGutter.deletedBackground#D73A49
editorGutter.modifiedBackground#DC975A
editorHoverWidget.background#E4B482
editorHoverWidget.border#E59B60
editorHoverWidget.foreground#2F363D
editorHoverWidget.statusBarBackground#E4B482
editorIndentGuide.activeBackground#B98D87
editorIndentGuide.background#ECB5AD
editorLineNumber.activeForeground#A88809
editorLineNumber.foreground#C5BBAFA0
editorOverviewRuler.border#F6F8FA
editorSuggestWidget.background#E4B482
editorSuggestWidget.border#E59B60
editorSuggestWidget.foreground#2F363D
editorSuggestWidget.highlightForeground#945226
editorSuggestWidget.selectedBackground#94522625
editorWarning.foreground#F9C513
editorWhitespace.foreground#C5BBAFA0
editorWidget.background#E4B482
editorWidget.border#E59B60
editorWidget.foreground#2F363D
errorForeground#CB2431
focusBorder#DC975A
foreground#444D56
gitDecoration.addedResourceForeground#28A745
gitDecoration.conflictingResourceForeground#E36209
gitDecoration.deletedResourceForeground#D73A49
gitDecoration.ignoredResourceForeground#959DA5
gitDecoration.modifiedResourceForeground#005CC5
gitDecoration.submoduleResourceForeground#959DA5
gitDecoration.untrackedResourceForeground#28A745
icon.foreground#586069
input.background#FDF0E9
input.border#EDC89F
input.foreground#2F363D
input.placeholderForeground#55403D
inputOption.activeBackground#94522640
inputOption.activeBorder#945226
inputValidation.errorBackground#FDF0E9
inputValidation.errorBorder#CB2431
inputValidation.infoBackground#FDF0E9
inputValidation.infoBorder#005CC5
inputValidation.warningBackground#FDF0E9
inputValidation.warningBorder#E36209
keybindingLabel.background#EDC89F
keybindingLabel.border#E59B60
keybindingLabel.bottomBorder#DC975A
keybindingLabel.foreground#2F363D
list.activeSelectionBackground#E4A96C
list.activeSelectionForeground#2F363D
list.activeSelectionIconForeground#2F363D
list.dropBackground#94522620
list.errorForeground#CB2431
list.focusAndSelectionOutline#E59B60
list.focusBackground#E4A96C
list.focusForeground#2F363D
list.focusOutline#E59B60
list.highlightForeground#945226
list.hoverBackground#E4B482
list.hoverForeground#2F363D
list.inactiveFocusBackground#DBEDFF
list.inactiveSelectionBackground#E4A96C
list.inactiveSelectionForeground#2F363D
list.invalidItemForeground#CB2431
list.warningForeground#E36209
listFilterWidget.background#FDF0E9
listFilterWidget.noMatchesOutline#CB2431
listFilterWidget.outline#945226
menu.background#FDF0E9
menu.foreground#2F363D
menu.selectionBackground#94522625
menu.selectionForeground#945226
menu.separatorBackground#E59B60
menubar.selectionBackground#C0773D
minimap.background#E9DDCFD0
minimap.errorHighlight#CB2431
minimap.selectionHighlight#94522640
minimap.warningHighlight#E36209
minimapSlider.activeBackground#D9DDCFB0
minimapSlider.background#D9DDCFB0
minimapSlider.hoverBackground#D9DDCFC0
notificationCenterHeader.background#E59B60
notificationCenterHeader.foreground#6A737D
notifications.background#F1CBA2
notifications.border#E59B60
notifications.foreground#2F363D
notificationsErrorIcon.foreground#D73A49
notificationsInfoIcon.foreground#005CC5
notificationsWarningIcon.foreground#E36209
panel.background#FEFAEC
panel.border#E59B60
panelInput.border#E59B60
panelTitle.activeBorder#F9826C
panelTitle.activeForeground#2F363D
panelTitle.inactiveForeground#6A737D
peekView.border#945226
peekViewEditor.background#FEFAEC
peekViewEditor.matchHighlightBackground#94522640
peekViewEditorGutter.background#FEFAEC
peekViewResult.background#F1CBA2
peekViewResult.fileForeground#2F363D
peekViewResult.lineForeground#6A737D
peekViewResult.matchHighlightBackground#94522640
peekViewResult.selectionBackground#94522625
peekViewResult.selectionForeground#2F363D
peekViewTitle.background#F1CBA2
peekViewTitleDescription.foreground#6A737D
peekViewTitleLabel.foreground#945226
pickerGroup.border#E59B60
pickerGroup.foreground#2F363D
progressBar.background#F9CB7E
quickInput.background#FDF0E9
quickInput.foreground#2F363D
quickInputList.focusBackground#F6CFA5
quickInputTitle.background#FDF0E9
sash.hoverBorder#945226
scrollbar.shadow#DDD
scrollbarSlider.activeBackground#ABABA0DF
scrollbarSlider.background#ABABA080
scrollbarSlider.hoverBackground#ABABA0CA
selection.background#F9CB7E80
settings.checkboxBackground#FDF0E9
settings.dropdownBackground#FDF0E9
settings.focusedRowBackground#94522610
settings.headerForeground#2F363D
settings.modifiedItemIndicator#DC975A
settings.numberInputBackground#FDF0E9
settings.textInputBackground#FDF0E9
sideBar.background#F1CBA2
sideBar.border#E59B60
sideBar.dropBackground#94522620
sideBar.foreground#945226
sideBarSectionHeader.background#F9ECDD
sideBarSectionHeader.border#E59B60
sideBarSectionHeader.foreground#2F363D
sideBarTitle.foreground#2F363D
statusBar.background#DB8846
statusBar.border#E59B60
statusBar.debuggingBackground#75715E
statusBar.debuggingForeground#FFF
statusBar.foreground#FFF
statusBar.noFolderBackground#DB8846
statusBarItem.activeBackground#94522630
statusBarItem.hoverBackground#00000010
statusBarItem.prominentBackground#803618
statusBarItem.remoteBackground#945226
statusBarItem.remoteForeground#FAFBFC
tab.activeBackground#F9ECDD
tab.activeBorder#F9ECDD
tab.activeBorderTop#EFDB59
tab.activeForeground#55403D
tab.activeModifiedBorder#945226
tab.border#E59B60
tab.hoverBackground#FEFBED
tab.hoverForeground#2F363D
tab.inactiveBackground#EDDCD2
tab.inactiveForeground#6A737D
tab.inactiveModifiedBorder#959DA5
tab.unfocusedActiveBackground#F9ECDD
tab.unfocusedActiveBorder#DB8846
tab.unfocusedActiveBorderTop#EDC89F
tab.unfocusedActiveForeground#586069
tab.unfocusedHoverBackground#DB8846
tab.unfocusedInactiveForeground#959DA5
terminal.ansiBlack#24292E
terminal.ansiBlue#0366D6
terminal.ansiBrightBlack#959DA5
terminal.ansiBrightBlue#005CC5
terminal.ansiBrightCyan#3192AA
terminal.ansiBrightGreen#22863A
terminal.ansiBrightMagenta#5A32A3
terminal.ansiBrightRed#CB2431
terminal.ansiBrightWhite#803618
terminal.ansiBrightYellow#B08800
terminal.ansiCyan#1B7C83
terminal.ansiGreen#28A745
terminal.ansiMagenta#5A32A3
terminal.ansiRed#D73A49
terminal.ansiWhite#6A737D
terminal.ansiYellow#DBAB09
terminal.background#FEFAEC
terminal.foreground#586069
terminal.tab.activeBorder#F9826C
terminalCursor.background#803618
terminalCursor.foreground#005CC5
textBlockQuote.background#FAFBFC
textBlockQuote.border#E59B60
textCodeBlock.background#F6F8FA
textLink.activeForeground#2D1919
textLink.foreground#913D38
textPreformat.foreground#586069
textSeparator.foreground#803618
titleBar.activeBackground#DB8846
titleBar.activeForeground#FEFDFB
titleBar.border#DC975A
titleBar.inactiveBackground#DC975A
titleBar.inactiveForeground#EFEFEF
tree.indentGuidesStroke#E59B60
tree.tableColumnsBorder#E59B60
welcomePage.buttonBackground#F6F8FA
welcomePage.buttonHoverBackground#E59B60
widget.shadow#00000020
window.activeBorder#DB8846
window.inactiveBorder#DC975A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#A67E7E	italic
string	#1A65A3	—
constant.numeric	#1A750E	—
constant.language	#31B2CC	—
constant.character, constant.other	#A160B8	—
variable.language, variable.other	#A160B8	—
keyword	#A88809
storage	#B012CC	—
entity.name.class	#917CCD	—
entity.other.inherited-class	#5F489E	—
entity.name.function	#538527	—
variable.parameter	#538527	—
entity.name.tag	#CD4422	—
entity.other.attribute-name	#CD6450	—
support.function	#9BC765	—
support.constant	#A36B3E	—
support.type, support.class	#917CCD	—
support.other.variable	#CC85B4	—
invalid	#3C0100	—

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