I can't find any easy way to make the Android bottom navigation bar white in light mode and black in dark mode. Right now I have created custom AppBar themes for light and dark and they work just fine except for the bottom navigation bar. Even though I have them set appropriately.
main.dart
void main() async {
WidgetsFlutterBinding.ensureInitialized();
runApp(
MaterialApp(
title: 'MyApplicationName',
theme: CustomTheme.lightTheme,
darkTheme: CustomTheme.darkTheme,
themeMode: ThemeMode.system,
debugShowCheckedModeBanner: false,
home: const HomePage(),
routes: {...routesMap},
),
);
}
custom_theme.dart
class CustomTheme {
static ThemeData lightTheme = ThemeData(
appBarTheme: const AppBarTheme(
elevation: 0,
centerTitle: true,
backgroundColor: Colors.white,
titleTextStyle: TextStyle(color: Colors.black),
iconTheme: IconThemeData(color: Colors.black),
systemOverlayStyle: SystemUiOverlayStyle(
statusBarColor: Colors.white,
statusBarIconBrightness: Brightness.dark,
systemNavigationBarColor: Colors.white, <----
systemNavigationBarIconBrightness: Brightness.dark, <----
),
),
);
static ThemeData darkTheme = ThemeData(
appBarTheme: const AppBarTheme(
elevation: 0,
centerTitle: true,
backgroundColor: Colors.black,
titleTextStyle: TextStyle(color: Colors.white),
iconTheme: IconThemeData(color: Colors.white),
systemOverlayStyle: SystemUiOverlayStyle(
statusBarColor: Colors.black,
statusBarIconBrightness: Brightness.light,
systemNavigationBarColor: Colors.black, <----
systemNavigationBarIconBrightness: Brightness.light, <----
),
),
);
How it looks in light mode:
How it looks in dark mode (Black is default I'm thinking and not because I have it set to that):
Any guidance on this would be really appreciated. Thank you in advance.

