Pudding Theme

Color themes

• 

  Pudding Light · JK

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#F3F9FD
• activityBar.activeFocusBorder#F3F9FD
• activityBar.background#78ABD6
• activityBar.border#60A0D6
• activityBar.dropBorder#F3F9FD
• activityBar.foreground#F3F9FD
• activityBar.inactiveForeground#D4DEEA
• activityBarBadge.background#3993B5
• activityBarBadge.foreground#FFF4A2
• badge.background#FFF4A2
• badge.foreground#3993B5
• banner.background#EEF3F7
• banner.foreground#EFEFEF
• banner.iconForeground#4794DE
• breadcrumb.activeSelectionForeground#8695A8
• breadcrumb.background#EEF3F7
• breadcrumb.focusForeground#484F6C
• breadcrumb.foreground#6C84B0
• breadcrumbPicker.background#FEFDFB
• button.background#FEFDFB
• button.foreground#60A0D6
• button.hoverBackground#D1DDE9
• button.secondaryBackground#DEEBF3
• button.secondaryForeground#60A0D6
• button.secondaryHoverBackground#D1DDE9
• button.separator#60A0D620
• chat.requestBubbleBackground#D0E5F3
• chat.requestBubbleHoverBackground#C2DFF3
• checkbox.background#FEFDFB
• checkbox.border#60A0D6
• checkbox.foreground#484F6C
• debugToolBar.background#FFF
• descriptionForeground#6C84B0
• diffEditor.insertedTextBackground#28a74530
• diffEditor.removedTextBackground#d73a4930
• disabledForeground#959DA5
• dropdown.background#FEFDFB
• dropdown.border#78ABD6
• dropdown.foreground#78ABD6
• dropdown.listBackground#FEFDFB
• editor.background#EEF3F7
• editor.findMatchBackground#FFDF5DB0
• editor.findMatchHighlightBackground#FFDF5D80
• editor.findRangeHighlightBackground#B2CEE040
• editor.focusedStackFrameHighlightBackground#28A74525
• editor.foldBackground#BCC0C3A0
• editor.foreground#6C84B0
• editor.inactiveSelectionBackground#F9CB7E50
• editor.lineHighlightBackground#BFDFF3B0
• editor.lineHighlightBorder#EEF3F700
• editor.linkedEditingBackground#D1DDE930
• editor.selectionBackground#F9CB7E80
• editor.selectionHighlightBackground#DB8E5150
• editor.selectionHighlightBorder#DB8E5100
• editor.stackFrameHighlightBackground#FFD33D33
• editor.wordHighlightBackground#17E5E600
• editor.wordHighlightBorder#17E5E699
• editor.wordHighlightStrongBackground#17E5E600
• editor.wordHighlightStrongBorder#17E5E666
• editorBracketHighlight.foreground1#005CC5
• editorBracketHighlight.foreground2#E36209
• editorBracketHighlight.foreground3#5A32A3
• editorBracketHighlight.foreground4#005CC5
• editorBracketHighlight.foreground5#E36209
• editorBracketHighlight.foreground6#5A32A3
• editorBracketHighlight.unexpectedBracket.foreground#F97583
• editorBracketMatch.background#17E5E650
• editorBracketMatch.border#17E5E600
• editorCursor.foreground#C8E1FF
• editorError.foreground#F97583
• editorGroup.border#60A0D6
• editorGroup.dropBackground#78ABD690
• editorGroupHeader.border#60A0D6
• editorGroupHeader.noTabsBackground#DEEBF3
• editorGroupHeader.tabsBackground#DEEBF3
• editorGroupHeader.tabsBorder#60A0D6
• editorGutter.addedBackground#28a745
• editorGutter.deletedBackground#EA4A5A
• editorGutter.modifiedBackground#2188FF
• editorHoverWidget.background#C1E0F3
• editorHoverWidget.border#78ABD6
• editorHoverWidget.foreground#484F6C
• editorHoverWidget.statusBarBackground#C1E0F3
• editorIndentGuide.activeBackground#96B0C0
• editorIndentGuide.background#BFDFF3
• editorLineNumber.activeForeground#6C84B0
• editorLineNumber.foreground#BCC0C3A0
• editorOverviewRuler.border#60A0D6
• editorSuggestWidget.background#C1E0F3
• editorSuggestWidget.border#78ABD6
• editorSuggestWidget.foreground#484F6C
• editorSuggestWidget.highlightForeground#3993B5
• editorSuggestWidget.selectedBackground#60A0D625
• editorWarning.foreground#FFEA7F
• editorWhitespace.foreground#BCC0C3A0
• editorWidget.background#C1E0F3
• editorWidget.border#78ABD6
• editorWidget.foreground#484F6C
• errorForeground#F97583
• focusBorder#78ABD6
• foreground#8695A8
• gitDecoration.addedResourceForeground#28A745
• gitDecoration.conflictingResourceForeground#E36209
• gitDecoration.deletedResourceForeground#D73A49
• gitDecoration.ignoredResourceForeground#959DA5
• gitDecoration.modifiedResourceForeground#005CC5
• gitDecoration.submoduleResourceForeground#959DA5
• gitDecoration.untrackedResourceForeground#28A745
• icon.foreground#8695A8
• input.background#FEFDFB
• input.border#60A0D6
• input.foreground#484F6C
• input.placeholderForeground#6C84B0
• inputOption.activeBackground#60A0D640
• inputOption.activeBorder#60A0D6
• inputValidation.errorBackground#FEFDFB
• inputValidation.errorBorder#F97583
• inputValidation.infoBackground#FEFDFB
• inputValidation.infoBorder#005CC5
• inputValidation.warningBackground#FEFDFB
• inputValidation.warningBorder#E36209
• keybindingLabel.background#DEEBF3
• keybindingLabel.border#78ABD6
• keybindingLabel.bottomBorder#60A0D6
• keybindingLabel.foreground#484F6C
• list.activeSelectionBackground#ADD8F3
• list.activeSelectionForeground#484F6C
• list.activeSelectionIconForeground#484F6C
• list.dropBackground#60A0D620
• list.errorForeground#F97583
• list.focusAndSelectionOutline#60A0D6
• list.focusBackground#ADD8F3
• list.focusForeground#484F6C
• list.focusOutline#60A0D6
• list.highlightForeground#3993B5
• list.hoverBackground#C1E0F3
• list.hoverForeground#484F6C
• list.inactiveFocusBackground#BFDFF3
• list.inactiveSelectionBackground#ADD8F3
• list.inactiveSelectionForeground#6C84B0
• list.invalidItemForeground#F97583
• list.warningForeground#E36209
• listFilterWidget.background#FEFDFB
• listFilterWidget.noMatchesOutline#F97583
• listFilterWidget.outline#60A0D6
• menu.background#FEFDFB
• menu.foreground#484F6C
• menu.selectionBackground#60A0D625
• menu.selectionForeground#3993B5
• menu.separatorBackground#78ABD6
• menubar.selectionBackground#5995C8
• minimap.background#E2EDF7D0
• minimap.errorHighlight#F97583
• minimap.selectionHighlight#60A0D640
• minimap.warningHighlight#E36209
• minimapSlider.activeBackground#D2EDF7B0
• minimapSlider.background#D2EDF7B0
• minimapSlider.hoverBackground#D2EDF7C0
• notificationCenterHeader.background#78ABD6
• notificationCenterHeader.foreground#6C84B0
• notifications.background#B2CEE0
• notifications.border#60A0D6
• notifications.foreground#484F6C
• notificationsErrorIcon.foreground#EA4A5A
• notificationsInfoIcon.foreground#79B8FF
• notificationsWarningIcon.foreground#FFAB70
• panel.background#FFF
• panel.border#60A0D6
• panelInput.border#60A0D6
• panelTitle.activeBorder#60a0d6
• panelTitle.activeForeground#49506D
• panelTitle.inactiveForeground#7299AA
• peekView.border#60A0D6
• peekViewEditor.background#FEFDFB
• peekViewEditor.matchHighlightBackground#60A0D640
• peekViewEditorGutter.background#FEFDFB
• peekViewResult.background#DEEBF3
• peekViewResult.fileForeground#484F6C
• peekViewResult.lineForeground#6C84B0
• peekViewResult.matchHighlightBackground#60A0D640
• peekViewResult.selectionBackground#60A0D625
• peekViewResult.selectionForeground#484F6C
• peekViewTitle.background#DEEBF3
• peekViewTitleDescription.foreground#6C84B0
• peekViewTitleLabel.foreground#3993B5
• pickerGroup.border#60A0D6
• pickerGroup.foreground#484F6C
• progressBar.background#BFDFF3
• quickInput.background#FEFDFB
• quickInput.foreground#484F6C
• quickInputList.focusBackground#E1EEF6
• quickInputTitle.background#FEFDFB
• sash.hoverBorder#60A0D6
• scrollbar.shadow#DDD
• scrollbarSlider.activeBackground#ACDFF2DF
• scrollbarSlider.background#ACDFF280
• scrollbarSlider.hoverBackground#ACDFF2CA
• selection.background#BFDFF380
• settings.checkboxBackground#FEFDFB
• settings.dropdownBackground#FEFDFB
• settings.focusedRowBackground#60A0D610
• settings.headerForeground#B2CEE0
• settings.modifiedItemIndicator#DC975A
• settings.numberInputBackground#FEFDFB
• settings.textInputBackground#FEFDFB
• sideBar.background#DEEBF3
• sideBar.border#60A0D6
• sideBar.dropBackground#60A0D620
• sideBar.foreground#8695A8
• sideBarSectionHeader.background#91BEDF
• sideBarSectionHeader.border#60A0D6
• sideBarSectionHeader.foreground#484F6C
• sideBarTitle.foreground#484F6C
• statusBar.background#78ABD6
• statusBar.border#60A0D6
• statusBar.debuggingBackground#75715E
• statusBar.debuggingForeground#FFF
• statusBar.foreground#ECE8E7
• statusBar.noFolderBackground#78ABD6
• statusBarItem.activeBackground#60A0D630
• statusBarItem.hoverBackground#00000010
• statusBarItem.prominentBackground#60A0D6
• statusBarItem.remoteBackground#3993B5
• statusBarItem.remoteForeground#FEFDFB
• tab.activeBackground#EEF3F7
• tab.activeBorder#EEF3F7
• tab.activeBorderTop#F3F9FD
• tab.activeForeground#484F6C
• tab.activeModifiedBorder#3993B5
• tab.border#60A0D6
• tab.hoverBackground#D8E9F7
• tab.hoverForeground#484F6C
• tab.inactiveBackground#E7ECF0
• tab.inactiveForeground#6C84B0
• tab.inactiveModifiedBorder#959DA5
• tab.unfocusedActiveBackground#EEF3F7
• tab.unfocusedActiveBorder#78ABD6
• tab.unfocusedActiveBorderTop#60A0D6
• tab.unfocusedActiveForeground#8695A8
• tab.unfocusedHoverBackground#78ABD6
• 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#D1D5DA
• terminal.ansiBrightYellow#B08800
• terminal.ansiCyan#1B7C83
• terminal.ansiGreen#28A745
• terminal.ansiMagenta#5A32A3
• terminal.ansiRed#D73A49
• terminal.ansiWhite#6A737D
• terminal.ansiYellow#DBAB09
• terminal.background#FFF
• terminal.foreground#586069
• terminal.tab.activeBorder#F9826C
• terminalCursor.background#D1D5DA
• terminalCursor.foreground#005CC5
• textBlockQuote.background#FAFBFC
• textBlockQuote.border#78ABD6
• textCodeBlock.background#B2CEE0
• textLink.activeForeground#3993B5
• textLink.foreground#6C84B0
• textPreformat.foreground#8695A8
• textSeparator.foreground#586069
• titleBar.activeBackground#60A0D6
• titleBar.activeForeground#FFFEFC
• titleBar.border#78ABD6
• titleBar.inactiveBackground#78ABD6
• titleBar.inactiveForeground#E9E9E9
• tree.indentGuidesStroke#B2CEE0
• tree.tableColumnsBorder#B2CEE0
• welcomePage.buttonBackground#F6F8FA
• welcomePage.buttonHoverBackground#E59B60
• widget.shadow#00000020
• window.activeBorder#60A0D6
• window.inactiveBorder#21B2D5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

Shiki preview

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

Loading...