Skip to main content

Theming

note

The following theme configuration is only available for Web and React Native.

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 modal = new WalletConnectModal({
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 modal = new WalletConnectModal({
themeVariables: {
'--wcm-font-family': 'Roboto, sans-serif',
'--wcm-accent-color': '#F5841F'
}
})

List of theme variables​

General style variables​

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

Text style variables​

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

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