Is there a way to customise the styling of a Web3Modal in @web3modal/wagmi package?

Question

I am currently working on integrating Web3Modal into my web application using the @web3modal/wagmi package. While the integration itself has been successful, I'm facing difficulties customizing the styling of the Web3Modal modals to fit the design requirements of my application.

I have explored the documentation for @web3modal/wagmi package (https://docs.walletconnect.com/web3modal/nextjs/about) but haven't found clear instructions on how to customise the styling. Additionally, I've tried custom css in my global.css file, but haven't been able to get the desired UI.

I thought that by following the documentation and applying CSS overrides, I would be able to successfully customise the styling of the Web3Modal modals.

However, despite my efforts, I have been unable to get the desired styling. The modals still remain with the same default styling, and my CSS is not visible on browser.

Could someone please provide guidance or examples on how to customise the styling of Web3Modal modals using the @web3modal/wagmi package?

Answer 1

https://docs.walletconnect.com/web3modal/v2/javascript/wagmi/theming

themeVariables

Web3Modal's theming is done via css variables. You can override any of them to match your dapp's design via themeVariables option.

Example

const web3Modal = new Web3Modal({
  themeVariables: {{
    '--w3m-font-family': 'Roboto, sans-serif',
    '--w3m-accent-color': '#F5841F'
  }}
})