Improve theming

[pociej]

What problem does this new feature solve?

Currently theming provides really limited palette of options.
Most important points

• Color mix. If you want color to match main colour in your webpage then you have to something close to 100% which make UI completly unsuable. With '--w3m-colo-mix' : 100 no text is visible.
• '--w3m-accent' documentation is unclear here 'color used for buttons, icons, labels, etc.'From this description it is not possible to predict what exactly will be touched. For testing purpose I used following config

createWeb3Modal({
  wagmiConfig,
  projectId,
  chains,
  themeMode: 'light',
  themeVariables: {
    '--w3m-accent': 'red',
  },
})

Here are screen shots


Only red I see is in network switch view, really inconsistent way.

Describe the solution you'd like

I see two possible approaches here.

1. Follow something like presentational/container pattern. From the library level provide components responsible for logic and give user api to register presentational components. This is advanced and hard to use, so for sure shouldnt be default behaviour. However its best option for advanced users.

2. Extend list of properties like '--w3m-background-color', '--w3m-button-color', '--w3m-font-size' etc. This could exists in parallel with 1.

Would you be open to accept PR?

[dirtycajunrice]

Additional details:

• you can only set a master font size which is scaled crazy in different places. 16px master font makes the buttons 22px font
• You cannot set individual
  • border color
  • background image
  • background color
  • border thickness
  • border radius
• and anything other than a native font will not load whatsoever in frameworks like Nextjs because yall are using nested shadowroot from hell and css/font styles do not propagate to those shadow documents.

[luismmdev]

Is the ThemeVariables interface up to date? I'm seeing different options in the docs vs the types.

types vs docs

[glitch-txs]

hey @luismmdev those docs are for v2 you might want to check here instead https://docs.walletconnect.com/web3modal/javascript/theming

[luismmdev]

hey @luismmdev those docs are for v2 you might want to check here instead https://docs.walletconnect.com/web3modal/javascript/theming

Ops, my bad, you're right, thanks!

[pociej]

@glitch-txs I fixed this hacking into shadow-dom css. However I would b e open to create PR here, as long as you are open to merge such a PR. What do you think?

[KorbinianK]

@glitch-txs
I feel like the most obvious thing that is missing is simply adjusting the button size. The "disconnected" Button has two pre-configured options md and sm, with plenty of others prepared but specifically excluded.

But the connected state is fixed, no option to change the height whatsoever.

I get you want to limit certain things but I feel like using shadow parts, this could be added rather easily without having to pass specific classes through the entire codebase? That way dapps could theme certain parts more easily.

Resources:

• https://www.w3.org/TR/css-shadow-parts-1/
• https://css-tricks.com/styling-in-the-shadow-dom-with-css-shadow-parts/

[motikolorado]

We should be able to build a fully customized modals with:

button-bg, modal-bg, email-input-bg, modal-title, modal-padding

Since you're making the UX, allow us tweak it to fit our brand.