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 Flutter's doc here to know 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 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,
);

info

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

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)