Merge pull request #135 from WednesdaySP/mode-change

dark light mode integratration done
yagnik2411 · Nov 8, 2024 · 58957fa · 58957fa
2 parents bcaeedc + 5fdff8e
commit 58957fa
Show file tree

Hide file tree

Showing 9 changed files with 419 additions and 136 deletions.
diff --git a/lib/main.dart b/lib/main.dart
@@ -12,6 +12,7 @@ import 'package:quiz_genius/pages/profile_page.dart';
 import 'package:quiz_genius/pages/signUp_page.dart';
 import 'package:quiz_genius/pages/splash_screen.dart';
 import 'package:quiz_genius/pages/username_page.dart';
+import 'package:quiz_genius/utils/colors.dart';
 import 'package:quiz_genius/utils/my_route.dart';
 
 import 'pages/login_page.dart';
@@ -33,53 +34,113 @@ Future<void> main() async {
   runApp(const MyApp());
 }
 
+// ThemeMode notifier to track theme changes
+final themeNotifier = ValueNotifier<ThemeMode>(ThemeMode.light);
+
 // The root widget of the application
 class MyApp extends StatelessWidget {
   // Constructor to initialize the MyApp widget
   const MyApp({super.key});
   // The build method returns the UI that MyApp should display
   @override
   Widget build(BuildContext context) {
-    return ScreenUtilInit(
-      // Defines the design size for responsive scaling (393x873 is the base design size)
-      designSize: const Size(393, 873),
-      // Ensures that text scales appropriately for different screen sizes
-      minTextAdapt: true,
-      // Allows the app to support split-screen mode
-      splitScreenMode: true,
-      // builder function creates the MaterialApp widget (the actual app)
-      builder: (_, child) {
-        return MaterialApp(
-          // Disables the debug banner seen in the top-right corner during development
-          debugShowCheckedModeBanner: false,
-          // Sets the default theme mode to light
-          themeMode: ThemeMode.light,
-          // Defines the theme for the app, including font styles and colors
-          theme: ThemeData(
-              // Uses Montserrat font throughout the app
-              fontFamily: GoogleFonts.montserrat().fontFamily,
-              // Sets a custom text style for medium-sized titles (used throughout the app)
-              textTheme: TextTheme(
-                  titleMedium: TextStyle(
-                fontSize: 20.sp, // Responsive font size
-                color: Colors.black, // Black text color
-                fontWeight: FontWeight.w800, // Bold font weight
-              ))),
-          // Initial route of the app when it starts (Splash Screen)
-          initialRoute: MyRoutes.splashScreenRoute,
-          // Defines the navigation routes for different screens in the app
-          routes: {
-            MyRoutes.loginRoute: (context) => Login(), // Navigates to Login page
-            MyRoutes.usernameRoute: (context) => UserName(), // Navigates to Username setup page
-            MyRoutes.homeRoute: (context) => HomePage(), // Navigates to Home page
-            MyRoutes.scoreRoute: (context) => ScorePage(), // Navigates to Previous Scores page
-            MyRoutes.previousQuizRoute: (context) => const PreviousQuiz(), // Navigates to Previous Quiz page
-            MyRoutes.profileRoute: (context) => const ProfilePage(), // Navigates to Profile page
-            MyRoutes.signUpRoute: (context) => SignUp(), // Navigates to Sign-up page
-            MyRoutes.splashScreenRoute: (context) => SplashScreen(), // Navigates to Splash Screen page
-          },
-        );
-      },
+       return ValueListenableBuilder<ThemeMode>(
+      valueListenable: themeNotifier,
+      builder: (_, ThemeMode currentTheme, __) {
+      return ScreenUtilInit(
+        // Defines the design size for responsive scaling (393x873 is the base design size)
+        designSize: const Size(393, 873),
+        // Ensures that text scales appropriately for different screen sizes
+        minTextAdapt: true,
+        // Allows the app to support split-screen mode
+        splitScreenMode: true,
+        // builder function creates the MaterialApp widget (the actual app)
+        builder: (_, child) {
+          return MaterialApp(
+            // Disables the debug banner seen in the top-right corner during development
+            debugShowCheckedModeBanner: false,
+            // Sets the default theme mode to light
+            themeMode: currentTheme,
+            theme: _lightTheme(),
+            darkTheme: _darkTheme(),
+            // Initial route of the app when it starts (Splash Screen)
+            initialRoute: MyRoutes.splashScreenRoute,
+            // Defines the navigation routes for different screens in the app
+            routes: {
+              MyRoutes.loginRoute: (context) =>
+                  Login(), // Navigates to Login page
+              MyRoutes.usernameRoute: (context) =>
+                  UserName(), // Navigates to Username setup page
+              MyRoutes.homeRoute: (context) =>
+                  HomePage(), // Navigates to Home page
+              MyRoutes.scoreRoute: (context) =>
+                  ScorePage(), // Navigates to Previous Scores page
+              MyRoutes.previousQuizRoute: (context) =>
+                  const PreviousQuiz(), // Navigates to Previous Quiz page
+              MyRoutes.profileRoute: (context) =>
+                  const ProfilePage(), // Navigates to Profile page
+              MyRoutes.signUpRoute: (context) =>
+                  SignUp(), // Navigates to Sign-up page
+              MyRoutes.splashScreenRoute: (context) =>
+                  SplashScreen(), // Navigates to Splash Screen page
+            },
+          );
+        },
+      );
+      }
+    );
+  }
+
+  ThemeData _lightTheme() {
+    return ThemeData(
+      fontFamily: GoogleFonts.montserrat().fontFamily,
+      brightness: Brightness.light,
+      scaffoldBackgroundColor: MyColors.elfGreen,
+      colorScheme: ColorScheme.light(
+        primary: MyColors.darkCyan,
+        onPrimary: Colors.black,
+      background: MyColors.elfGreen,
+        secondary: MyColors.darkCyan,
+        onBackground: Colors.white
+      ),
+      textTheme: TextTheme(
+        titleMedium: TextStyle(
+          fontSize: 20.sp,
+          color: Colors.black,
+          fontWeight: FontWeight.w800,
+        ),
+      ),
+      appBarTheme: AppBarTheme(
+        backgroundColor: MyColors.mint,
+        //color: MyColors.mint,
+        iconTheme: IconThemeData(color: Colors.black),
+      ),
     );
   }
-}
+
+  ThemeData _darkTheme() {
+    return ThemeData(
+      fontFamily: GoogleFonts.montserrat().fontFamily,
+      brightness: Brightness.dark,
+      scaffoldBackgroundColor:  const Color.fromARGB(255, 14, 14, 14),
+      colorScheme: ColorScheme.dark(
+        primary: Colors.black,
+        onPrimary: Colors.white,
+        background: Colors.black,
+        secondary: MyColors.malachite,
+        onBackground: Colors.black
+      ),
+      textTheme: TextTheme(
+        titleMedium: TextStyle(
+          fontSize: 20.sp,
+          color: Colors.white,
+          fontWeight: FontWeight.w800,
+        ),
+      ),
+      appBarTheme: AppBarTheme(
+        color: Colors.black,
+        iconTheme: IconThemeData(color: Colors.white),
+      ),
+    );
+  }
+}