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​
<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​
<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?