Theming

To theme the Web3Modal you must wrap your MaterialApp with a Web3ModalTheme widget.

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

Default themes

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

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

Custom themes

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

final _themeData = Web3ModalThemeData(
  lightColors: Web3ModalColors.lightMode.copyWith(
    accent100: Colors.red,
    background125: Colors.yellow.shade300,
  ),
  darkColors: Web3ModalColors.darkMode.copyWith(
    accent100: Colors.green,
    background125: Colors.brown,
  ),
);

and pass this object to Web3ModalTheme's themeData: parameter:

return Web3ModalTheme(
  isDarkMode: _isDarkMode,
  themeData: _themeData,
  child: MaterialApp(
    ...
  ),
);

Preset theme shortcuts

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

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

final _themeData = Web3ModalThemeData(
  lightColors: Web3ModalColors.lightMode.copyWith(
    accent100: Colors.red,
    background125: Colors.yellow.shade300,
  ),
  darkColors: Web3ModalColors.darkMode.copyWith(
    accent100: Colors.green,
    background125: Colors.brown,
  ),
  // No corner radius, modal will look square, use Web3ModalRadiuses.circular to make everything circular
  radiuses: Web3ModalRadiuses.square,
);

info

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

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

Check if the current time is dark:

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

Get current Web3ModalThemeData object:

final data = Web3ModalTheme.getDataOf(context);

Get current Web3ModalColors object:

final colors = Web3ModalTheme.colorsOf(context);

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