> ## Documentation Index
> Fetch the complete documentation index at: https://docs.reown.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Theming

<Info>
  The following theme configuration is only available for **Web** and **React Native**.
</Info>

<Tabs>
  <Tab title="Web">
    #### 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

    ```tsx theme={null}
    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

    ```tsx theme={null}
    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 | |
  </Tab>

  <Tab title="React Native">
    ## themeMode (optional)

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

    ```ts theme={null}
    themeMode: "dark" | "light";
    ```

    ## accentColor (optional)

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

    ```ts theme={null}
    <WalletConnectModal
      ...
      accentColor="#9090FF"
    />
    ```
  </Tab>

  <Tab title="Android">
    #### WalletConnectModal Theme

    Allows to override Modal's accent color.

    #### Compose

    Wrap your composables in `WalletConnectModalTheme`.

    ```kotlin theme={null}
    WalletConnectModalTheme(
        accentColor = Color(0xFF3496ff),
        onAccentColor = Color.White
    ) {
        ModalBottomSheetLayout() {  }
    }
    ```

    #### Android View

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

    ```xml theme={null}
    <style name="WalletConnectModalTheme">
        <item name="accentColor">#FF47A1FF</item>
        <item name="onAccentColor">#FFFFFFFF</item>
    </style>
    ```
  </Tab>

  <Tab title="Flutter">
    To theme the `WalletConnectModal` you must wrap your `MaterialApp` with a `WalletConnectModalTheme` widget.

    ```javascript theme={null}
    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:

    ```javascript theme={null}
    // 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,
    );
    ```
  </Tab>
</Tabs>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.