> ## 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

To theme the `AppKitModal`, you must wrap your `MaterialApp` with a `ReownAppKitModalTheme` widget.

```dart theme={null}
return ReownAppKitModalTheme(
  child: MaterialApp(
    ...
  ),
);
```

### Default themes

*ReownAppKitModalTheme* already comes with 2 default themes.<br />
A light option: `ReownAppKitModalColors.lightMode`<br />
A dark option: `ReownAppKitModalColors.darkMode`.<br />
You can switch between them by toggling the `isDarkMode:` parameter in `ReownAppKitModalTheme` like so:

```dart theme={null}
return ReownAppKitModalTheme(
  isDarkMode: _isDarkMode,
  child: MaterialApp(
    ...
  ),
);
```

You can check the [Flutter documentation here](https://api.flutter.dev/flutter/widgets/WidgetsBinding/handlePlatformBrightnessChanged.html) to learn how to listen to device's theme changes

### Custom themes

You can define your own light and dark themes by tweaking `ReownAppKitModalThemeData` parameters. For instance, if you want to change the main foreground and background color you could do:

```dart theme={null}
final _themeData = ReownAppKitModalThemeData(
  lightColors: ReownAppKitModalColors.lightMode.copyWith(
    accent100: Colors.red,
    background125: Colors.yellow.shade300,
  ),
  darkColors: ReownAppKitModalColors.darkMode.copyWith(
    accent100: Colors.green,
    background125: Colors.brown,
  ),
);
```

and pass this object to the `ReownAppKitModalTheme`'s `themeData:` parameter:

```dart theme={null}
return ReownAppKitModalTheme(
  isDarkMode: _isDarkMode,
  themeData: _themeData,
  child: MaterialApp(
    ...
  ),
);
```

### Preset theme shortcuts

`ReownAppKitModalTheme` comes with default border radiuses but you can override these values by passing your own values to `ReownAppKitModalRadiuses()` object and then adding this object to `ReownAppKitModalThemeData`'s `radiuses:` parameter.

But you can also set *no corner radiuses* at all by setting this value to `ReownAppKitModalRadiuses.square` or *everything circular* by using `ReownAppKitModalRadiuses.circular`

```dart theme={null}
final _themeData = ReownAppKitModalThemeData(
  lightColors: ReownAppKitModalColors.lightMode.copyWith(
    accent100: Colors.red,
    background125: Colors.yellow.shade300,
  ),
  darkColors: ReownAppKitModalColors.darkMode.copyWith(
    accent100: Colors.green,
    background125: Colors.brown,
  ),
  // No corner radius, modal will look square, use ReownAppKitModalRadiuses.circular to make everything circular
  radiuses: ReownAppKitModalRadiuses.square,
);
```

<Note>
  If you don't wrap your `MaterialApp` with a `ReownAppKitModalTheme` widget, the `ReownAppKitModal` will use the default light theme.
</Note>

`ReownAppKitModalTheme` is an InheritedWidget, so it comes with a few handy methods for you to use:

Check if the current time is dark:

```dart theme={null}
final isDarkMode = ReownAppKitModalTheme.of(context).isDarkMode;
final isMaybeDarkMode = ReownAppKitModalTheme.maybeOf(context)?.isDarkMode;
```

Get current `ReownAppKitModalThemeData` object:

```dart theme={null}
final data = ReownAppKitModalTheme.getDataOf(context);
```

Get current `ReownAppKitModalColors` object:

```dart theme={null}
final colors = ReownAppKitModalTheme.colorsOf(context);
```

You can build your own theme by creating a `ReownAppKitModalThemeData` object. *(More and easier customization options will come in the future)*