Theming

note

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

Web
Android
Flutter
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

Variable	Description	Example
`--wcm-font-family`	Base font family	`Roboto, sans-serif`
`--wcm-font-feature-settings`	Base font features settings	`tnum`
`--wcm-overlay-background-color`	Modal overlay background color	`rgba(0, 0, 0, 0.3)`
`--wcm-overlay-backdrop-filter`	Modal overlay backdrop filter	`blur(5px)`
`--wcm-z-index`	Z-index position	`10`
`--wcm-accent-color`	Color used for buttons, icons, labels, etc.	`#FFFFFF`
`--wcm-accent-fill-color`	Color used for text and icons inside elements with accent color background	`#000000`
`--wcm-background-color`	Background color to be used instead of default animated gradient	`#CECECE`
`--wcm-background-border-radius`	Border radius applied to the modal background	`12px`
`--wcm-container-border-radius`	Border radius applied to main modal content area	`24px`
`--wcm-wallet-icon-border-radius`	Border radius applied to wallet icons	`2em`
`--wcm-wallet-icon-large-border-radius`	Border radius applied to large wallet icons	`3em`
`--wcm-wallet-icon-small-border-radius`	Border radius applied to small wallet icons	`1em`
`--wcm-input-border-radius`	Border radius applied to text inputs	`50%`
`--wcm-notification-border-radius`	Border radius applied to toast notification	`2rem`
`--wcm-button-border-radius`	Border radius applied to primary buttons like 'Connect' or 'Account'	`8px`
`--wcm-secondary-button-border-radius`	Border radius applied to secondary buttons, ones inside modal views	`8px`
`--wcm-icon-button-border-radius`	Border radius applied to icon only buttons like 'Copy' or 'Disconnect'	`50%`
`--wcm-button-hover-highlight-border-radius`	Border 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-size`	Font size of big-bold text variant (modal and page titles)	`2rem`
`--wcm-text-big-bold-weight`	Font weight of big-bold text variant (modal and page titles)	`bold`
`--wcm-text-big-bold-line-height`	Line height of big-bold text variant (modal and page titles)	`14px`
`--wcm-text-big-bold-letter-spacing`	Letter spacing of big-bold text variant (modal and page titles)	`1px`
`--wcm-text-big-bold-text-transform`	Text transform of big-bold text variant (modal and page titles)	`uppercase`
`--wcm-text-big-bold-font-family`	Font family of big-bold text variant (modal and page titles)	`Helvetica, sans-serif`
`--wcm-text-medium-regular-size`	Font size of medium-regular text variant (button and data labels)	`1rem`
`--wcm-text-medium-regular-weight`	Font weight of medium-regular text variant (button and data labels)	`normal`
`--wcm-text-medium-regular-line-height`	Line height of medium-regular text variant (button and data labels)	`14px`
`--wcm-text-medium-regular-letter-spacing`	Letter spacing of medium-regular text variant (button and data labels)	`1px`
`--wcm-text-medium-regular-text-transform`	Text transform of medium-regular text variant (button and data labels)	`capitalize`
`--wcm-text-medium-regular-font-family`	Font family of medium-regular text variant (button and data labels)	`Arial, sans-serif`
`--wcm-text-small-regular-size`	Font size of small-regular text variant (secondary buttons, toast notification and labels)	`0.75rem`
`--wcm-text-small-regular-weight`	Font weight of small-regular text variant (secondary buttons, toast notification and labels)	`normal`
`--wcm-text-small-regular-line-height`	Line height of small-regular text variant (secondary buttons, toast notification and labels)	`14px`
`--wcm-text-small-regular-letter-spacing`	Letter spacing of small-regular text variant (secondary buttons, toast notification and labels)	`1px`
`--wcm-text-small-regular-text-transform`	Text transform of small-regular text variant (secondary buttons, toast notification and labels)	`capitalize`
`--wcm-text-small-regular-font-family`	Font family of small-regular text variant (secondary buttons, toast notification and labels)	`Helvetica, sans-serif`
`--wcm-text-small-thin-size`	Font size of small-thin text variant (input placeholder and help text)	`0.65rem`
`--wcm-text-small-thin-weight`	Font weight of small-thin text variant (input placeholder and help text)	`lighter`
`--wcm-text-small-thin-line-height`	Line height of small-thin text variant (input placeholder and help text)	`0.8rem`
`--wcm-text-small-thin-letter-spacing`	Letter spacing of small-thin text variant (input placeholder and help text)	`0.01em`
`--wcm-text-small-thin-text-transform`	Text transform of small-thin text variant (input placeholder and help text)	`none`
`--wcm-text-small-thin-font-family`	Font family of small-thin text variant (input placeholder and help text)	`Arial, sans-serif`
`--wcm-text-xsmall-bold-size`	Font size of xsmall-bold text variant (sub-labels)	`0.5rem`
`--wcm-text-xsmall-bold-weight`	Font weight of xsmall-bold text variant (sub-labels)	`bold`
`--wcm-text-xsmall-bold-line-height`	Line height of xsmall-bold text variant (sub-labels)	`10px`
`--wcm-text-xsmall-bold-letter-spacing`	Letter spacing of xsmall-bold text variant (sub-labels)	`-0.03em`
`--wcm-text-xsmall-bold-text-transform`	Text transform of xsmall-bold text variant (sub-labels)	`uppercase`
`--wcm-text-xsmall-bold-font-family`	Font family of xsmall-bold text variant (sub-labels)	`Arial, sans-serif`
`--wcm-text-xsmall-regular-size`	Font size of xsmall-regular text variant (wallet and network button labels)	`0.5rem`
`--wcm-text-xsmall-regular-weight`	Font weight of xsmall-regular text variant (wallet and network button labels)	`normal`
`--wcm-text-xsmall-regular-line-height`	Line height of xsmall-regular text variant (wallet and network button labels)	`10px`
`--wcm-text-xsmall-regular-letter-spacing`	Letter spacing of xsmall-regular text variant (wallet and network button labels)	`0.1em`
`--wcm-text-xsmall-regular-text-transform`	Text transform of xsmall-regular text variant (wallet and network button labels)	`none`
`--wcm-text-xsmall-regular-font-family`	Font family of xsmall-regular text variant (wallet and network button labels)	`Helvetica, sans-serif`

themeMode (optional)

Puts WalletConnectModal into dark or light mode. Defaults to user's system preference.

themeMode: 'dark' | 'light'

accentColor (optional)

Allows to override Modal's accent color. Defaults to undefined.

<WalletConnectModal
  ...
  accentColor="#9090FF"
/>

WalletConnectModal Theme

Allows to override Modal's accent color.

Compose

Wrap your composables in WalletConnectModalTheme.

WalletConnectModalTheme(
    accentColor = Color(0xFF3496ff),
    onAccentColor = Color.White
) {
    ModalBottomSheetLayout() {  }
}

Android View

You can override the default Modal's accent color by creating a WalletConnectModalTheme.

<style name="WalletConnectModalTheme">
    <item name="accentColor">#FF47A1FF</item>
    <item name="onAccentColor">#FFFFFFFF</item>
</style>

To theme the WalletConnectModal you must wrap your MaterialApp with a WalletConnectModalTheme widget.

return WalletConnectModalTheme(
  data: WalletConnectModalThemeData.darkMode,
  child: MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      useMaterial3: true,
    ),
    home: const MyHomePage(title: 'WalletConnectModal Sign Example'),
  ),
);

If you don't wrap your MaterialApp with a WalletConnectModalTheme widget, the WalletConnectModal will use the default light theme.

You can build your own theme by creating a WalletConnectModalThemeData object.

Here is how the dark mode theme is built:

// Dark Mode Theme
WalletConnectModalThemeData(
  primary100: Color(0xFF47A1FF),
  primary090: Color(0xFF59AAFF),
  primary080: Color(0xFF6CB4FF),
  overlay002: Color.fromARGB(5, 255, 255, 255),
  overlay005: Color.fromARGB(13, 255, 255, 255),
  overlay010: Color.fromARGB(26, 255, 255, 255),
  overlay020: Color.fromARGB(51, 255, 255, 255),
  overlay030: Color.fromARGB(77, 255, 255, 255),
  foreground100: Color(0xFFE4E7E7),
  foreground200: Color(0xFF949E9E),
  foreground275: Color(0xFF788181),
  foreground300: Color(0xFF6E7777),
  background100: Color(0xFF141414),
  background200: Color(0xFF272A2A),
  background300: Color(0xFF3B4040),
  inverse000: Color(0xFF000000),
  inverse100: Color(0xFFFFFFFF),
  error: Color(0xFFF25A67),
  success: Color(0xFF26D962),
  fontFamily: 'roboto',
  radius4XS: 6.0,
  radius3XS: 8.0,
  radius2XS: 12.0,
  radiusXS: 16.0,
  radiusS: 20.0,
  radiusM: 28.0,
  radiusL: 36.0,
  radius3XL: 80.0,
);

Theming

themeMode​

Example​

themeVariables​

Example​

List of theme variables​

General style variables​

Text style variables​

themeMode (optional)​

accentColor (optional)​

WalletConnectModal Theme​

Compose​

Android View​

themeMode

Example

themeVariables

Example

List of theme variables

General style variables

Text style variables

themeMode (optional)

accentColor (optional)

WalletConnectModal Theme

Compose

Android View