Skip to main content

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​

VariableDescriptionExample
--w3m-font-familyBase font familyRoboto, sans-serif
--w3m-font-feature-settingsBase font features settingstnum
--w3m-overlay-background-colorModal overlay background colorrgba(0, 0, 0, 0.3)
--w3m-overlay-backdrop-filterModal overlay backdrop filterblur(5px)
--w3m-z-indexZ-index position10
--w3m-accent-colorColor used for buttons, icons, labels, etc.#FFFFFF
--w3m-accent-fill-colorColor used for text and icons inside elements with accent color background#000000
--w3m-background-colorBackground color to be used instead of default animated gradient#CECECE
--w3m-background-image-urlBackground image URL to be used instead of default animated gradienthttps://...
--w3m-logo-image-urlImage URL to be used instead of WalletConnect logohttps://...
--w3m-background-border-radiusBorder radius applied to the modal background12px
--w3m-container-border-radiusBorder radius applied to main modal content area24px
--w3m-wallet-icon-border-radiusBorder radius applied to wallet icons2em
--w3m-wallet-icon-large-border-radiusBorder radius applied to large wallet icons3em
--w3m-wallet-icon-small-border-radius Border radius applied to small wallet icons1em
--w3m-input-border-radiusBorder radius applied to text inputs50%
--w3m-notification-border-radiusBorder radius applied to toast notification2rem
--w3m-button-border-radiusBorder radius applied to primary buttons like 'Connect' or 'Account'8px
--w3m-secondary-button-border-radiusBorder radius applied to secondary buttons, ones inside modal views8px
--w3m-icon-button-border-radiusBorder radius applied to icon only buttons like 'Copy' or 'Disconnect'50%
--w3m-button-hover-highlight-border-radiusBorder radius applied to hover highlight on wallet or chain buttons2rem

Text style variables​

Granular text style variables for when --w3m-font-family is not enough.

VariableDescriptionExample
--w3m-text-big-bold-sizeFont size of big-bold text variant (modal and page titles)2rem
--w3m-text-big-bold-weightFont weight of big-bold text variant (modal and page titles)bold
--w3m-text-big-bold-line-heightLine height of big-bold text variant (modal and page titles)14px
--w3m-text-big-bold-letter-spacingLetter spacing of big-bold text variant (modal and page titles)1px
--w3m-text-big-bold-text-transformText transform of big-bold text variant (modal and page titles)uppercase
--w3m-text-big-bold-font-familyFont family of big-bold text variant (modal and page titles)Helvetica, sans-serif
--w3m-text-medium-regular-sizeFont size of medium-regular text variant (button and data labels)1rem
--w3m-text-medium-regular-weightFont weight of medium-regular text variant (button and data labels)normal
--w3m-text-medium-regular-line-heightLine height of medium-regular text variant (button and data labels)14px
--w3m-text-medium-regular-letter-spacingLetter spacing of medium-regular text variant (button and data labels)1px
--w3m-text-medium-regular-text-transformText transform of medium-regular text variant (button and data labels)capitalize
--w3m-text-medium-regular-font-familyFont family of medium-regular text variant (button and data labels)Arial, sans-serif
--w3m-text-small-regular-sizeFont size of small-regular text variant (secondary buttons, toast notification and labels)0.75rem
--w3m-text-small-regular-weightFont weight of small-regular text variant (secondary buttons, toast notification and labels)normal
--w3m-text-small-regular-line-heightLine height of small-regular text variant (secondary buttons, toast notification and labels)14px
--w3m-text-small-regular-letter-spacingLetter spacing of small-regular text variant (secondary buttons, toast notification and labels)1px
--w3m-text-small-regular-text-transformText transform of small-regular text variant (secondary buttons, toast notification and labels)capitalize
--w3m-text-small-regular-font-familyFont family of small-regular text variant (secondary buttons, toast notification and labels)Helvetica, sans-serif
--w3m-text-small-thin-sizeFont size of small-thin text variant (input placeholder and help text)0.65rem
--w3m-text-small-thin-weightFont weight of small-thin text variant (input placeholder and help text)lighter
--w3m-text-small-thin-line-heightLine height of small-thin text variant (input placeholder and help text)0.8rem
--w3m-text-small-thin-letter-spacingLetter spacing of small-thin text variant (input placeholder and help text)0.01em
--w3m-text-small-thin-text-transformText transform of small-thin text variant (input placeholder and help text)none
--w3m-text-small-thin-font-familyFont family of small-thin text variant (input placeholder and help text)Arial, sans-serif
--w3m-text-xsmall-bold-sizeFont size of xsmall-bold text variant (sub-labels)0.5rem
--w3m-text-xsmall-bold-weightFont weight of xsmall-bold text variant (sub-labels)bold
--w3m-text-xsmall-bold-line-heightLine height of xsmall-bold text variant (sub-labels)10px
--w3m-text-xsmall-bold-letter-spacingLetter spacing of xsmall-bold text variant (sub-labels)-0.03em
--w3m-text-xsmall-bold-text-transformText transform of xsmall-bold text variant (sub-labels)uppercase
--w3m-text-xsmall-bold-font-familyFont family of xsmall-bold text variant (sub-labels)Arial, sans-serif
--w3m-text-xsmall-regular-sizeFont size of xsmall-regular text variant (wallet and network button labels)0.5rem
--w3m-text-xsmall-regular-weightFont weight of xsmall-regular text variant (wallet and network button labels)normal
--w3m-text-xsmall-regular-line-heightLine height of xsmall-regular text variant (wallet and network button labels)10px
--w3m-text-xsmall-regular-letter-spacingLetter spacing of xsmall-regular text variant (wallet and network button labels)0.1em
--w3m-text-xsmall-regular-text-transformText transform of xsmall-regular text variant (wallet and network button labels)none
--w3m-text-xsmall-regular-font-familyFont family of xsmall-regular text variant (wallet and network button labels)Helvetica, sans-serif