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 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#000000
--wcm-background-colorBackground color 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-radiusBorder 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 buttons8px
--wcm-secondary-button-border-radiusBorder radius applied to secondary buttons inside modal views8px
--wcm-icon-button-border-radiusBorder radius applied to icon-only buttons50%
--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 notifications, and labels)0.75rem
--wcm-text-small-regular-weightFont weight of small-regular text variantnormal
--wcm-text-small-regular-line-heightLine height of small-regular text variant14px
--wcm-text-small-regular-letter-spacingLetter spacing of small-regular text variant1px
--wcm-text-small-regular-text-transformText transform of small-regular text variantcapitalize
--wcm-text-small-regular-font-familyFont family of small-regular text variantHelvetica, sans-serif
--wcm-text-small-thin-sizeFont size of small-thin text variant (input placeholder, help text)0.65rem
--wcm-text-small-thin-weightFont weight of small-thin text variantlighter
--wcm-text-small-thin-line-heightLine height of small-thin text variant0.8rem
--wcm-text-small-thin-letter-spacingLetter spacing of small