I am currently working on an application where I have implemented the dark mode. It's all working good when I switch it from light mode to dark mode. The problem starts when I switch back from dark mode to light mode. All the primary color and theme configurations I have added in the app they just get lost.

This is the code from my app start:

class TradeWixApp extends StatelessWidget {
  bool darkMode;
  TradeWixApp({Key? key, required this.darkMode}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      translations: Languages(),
      locale: Locale('en'),
      debugShowCheckedModeBanner: false,
      darkTheme: ThemeData(
        textTheme: TextTheme(
          titleMedium: TextStyle(color: Colors.white70),
          bodyMedium: TextStyle(color: Colors.white70),
        ),
        shadowColor: Colors.grey.shade900,
        brightness: Brightness.dark,
        backgroundColor: Colors.black,
        scaffoldBackgroundColor: Color.fromARGB(255, 37, 36, 36),
        appBarTheme: AppBarTheme(
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(20),
            bottomRight: Radius.circular(20),
          )),
          color: Color.fromARGB(200, 174, 242, 135),
          elevation: 0,
          foregroundColor: Colors.black,
        ),
        primaryColor: Color.fromARGB(200, 174, 242, 135),
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            primary: Colors.black,
            elevation: 0,
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
          ),
        ),
        textButtonTheme: TextButtonThemeData(
          style: TextButton.styleFrom(primary: Colors.grey),
        ),
      ),
      themeMode: darkMode ? ThemeMode.dark : ThemeMode.light,
      theme: ThemeData(
          backgroundColor: Colors.white,
          scaffoldBackgroundColor: Colors.white,
          appBarTheme: AppBarTheme(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(20),
              bottomRight: Radius.circular(20),
            )),
            color: Color.fromARGB(255, 174, 242, 135),
            elevation: 0,
            foregroundColor: Colors.black,
          ),
          primaryColor: Color.fromARGB(255, 174, 242, 135),
          elevatedButtonTheme: ElevatedButtonThemeData(
            style: ElevatedButton.styleFrom(
              primary: Colors.black,
              elevation: 0,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20)),
            ),
          ),
          textButtonTheme: TextButtonThemeData(
            style: TextButton.styleFrom(primary: Colors.grey),
          )),
      home: const SplashScreen(),
    );
  }
}

and the code where I am switching the dark mode is:

Obx(() {
                  return ListTile(
                      title: Text('Dark Mode'.tr),
                      trailing: Switch(
                        value: darkMode.value,
                        onChanged: (value) async {
                          darkMode.value = value;

                          Get.changeTheme(
                              !value ? ThemeData.light() : ThemeData.dark());
                          Get.changeThemeMode(
                              !value ? ThemeMode.light : ThemeMode.dark);
                          Get.reloadAll();
                          final prefs = await SharedPreferences.getInstance();
                          await prefs.setBool('darkMode', value);
                        },
                      ));
                })

This is the light before switching

This is the dark mode This is the light mode after switching

CodePudding user response：

Try to add

themeMode: ThemeMode.system,

to your GetMaterialApp.

CodePudding user response：

I don't see why your using Get.changeTheme in your piece of code, you have set a theme, and darkTheme on your GetMaterialApp, so to toggle between them, you will need simply to call Get.changeThemeMode, but this:

Get.changeTheme( !value ? ThemeData.light() : ThemeData.dark());

The ThemeData.dark() and ThemeData.light() are new whole themes, I guess your goal is to toggle between light mode and dark mode, not to set a theme between a list of themes for example. so when you call Get.changeTheme(), you reset your app themes to the default light a dark ones ( which gives you the behavior that your themes are reset )