Open hccullen opened 1 month ago
Good PR, need to think on a bit more from my side, will try to find some time this week.
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.
Summary
This PR introduces the ability to customize the appearance of key elements within the install dialogs (
install-dialog
) and buttons (button
) using thepart
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:
Customizable Dialogs and Buttons:
install-dialog
andbutton
components now support thepart
attribute, enabling custom styling through CSS.Modifiers:
apple
,chrome
,mobile
, anddesktop
can be applied to bothinstall-dialog
andbutton
.primary
,secondary
, andicon
, allowing further customization based on button type.Example Usage:
Developers can now easily target and style elements using the
::part()
CSS selector: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: