Support richer customization, fonts, and styles

[rbruels]

Is your request related to a problem?

No response

Feature Description

The style customizations provided in the documentation are limited, not well-documented, and don't always seem to match up with expected behavior.

A good example: The documentation specifies three different font customizations you can add to your own CSS:

--onboard-font-family-normal
--onboard-font-family-semibold
--onboard-font-family-light

But only --onboard-font-family-normal actually seems to be used — changing that font changes every font within the modals and Account Center.

Alternative Solutions

I imagine a world where users can actually provide a stylesheet of their own, rather than overriding only specifically whitelisted CSS properties.

At least, documenting the CSS properties and what they impact within web3-onboard would be a big win.

Anything else?

No response

[rbruels]

A bit of additional context -- customizability is pretty challenging now for a few reasons.

1. As I mentioned in the description, some elements are documented but not used (like --onboard-font-family-semibold).
2. Plus the property names do not indicate what we are customizing. For example, --onboard-font-size-3 is used for the sidebar's header, but --onboard-font-size-5 is used for the "subtitle" on the sidebar header, the header on the right side, and the buttons. But it's impossible to determine that without just changing font sizes and seeing what happens.
3. We're also just missing some customizability -- like what about the shape of the buttons or the modal itself?

A couple of different approaches I'd suggest:

Consolidate font styles
An iteration from today's implementation. Consolidate to a small standard set of font styles across the interface (both modal and Account Center). For example, maybe you could get down to:

• Header
• Subtitle
• Body
• Button
  then you can name customizable variables much more clearly:
• --onboard-font-size-header
• --onboard-font-size-subtitle
• --onboard-font-size-body
• --onboard-font-size-button
• etc

The downside of this is that you need to continue to maintain a lot of properties, because you'd need font-size, font-family, possibly font-weight, etc for each. But it would be much clearer (compare --onboard-font-size-3 to --onboard-font-size-header, for example) and more standardized.

Allow more dynamic styling
Even better would be to allow for developers to pass in their own complete customized style into the component. Maybe passed in during instantiation:

   onboard = Onboard({
      wallets: [injected, walletConnect, coinbase, ledger, trezor, gnosis],
     // scss
      styles: {
        #onboard {
            .header {
                font-family: 'Lato',
                background: #0f0,
                ...<snip>...
            }
            .modal {
                border-radius: 0,
                ...<snip>...
            }
        }
     },
    ...<snip>...

To be honest, other devs may have a better idea about how to implement this, but I hope the gist of it is clear.

The downside of this would be that you might lose consistency across all projects using Onboard (which may be a branding challenge). It's also likely a lot of refactoring work for your team. But it would allow developers to do what they need to make Onboard look totally harmonious with their apps, and would potentially limit the amount of maintenance/documentation you need for all the CSS variables you're currently using.

[L03TJ3]

I agree with the 'dynamic styling'. would seem more convenient, for maintenance reasons on adding variables for everything.
If you consider the fact that you also might want to change certain sections based on desktop/mobile (which I don't think is possible now?).

But if there is a proper reason to keep stuff as it is now implemented.
the main part that would be nice if changed is better separation of font variables.

Which @rbruels sums up quite nicely :)

[L03TJ3]

The section that I don't see mentioned yet, but would be nice if that was customizable.
Giving the option to choose a different logo for the connect button.

Now app logo is used for both top-left & button.

[gesquinca]

Thanks for raising! Closely watching this and developing a good solution. Please add any more info you think would be helpful. Also if there are implementation examples you like, that would be great too.

[eddielthomas]

How do I make the modal run in dark mode?

[Adamj1232]

@eddielthomas we currently do not have a native darkmode although one is in development by @gesquinca. We do have css variables extended to allow customizations of the view which you can find documentation on here. If there is anything in particular I can help with here please let me know!

[Adamj1232]

@L03TJ3 @rbruels we are working towards this! What do you mean by dynamically styling? This should be possible with current css variables but I want to make sure I am understanding the requests properly 🤓
Currently we support all of the custom styling variables here
Dynamic styling can be done through something like document.body.style.setProperty("--page-background-color", backgroundHexColor);

[beeb]

@eddielthomas we currently do not have a native darkmode although one is in development by @gesquinca. We do have css variables extended to allow customizations of the view which you can find documentation on here. If there is anything in particular I can help with here please let me know!

I just tried to achieve dark mode with CSS variable customization but it's just not going to happen, as some styles are hardcoded in the rendered HTML (inline styles), and some others in the CSS.

Hopefully we get a decent dark mode at some point! Can I follow @gesquinca 's progress somewhere?

[Adamj1232]

@beeb we have added a handful of further exposed CSS variables to achieve this last week. Please update to the latest Core (or React/Vue) package for those.
This theming tool may be helpful as well - https://onboard.blocknative.com/theming. We will further expand the mapping to include Account Center and Notify shortly.
If you have any styles that need to be further exposed please reach out here or open a feature request and we can get them to you quickly.
cc @gesquinca

[beeb]

Hi @Adamj1232 ,

I have updated and still I am struggling with some aspects, notably the fact that a lot of UI elements use specific colors through variables.

e.g. .connecting-container has a hardcoded color: var(--onboard-gray-600). What if I don't want this to be gray?
Using specific colors without another variable being exposed makes it really hard to get a fully consistent theme, because some elements might require me to override "--onboard-somecolor-somevalue" which would mess up other elements.

Another example: .onboard-button-primary has a hardcoded background: var(--onboard-white) which makes it impossible to theme in dark since overriding --onboard-white would result in a lot of other problems.