Theming

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-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	`#000000`
`--wcm-background-color`	Background color 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	`8px`
`--wcm-secondary-button-border-radius`	Border radius applied to secondary buttons inside modal views	`8px`
`--wcm-icon-button-border-radius`	Border radius applied to icon-only buttons	`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 notifications, and labels)	`0.75rem`
`--wcm-text-small-regular-weight`	Font weight of small-regular text variant	`normal`
`--wcm-text-small-regular-line-height`	Line height of small-regular text variant	`14px`
`--wcm-text-small-regular-letter-spacing`	Letter spacing of small-regular text variant	`1px`
`--wcm-text-small-regular-text-transform`	Text transform of small-regular text variant	`capitalize`
`--wcm-text-small-regular-font-family`	Font family of small-regular text variant	`Helvetica, sans-serif`
`--wcm-text-small-thin-size`	Font size of small-thin text variant (input placeholder, help text)	`0.65rem`
`--wcm-text-small-thin-weight`	Font weight of small-thin text variant	`lighter`
`--wcm-text-small-thin-line-height`	Line height of small-thin text variant	`0.8rem`
`--wcm-text-small-thin-letter-spacing`	Letter spacing of small

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,
);

Getting Started

Accounts & Authentication

Data

Payments

Settings

Networks

Technical Reference

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

themeMode

Example

themeVariables

Example

List of theme variables

General style variables

Text style variables

themeMode (optional)

accentColor (optional)

WalletConnectModal Theme

Compose

Android View