khmyznikov / pwa-install

Installation dialog for Progressive Web Application. Provides a more convenient user experience and fixes the lack of native dialogs in some browsers.
https://www.khmyznikov.com/pwa-install
MIT License
379 stars 61 forks source link

Feat: Add Support for Styling Customization via `part` Attribute #100

Open hccullen opened 1 month ago

hccullen commented 1 month ago

Summary

This PR introduces the ability to customize the appearance of key elements within the install dialogs (install-dialog) and buttons (button) using the part attribute. This allows developers to style specific parts of the dialogs and buttons without altering the underlying template code.

Note, I have intentionally limited styling to only specific elements. Based on the issues linked, most people only really want to customise some basic colours/shadows etc. More extensive styling ultimately defeats the point of this library, which is intended to feel native.

Key Features:

Example Usage:

Developers can now easily target and style elements using the ::part() CSS selector:

pwa-install::part(install-dialog apple mobile) {
    background-color: #f8f9fa;
}

pwa-install::part(button primary) {
    background-color: #007bff;
    color: white;
}

Impact:

This feature gives developers greater flexibility in adapting the look and feel of install dialogs across different platforms (Apple, Chrome) and device types (mobile, desktop) while maintaining component integrity.

Resolves:

khmyznikov commented 1 month ago

Good PR, need to think on a bit more from my side, will try to find some time this week.

hccullen commented 1 month ago

Yeah, agreed. Tried a few different approaches here, including exposing the CSS variables for colours etc. or just supporting a single theme-color like this: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color

Ultimately, I'll let you decide if it's in line with the vision for the lib though.

One thought in favour of some greater customisation though is that this package has currently hard-coded some colours (presumably you've based off Chrome + Safari). Different browsers have (or at least can have) different accent colors. https://developer.mozilla.org/en-US/docs/Web/CSS/system-color#highlight

But that would be a different approach than this one.