The following theme configuration is only available for Web and React Native .
Web React Native Android Flutter 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 Variable Description Example --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 #000000--wcm-background-colorBackground color 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-radiusBorder 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 8px--wcm-secondary-button-border-radiusBorder radius applied to secondary buttons inside modal views 8px--wcm-icon-button-border-radiusBorder radius applied to icon-only buttons 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. Variable Description Example --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 variant normal--wcm-text-small-regular-line-heightLine height of small-regular text variant 14px--wcm-text-small-regular-letter-spacingLetter spacing of small-regular text variant 1px--wcm-text-small-regular-text-transformText transform of small-regular text variant capitalize--wcm-text-small-regular-font-familyFont family of small-regular text variant Helvetica, 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 variant lighter--wcm-text-small-thin-line-heightLine height of small-thin text variant 0.8rem--wcm-text-small-thin-letter-spacingLetter spacing of small
