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

AppKit'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 family
Roboto, sans-serif
--wcm-font-feature-settingsBase font features settings
tnum
--wcm-overlay-background-colorModal overlay background color
rgba(0, 0, 0, 0.3)
--wcm-overlay-backdrop-filterModal overlay backdrop filter
blur(5px)
--wcm-z-indexZ-index position
10
--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 background
12px
--wcm-container-border-radiusBorder radius applied to main modal content area
24px
--wcm-wallet-icon-border-radiusBorder radius applied to wallet icons
2em
--wcm-wallet-icon-large-border-radiusBorder radius applied to large wallet icons
3em
--wcm-wallet-icon-small-border-radius Border radius applied to small wallet icons
1em
--wcm-input-border-radiusBorder radius applied to text inputs
50%
--wcm-notification-border-radiusBorder radius applied to toast notification
2rem
--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 views
8px
--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 buttons
2rem

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