Theming
caution
This documentation is for Web3Modal v2. You can find Web3Modal v3 docs here
themeMode
By default themeMode option will be set to user system settings i.e. 'light' or 'dark',
however you can easily override it to match design of your dapp.
Example
const web3Modal = new Web3Modal({
themeMode: 'dark'
})
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'
}}
})
List of theme variables
General style variables
| Variable | Description | Example |
|---|---|---|
--w3m-font-family | Base font family | Roboto, sans-serif |
--w3m-font-feature-settings | Base font features settings | tnum |
--w3m-overlay-background-color | Modal overlay background color | rgba(0, 0, 0, 0.3) |
--w3m-overlay-backdrop-filter | Modal overlay backdrop filter | blur(5px) |
--w3m-z-index | Z-index position | 10 |
--w3m-accent-color | Color used for buttons, icons, labels, etc. | #FFFFFF |
--w3m-accent-fill-color | Color used for text and icons inside elements with accent color background | #000000 |
--w3m-background-color | Background color to be used instead of default animated gradient | #CECECE |
--w3m-background-image-url | Background image URL to be used instead of default animated gradient | https://... |
--w3m-logo-image-url | Image URL to be used instead of WalletConnect logo | https://... |
--w3m-background-border-radius | Border radius applied to the modal background | 12px |
--w3m-container-border-radius | Border radius applied to main modal content area | 24px |
--w3m-wallet-icon-border-radius | Border radius applied to wallet icons | 2em |
--w3m-wallet-icon-large-border-radius | Border radius applied to large wallet icons | 3em |
--w3m-wallet-icon-small-border-radius | Border radius applied to small wallet icons | 1em |
--w3m-input-border-radius | Border radius applied to text inputs | 50% |
--w3m-notification-border-radius | Border radius applied to toast notification | 2rem |
--w3m-button-border-radius | Border radius applied to primary buttons like 'Connect' or 'Account' | 8px |
--w3m-secondary-button-border-radius | Border radius applied to secondary buttons, ones inside modal views | 8px |
--w3m-icon-button-border-radius | Border radius applied to icon only buttons like 'Copy' or 'Disconnect' | 50% |
--w3m-button-hover-highlight-border-radius | Border radius applied to hover highlight on wallet or chain buttons | 2rem |
Text style variables
Granular text style variables for when --w3m-font-family is not enough.
| Variable | Description | Example |
|---|---|---|
--w3m-text-big-bold-size | Font size of big-bold text variant (modal and page titles) | 2rem |
--w3m-text-big-bold-weight | Font weight of big-bold text variant (modal and page titles) | bold |
--w3m-text-big-bold-line-height | Line height of big-bold text variant (modal and page titles) | 14px |
--w3m-text-big-bold-letter-spacing | Letter spacing of big-bold text variant (modal and page titles) | 1px |
--w3m-text-big-bold-text-transform | Text transform of big-bold text variant (modal and page titles) | uppercase |
--w3m-text-big-bold-font-family | Font family of big-bold text variant (modal and page titles) | Helvetica, sans-serif |
--w3m-text-medium-regular-size | Font size of medium-regular text variant (button and data labels) | 1rem |
--w3m-text-medium-regular-weight | Font weight of medium-regular text variant (button and data labels) | normal |
--w3m-text-medium-regular-line-height | Line height of medium-regular text variant (button and data labels) | 14px |
--w3m-text-medium-regular-letter-spacing | Letter spacing of medium-regular text variant (button and data labels) | 1px |
--w3m-text-medium-regular-text-transform | Text transform of medium-regular text variant (button and data labels) | capitalize |
--w3m-text-medium-regular-font-family | Font family of medium-regular text variant (button and data labels) | Arial, sans-serif |
--w3m-text-small-regular-size | Font size of small-regular text variant (secondary buttons, toast notification and labels) | 0.75rem |
--w3m-text-small-regular-weight | Font weight of small-regular text variant (secondary buttons, toast notification and labels) | normal |
--w3m-text-small-regular-line-height | Line height of small-regular text variant (secondary buttons, toast notification and labels) | 14px |
--w3m-text-small-regular-letter-spacing | Letter spacing of small-regular text variant (secondary buttons, toast notification and labels) | 1px |
--w3m-text-small-regular-text-transform | Text transform of small-regular text variant (secondary buttons, toast notification and labels) | capitalize |
--w3m-text-small-regular-font-family | Font family of small-regular text variant (secondary buttons, toast notification and labels) | Helvetica, sans-serif |
--w3m-text-small-thin-size | Font size of small-thin text variant (input placeholder and help text) | 0.65rem |
--w3m-text-small-thin-weight | Font weight of small-thin text variant (input placeholder and help text) | lighter |
--w3m-text-small-thin-line-height | Line height of small-thin text variant (input placeholder and help text) | 0.8rem |
--w3m-text-small-thin-letter-spacing | Letter spacing of small-thin text variant (input placeholder and help text) | 0.01em |
--w3m-text-small-thin-text-transform | Text transform of small-thin text variant (input placeholder and help text) | none |
--w3m-text-small-thin-font-family | Font family of small-thin text variant (input placeholder and help text) | Arial, sans-serif |
--w3m-text-xsmall-bold-size | Font size of xsmall-bold text variant (sub-labels) | 0.5rem |
--w3m-text-xsmall-bold-weight | Font weight of xsmall-bold text variant (sub-labels) | bold |
--w3m-text-xsmall-bold-line-height | Line height of xsmall-bold text variant (sub-labels) | 10px |
--w3m-text-xsmall-bold-letter-spacing | Letter spacing of xsmall-bold text variant (sub-labels) | -0.03em |
--w3m-text-xsmall-bold-text-transform | Text transform of xsmall-bold text variant (sub-labels) | uppercase |
--w3m-text-xsmall-bold-font-family | Font family of xsmall-bold text variant (sub-labels) | Arial, sans-serif |
--w3m-text-xsmall-regular-size | Font size of xsmall-regular text variant (wallet and network button labels) | 0.5rem |
--w3m-text-xsmall-regular-weight | Font weight of xsmall-regular text variant (wallet and network button labels) | normal |
--w3m-text-xsmall-regular-line-height | Line height of xsmall-regular text variant (wallet and network button labels) | 10px |
--w3m-text-xsmall-regular-letter-spacing | Letter spacing of xsmall-regular text variant (wallet and network button labels) | 0.1em |
--w3m-text-xsmall-regular-text-transform | Text transform of xsmall-regular text variant (wallet and network button labels) | none |
--w3m-text-xsmall-regular-font-family | Font family of xsmall-regular text variant (wallet and network button labels) | Helvetica, sans-serif |
Was this helpful?