Add dynamic backgrounds

[nordwestt]

Add Dynamic Background

Summary

This PR introduces a dynamic backgrounds to Page Assist (via SVG), enabling users to switch between four distinct backgrounds: plain, Blurry Gradient, Layered Waves and Blob Scene. The backgrounds dynamically update their colors based on the user's current color theme and selection persists across refreshes using the recently created useTheme hook and zustand store. A new dropdown has been added to the settings, enabling users to switch between the backgrounds, and the plain background has been set as the default in order not to disturb any existing user's experience. Lastly, the bottom chat input component has been made translucent with a "frosted glass" effect in order to showcase the underlying backround.

Changes

• Installed tinyColor in order to dynamically generate appropriate color palettes for the backgrounds based on the color theme.
• Added a background selector component, BackgroundSwitcher, allowing users to choose between four backgrounds.
• Implemented a persistent theme state using zustand and localStorage.
• Created "frosted glass" effect on bottom chat input, making it slightly translucent (see samples below)

Motivation

This further improves the "themeability" of the UI, with the background being dynamically colored based on the current theme which makes it forward-compatible with new color themes. Additionally it enhances user experience by allowing for different backgrounds, providing a "fresh" look for the chat interface.

Compliance

• Code is properly formatted and commented where necessary.
• Changes are isolated to a feature branch (add_dynamic_backgrounds).
• No breaking changes; existing functionality remains intact.
• Follows best practices for React and TypeScript.

Testing

• Manually verified background switching and persistence.
• Confirmed that all backgrounds work flawlessly with existing color themes, both in light and dark mode.

Samples

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@​ctrl/​tinycolor@​4.2.0

View full report