Theming

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

return ReownAppKitModalTheme(  child: MaterialApp(    ...  ),);

Default themes#

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

return ReownAppKitModalTheme(  isDarkMode: _isDarkMode,  child: MaterialApp(    ...  ),);

You can check the Flutter documentation here 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:

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:

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

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

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

Check if the current time is dark:

final isDarkMode = ReownAppKitModalTheme.of(context).isDarkMode;final isMaybeDarkMode = ReownAppKitModalTheme.maybeOf(context)?.isDarkMode;

Get current ReownAppKitModalThemeData object:

final data = ReownAppKitModalTheme.getDataOf(context);

Get current ReownAppKitModalColors object:

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)