Theme Switcher added to drawers all files updated

Frontend/patient_manager/lib/components/buildFilesList.dart

@@ -1,8 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:patient_manager/components/BuildFileView.dart';
 import 'package:patient_manager/components/mybutton.dart';
+import 'package:patient_manager/main.dart';
 import 'package:patient_manager/objects/files.dart';
-import 'package:patient_manager/theme/mihTheme.dart';
 //import 'dart:js' as js;
 import "package:universal_html/html.dart" as html;
 
@@ -32,10 +32,12 @@ class _BuildFilesListState extends State<BuildFilesList> {
               width: 800.0,
               //height: 475.0,
               decoration: BoxDecoration(
-                color: MyTheme().primaryColor(),
+                color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
                 borderRadius: BorderRadius.circular(25.0),
-                border:
+                border: Border.all(
-                    Border.all(color: MyTheme().secondaryColor(), width: 5.0),
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    width: 5.0),
               ),
               child: Column(
                 mainAxisSize: MainAxisSize.min,
@@ -44,7 +46,9 @@ class _BuildFilesListState extends State<BuildFilesList> {
                     filename,
                     textAlign: TextAlign.center,
                     style: TextStyle(
-                      color: MyTheme().secondaryColor(),
+                      color: MzanziInnovationHub.of(context)!
+                          .theme
+                          .secondaryColor(),
                       fontSize: 35.0,
                       fontWeight: FontWeight.bold,
                     ),
@@ -62,8 +66,11 @@ class _BuildFilesListState extends State<BuildFilesList> {
                             'http://localhost:9000/mih/$filename', 'download');
                       },
                       buttonText: "Dowload",
-                      buttonColor: MyTheme().secondaryColor(),
+                      buttonColor: MzanziInnovationHub.of(context)!
-                      textColor: MyTheme().primaryColor(),
+                          .theme
+                          .secondaryColor(),
+                      textColor:
+                          MzanziInnovationHub.of(context)!.theme.primaryColor(),
                     ),
                   )
                 ],
@@ -80,7 +87,7 @@ class _BuildFilesListState extends State<BuildFilesList> {
                 },
                 icon: Icon(
                   Icons.close,
-                  color: MyTheme().errorColor(),
+                  color: MzanziInnovationHub.of(context)!.theme.errorColor(),
                   size: 35,
                 ),
               ),
@@ -100,7 +107,7 @@ class _BuildFilesListState extends State<BuildFilesList> {
           shrinkWrap: true,
           separatorBuilder: (BuildContext context, int index) {
             return Divider(
-              color: MyTheme().secondaryColor(),
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
             );
           },
           itemCount: widget.files.length,
@@ -109,18 +116,20 @@ class _BuildFilesListState extends State<BuildFilesList> {
               title: Text(
                 widget.files[index].file_name,
                 style: TextStyle(
-                  color: MyTheme().secondaryColor(),
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
                 ),
               ),
               subtitle: Text(
                 widget.files[index].insert_date,
                 style: TextStyle(
-                  color: MyTheme().secondaryColor(),
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
                 ),
               ),
               trailing: Icon(
                 Icons.arrow_forward,
-                color: MyTheme().secondaryColor(),
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
               ),
               onTap: () {
                 viewFilePopUp(widget.files[index].file_name);

Frontend/patient_manager/lib/components/buildMedList.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
+import 'package:patient_manager/main.dart';
 import 'package:patient_manager/objects/medicine.dart';
-import 'package:patient_manager/theme/mihTheme.dart';
 
 class BuildMedicinesList extends StatefulWidget {
   final TextEditingController contoller;
@@ -26,7 +26,7 @@ class _BuildMedicinesListState extends State<BuildMedicinesList> {
     return ListView.separated(
       separatorBuilder: (BuildContext context, int index) {
         return Divider(
-          color: MyTheme().secondaryColor(),
+          color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
         );
       },
       itemCount: widget.medicines.length,
@@ -36,13 +36,13 @@ class _BuildMedicinesListState extends State<BuildMedicinesList> {
           title: Text(
             widget.medicines[index].name,
             style: TextStyle(
-              color: MyTheme().secondaryColor(),
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
             ),
           ),
           subtitle: Text(
             "${widget.medicines[index].unit} - ${widget.medicines[index].form}",
             style: TextStyle(
-              color: MyTheme().secondaryColor(),
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
             ),
           ),
           onTap: () {
@@ -54,7 +54,7 @@ class _BuildMedicinesListState extends State<BuildMedicinesList> {
           },
           trailing: Icon(
             Icons.arrow_forward,
-            color: MyTheme().secondaryColor(),
+            color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
           ),
         );
       },

Frontend/patient_manager/lib/components/buildNotesList.dart

@@ -1,8 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:patient_manager/components/myMLTextInput.dart';
+import 'package:patient_manager/main.dart';
 //import 'package:patient_manager/components/mybutton.dart';
 import 'package:patient_manager/objects/notes.dart';
-import 'package:patient_manager/theme/mihTheme.dart';
 
 class BuildNotesList extends StatefulWidget {
   final List<Note> notes;
@@ -34,10 +34,12 @@ class _BuildNotesListState extends State<BuildNotesList> {
               width: 700.0,
               //height: 475.0,
               decoration: BoxDecoration(
-                color: MyTheme().primaryColor(),
+                color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
                 borderRadius: BorderRadius.circular(25.0),
-                border:
+                border: Border.all(
-                    Border.all(color: MyTheme().secondaryColor(), width: 5.0),
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    width: 5.0),
               ),
               child: Column(
                 //mainAxisSize: MainAxisSize.max,
@@ -46,7 +48,9 @@ class _BuildNotesListState extends State<BuildNotesList> {
                     title,
                     textAlign: TextAlign.center,
                     style: TextStyle(
-                      color: MyTheme().secondaryColor(),
+                      color: MzanziInnovationHub.of(context)!
+                          .theme
+                          .secondaryColor(),
                       fontSize: 35.0,
                       fontWeight: FontWeight.bold,
                     ),
@@ -87,7 +91,7 @@ class _BuildNotesListState extends State<BuildNotesList> {
                 },
                 icon: Icon(
                   Icons.close,
-                  color: MyTheme().errorColor(),
+                  color: MzanziInnovationHub.of(context)!.theme.errorColor(),
                   size: 35,
                 ),
               ),
@@ -107,7 +111,7 @@ class _BuildNotesListState extends State<BuildNotesList> {
           shrinkWrap: true,
           separatorBuilder: (BuildContext context, int index) {
             return Divider(
-              color: MyTheme().secondaryColor(),
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
             );
           },
           itemCount: widget.notes.length,
@@ -116,18 +120,20 @@ class _BuildNotesListState extends State<BuildNotesList> {
               title: Text(
                 widget.notes[index].note_name,
                 style: TextStyle(
-                  color: MyTheme().secondaryColor(),
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
                 ),
               ),
               subtitle: Text(
                 "${widget.notes[index].insert_date}:\n${widget.notes[index].note_text}",
                 style: TextStyle(
-                  color: MyTheme().secondaryColor(),
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
                 ),
               ), //Text(widget.notes[index].note_text),
               trailing: Icon(
                 Icons.arrow_forward,
-                color: MyTheme().secondaryColor(),
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
               ),
               onTap: () {
                 viewNotePopUp(widget.notes[index].note_name,

Frontend/patient_manager/lib/components/buildPatientList.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
+import 'package:patient_manager/main.dart';
 import 'package:patient_manager/objects/patients.dart';
-import 'package:patient_manager/theme/mihTheme.dart';
 
 class BuildPatientsList extends StatefulWidget {
   final List<Patient> patients;
@@ -24,12 +24,12 @@ class _BuildPatientsListState extends State<BuildPatientsList> {
         children: [
           Icon(
             Icons.star_border_rounded,
-            color: MyTheme().secondaryColor(),
+            color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
           ),
           Text(
             "${widget.patients[index].first_name} ${widget.patients[index].last_name}",
             style: TextStyle(
-              color: MyTheme().secondaryColor(),
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
             ),
           ),
         ],
@@ -38,7 +38,7 @@ class _BuildPatientsListState extends State<BuildPatientsList> {
       return Text(
         "${widget.patients[index].first_name} ${widget.patients[index].last_name}",
         style: TextStyle(
-          color: MyTheme().secondaryColor(),
+          color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
         ),
       );
     }
@@ -49,7 +49,7 @@ class _BuildPatientsListState extends State<BuildPatientsList> {
     return ListView.separated(
       separatorBuilder: (BuildContext context, index) {
         return Divider(
-          color: MyTheme().secondaryColor(),
+          color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
         );
       },
       itemCount: widget.patients.length,
@@ -61,7 +61,7 @@ class _BuildPatientsListState extends State<BuildPatientsList> {
           subtitle: Text(
             "ID No.: ${widget.patients[index].id_no}\nMedical Aid No.: ${widget.patients[index].medical_aid_no}",
             style: TextStyle(
-              color: MyTheme().secondaryColor(),
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
             ),
           ),
           onTap: () {
@@ -72,7 +72,7 @@ class _BuildPatientsListState extends State<BuildPatientsList> {
           },
           trailing: Icon(
             Icons.arrow_forward,
-            color: MyTheme().secondaryColor(),
+            color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
           ),
         );
       },

Frontend/patient_manager/lib/components/homeAppDrawer.dart

@@ -1,7 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:flutter/widgets.dart';
 import 'package:patient_manager/main.dart';
-import 'package:patient_manager/theme/mihTheme.dart';
 
 class HomeAppDrawer extends StatefulWidget {
   final String userEmail;
@@ -15,41 +13,76 @@ class HomeAppDrawer extends StatefulWidget {
 class _HomeAppDrawerState extends State<HomeAppDrawer> {
   @override
   Widget build(BuildContext context) {
+    //print(MzanziInnovationHub.of(context)?.theme.mode);
     return Drawer(
-      backgroundColor: MyTheme().primaryColor(),
+      //backgroundColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
-      child: ListView(
+      child: Stack(children: [
-        padding: EdgeInsets.zero,
+        ListView(
-        children: [
+          padding: EdgeInsets.zero,
-          DrawerHeader(
+          children: [
-            decoration: BoxDecoration(
+            DrawerHeader(
-              color: MyTheme().secondaryColor(),
+              decoration: BoxDecoration(
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+              ),
+              child: Text(
+                widget.userEmail,
+                style: TextStyle(
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.primaryColor()),
+              ),
             ),
-            child: Text(
+            ListTile(
-              widget.userEmail,
+              title: Row(
-              style: TextStyle(color: MyTheme().primaryColor()),
+                children: [
+                  Icon(
+                    Icons.logout,
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  ),
+                  SizedBox(width: 25.0),
+                  Text(
+                    "Sign Out",
+                    style: TextStyle(
+                        color: MzanziInnovationHub.of(context)!
+                            .theme
+                            .secondaryColor()),
+                  ),
+                ],
+              ),
+              onTap: () {
+                client.auth.signOut();
+                Navigator.of(context).pushNamed('/');
+              },
+            )
+          ],
+        ),
+        Positioned(
+          top: 1,
+          right: 1,
+          width: 50,
+          height: 50,
+          child: IconButton(
+            onPressed: () {
+              setState(() {
+                if (MzanziInnovationHub.of(context)?.theme.mode == "Dark") {
+                  //darkm = !darkm;
+                  MzanziInnovationHub.of(context)!.changeTheme(ThemeMode.light);
+                  //print("Dark Mode: $darkm");
+                } else {
+                  //darkm = !darkm;
+                  MzanziInnovationHub.of(context)!.changeTheme(ThemeMode.dark);
+                  //print("Dark Mode: $darkm");
+                }
+              });
+            },
+            icon: Icon(
+              Icons.light_mode,
+              color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+              size: 35,
             ),
           ),
-          ListTile(
+        ),
-            title: Row(
+      ]),
-              children: [
-                Icon(
-                  Icons.logout,
-                  color: MyTheme().secondaryColor(),
-                ),
-                SizedBox(width: 25.0),
-                Text(
-                  "Sign Out",
-                  style: TextStyle(color: MyTheme().secondaryColor()),
-                ),
-              ],
-            ),
-            onTap: () {
-              client.auth.signOut();
-              Navigator.of(context).pushNamed('/');
-            },
-          )
-        ],
-      ),
     );
   }
 }

Frontend/patient_manager/lib/components/homeTile.dart

@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:patient_manager/theme/mihTheme.dart';
+import 'package:patient_manager/main.dart';
 
 class HomeTile extends StatefulWidget {
   final String tileName;
@@ -26,8 +26,8 @@ class _HomeTileState extends State<HomeTile> {
 
   @override
   void initState() {
-    mainC = MyTheme().secondaryColor();
+    mainC = MzanziInnovationHub.of(context)!.theme.secondaryColor();
-    secondC = MyTheme().primaryColor();
+    secondC = MzanziInnovationHub.of(context)!.theme.primaryColor();
     super.initState();
   }
 
@@ -41,14 +41,15 @@ class _HomeTileState extends State<HomeTile> {
             onTap: widget.onTap,
             onTapDown: (_) {
               setState(() {
-                mainC = MyTheme().primaryColor();
+                mainC = MzanziInnovationHub.of(context)!.theme.primaryColor();
-                secondC = MyTheme().secondaryColor();
+                secondC =
+                    MzanziInnovationHub.of(context)!.theme.secondaryColor();
               });
             },
             onTapUp: (_) {
               setState(() {
-                mainC = MyTheme().secondaryColor();
+                mainC = MzanziInnovationHub.of(context)!.theme.secondaryColor();
-                secondC = MyTheme().primaryColor();
+                secondC = MzanziInnovationHub.of(context)!.theme.primaryColor();
               });
             },
             child: Container(
@@ -56,7 +57,7 @@ class _HomeTileState extends State<HomeTile> {
               decoration: BoxDecoration(
                 color: mainC,
                 borderRadius: BorderRadius.circular(10.0),
-                //border: Border.all(color: MyTheme().secondaryColor(), width: 1.0),
+                //border: Border.all(color: MzanziInnovationHub.of(context)!.theme.secondaryColor(), width: 1.0),
               ),
               child: Icon(
                 widget.tileIcon,
@@ -69,7 +70,7 @@ class _HomeTileState extends State<HomeTile> {
             widget.tileName,
             textAlign: TextAlign.center,
             style: TextStyle(
-              color: MyTheme().secondaryColor(),
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
               fontSize: 5.0,
               fontWeight: FontWeight.bold,
             ),
@@ -83,7 +84,7 @@ class _HomeTileState extends State<HomeTile> {
   Widget build(BuildContext context) {
     return displayTile();
     // child: Card(
-    //   color: MyTheme().secondaryColor(),
+    //   color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
     //   elevation: 20,
     //   child: Column(
     //     //mainAxisSize: MainAxisSize.min,
@@ -92,18 +93,18 @@ class _HomeTileState extends State<HomeTile> {
     //         child: ListTile(
     //             leading: Icon(
     //               widget.tileIcon,
-    //               color: MyTheme().primaryColor(),
+    //               color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
     //             ),
     //             title: Text(
     //               widget.tileName,
     //               style: TextStyle(
     //                 fontWeight: FontWeight.bold,
-    //                 color: MyTheme().primaryColor(),
+    //                 color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
     //               ),
     //             ),
     //             subtitle: Text(
     //               widget.tileDescription,
-    //               style: TextStyle(color: MyTheme().primaryColor()),
+    //               style: TextStyle(color: MzanziInnovationHub.of(context)!.theme.primaryColor()),
     //             )),
     //       ),
     //       Expanded(
@@ -114,7 +115,7 @@ class _HomeTileState extends State<HomeTile> {
     //               padding: const EdgeInsets.symmetric(horizontal: 10),
     //               child: Icon(
     //                 Icons.arrow_forward,
-    //                 color: MyTheme().secondaryColor(),
+    //                 color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
     //               ),
     //             ),
     //           ],

Frontend/patient_manager/lib/components/medicineSearch.dart

@@ -3,9 +3,9 @@ import 'dart:convert';
 import 'package:flutter/material.dart';
 import 'package:patient_manager/components/buildMedList.dart';
 import 'package:patient_manager/components/myErrorMessage.dart';
+import 'package:patient_manager/main.dart';
 import 'package:patient_manager/objects/medicine.dart';
 import 'package:http/http.dart' as http;
-import 'package:patient_manager/theme/mihTheme.dart';
 
 class MedicineSearch extends StatefulWidget {
   final TextEditingController searchVlaue;
@@ -66,9 +66,12 @@ class _MedicineSearchState extends State<MedicineSearch> {
             width: 700.0,
             //height: 475.0,
             decoration: BoxDecoration(
-              color: MyTheme().primaryColor(),
+              color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
               borderRadius: BorderRadius.circular(25.0),
-              border: Border.all(color: MyTheme().secondaryColor(), width: 5.0),
+              border: Border.all(
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  width: 5.0),
             ),
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.center,
@@ -79,7 +82,8 @@ class _MedicineSearchState extends State<MedicineSearch> {
                   "Select Medicine",
                   textAlign: TextAlign.center,
                   style: TextStyle(
-                    color: MyTheme().secondaryColor(),
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
                     fontSize: 35.0,
                     fontWeight: FontWeight.bold,
                   ),

Frontend/patient_manager/lib/components/myAppBar.dart

@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:patient_manager/theme/mihTheme.dart';
+import 'package:patient_manager/main.dart';
 
 class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
   @override
@@ -12,27 +12,10 @@ class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
   @override
   Widget build(BuildContext context) {
     return AppBar(
-      //backgroundColor: Colors.blueAccent,
       elevation: 8,
-      shadowColor: MyTheme().secondaryColor(),
+      shadowColor: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-      iconTheme: IconThemeData(color: MyTheme().primaryColor()),
-      // actions: [
-      //   IconButton(
-      //     onPressed: () {
-      //       client.auth.signOut();
-      //       Navigator.of(context).pushNamed('/');
-      //     },
-      //     icon: const Icon(Icons.logout),
-      //     iconSize: 35,
-      //     color: Colors.black,
-      //   ),
-      // ],
       title: Text(
         barTitle,
-        style: TextStyle(
-          fontWeight: FontWeight.bold,
-          color: MyTheme().primaryColor(),
-        ),
       ),
       centerTitle: true,
     );

Frontend/patient_manager/lib/components/myDateInput.dart

@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:patient_manager/theme/mihTheme.dart';
+import 'package:patient_manager/main.dart';
 
 class MyDateField extends StatefulWidget {
   final controller;
@@ -43,18 +43,22 @@ class _MyDateFieldState extends State<MyDateField> {
         children: [
           Text(
             "*",
-            style: TextStyle(color: MyTheme().errorColor()),
+            style: TextStyle(
+                color: MzanziInnovationHub.of(context)!.theme.errorColor()),
           ),
           const SizedBox(
             width: 8.0,
           ),
           Text(widget.LableText,
-              style: TextStyle(color: MyTheme().secondaryColor())),
+              style: TextStyle(
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor())),
         ],
       );
     } else {
       return Text(widget.LableText,
-          style: TextStyle(color: MyTheme().secondaryColor()));
+          style: TextStyle(
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()));
     }
   }
 
@@ -89,7 +93,8 @@ class _MyDateFieldState extends State<MyDateField> {
     return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 25.0),
       child: TextField(
-        style: TextStyle(color: MyTheme().secondaryColor()),
+        style: TextStyle(
+            color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
         controller: widget.controller,
         readOnly: true,
         obscureText: false,
@@ -100,38 +105,40 @@ class _MyDateFieldState extends State<MyDateField> {
         decoration: InputDecoration(
           errorText: _errorText,
           errorStyle: TextStyle(
-              color: MyTheme().errorColor(), fontWeight: FontWeight.bold),
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+              fontWeight: FontWeight.bold),
           label: setRequiredText(),
           //labelText: widget.LableText,
           //labelStyle: const TextStyle(color: Colors.blueAccent),
           prefixIcon: Icon(
             Icons.calendar_today,
-            color: MyTheme().secondaryColor(),
+            color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
           ),
-          fillColor: MyTheme().primaryColor(),
+          fillColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
           filled: true,
           //hintText: hintText,
           //hintStyle: TextStyle(color: Colors.blueGrey[400]),
           enabledBorder: OutlineInputBorder(
             borderSide: BorderSide(
-              color: MyTheme().secondaryColor(),
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
               width: 2.0,
             ),
           ),
           focusedErrorBorder: OutlineInputBorder(
             borderSide: BorderSide(
-              color: MyTheme().errorColor(),
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
               width: 2.0,
             ),
           ),
           errorBorder: OutlineInputBorder(
             borderSide: BorderSide(
-              color: MyTheme().errorColor(),
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
               width: 2.0,
             ),
           ),
           focusedBorder: OutlineInputBorder(
-            borderSide: BorderSide(color: MyTheme().secondaryColor()),
+            borderSide: BorderSide(
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
           ),
         ),
         onTap: () {

Frontend/patient_manager/lib/components/myDropdownInput.dart

@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:patient_manager/theme/mihTheme.dart';
+import 'package:patient_manager/main.dart';
 
 class MyDropdownField extends StatefulWidget {
   final TextEditingController controller;
@@ -35,18 +35,22 @@ class _MyDropdownFieldState extends State<MyDropdownField> {
         children: [
           Text(
             "*",
-            style: TextStyle(color: MyTheme().errorColor()),
+            style: TextStyle(
+                color: MzanziInnovationHub.of(context)!.theme.errorColor()),
           ),
           const SizedBox(
             width: 8.0,
           ),
           Text(widget.hintText,
-              style: TextStyle(color: MyTheme().secondaryColor())),
+              style: TextStyle(
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor())),
         ],
       );
     } else {
       return Text(widget.hintText,
-          style: TextStyle(color: MyTheme().secondaryColor()));
+          style: TextStyle(
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()));
     }
   }
 
@@ -77,8 +81,8 @@ class _MyDropdownFieldState extends State<MyDropdownField> {
           value: i,
           label: i,
           style: ButtonStyle(
-              foregroundColor:
+              foregroundColor: WidgetStatePropertyAll(
-                  WidgetStatePropertyAll(MyTheme().secondaryColor()))));
+                  MzanziInnovationHub.of(context)!.theme.secondaryColor()))));
     }
     return menueList;
   }
@@ -98,13 +102,14 @@ class _MyDropdownFieldState extends State<MyDropdownField> {
       child: DropdownMenu(
         trailingIcon: Icon(
           Icons.arrow_drop_down,
-          color: MyTheme().secondaryColor(),
+          color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
         ),
         selectedTrailingIcon: Icon(
           Icons.arrow_drop_up,
-          color: MyTheme().secondaryColor(),
+          color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
         ),
-        textStyle: TextStyle(color: MyTheme().secondaryColor()),
+        textStyle: TextStyle(
+            color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
         menuHeight: 300,
         controller: widget.controller,
         expandedInsets: EdgeInsets.zero,
@@ -124,42 +129,49 @@ class _MyDropdownFieldState extends State<MyDropdownField> {
           },
           icon: Icon(
             Icons.delete_outline_rounded,
-            color: MyTheme().secondaryColor(),
+            color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
           ),
         ),
         menuStyle: MenuStyle(
-          backgroundColor: WidgetStatePropertyAll(MyTheme().primaryColor()),
+          backgroundColor: WidgetStatePropertyAll(
+              MzanziInnovationHub.of(context)!.theme.primaryColor()),
           side: WidgetStatePropertyAll(
-            BorderSide(color: MyTheme().secondaryColor(), width: 2.0),
+            BorderSide(
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                width: 2.0),
           ),
         ),
 
         inputDecorationTheme: InputDecorationTheme(
           filled: true,
           errorStyle: TextStyle(
-              color: MyTheme().errorColor(), fontWeight: FontWeight.bold),
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
-          fillColor: MyTheme().primaryColor(),
+              fontWeight: FontWeight.bold),
+          fillColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
           focusedBorder: OutlineInputBorder(
-              borderSide: BorderSide(color: MyTheme().secondaryColor())),
+              borderSide: BorderSide(
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor())),
           focusedErrorBorder: OutlineInputBorder(
             borderSide: BorderSide(
-              color: MyTheme().errorColor(),
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
               width: 2.0,
             ),
           ),
           errorBorder: OutlineInputBorder(
             borderSide: BorderSide(
-              color: MyTheme().errorColor(),
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
               width: 2.0,
             ),
           ),
           enabledBorder: OutlineInputBorder(
             borderSide: BorderSide(
-              color: MyTheme().secondaryColor(),
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
               width: 2.0,
             ),
           ),
-          outlineBorder: BorderSide(color: MyTheme().secondaryColor()),
+          outlineBorder: BorderSide(
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
         ),
         dropdownMenuEntries: menu,
         // const <DropdownMenuEntry<String>>[

Frontend/patient_manager/lib/components/myErrorMessage.dart

@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:patient_manager/theme/mihTheme.dart';
+import 'package:patient_manager/main.dart';
 
 class MyErrorMessage extends StatefulWidget {
   final String errorType;
@@ -14,77 +14,93 @@ class MyErrorMessage extends StatefulWidget {
 
 class _MyErrorMessageState extends State<MyErrorMessage> {
   var messageTypes = <String, Widget>{};
+  // late double width = 50;
+  // late double height = 50;
+  Size? size;
 
   void setInputError() {
     messageTypes["Input Error"] = Stack(
       children: [
         Container(
           padding: const EdgeInsets.all(10.0),
-          width: 500.0,
+          width: 500,
-          height: 375.0,
+          height: 450,
           decoration: BoxDecoration(
-            color: MyTheme().primaryColor(),
+            color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
             borderRadius: BorderRadius.circular(25.0),
-            border: Border.all(color: MyTheme().errorColor(), width: 5.0),
+            border: Border.all(
+                color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+                width: 5.0),
           ),
-          child: Column(
+          child: SingleChildScrollView(
-            mainAxisSize: MainAxisSize.min,
+            child: Column(
-            children: [
+              mainAxisSize: MainAxisSize.min,
-              Icon(
+              children: [
-                Icons.warning_amber_rounded,
+                Icon(
-                size: 100,
+                  Icons.warning_amber_rounded,
-                color: MyTheme().errorColor(),
+                  size: 100,
-              ),
+                  color: MzanziInnovationHub.of(context)!.theme.errorColor(),
-              const SizedBox(height: 15),
-              Text(
-                "Oops! Looks like some fields are missing.",
-                textAlign: TextAlign.center,
-                style: TextStyle(
-                  color: MyTheme().errorColor(),
-                  fontSize: 25.0,
-                  fontWeight: FontWeight.bold,
                 ),
-              ),
+                const SizedBox(height: 15),
-              const SizedBox(height: 10),
+                Text(
-              Padding(
+                  "Oops! Looks like some fields are missing.",
-                padding: const EdgeInsets.symmetric(horizontal: 25.0),
+                  textAlign: TextAlign.center,
-                child: Text(
-                  "We noticed that some required fields are still empty. To ensure your request is processed smoothly, please fill out all the highlighted fields before submitting the form again.",
                   style: TextStyle(
-                    color: MyTheme().secondaryColor(),
+                    color: MzanziInnovationHub.of(context)!.theme.errorColor(),
-                    fontSize: 15.0,
+                    fontSize: 25.0,
                     fontWeight: FontWeight.bold,
                   ),
                 ),
-              ),
+                const SizedBox(height: 10),
-              const SizedBox(height: 10),
+                Padding(
-              Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 25.0),
-                padding: const EdgeInsets.symmetric(horizontal: 25.0),
+                  child: Text(
-                child: RichText(
+                    "We noticed that some required fields are still empty. To ensure your request is processed smoothly, please fill out all the highlighted fields before submitting the form again.",
-                  text: TextSpan(
                     style: TextStyle(
-                      color: MyTheme().secondaryColor(),
+                      color: MzanziInnovationHub.of(context)!
+                          .theme
+                          .secondaryColor(),
                       fontSize: 15.0,
                       fontWeight: FontWeight.bold,
                     ),
-                    children: <TextSpan>[
-                      TextSpan(
-                          text: "Here's a quick tip: ",
-                          style: TextStyle(
-                              fontStyle: FontStyle.italic,
-                              color: MyTheme().errorColor())),
-                      const TextSpan(
-                          text: "Look for fields with an asterisk ("),
-                      TextSpan(
-                          text: "*",
-                          style: TextStyle(color: MyTheme().errorColor())),
-                      const TextSpan(
-                          text: ") next to them, as these are mandatory."),
-                    ],
                   ),
                 ),
-              ),
+                const SizedBox(height: 10),
-            ],
+                Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 25.0),
+                  child: RichText(
+                    text: TextSpan(
+                      style: TextStyle(
+                        color: MzanziInnovationHub.of(context)!
+                            .theme
+                            .secondaryColor(),
+                        fontSize: 15.0,
+                        fontWeight: FontWeight.bold,
+                      ),
+                      children: <TextSpan>[
+                        TextSpan(
+                            text: "Here's a quick tip: ",
+                            style: TextStyle(
+                                fontStyle: FontStyle.italic,
+                                color: MzanziInnovationHub.of(context)!
+                                    .theme
+                                    .errorColor())),
+                        const TextSpan(
+                            text: "Look for fields with an asterisk ("),
+                        TextSpan(
+                            text: "*",
+                            style: TextStyle(
+                                color: MzanziInnovationHub.of(context)!
+                                    .theme
+                                    .errorColor())),
+                        const TextSpan(
+                            text: ") next to them, as these are mandatory."),
+                      ],
+                    ),
+                  ),
+                ),
+              ],
+            ),
           ),
         ),
         Positioned(
@@ -98,7 +114,7 @@ class _MyErrorMessageState extends State<MyErrorMessage> {
             },
             icon: Icon(
               Icons.close,
-              color: MyTheme().errorColor(),
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
               size: 35,
             ),
           ),
@@ -112,69 +128,79 @@ class _MyErrorMessageState extends State<MyErrorMessage> {
       children: [
         Container(
           padding: const EdgeInsets.all(10.0),
-          width: 500.0,
+          width: 500,
-          height: 450.0,
+          height: 450,
           decoration: BoxDecoration(
-            color: MyTheme().primaryColor(),
+            color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
             borderRadius: BorderRadius.circular(25.0),
-            border: Border.all(color: MyTheme().errorColor(), width: 5.0),
+            border: Border.all(
+                color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+                width: 5.0),
           ),
-          child: Column(
+          child: SingleChildScrollView(
-            mainAxisSize: MainAxisSize.min,
+            child: Column(
-            children: [
+              mainAxisSize: MainAxisSize.min,
-              Icon(
+              children: [
-                Icons.warning_amber_rounded,
+                Icon(
-                size: 100,
+                  Icons.warning_amber_rounded,
-                color: MyTheme().errorColor(),
+                  size: 100,
-              ),
+                  color: MzanziInnovationHub.of(context)!.theme.errorColor(),
-              SizedBox(height: 15),
-              Text(
-                "Uh oh! Login attempt unsuccessful.",
-                textAlign: TextAlign.center,
-                style: TextStyle(
-                  color: MyTheme().errorColor(),
-                  fontSize: 25.0,
-                  fontWeight: FontWeight.bold,
                 ),
-              ),
+                SizedBox(height: 15),
-              const SizedBox(height: 10),
+                Text(
-              Padding(
+                  "Uh oh! Login attempt unsuccessful.",
-                padding: EdgeInsets.symmetric(horizontal: 25.0),
+                  textAlign: TextAlign.center,
-                child: Text(
-                  "The email address or password you entered doesn't seem to match our records. Please double-check your information and try again.",
                   style: TextStyle(
-                    color: MyTheme().secondaryColor(),
+                    color: MzanziInnovationHub.of(context)!.theme.errorColor(),
-                    fontSize: 15.0,
+                    fontSize: 25.0,
                     fontWeight: FontWeight.bold,
                   ),
                 ),
-              ),
+                const SizedBox(height: 10),
-              const SizedBox(height: 15),
+                Padding(
-              Padding(
+                  padding: EdgeInsets.symmetric(horizontal: 25.0),
-                padding: EdgeInsets.symmetric(horizontal: 25.0),
+                  child: Text(
-                child: Text(
+                    "The email address or password you entered doesn't seem to match our records. Please double-check your information and try again.",
-                  "Here are some things to keep in mind:",
+                    style: TextStyle(
-                  style: TextStyle(
+                      color: MzanziInnovationHub.of(context)!
-                    color: MyTheme().secondaryColor(),
+                          .theme
-                    fontSize: 20.0,
+                          .secondaryColor(),
-                    fontWeight: FontWeight.bold,
+                      fontSize: 15.0,
+                      fontWeight: FontWeight.bold,
+                    ),
                   ),
                 ),
-              ),
+                const SizedBox(height: 15),
-              const SizedBox(height: 10),
+                Padding(
-              Padding(
+                  padding: EdgeInsets.symmetric(horizontal: 25.0),
-                padding: EdgeInsets.symmetric(horizontal: 25.0),
+                  child: Text(
-                child: Text(
+                    "Here are some things to keep in mind:",
-                  "1) Are you sure you're using the correct email address associated with your account?\n2) Is your caps lock key on? Passwords are case-sensitive.\n3) If you've forgotten your password, no worries! Click on \"Forgot Password?\" to reset it.",
+                    style: TextStyle(
-                  textAlign: TextAlign.left,
+                      color: MzanziInnovationHub.of(context)!
-                  style: TextStyle(
+                          .theme
-                    color: MyTheme().secondaryColor(),
+                          .secondaryColor(),
-                    fontSize: 15.0,
+                      fontSize: 20.0,
-                    fontWeight: FontWeight.bold,
+                      fontWeight: FontWeight.bold,
+                    ),
                   ),
                 ),
-              ),
+                const SizedBox(height: 10),
-            ],
+                Padding(
+                  padding: EdgeInsets.symmetric(horizontal: 25.0),
+                  child: Text(
+                    "1) Are you sure you're using the correct email address associated with your account?\n2) Is your caps lock key on? Passwords are case-sensitive.\n3) If you've forgotten your password, no worries! Click on \"Forgot Password?\" to reset it.",
+                    textAlign: TextAlign.left,
+                    style: TextStyle(
+                      color: MzanziInnovationHub.of(context)!
+                          .theme
+                          .secondaryColor(),
+                      fontSize: 15.0,
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
+                ),
+              ],
+            ),
           ),
         ),
         Positioned(
@@ -188,7 +214,7 @@ class _MyErrorMessageState extends State<MyErrorMessage> {
             },
             icon: Icon(
               Icons.close,
-              color: MyTheme().errorColor(),
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
               size: 35,
             ),
           ),
@@ -202,69 +228,79 @@ class _MyErrorMessageState extends State<MyErrorMessage> {
       children: [
         Container(
           padding: const EdgeInsets.all(10.0),
-          width: 500.0,
+          width: 500,
-          height: 450.0,
+          height: 450,
           decoration: BoxDecoration(
-            color: MyTheme().primaryColor(),
+            color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
             borderRadius: BorderRadius.circular(25.0),
-            border: Border.all(color: MyTheme().errorColor(), width: 5.0),
+            border: Border.all(
+                color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+                width: 5.0),
           ),
-          child: Column(
+          child: SingleChildScrollView(
-            mainAxisSize: MainAxisSize.min,
+            child: Column(
-            children: [
+              mainAxisSize: MainAxisSize.min,
-              Icon(
+              children: [
-                Icons.warning_amber_rounded,
+                Icon(
-                size: 100,
+                  Icons.warning_amber_rounded,
-                color: MyTheme().errorColor(),
+                  size: 100,
-              ),
+                  color: MzanziInnovationHub.of(context)!.theme.errorColor(),
-              const SizedBox(height: 15),
-              Text(
-                "Internet Connection Lost!",
-                textAlign: TextAlign.center,
-                style: TextStyle(
-                  color: MyTheme().errorColor(),
-                  fontSize: 25.0,
-                  fontWeight: FontWeight.bold,
                 ),
-              ),
+                const SizedBox(height: 15),
-              const SizedBox(height: 10),
+                Text(
-              Padding(
+                  "Internet Connection Lost!",
-                padding: EdgeInsets.symmetric(horizontal: 25.0),
+                  textAlign: TextAlign.center,
-                child: Text(
-                  "We seem to be having some trouble connecting you to the internet. This could be due to a temporary outage or an issue with your device's connection.",
                   style: TextStyle(
-                    color: MyTheme().secondaryColor(),
+                    color: MzanziInnovationHub.of(context)!.theme.errorColor(),
-                    fontSize: 15.0,
+                    fontSize: 25.0,
                     fontWeight: FontWeight.bold,
                   ),
                 ),
-              ),
+                const SizedBox(height: 10),
-              const SizedBox(height: 15),
+                Padding(
-              Padding(
+                  padding: EdgeInsets.symmetric(horizontal: 25.0),
-                padding: EdgeInsets.symmetric(horizontal: 25.0),
+                  child: Text(
-                child: Text(
+                    "We seem to be having some trouble connecting you to the internet. This could be due to a temporary outage or an issue with your device's connection.",
-                  "Here are a few things you can try:",
+                    style: TextStyle(
-                  style: TextStyle(
+                      color: MzanziInnovationHub.of(context)!
-                    color: MyTheme().secondaryColor(),
+                          .theme
-                    fontSize: 20.0,
+                          .secondaryColor(),
-                    fontWeight: FontWeight.bold,
+                      fontSize: 15.0,
+                      fontWeight: FontWeight.bold,
+                    ),
                   ),
                 ),
-              ),
+                const SizedBox(height: 15),
-              const SizedBox(height: 10),
+                Padding(
-              Padding(
+                  padding: EdgeInsets.symmetric(horizontal: 25.0),
-                padding: EdgeInsets.symmetric(horizontal: 25.0),
+                  child: Text(
-                child: Text(
+                    "Here are a few things you can try:",
-                  "1) Check your Wi-Fi signal strength or try connecting to a different network.\n2) Restart your device (computer, phone, etc.) and your router/modem.\n3) If you're using cellular data, ensure you have a strong signal and haven't reached your data limit.",
+                    style: TextStyle(
-                  textAlign: TextAlign.left,
+                      color: MzanziInnovationHub.of(context)!
-                  style: TextStyle(
+                          .theme
-                    color: MyTheme().secondaryColor(),
+                          .secondaryColor(),
-                    fontSize: 15.0,
+                      fontSize: 20.0,
-                    fontWeight: FontWeight.bold,
+                      fontWeight: FontWeight.bold,
+                    ),
                   ),
                 ),
-              ),
+                const SizedBox(height: 10),
-            ],
+                Padding(
+                  padding: EdgeInsets.symmetric(horizontal: 25.0),
+                  child: Text(
+                    "1) Check your Wi-Fi signal strength or try connecting to a different network.\n2) Restart your device (computer, phone, etc.) and your router/modem.\n3) If you're using cellular data, ensure you have a strong signal and haven't reached your data limit.",
+                    textAlign: TextAlign.left,
+                    style: TextStyle(
+                      color: MzanziInnovationHub.of(context)!
+                          .theme
+                          .secondaryColor(),
+                      fontSize: 15.0,
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
+                ),
+              ],
+            ),
           ),
         ),
         Positioned(
@@ -278,7 +314,7 @@ class _MyErrorMessageState extends State<MyErrorMessage> {
             },
             icon: Icon(
               Icons.close,
-              color: MyTheme().errorColor(),
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
               size: 35,
             ),
           ),
@@ -291,16 +327,31 @@ class _MyErrorMessageState extends State<MyErrorMessage> {
     return messageTypes[type];
   }
 
-  @override
+  // void initialiseSizes() {
-  void initState() {
+
-    setInputError();
+  // }
-    setinvalidCredError();
+
-    setInternetError();
+  // @override
-    super.initState();
+  // void initState() {
-  }
+  //   size = MediaQuery.of(context).size;
+  //   setInputError();
+  //   setinvalidCredError();
+  //   setInternetError();
+  //   //initialiseSizes();
+  //   super.initState();
+  // }
 
   @override
   Widget build(BuildContext context) {
+    size = MediaQuery.of(context).size;
+    setInputError();
+    setinvalidCredError();
+    setInternetError();
+    //print(size);
+    // setState(() {
+    //   width = size.width;
+    //   height = size.height;
+    // });
     return Dialog(child: getErrorMessage(widget.errorType));
   }
 }

Frontend/patient_manager/lib/components/myMLTextInput.dart

@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:patient_manager/theme/mihTheme.dart';
+import 'package:patient_manager/main.dart';
 
 class MyMLTextField extends StatefulWidget {
   final controller;
@@ -58,18 +58,22 @@ class _MyMLTextFieldState extends State<MyMLTextField> {
         children: [
           Text(
             "*",
-            style: TextStyle(color: MyTheme().errorColor()),
+            style: TextStyle(
+                color: MzanziInnovationHub.of(context)!.theme.errorColor()),
           ),
           const SizedBox(
             width: 8.0,
           ),
           Text(widget.hintText,
-              style: TextStyle(color: MyTheme().secondaryColor())),
+              style: TextStyle(
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor())),
         ],
       );
     } else {
       return Text(widget.hintText,
-          style: TextStyle(color: MyTheme().secondaryColor()));
+          style: TextStyle(
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()));
     }
   }
 
@@ -84,7 +88,8 @@ class _MyMLTextFieldState extends State<MyMLTextField> {
     return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 25.0),
       child: TextField(
-        style: TextStyle(color: MyTheme().secondaryColor()),
+        style: TextStyle(
+            color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
         textAlign: TextAlign.start,
         textAlignVertical: TextAlignVertical.top,
         expands: true,
@@ -100,33 +105,36 @@ class _MyMLTextFieldState extends State<MyMLTextField> {
           label: setRequiredText(),
           errorText: _errorText,
           errorStyle: TextStyle(
-              color: MyTheme().errorColor(), fontWeight: FontWeight.bold),
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
-          labelStyle: TextStyle(color: MyTheme().secondaryColor()),
+              fontWeight: FontWeight.bold),
+          labelStyle: TextStyle(
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
           alignLabelWithHint: true,
-          fillColor: MyTheme().primaryColor(),
+          fillColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
           filled: true,
           //hintText: hintText,
           //hintStyle: TextStyle(color: Colors.blueGrey[400]),
           enabledBorder: OutlineInputBorder(
             borderSide: BorderSide(
-              color: MyTheme().secondaryColor(),
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
               width: 2.0,
             ),
           ),
           focusedErrorBorder: OutlineInputBorder(
             borderSide: BorderSide(
-              color: MyTheme().errorColor(),
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
               width: 2.0,
             ),
           ),
           errorBorder: OutlineInputBorder(
             borderSide: BorderSide(
-              color: MyTheme().errorColor(),
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
               width: 2.0,
             ),
           ),
           focusedBorder: OutlineInputBorder(
-            borderSide: BorderSide(color: MyTheme().secondaryColor()),
+            borderSide: BorderSide(
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
           ),
         ),
       ),

Frontend/patient_manager/lib/components/myPassInput.dart

@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:patient_manager/theme/mihTheme.dart';
+import 'package:patient_manager/main.dart';
 
 class MyPassField extends StatefulWidget {
   final controller;
@@ -54,18 +54,22 @@ class _MyPassFieldState extends State<MyPassField> {
         children: [
           Text(
             "*",
-            style: TextStyle(color: MyTheme().errorColor()),
+            style: TextStyle(
+                color: MzanziInnovationHub.of(context)!.theme.errorColor()),
           ),
           const SizedBox(
             width: 8.0,
           ),
           Text(widget.hintText,
-              style: TextStyle(color: MyTheme().secondaryColor())),
+              style: TextStyle(
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor())),
         ],
       );
     } else {
       return Text(widget.hintText,
-          style: TextStyle(color: MyTheme().secondaryColor()));
+          style: TextStyle(
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()));
     }
   }
 
@@ -87,42 +91,45 @@ class _MyPassFieldState extends State<MyPassField> {
       padding: const EdgeInsets.symmetric(horizontal: 25.0),
       child: TextField(
         controller: widget.controller,
-        style: TextStyle(color: MyTheme().secondaryColor()),
+        style: TextStyle(
+            color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
         obscureText: _obscured,
         focusNode: textFieldFocusNode,
         onChanged: (_) => setState(() {
           startup = false;
         }),
         decoration: InputDecoration(
-          fillColor: MyTheme().primaryColor(),
+          fillColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
           filled: true,
           label: setRequiredText(),
           //labelStyle: const TextStyle(color: Colors.blueAccent),
           errorText: _errorText,
           errorStyle: TextStyle(
-              color: MyTheme().errorColor(), fontWeight: FontWeight.bold),
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+              fontWeight: FontWeight.bold),
           //hintText: widget.hintText,
           //hintStyle: TextStyle(color: Colors.blueGrey[400]),
           enabledBorder: OutlineInputBorder(
             borderSide: BorderSide(
-              color: MyTheme().secondaryColor(),
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
               width: 2.0,
             ),
           ),
           focusedErrorBorder: OutlineInputBorder(
             borderSide: BorderSide(
-              color: MyTheme().errorColor(),
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
               width: 2.0,
             ),
           ),
           errorBorder: OutlineInputBorder(
             borderSide: BorderSide(
-              color: MyTheme().errorColor(),
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
               width: 2.0,
             ),
           ),
           focusedBorder: OutlineInputBorder(
-            borderSide: BorderSide(color: MyTheme().secondaryColor()),
+            borderSide: BorderSide(
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
           ),
           suffixIcon: Padding(
             padding: const EdgeInsets.fromLTRB(0, 0, 4, 0),
@@ -133,7 +140,7 @@ class _MyPassFieldState extends State<MyPassField> {
                     ? Icons.visibility_rounded
                     : Icons.visibility_off_rounded,
                 size: 24,
-                color: MyTheme().secondaryColor(),
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
               ),
             ),
           ),

Frontend/patient_manager/lib/components/mySearchInput.dart

@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:patient_manager/theme/mihTheme.dart';
+import 'package:patient_manager/main.dart';
 
 class MySearchField extends StatefulWidget {
   final TextEditingController controller;
@@ -62,7 +62,8 @@ class _MySearchFieldState extends State<MySearchField> {
         children: [
           Text(
             "*",
-            style: TextStyle(color: MyTheme().errorColor()),
+            style: TextStyle(
+                color: MzanziInnovationHub.of(context)!.theme.errorColor()),
           ),
           const SizedBox(
             width: 8.0,
@@ -70,14 +71,15 @@ class _MySearchFieldState extends State<MySearchField> {
           Text(
             widget.hintText,
             style: TextStyle(
-              color: MyTheme().secondaryColor(),
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
             ),
           ),
         ],
       );
     } else {
       return Text(widget.hintText,
-          style: TextStyle(color: MyTheme().secondaryColor()));
+          style: TextStyle(
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()));
     }
   }
 
@@ -92,19 +94,20 @@ class _MySearchFieldState extends State<MySearchField> {
     return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 25.0),
       child: TextField(
-        style: TextStyle(color: MyTheme().secondaryColor()),
+        style: TextStyle(
+            color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
         onChanged: widget.onChanged,
         controller: widget.controller,
-        //style: TextStyle(color: MyTheme().secondaryColor()),
+        //style: TextStyle(color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
         readOnly: makeEditable(),
         focusNode: _focus,
         obscureText: false,
         decoration: InputDecoration(
-          fillColor: MyTheme().primaryColor(),
+          fillColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
           prefixIcon: IconButton(
             icon: Icon(
               Icons.search,
-              color: MyTheme().secondaryColor(),
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
             ),
             onPressed: () {
               setState(() {
@@ -119,27 +122,29 @@ class _MySearchFieldState extends State<MySearchField> {
           label: setRequiredText(),
           errorText: _errorText,
           errorStyle: TextStyle(
-              color: MyTheme().errorColor(), fontWeight: FontWeight.bold),
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+              fontWeight: FontWeight.bold),
           enabledBorder: OutlineInputBorder(
             borderSide: BorderSide(
-              color: MyTheme().secondaryColor(),
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
               width: 2.0,
             ),
           ),
           focusedErrorBorder: OutlineInputBorder(
             borderSide: BorderSide(
-              color: MyTheme().errorColor(),
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
               width: 2.0,
             ),
           ),
           errorBorder: OutlineInputBorder(
             borderSide: BorderSide(
-              color: MyTheme().errorColor(),
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
               width: 2.0,
             ),
           ),
           focusedBorder: OutlineInputBorder(
-            borderSide: BorderSide(color: MyTheme().secondaryColor()),
+            borderSide: BorderSide(
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
           ),
         ),
       ),

Frontend/patient_manager/lib/components/mySuccessMessage.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:patient_manager/components/mybutton.dart';
-import 'package:patient_manager/theme/mihTheme.dart';
+import 'package:patient_manager/main.dart';
 
 class MySuccessMessage extends StatefulWidget {
   final String successType;
@@ -27,9 +27,11 @@ class _MySuccessMessageState extends State<MySuccessMessage> {
           width: 500.0,
           // height: 375.0,
           decoration: BoxDecoration(
-            color: MyTheme().primaryColor(),
+            color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
             borderRadius: BorderRadius.circular(25.0),
-            border: Border.all(color: MyTheme().successColor(), width: 5.0),
+            border: Border.all(
+                color: MzanziInnovationHub.of(context)!.theme.successColor(),
+                width: 5.0),
           ),
           child: Column(
             mainAxisSize: MainAxisSize.min,
@@ -37,14 +39,14 @@ class _MySuccessMessageState extends State<MySuccessMessage> {
               Icon(
                 Icons.check_circle_outline_rounded,
                 size: 100,
-                color: MyTheme().successColor(),
+                color: MzanziInnovationHub.of(context)!.theme.successColor(),
               ),
               const SizedBox(height: 15),
               Text(
                 "Success!",
                 textAlign: TextAlign.center,
                 style: TextStyle(
-                  color: MyTheme().successColor(),
+                  color: MzanziInnovationHub.of(context)!.theme.successColor(),
                   fontSize: 25.0,
                   fontWeight: FontWeight.bold,
                 ),
@@ -55,7 +57,8 @@ class _MySuccessMessageState extends State<MySuccessMessage> {
                 child: Text(
                   message,
                   style: TextStyle(
-                    color: MyTheme().secondaryColor(),
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
                     fontSize: 15.0,
                     fontWeight: FontWeight.bold,
                   ),
@@ -70,8 +73,10 @@ class _MySuccessMessageState extends State<MySuccessMessage> {
                     Navigator.pop(context);
                   },
                   buttonText: "Dismiss",
-                  buttonColor: MyTheme().successColor(),
+                  buttonColor:
-                  textColor: MyTheme().primaryColor(),
+                      MzanziInnovationHub.of(context)!.theme.successColor(),
+                  textColor:
+                      MzanziInnovationHub.of(context)!.theme.primaryColor(),
                 ),
               ),
             ],

Frontend/patient_manager/lib/components/myTextInput.dart

@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:patient_manager/theme/mihTheme.dart';
+import 'package:patient_manager/main.dart';
 
 class MyTextField extends StatefulWidget {
   final controller;
@@ -58,18 +58,22 @@ class _MyTextFieldState extends State<MyTextField> {
         children: [
           Text(
             "*",
-            style: TextStyle(color: MyTheme().errorColor()),
+            style: TextStyle(
+                color: MzanziInnovationHub.of(context)!.theme.errorColor()),
           ),
           const SizedBox(
             width: 8.0,
           ),
           Text(widget.hintText,
-              style: TextStyle(color: MyTheme().secondaryColor())),
+              style: TextStyle(
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor())),
         ],
       );
     } else {
       return Text(widget.hintText,
-          style: TextStyle(color: MyTheme().secondaryColor()));
+          style: TextStyle(
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()));
     }
   }
 
@@ -84,7 +88,8 @@ class _MyTextFieldState extends State<MyTextField> {
     return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 25.0),
       child: TextField(
-        style: TextStyle(color: MyTheme().secondaryColor()),
+        style: TextStyle(
+            color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
         controller: widget.controller,
         focusNode: _focus,
         readOnly: makeEditable(),
@@ -94,35 +99,37 @@ class _MyTextFieldState extends State<MyTextField> {
         }),
         decoration: InputDecoration(
           label: setRequiredText(),
-          //labelStyle: TextStyle(color: MyTheme().primaryColor()),
+          //labelStyle: TextStyle(color: MzanziInnovationHub.of(context)!.theme.primaryColor()),
-          fillColor: MyTheme().primaryColor(),
+          fillColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
           filled: true,
           errorText: _errorText,
           errorStyle: TextStyle(
-              color: MyTheme().errorColor(), fontWeight: FontWeight.bold),
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+              fontWeight: FontWeight.bold),
           //errorBorder: const InputBorder(),
           //hintText: hintText,
           //hintStyle: TextStyle(color: Colors.blueGrey[400]),
           enabledBorder: OutlineInputBorder(
             borderSide: BorderSide(
-              color: MyTheme().secondaryColor(),
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
               width: 2.0,
             ),
           ),
           focusedErrorBorder: OutlineInputBorder(
             borderSide: BorderSide(
-              color: MyTheme().errorColor(),
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
               width: 2.0,
             ),
           ),
           errorBorder: OutlineInputBorder(
             borderSide: BorderSide(
-              color: MyTheme().errorColor(),
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
               width: 2.0,
             ),
           ),
           focusedBorder: OutlineInputBorder(
-            borderSide: BorderSide(color: MyTheme().secondaryColor()),
+            borderSide: BorderSide(
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
           ),
         ),
       ),

Frontend/patient_manager/lib/components/patManAppDrawer.dart

@@ -4,7 +4,6 @@ import 'package:flutter/material.dart';
 import 'package:patient_manager/main.dart';
 import 'package:http/http.dart' as http;
 import 'package:patient_manager/objects/appUser.dart';
-import 'package:patient_manager/theme/mihTheme.dart';
 
 class PatManAppDrawer extends StatefulWidget {
   final String userEmail;
@@ -45,146 +44,199 @@ class _PatManAppDrawerState extends State<PatManAppDrawer> {
       future: signedInUser,
       builder: (BuildContext context, AsyncSnapshot<AppUser> snapshot) {
         return Drawer(
-          backgroundColor: MyTheme().primaryColor(),
+          //backgroundColor:  MzanziInnovationHub.of(context)!.theme.primaryColor(),
-          child: ListView(
+          child: Stack(children: [
-            padding: EdgeInsets.zero,
+            ListView(
-            children: [
+              padding: EdgeInsets.zero,
-              DrawerHeader(
+              children: [
-                decoration: BoxDecoration(
+                DrawerHeader(
-                  color: MyTheme().secondaryColor(),
+                  decoration: BoxDecoration(
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  ),
+                  child: SizedBox(
+                    height: 400,
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        Text(
+                          "Signed Is As:",
+                          style: TextStyle(
+                              fontWeight: FontWeight.bold,
+                              fontSize: 20.0,
+                              color: MzanziInnovationHub.of(context)!
+                                  .theme
+                                  .primaryColor()),
+                        ),
+                        const SizedBox(
+                          height: 50.0,
+                        ),
+                        Row(
+                          mainAxisSize: MainAxisSize.max,
+                          children: [
+                            Text(
+                              "Name: ",
+                              style: TextStyle(
+                                fontWeight: FontWeight.bold,
+                                color: MzanziInnovationHub.of(context)!
+                                    .theme
+                                    .primaryColor(),
+                              ),
+                            ),
+                            const SizedBox(width: 15),
+                            Text(
+                              "${snapshot.data?.fname} ${snapshot.data?.lname}",
+                              style: TextStyle(
+                                fontWeight: FontWeight.bold,
+                                color: MzanziInnovationHub.of(context)!
+                                    .theme
+                                    .primaryColor(),
+                              ),
+                            ),
+                          ],
+                        ),
+                        Row(
+                          mainAxisSize: MainAxisSize.max,
+                          children: [
+                            Text(
+                              "Email: ",
+                              style: TextStyle(
+                                fontWeight: FontWeight.bold,
+                                color: MzanziInnovationHub.of(context)!
+                                    .theme
+                                    .primaryColor(),
+                              ),
+                            ),
+                            const SizedBox(width: 16),
+                            Text(
+                              "${snapshot.data?.email}",
+                              style: TextStyle(
+                                fontWeight: FontWeight.bold,
+                                color: MzanziInnovationHub.of(context)!
+                                    .theme
+                                    .primaryColor(),
+                              ),
+                            ),
+                          ],
+                        ),
+                      ],
+                    ),
+                  ),
                 ),
-                child: SizedBox(
+                ListTile(
-                  height: 400,
+                  title: Row(
-                  child: Column(
+                    mainAxisSize: MainAxisSize.max,
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    mainAxisSize: MainAxisSize.min,
                     children: [
+                      Icon(
+                        Icons.home_outlined,
+                        color: MzanziInnovationHub.of(context)!
+                            .theme
+                            .secondaryColor(),
+                      ),
+                      const SizedBox(width: 25.0),
                       Text(
-                        "Signed Is As:",
+                        "Home",
                         style: TextStyle(
-                            fontWeight: FontWeight.bold,
+                          //fontWeight: FontWeight.bold,
-                            fontSize: 20.0,
+                          color: MzanziInnovationHub.of(context)!
-                            color: MyTheme().primaryColor()),
+                              .theme
-                      ),
+                              .secondaryColor(),
-                      const SizedBox(
+                        ),
-                        height: 50.0,
-                      ),
-                      Row(
-                        mainAxisSize: MainAxisSize.max,
-                        children: [
-                          Text(
-                            "Name: ",
-                            style: TextStyle(
-                              fontWeight: FontWeight.bold,
-                              color: MyTheme().primaryColor(),
-                            ),
-                          ),
-                          const SizedBox(width: 15),
-                          Text(
-                            "${snapshot.data?.fname} ${snapshot.data?.lname}",
-                            style: TextStyle(
-                              fontWeight: FontWeight.bold,
-                              color: MyTheme().primaryColor(),
-                            ),
-                          ),
-                        ],
-                      ),
-                      Row(
-                        mainAxisSize: MainAxisSize.max,
-                        children: [
-                          Text(
-                            "Email: ",
-                            style: TextStyle(
-                              fontWeight: FontWeight.bold,
-                              color: MyTheme().primaryColor(),
-                            ),
-                          ),
-                          const SizedBox(width: 16),
-                          Text(
-                            "${snapshot.data?.email}",
-                            style: TextStyle(
-                              fontWeight: FontWeight.bold,
-                              color: MyTheme().primaryColor(),
-                            ),
-                          ),
-                        ],
                       ),
                     ],
                   ),
+                  onTap: () {
+                    Navigator.of(context).pushNamed('/home');
+                  },
+                ),
+                ListTile(
+                  title: Row(
+                    mainAxisSize: MainAxisSize.max,
+                    children: [
+                      Icon(
+                        Icons.perm_identity,
+                        color: MzanziInnovationHub.of(context)!
+                            .theme
+                            .secondaryColor(),
+                      ),
+                      const SizedBox(width: 25.0),
+                      Text(
+                        "Profile",
+                        style: TextStyle(
+                          //fontWeight: FontWeight.bold,
+                          color: MzanziInnovationHub.of(context)!
+                              .theme
+                              .secondaryColor(),
+                        ),
+                      ),
+                    ],
+                  ),
+                  onTap: () {
+                    //signedInUser = snapshot.data!;
+                    //print("PatManAppDrawer: ${signedInUser.runtimeType}");
+                    Navigator.of(context).pushNamed('/patient-manager/profile',
+                        arguments: snapshot.data);
+                  },
+                ),
+                ListTile(
+                  title: Row(
+                    mainAxisSize: MainAxisSize.max,
+                    children: [
+                      Icon(
+                        Icons.logout,
+                        color: MzanziInnovationHub.of(context)!
+                            .theme
+                            .secondaryColor(),
+                      ),
+                      const SizedBox(width: 25.0),
+                      Text(
+                        "Sign Out",
+                        style: TextStyle(
+                          //fontWeight: FontWeight.bold,
+                          color: MzanziInnovationHub.of(context)!
+                              .theme
+                              .secondaryColor(),
+                        ),
+                      ),
+                    ],
+                  ),
+                  onTap: () {
+                    client.auth.signOut();
+                    Navigator.of(context).pushNamed('/');
+                  },
+                )
+              ],
+            ),
+            Positioned(
+              top: 1,
+              right: 1,
+              width: 50,
+              height: 50,
+              child: IconButton(
+                onPressed: () {
+                  setState(() {
+                    if (MzanziInnovationHub.of(context)?.theme.mode == "Dark") {
+                      //darkm = !darkm;
+                      MzanziInnovationHub.of(context)!
+                          .changeTheme(ThemeMode.light);
+                      //print("Dark Mode: $darkm");
+                    } else {
+                      //darkm = !darkm;
+                      MzanziInnovationHub.of(context)!
+                          .changeTheme(ThemeMode.dark);
+                      //print("Dark Mode: $darkm");
+                    }
+                  });
+                },
+                icon: Icon(
+                  Icons.light_mode,
+                  color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                  size: 35,
                 ),
               ),
-              ListTile(
+            ),
-                title: Row(
+          ]),
-                  mainAxisSize: MainAxisSize.max,
-                  children: [
-                    Icon(
-                      Icons.home_outlined,
-                      color: MyTheme().secondaryColor(),
-                    ),
-                    const SizedBox(width: 25.0),
-                    Text(
-                      "Home",
-                      style: TextStyle(
-                        //fontWeight: FontWeight.bold,
-                        color: MyTheme().secondaryColor(),
-                      ),
-                    ),
-                  ],
-                ),
-                onTap: () {
-                  Navigator.of(context).pushNamed('/home');
-                },
-              ),
-              ListTile(
-                title: Row(
-                  mainAxisSize: MainAxisSize.max,
-                  children: [
-                    Icon(
-                      Icons.perm_identity,
-                      color: MyTheme().secondaryColor(),
-                    ),
-                    const SizedBox(width: 25.0),
-                    Text(
-                      "Profile",
-                      style: TextStyle(
-                        //fontWeight: FontWeight.bold,
-                        color: MyTheme().secondaryColor(),
-                      ),
-                    ),
-                  ],
-                ),
-                onTap: () {
-                  //signedInUser = snapshot.data!;
-                  //print("PatManAppDrawer: ${signedInUser.runtimeType}");
-                  Navigator.of(context).pushNamed('/patient-manager/profile',
-                      arguments: snapshot.data);
-                },
-              ),
-              ListTile(
-                title: Row(
-                  mainAxisSize: MainAxisSize.max,
-                  children: [
-                    Icon(
-                      Icons.logout,
-                      color: MyTheme().secondaryColor(),
-                    ),
-                    const SizedBox(width: 25.0),
-                    Text(
-                      "Sign Out",
-                      style: TextStyle(
-                        //fontWeight: FontWeight.bold,
-                        color: MyTheme().secondaryColor(),
-                      ),
-                    ),
-                  ],
-                ),
-                onTap: () {
-                  client.auth.signOut();
-                  Navigator.of(context).pushNamed('/');
-                },
-              )
-            ],
-          ),
         );
       },
     );

Frontend/patient_manager/lib/components/patientDetails.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:patient_manager/components/myTextInput.dart';
+import 'package:patient_manager/main.dart';
 import 'package:patient_manager/objects/patients.dart';
-import 'package:patient_manager/theme/mihTheme.dart';
 
 class PatientDetails extends StatefulWidget {
   final Patient selectedPatient;
@@ -62,9 +62,11 @@ class _PatientDetailsState extends State<PatientDetails> {
     return Container(
       padding: const EdgeInsets.only(left: 20, right: 20, bottom: 10),
       decoration: BoxDecoration(
-        color: MyTheme().primaryColor(),
+        color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
         borderRadius: BorderRadius.circular(25.0),
-        border: Border.all(color: MyTheme().secondaryColor(), width: 3.0),
+        border: Border.all(
+            color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+            width: 3.0),
       ),
       //constraints: const BoxConstraints.expand(height: 250.0),
       child: Column(
@@ -79,13 +81,14 @@ class _PatientDetailsState extends State<PatientDetails> {
                 style: TextStyle(
                   fontSize: 25,
                   fontWeight: FontWeight.bold,
-                  color: MyTheme().secondaryColor(),
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
                 ),
               ),
               IconButton(
                 icon: const Icon(Icons.edit),
                 alignment: Alignment.topRight,
-                color: MyTheme().secondaryColor(),
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
                 onPressed: () {
                   Navigator.of(context).pushNamed(
                       '/patient-manager/patient/edit',
@@ -94,7 +97,8 @@ class _PatientDetailsState extends State<PatientDetails> {
               )
             ],
           ),
-          Divider(color: MyTheme().secondaryColor()),
+          Divider(
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
           const SizedBox(height: 10),
           Column(
             children: [
@@ -158,10 +162,11 @@ class _PatientDetailsState extends State<PatientDetails> {
             style: TextStyle(
               fontSize: 25,
               fontWeight: FontWeight.bold,
-              color: MyTheme().secondaryColor(),
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
             ),
           ),
-          Divider(color: MyTheme().secondaryColor()),
+          Divider(
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
           const SizedBox(height: 10),
           Column(
             children: [

Frontend/patient_manager/lib/components/patientFiles.dart

@@ -15,7 +15,6 @@ import 'package:patient_manager/objects/appUser.dart';
 import 'package:patient_manager/objects/files.dart';
 
 import 'package:http/http.dart' as http;
-import 'package:patient_manager/theme/mihTheme.dart';
 
 import '../objects/patients.dart';
 
@@ -241,10 +240,12 @@ class _PatientFilesState extends State<PatientFiles> {
               width: 700.0,
               //height: 475.0,
               decoration: BoxDecoration(
-                color: MyTheme().primaryColor(),
+                color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
                 borderRadius: BorderRadius.circular(25.0),
-                border:
+                border: Border.all(
-                    Border.all(color: MyTheme().secondaryColor(), width: 5.0),
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    width: 5.0),
               ),
               child: Column(
                 mainAxisSize: MainAxisSize.min,
@@ -253,7 +254,9 @@ class _PatientFilesState extends State<PatientFiles> {
                     "Create Medical Certificate",
                     textAlign: TextAlign.center,
                     style: TextStyle(
-                      color: MyTheme().secondaryColor(),
+                      color: MzanziInnovationHub.of(context)!
+                          .theme
+                          .secondaryColor(),
                       fontSize: 35.0,
                       fontWeight: FontWeight.bold,
                     ),
@@ -269,8 +272,11 @@ class _PatientFilesState extends State<PatientFiles> {
                     height: 100,
                     child: MyButton(
                       buttonText: "Generate",
-                      buttonColor: MyTheme().secondaryColor(),
+                      buttonColor: MzanziInnovationHub.of(context)!
-                      textColor: MyTheme().primaryColor(),
+                          .theme
+                          .secondaryColor(),
+                      textColor:
+                          MzanziInnovationHub.of(context)!.theme.primaryColor(),
                       onTap: () {
                         if (isMedCertFieldsFilled()) {
                           generateMedCert();
@@ -301,7 +307,7 @@ class _PatientFilesState extends State<PatientFiles> {
                 },
                 icon: Icon(
                   Icons.close,
-                  color: MyTheme().errorColor(),
+                  color: MzanziInnovationHub.of(context)!.theme.errorColor(),
                   size: 35,
                 ),
               ),
@@ -324,10 +330,12 @@ class _PatientFilesState extends State<PatientFiles> {
               width: 900.0,
               //height: 475.0,
               decoration: BoxDecoration(
-                color: MyTheme().primaryColor(),
+                color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
                 borderRadius: BorderRadius.circular(25.0),
-                border:
+                border: Border.all(
-                    Border.all(color: MyTheme().secondaryColor(), width: 5.0),
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    width: 5.0),
               ),
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.center,
@@ -338,7 +346,9 @@ class _PatientFilesState extends State<PatientFiles> {
                     "Create Precrition",
                     textAlign: TextAlign.center,
                     style: TextStyle(
-                      color: MyTheme().secondaryColor(),
+                      color: MzanziInnovationHub.of(context)!
+                          .theme
+                          .secondaryColor(),
                       fontSize: 35.0,
                       fontWeight: FontWeight.bold,
                     ),
@@ -373,7 +383,7 @@ class _PatientFilesState extends State<PatientFiles> {
                 },
                 icon: Icon(
                   Icons.close,
-                  color: MyTheme().errorColor(),
+                  color: MzanziInnovationHub.of(context)!.theme.errorColor(),
                   size: 35,
                 ),
               ),
@@ -396,10 +406,12 @@ class _PatientFilesState extends State<PatientFiles> {
               width: 700.0,
               //height: 475.0,
               decoration: BoxDecoration(
-                color: MyTheme().primaryColor(),
+                color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
                 borderRadius: BorderRadius.circular(25.0),
-                border:
+                border: Border.all(
-                    Border.all(color: MyTheme().secondaryColor(), width: 5.0),
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    width: 5.0),
               ),
               child: Column(
                 mainAxisSize: MainAxisSize.min,
@@ -408,7 +420,9 @@ class _PatientFilesState extends State<PatientFiles> {
                     "Upload File",
                     textAlign: TextAlign.center,
                     style: TextStyle(
-                      color: MyTheme().secondaryColor(),
+                      color: MzanziInnovationHub.of(context)!
+                          .theme
+                          .secondaryColor(),
                       fontSize: 35.0,
                       fontWeight: FontWeight.bold,
                     ),
@@ -418,8 +432,11 @@ class _PatientFilesState extends State<PatientFiles> {
                     width: 700,
                     child: MyButton(
                       buttonText: "Select File",
-                      buttonColor: MyTheme().secondaryColor(),
+                      buttonColor: MzanziInnovationHub.of(context)!
-                      textColor: MyTheme().primaryColor(),
+                          .theme
+                          .secondaryColor(),
+                      textColor:
+                          MzanziInnovationHub.of(context)!.theme.primaryColor(),
                       onTap: () async {
                         FilePickerResult? result =
                             await FilePicker.platform.pickFiles(
@@ -449,8 +466,11 @@ class _PatientFilesState extends State<PatientFiles> {
                     height: 100,
                     child: MyButton(
                       buttonText: "Add File",
-                      buttonColor: MyTheme().secondaryColor(),
+                      buttonColor: MzanziInnovationHub.of(context)!
-                      textColor: MyTheme().primaryColor(),
+                          .theme
+                          .secondaryColor(),
+                      textColor:
+                          MzanziInnovationHub.of(context)!.theme.primaryColor(),
                       onTap: () {
                         if (isFileFieldsFilled()) {
                           uploadSelectedFile(selected);
@@ -481,7 +501,7 @@ class _PatientFilesState extends State<PatientFiles> {
                 },
                 icon: Icon(
                   Icons.close,
-                  color: MyTheme().errorColor(),
+                  color: MzanziInnovationHub.of(context)!.theme.errorColor(),
                   size: 35,
                 ),
               ),
@@ -541,10 +561,12 @@ class _PatientFilesState extends State<PatientFiles> {
             child: Container(
               //height: 300.0,
               decoration: BoxDecoration(
-                color: MyTheme().primaryColor(),
+                color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
                 borderRadius: BorderRadius.circular(25.0),
-                border:
+                border: Border.all(
-                    Border.all(color: MyTheme().secondaryColor(), width: 3.0),
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    width: 3.0),
               ),
               child: Padding(
                 padding: const EdgeInsets.only(top: 5.0),
@@ -558,7 +580,9 @@ class _PatientFilesState extends State<PatientFiles> {
                         style: TextStyle(
                           fontSize: 25,
                           fontWeight: FontWeight.bold,
-                          color: MyTheme().secondaryColor(),
+                          color: MzanziInnovationHub.of(context)!
+                              .theme
+                              .secondaryColor(),
                         ),
                       ),
                       IconButton(
@@ -567,7 +591,9 @@ class _PatientFilesState extends State<PatientFiles> {
                         },
                         icon: Icon(
                           Icons.sick_outlined,
-                          color: MyTheme().secondaryColor(),
+                          color: MzanziInnovationHub.of(context)!
+                              .theme
+                              .secondaryColor(),
                         ),
                       ),
                       IconButton(
@@ -576,7 +602,9 @@ class _PatientFilesState extends State<PatientFiles> {
                         },
                         icon: Icon(
                           Icons.medication_outlined,
-                          color: MyTheme().secondaryColor(),
+                          color: MzanziInnovationHub.of(context)!
+                              .theme
+                              .secondaryColor(),
                         ),
                       ),
                       IconButton(
@@ -585,14 +613,19 @@ class _PatientFilesState extends State<PatientFiles> {
                         },
                         icon: Icon(
                           Icons.add,
-                          color: MyTheme().secondaryColor(),
+                          color: MzanziInnovationHub.of(context)!
+                              .theme
+                              .secondaryColor(),
                         ),
                       )
                     ],
                   ),
                   Padding(
                     padding: const EdgeInsets.symmetric(horizontal: 20.0),
-                    child: Divider(color: MyTheme().secondaryColor()),
+                    child: Divider(
+                        color: MzanziInnovationHub.of(context)!
+                            .theme
+                            .secondaryColor()),
                   ),
                   const SizedBox(height: 10),
                   BuildFilesList(files: filesList),

Frontend/patient_manager/lib/components/patientNotes.dart

@@ -7,9 +7,9 @@ import 'package:patient_manager/components/myMLTextInput.dart';
 import 'package:patient_manager/components/mySuccessMessage.dart';
 import 'package:patient_manager/components/myTextInput.dart';
 import 'package:patient_manager/components/mybutton.dart';
+import 'package:patient_manager/main.dart';
 import 'package:patient_manager/objects/notes.dart';
 import 'package:http/http.dart' as http;
-import 'package:patient_manager/theme/mihTheme.dart';
 
 class PatientNotes extends StatefulWidget {
   final int patientIndex;
@@ -110,10 +110,12 @@ class _PatientNotesState extends State<PatientNotes> {
               width: 700.0,
               //height: 500.0,
               decoration: BoxDecoration(
-                color: MyTheme().primaryColor(),
+                color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
                 borderRadius: BorderRadius.circular(25.0),
-                border:
+                border: Border.all(
-                    Border.all(color: MyTheme().secondaryColor(), width: 5.0),
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    width: 5.0),
               ),
               child: Column(
                 //mainAxisSize: MainAxisSize.max,
@@ -122,7 +124,9 @@ class _PatientNotesState extends State<PatientNotes> {
                     "Add Note",
                     textAlign: TextAlign.center,
                     style: TextStyle(
-                      color: MyTheme().secondaryColor(),
+                      color: MzanziInnovationHub.of(context)!
+                          .theme
+                          .secondaryColor(),
                       fontSize: 35.0,
                       fontWeight: FontWeight.bold,
                     ),
@@ -165,8 +169,11 @@ class _PatientNotesState extends State<PatientNotes> {
                         }
                       },
                       buttonText: "Add Note",
-                      buttonColor: MyTheme().secondaryColor(),
+                      buttonColor: MzanziInnovationHub.of(context)!
-                      textColor: MyTheme().primaryColor(),
+                          .theme
+                          .secondaryColor(),
+                      textColor:
+                          MzanziInnovationHub.of(context)!.theme.primaryColor(),
                     ),
                   )
                 ],
@@ -185,7 +192,7 @@ class _PatientNotesState extends State<PatientNotes> {
                 },
                 icon: Icon(
                   Icons.close,
-                  color: MyTheme().errorColor(),
+                  color: MzanziInnovationHub.of(context)!.theme.errorColor(),
                   size: 35,
                 ),
               ),
@@ -224,10 +231,12 @@ class _PatientNotesState extends State<PatientNotes> {
             child: Container(
               //height: 300.0,
               decoration: BoxDecoration(
-                color: MyTheme().primaryColor(),
+                color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
                 borderRadius: BorderRadius.circular(25.0),
-                border:
+                border: Border.all(
-                    Border.all(color: MyTheme().secondaryColor(), width: 3.0),
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    width: 3.0),
               ),
               child: Padding(
                 padding: const EdgeInsets.only(top: 5.0),
@@ -241,20 +250,27 @@ class _PatientNotesState extends State<PatientNotes> {
                         style: TextStyle(
                             fontSize: 25,
                             fontWeight: FontWeight.bold,
-                            color: MyTheme().secondaryColor()),
+                            color: MzanziInnovationHub.of(context)!
+                                .theme
+                                .secondaryColor()),
                       ),
                       IconButton(
                         onPressed: () {
                           addNotePopUp();
                         },
-                        icon:
+                        icon: Icon(Icons.add,
-                            Icon(Icons.add, color: MyTheme().secondaryColor()),
+                            color: MzanziInnovationHub.of(context)!
+                                .theme
+                                .secondaryColor()),
                       )
                     ],
                   ),
                   Padding(
                     padding: const EdgeInsets.symmetric(horizontal: 20.0),
-                    child: Divider(color: MyTheme().secondaryColor()),
+                    child: Divider(
+                        color: MzanziInnovationHub.of(context)!
+                            .theme
+                            .secondaryColor()),
                   ),
                   const SizedBox(height: 10),
                   BuildNotesList(notes: notesList),

Frontend/patient_manager/lib/components/prescipInput.dart

@@ -4,7 +4,7 @@ import 'package:patient_manager/components/myDropdownInput.dart';
 import 'package:patient_manager/components/myErrorMessage.dart';
 import 'package:patient_manager/components/mySearchInput.dart';
 import 'package:patient_manager/components/mybutton.dart';
-import 'package:patient_manager/theme/mihTheme.dart';
+import 'package:patient_manager/main.dart';
 
 class PrescripInput extends StatefulWidget {
   final TextEditingController medicineController;
@@ -189,8 +189,9 @@ class _PrescripInputState extends State<PrescripInput> {
           width: 300,
           child: MyButton(
             buttonText: "Add",
-            buttonColor: MyTheme().secondaryColor(),
+            buttonColor:
-            textColor: MyTheme().primaryColor(),
+                MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+            textColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
             onTap: () {
               if (isFieldsFilled()) {
                 setState(() {
@@ -226,9 +227,11 @@ class _PrescripInputState extends State<PrescripInput> {
           width: 550,
           height: 400,
           decoration: BoxDecoration(
-            color: MyTheme().primaryColor(),
+            color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
             borderRadius: BorderRadius.circular(25.0),
-            border: Border.all(color: MyTheme().secondaryColor(), width: 3.0),
+            border: Border.all(
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                width: 3.0),
           ),
           child: ListView.separated(
             separatorBuilder: (BuildContext context, int index) {
@@ -241,20 +244,23 @@ class _PrescripInputState extends State<PrescripInput> {
                 title: Text(
                   getPerscTitle(index),
                   style: TextStyle(
-                    color: MyTheme().secondaryColor(),
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
                   ),
                 ),
                 subtitle: Text(
                   getPerscSubtitle(index),
                   style: TextStyle(
-                    color: MyTheme().secondaryColor(),
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
                   ),
                 ),
                 //onTap: () {},
                 trailing: IconButton(
                   icon: Icon(
                     Icons.delete_forever_outlined,
-                    color: MyTheme().primaryColor(),
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.primaryColor(),
                   ),
                   onPressed: () {
                     setState(() {
@@ -285,8 +291,8 @@ class _PrescripInputState extends State<PrescripInput> {
               // }
             },
             buttonText: "Generate",
-            buttonColor: MyTheme().successColor(),
+            buttonColor: MzanziInnovationHub.of(context)!.theme.successColor(),
-            textColor: MyTheme().primaryColor(),
+            textColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
           ),
         )
       ],

Frontend/patient_manager/lib/components/profileUserUpdate.dart

@@ -3,6 +3,7 @@ import 'package:patient_manager/components/myDropdownInput.dart';
 import 'package:patient_manager/components/myErrorMessage.dart';
 import 'package:patient_manager/components/myTextInput.dart';
 import 'package:patient_manager/components/mybutton.dart';
+import 'package:patient_manager/main.dart';
 import 'package:patient_manager/objects/appUser.dart';
 
 class ProfileUserUpdate extends StatefulWidget {
@@ -78,6 +79,10 @@ class _ProfileUserUpdateState extends State<ProfileUserUpdate> {
           width: 500.0,
           height: 100.0,
           child: MyButton(
+            buttonText: "Update",
+            buttonColor:
+                MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+            textColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
             onTap: () {
               if (isFieldsFilled()) {
               } else {
@@ -89,9 +94,6 @@ class _ProfileUserUpdateState extends State<ProfileUserUpdate> {
                 );
               }
             },
-            buttonText: "Update",
-            buttonColor: Colors.blueAccent,
-            textColor: Colors.white,
           ),
         ),
       ],

Frontend/patient_manager/lib/main.dart

@@ -15,14 +15,57 @@ void main() async {
 
 final client = Supabase.instance.client;
 
-class MzanziInnovationHub extends StatelessWidget {
+class MzanziInnovationHub extends StatefulWidget {
   const MzanziInnovationHub({super.key});
 
+  @override
+  State<MzanziInnovationHub> createState() => _MzanziInnovationHubState();
+
+  static _MzanziInnovationHubState? of(BuildContext context) =>
+      context.findAncestorStateOfType<_MzanziInnovationHubState>();
+}
+
+class _MzanziInnovationHubState extends State<MzanziInnovationHub> {
+  late ThemeMode _themeMode;
+  late MyTheme theme;
+
+  Color getPrimany() {
+    return theme.primaryColor();
+  }
+
+  void changeTheme(ThemeMode themeMode) {
+    setState(() {
+      _themeMode = themeMode;
+      //print(_themeMode);
+      if (_themeMode == ThemeMode.light) {
+        setState(() {
+          theme.mode = "Light";
+        });
+        //print(theme.mode);
+      } else {
+        setState(() {
+          theme.mode = "Dark";
+        });
+        //print(theme.mode);
+      }
+    });
+  }
+
+  @override
+  void initState() {
+    _themeMode = ThemeMode.dark;
+    theme = MyTheme();
+    theme.mode = "Dark";
+    super.initState();
+  }
+
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
       title: 'Mzansi Innovation Hub',
-      theme: MyTheme().data,
+      themeMode: _themeMode,
+      theme: theme.darkMode(),
+      darkTheme: theme.lightMode(),
       debugShowCheckedModeBanner: false,
       initialRoute: '/',
       onGenerateRoute: RouteGenerator.generateRoute,

Frontend/patient_manager/lib/pages/home.dart

@@ -1,14 +1,15 @@
 import 'package:flutter/material.dart';
+import 'package:patient_manager/main.dart';
 import 'package:patient_manager/components/homeTileGrid.dart';
 import 'package:patient_manager/components/myAppBar.dart';
 import 'package:patient_manager/components/homeAppDrawer.dart';
-//import 'package:patient_manager/components/myErrorMessage.dart';
 //import 'package:patient_manager/components/mySuccessMessage.dart';
-import 'package:patient_manager/main.dart';
+
-//import 'package:patient_manager/theme/mihTheme.dart';
+bool darkm = false;
 
 class Home extends StatefulWidget {
   //final String userEmail;
+
   const Home({
     super.key,
   });
@@ -49,28 +50,38 @@ class _HomeState extends State<Home> {
             // floatingActionButton: Padding(
             //   padding: const EdgeInsets.only(top: 65, right: 5),
             //   child: FloatingActionButton.extended(
-            //     label: Text(
+            //     label: const Text(
-            //       "Add Patient",
+            //       "Test Pop Up",
             //       style: TextStyle(
             //         fontWeight: FontWeight.bold,
-            //         color: MyTheme().primaryColor(),
             //       ),
             //     ),
             //     //backgroundColor: Colors.blueAccent,
             //     onPressed: () {
-            //       showDatePicker(
+            //       setState(() {
-            //         context: context,
+            //         if (darkm) {
-            //         initialDate: DateTime.now(),
+            //           darkm = !darkm;
-            //         firstDate: DateTime(2000),
+            //           MzanziInnovationHub.of(context)!
-            //         lastDate: DateTime(2100),
+            //               .changeTheme(ThemeMode.light);
-            //       );
+            //           //print("Dark Mode: $darkm");
+            //         } else {
+            //           darkm = !darkm;
+            //           MzanziInnovationHub.of(context)!
+            //               .changeTheme(ThemeMode.dark);
+            //           //print("Dark Mode: $darkm");
+            //         }
+            //       });
+            //       // showDialog(
+            //       //   context: context,
+            //       //   builder: (context) =>
+            //       //       const MyErrorMessage(errorType: "Input Error"),
+            //       // );
             //     },
-            //     icon: Icon(
+            //     icon: const Icon(
-            //       Icons.add,
+            //       Icons.warning,
-            //       color: MyTheme().primaryColor(),
+            //       //color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
             //     ),
             //   ),
-            // ),
           );
         } else {
           return const Center(child: CircularProgressIndicator());

Frontend/patient_manager/lib/pages/patientAdd.dart

@@ -6,8 +6,8 @@ import 'package:patient_manager/components/myErrorMessage.dart';
 import 'package:patient_manager/components/mySuccessMessage.dart';
 import 'package:patient_manager/components/myTextInput.dart';
 import 'package:patient_manager/components/mybutton.dart';
+import 'package:patient_manager/main.dart';
 import 'package:patient_manager/objects/appUser.dart';
-import 'package:patient_manager/theme/mihTheme.dart';
 import '../components/myAppBar.dart';
 import 'package:http/http.dart' as http;
 
@@ -183,7 +183,7 @@ class _AddPatientState extends State<AddPatient> {
               style: TextStyle(
                 fontWeight: FontWeight.bold,
                 fontSize: 25.0,
-                color: MyTheme().secondaryColor(),
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
               ),
             ),
             Row(
@@ -270,7 +270,7 @@ class _AddPatientState extends State<AddPatient> {
               style: TextStyle(
                 fontWeight: FontWeight.bold,
                 fontSize: 25.0,
-                color: MyTheme().secondaryColor(),
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
               ),
             ),
             const SizedBox(height: 10.0),
@@ -361,7 +361,7 @@ class _AddPatientState extends State<AddPatient> {
               mainAxisAlignment: MainAxisAlignment.center,
               children: [
                 SizedBox(
-                  width: 500.0,
+                  width: 400.0,
                   height: 100.0,
                   child: MyButton(
                     onTap: () {
@@ -378,8 +378,10 @@ class _AddPatientState extends State<AddPatient> {
                       }
                     },
                     buttonText: "Add",
-                    buttonColor: MyTheme().secondaryColor(),
+                    buttonColor:
-                    textColor: MyTheme().primaryColor(),
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    textColor:
+                        MzanziInnovationHub.of(context)!.theme.primaryColor(),
                   ),
                 ),
               ],

Frontend/patient_manager/lib/pages/patientEdit.dart

@@ -6,8 +6,8 @@ import 'package:patient_manager/components/myErrorMessage.dart';
 import 'package:patient_manager/components/mySuccessMessage.dart';
 import 'package:patient_manager/components/myTextInput.dart';
 import 'package:patient_manager/components/mybutton.dart';
+import 'package:patient_manager/main.dart';
 import 'package:patient_manager/objects/appUser.dart';
-import 'package:patient_manager/theme/mihTheme.dart';
 import 'package:supabase_flutter/supabase_flutter.dart';
 import '../components/myAppBar.dart';
 import 'package:http/http.dart' as http;
@@ -46,6 +46,9 @@ class _EditPatientState extends State<EditPatient> {
   late String userEmail;
   late bool medRequired;
 
+  late double width;
+  late double height;
+
   Future getOfficeIdByUser(String endpoint) async {
     final response = await http.get(Uri.parse(endpoint));
     if (response.statusCode == 200) {
@@ -169,82 +172,100 @@ class _EditPatientState extends State<EditPatient> {
           children: [
             Container(
               padding: const EdgeInsets.all(10.0),
-              width: 500.0,
+              width: width / 3,
-              height: 475.0,
+              height: height / 2,
               decoration: BoxDecoration(
-                color: MyTheme().primaryColor(),
+                color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
                 borderRadius: BorderRadius.circular(25.0),
-                border:
+                border: Border.all(
-                    Border.all(color: MyTheme().secondaryColor(), width: 5.0),
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    width: 5.0),
               ),
-              child: Column(
+              child: SingleChildScrollView(
-                //mainAxisSize: MainAxisSize.max,
+                child: Column(
-                children: [
+                  //mainAxisSize: MainAxisSize.max,
-                  Icon(
+                  children: [
-                    Icons.warning_amber_rounded,
+                    Icon(
-                    size: 100,
+                      Icons.warning_amber_rounded,
-                    color: MyTheme().secondaryColor(),
+                      size: 100,
-                  ),
+                      color: MzanziInnovationHub.of(context)!
-                  const SizedBox(height: 15),
+                          .theme
-                  Text(
+                          .secondaryColor(),
-                    "Are you sure you want to delete this?",
-                    textAlign: TextAlign.center,
-                    style: TextStyle(
-                      color: MyTheme().secondaryColor(),
-                      fontSize: 25.0,
-                      fontWeight: FontWeight.bold,
                     ),
-                  ),
+                    const SizedBox(height: 15),
-                  const SizedBox(height: 10),
+                    Text(
-                  Padding(
+                      "Are you sure you want to delete this?",
-                    padding: const EdgeInsets.symmetric(horizontal: 25.0),
+                      textAlign: TextAlign.center,
-                    child: Text(
-                      "This action is permanent! Deleting ${fnameController.text} ${lnameController.text} will remove him\\her from your account. You won't be able to recover it once it's gone.",
                       style: TextStyle(
-                        color: MyTheme().secondaryColor(),
+                        color: MzanziInnovationHub.of(context)!
-                        fontSize: 15.0,
+                            .theme
+                            .secondaryColor(),
+                        fontSize: 25.0,
                         fontWeight: FontWeight.bold,
                       ),
                     ),
-                  ),
+                    const SizedBox(height: 10),
-                  const SizedBox(height: 15),
+                    Padding(
-                  Padding(
+                      padding: const EdgeInsets.symmetric(horizontal: 25.0),
-                    padding: const EdgeInsets.symmetric(horizontal: 25.0),
-                    child: Text(
-                      "Here's what you'll be deleting:",
-                      style: TextStyle(
-                        color: MyTheme().secondaryColor(),
-                        fontSize: 20.0,
-                        fontWeight: FontWeight.bold,
-                      ),
-                    ),
-                  ),
-                  const SizedBox(height: 10),
-                  Padding(
-                    padding: const EdgeInsets.symmetric(horizontal: 25.0),
-                    child: SizedBox(
-                      width: 450,
                       child: Text(
-                        "1) Patient Profile Information.\n2) Patient Notes\n3) Patient Files.",
+                        "This action is permanent! Deleting ${fnameController.text} ${lnameController.text} will remove him\\her from your account. You won't be able to recover it once it's gone.",
-                        textAlign: TextAlign.left,
                         style: TextStyle(
-                          color: MyTheme().secondaryColor(),
+                          color: MzanziInnovationHub.of(context)!
+                              .theme
+                              .secondaryColor(),
                           fontSize: 15.0,
                           fontWeight: FontWeight.bold,
                         ),
                       ),
                     ),
-                  ),
+                    const SizedBox(height: 15),
-                  SizedBox(
+                    Padding(
-                      width: 300,
+                      padding: const EdgeInsets.symmetric(horizontal: 25.0),
-                      height: 100,
+                      child: Text(
-                      child: MyButton(
+                        "Here's what you'll be deleting:",
-                        onTap: deletePatientApiCall,
+                        style: TextStyle(
-                        buttonText: "Delete",
+                          color: MzanziInnovationHub.of(context)!
-                        buttonColor: MyTheme().secondaryColor(),
+                              .theme
-                        textColor: MyTheme().primaryColor(),
+                              .secondaryColor(),
-                      ))
+                          fontSize: 20.0,
-                ],
+                          fontWeight: FontWeight.bold,
+                        ),
+                      ),
+                    ),
+                    const SizedBox(height: 10),
+                    Padding(
+                      padding: const EdgeInsets.symmetric(horizontal: 25.0),
+                      child: SizedBox(
+                        width: 450,
+                        child: Text(
+                          "1) Patient Profile Information.\n2) Patient Notes\n3) Patient Files.",
+                          textAlign: TextAlign.left,
+                          style: TextStyle(
+                            color: MzanziInnovationHub.of(context)!
+                                .theme
+                                .secondaryColor(),
+                            fontSize: 15.0,
+                            fontWeight: FontWeight.bold,
+                          ),
+                        ),
+                      ),
+                    ),
+                    SizedBox(
+                        width: 300,
+                        height: 100,
+                        child: MyButton(
+                          onTap: deletePatientApiCall,
+                          buttonText: "Delete",
+                          buttonColor: MzanziInnovationHub.of(context)!
+                              .theme
+                              .secondaryColor(),
+                          textColor: MzanziInnovationHub.of(context)!
+                              .theme
+                              .primaryColor(),
+                        ))
+                  ],
+                ),
               ),
             ),
             Positioned(
@@ -258,7 +279,7 @@ class _EditPatientState extends State<EditPatient> {
                 },
                 icon: Icon(
                   Icons.close,
-                  color: MyTheme().errorColor(),
+                  color: MzanziInnovationHub.of(context)!.theme.errorColor(),
                   size: 35,
                 ),
               ),
@@ -342,12 +363,14 @@ class _EditPatientState extends State<EditPatient> {
                   style: TextStyle(
                     fontWeight: FontWeight.bold,
                     fontSize: 25.0,
-                    color: MyTheme().secondaryColor(),
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
                   ),
                 ),
                 IconButton(
                   icon: const Icon(Icons.delete),
-                  color: MyTheme().secondaryColor(),
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
                   alignment: Alignment.topRight,
                   onPressed: () {
                     deletePatientPopUp();
@@ -439,7 +462,7 @@ class _EditPatientState extends State<EditPatient> {
               style: TextStyle(
                 fontWeight: FontWeight.bold,
                 fontSize: 25.0,
-                color: MyTheme().secondaryColor(),
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
               ),
             ),
             const SizedBox(height: 10.0),
@@ -530,7 +553,7 @@ class _EditPatientState extends State<EditPatient> {
               mainAxisAlignment: MainAxisAlignment.center,
               children: [
                 SizedBox(
-                  width: 500.0,
+                  width: 400.0,
                   height: 100.0,
                   child: MyButton(
                     onTap: () {
@@ -547,8 +570,10 @@ class _EditPatientState extends State<EditPatient> {
                       }
                     },
                     buttonText: "Update",
-                    buttonColor: MyTheme().secondaryColor(),
+                    buttonColor:
-                    textColor: MyTheme().primaryColor(),
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    textColor:
+                        MzanziInnovationHub.of(context)!.theme.primaryColor(),
                   ),
                 ),
               ],
@@ -594,6 +619,12 @@ class _EditPatientState extends State<EditPatient> {
 
   @override
   Widget build(BuildContext context) {
+    var size = MediaQuery.of(context).size;
+    setState(() {
+      width = size.width;
+      height = size.height;
+    });
+
     return Scaffold(
       appBar: const MyAppBar(barTitle: "Edit Patient"),
       body: displayForm(),

Frontend/patient_manager/lib/pages/patientManager.dart

@@ -7,8 +7,8 @@ import 'package:patient_manager/components/myAppBar.dart';
 import 'package:http/http.dart' as http;
 import 'package:patient_manager/components/mySearchInput.dart';
 import 'package:patient_manager/components/patManAppDrawer.dart';
+import 'package:patient_manager/main.dart';
 import 'package:patient_manager/objects/patients.dart';
-import 'package:patient_manager/theme/mihTheme.dart';
 
 class PatientManager extends StatefulWidget {
   final String userEmail;
@@ -73,10 +73,10 @@ class _PatientManagerState extends State<PatientManager> {
         child: Container(
           height: 500,
           decoration: BoxDecoration(
-            color: MyTheme().primaryColor(),
+            color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
             borderRadius: BorderRadius.circular(25.0),
             border: Border.all(
-              color: MyTheme().secondaryColor(),
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
               width: 3.0,
             ),
           ),
@@ -96,14 +96,19 @@ class _PatientManagerState extends State<PatientManager> {
       child: Container(
         height: 500,
         decoration: BoxDecoration(
-          color: MyTheme().primaryColor(),
+          color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
           borderRadius: BorderRadius.circular(25.0),
-          border: Border.all(color: MyTheme().secondaryColor(), width: 3.0),
+          border: Border.all(
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+              width: 3.0),
         ),
         child: Center(
           child: Text(
             "Enter ID or Medical Aid No. of Patient",
-            style: TextStyle(fontSize: 25, color: MyTheme().messageTextColor()),
+            style: TextStyle(
+                fontSize: 25,
+                color:
+                    MzanziInnovationHub.of(context)!.theme.messageTextColor()),
             textAlign: TextAlign.center,
           ),
         ),
@@ -181,7 +186,7 @@ class _PatientManagerState extends State<PatientManager> {
             "Add Patient",
             style: TextStyle(
               fontWeight: FontWeight.bold,
-              color: MyTheme().primaryColor(),
+              color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
             ),
           ),
           //backgroundColor: Colors.blueAccent,
@@ -191,7 +196,7 @@ class _PatientManagerState extends State<PatientManager> {
           },
           icon: Icon(
             Icons.add,
-            color: MyTheme().primaryColor(),
+            color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
           ),
         ),
       ),

Frontend/patient_manager/lib/pages/profileUpdate.dart

@@ -3,6 +3,7 @@ import 'package:google_nav_bar/google_nav_bar.dart';
 import 'package:patient_manager/components/myAppBar.dart';
 import 'package:patient_manager/components/profileOfficeUpdate.dart';
 import 'package:patient_manager/components/profileUserUpdate.dart';
+import 'package:patient_manager/main.dart';
 import 'package:patient_manager/objects/appUser.dart';
 
 class ProfileUpdate extends StatefulWidget {
@@ -43,32 +44,31 @@ class _ProfileUpdateState extends State<ProfileUpdate> {
       body: Center(
         child: _widgetOptions.elementAt(_selectedIndex),
       ),
-      bottomNavigationBar: Padding(
+      bottomNavigationBar: GNav(
-        padding: const EdgeInsets.symmetric(horizontal: 150.0, vertical: 5.0),
+        //hoverColor: Colors.lightBlueAccent,
-        child: GNav(
+        color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-          //hoverColor: Colors.lightBlueAccent,
+        iconSize: 35.0,
-          iconSize: 35.0,
+        activeColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
-          activeColor: Colors.white,
+        tabBackgroundColor:
-          tabBackgroundColor: Colors.blueAccent,
+            MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-          gap: 20,
+        //gap: 20,
-          //padding: EdgeInsets.all(15),
+        //padding: EdgeInsets.all(15),
-          tabs: const [
+        tabs: const [
-            GButton(
+          GButton(
-              icon: Icons.perm_identity,
+            icon: Icons.perm_identity,
-              text: "User Profile",
+            text: "User Profile",
-            ),
+          ),
-            GButton(
+          GButton(
-              icon: Icons.business,
+            icon: Icons.business,
-              text: "Office Profile",
+            text: "Office Profile",
-            ),
+          ),
-          ],
+        ],
-          selectedIndex: _selectedIndex,
+        selectedIndex: _selectedIndex,
-          onTabChange: (index) {
+        onTabChange: (index) {
-            setState(() {
+          setState(() {
-              _selectedIndex = index;
+            _selectedIndex = index;
-            });
+          });
-          },
+        },
-        ),
       ),
     );
   }

Frontend/patient_manager/lib/pages/register.dart

@@ -3,7 +3,6 @@ import 'package:patient_manager/components/myPassInput.dart';
 import 'package:patient_manager/components/myTextInput.dart';
 import 'package:patient_manager/components/mybutton.dart';
 import 'package:patient_manager/main.dart';
-import 'package:patient_manager/theme/mihTheme.dart';
 import 'package:supabase_auth_ui/supabase_auth_ui.dart';
 
 class Register extends StatefulWidget {
@@ -75,7 +74,8 @@ class _RegisterState extends State<Register> {
                 Icon(
                   Icons.lock,
                   size: 100,
-                  color: MyTheme().secondaryColor(),
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
                 ),
                 //spacer
                 const SizedBox(height: 10),
@@ -85,7 +85,8 @@ class _RegisterState extends State<Register> {
                   style: TextStyle(
                     fontSize: 25,
                     fontWeight: FontWeight.bold,
-                    color: MyTheme().secondaryColor(),
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
                   ),
                 ),
                 //spacer
@@ -143,8 +144,10 @@ class _RegisterState extends State<Register> {
                   child: MyButton(
                     onTap: () {},
                     buttonText: "Sign Up",
-                    buttonColor: MyTheme().secondaryColor(),
+                    buttonColor:
-                    textColor: MyTheme().primaryColor(),
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    textColor:
+                        MzanziInnovationHub.of(context)!.theme.primaryColor(),
                   ),
                 ),
                 //register text
@@ -167,7 +170,9 @@ class _RegisterState extends State<Register> {
                           'Sign In',
                           style: TextStyle(
                             fontSize: 18,
-                            color: MyTheme().secondaryColor(),
+                            color: MzanziInnovationHub.of(context)!
+                                .theme
+                                .secondaryColor(),
                             fontWeight: FontWeight.bold,
                           ),
                         ),

Frontend/patient_manager/lib/pages/signin.dart

@@ -4,7 +4,6 @@ import 'package:patient_manager/components/myPassInput.dart';
 import 'package:patient_manager/components/myTextInput.dart';
 import 'package:patient_manager/components/mybutton.dart';
 import 'package:patient_manager/main.dart';
-import 'package:patient_manager/theme/mihTheme.dart';
 import 'package:supabase_auth_ui/supabase_auth_ui.dart';
 
 class SignIn extends StatefulWidget {
@@ -65,7 +64,8 @@ class _SignInState extends State<SignIn> {
                 Icon(
                   Icons.lock,
                   size: 100,
-                  color: MyTheme().secondaryColor(),
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
                 ),
                 //spacer
                 const SizedBox(height: 10),
@@ -75,7 +75,8 @@ class _SignInState extends State<SignIn> {
                   style: TextStyle(
                     fontSize: 25,
                     fontWeight: FontWeight.bold,
-                    color: MyTheme().secondaryColor(),
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
                   ),
                 ),
                 //spacer
@@ -109,8 +110,10 @@ class _SignInState extends State<SignIn> {
                   height: 100.0,
                   child: MyButton(
                     buttonText: "Sign In",
-                    buttonColor: MyTheme().secondaryColor(),
+                    buttonColor:
-                    textColor: MyTheme().primaryColor(),
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    textColor:
+                        MzanziInnovationHub.of(context)!.theme.primaryColor(),
                     onTap: () {
                       if (emailController.text.isEmpty ||
                           passwordController.text.isEmpty) {
@@ -155,7 +158,9 @@ class _SignInState extends State<SignIn> {
                           'Register Now',
                           style: TextStyle(
                             fontSize: 18,
-                            color: MyTheme().secondaryColor(),
+                            color: MzanziInnovationHub.of(context)!
+                                .theme
+                                .secondaryColor(),
                             fontWeight: FontWeight.bold,
                           ),
                         ),

Frontend/patient_manager/lib/theme/mihTheme.dart

@@ -6,7 +6,9 @@ class MyTheme {
   late int _errColor;
   late int _succColor;
   late int _mesColor;
-  late ThemeData data;
+  // late ThemeData _dark;
+  // late ThemeData _light;
+  late String mode;
 
   // Options:-
   // f3f9d2 = Cream
@@ -19,40 +21,75 @@ class MyTheme {
   // a63446 = red
 
   MyTheme() {
-    _mainColor = 0XFF3A4454;
+    mode = "Light";
-    _secondColor = 0XFFbedcfe;
+    // _mainColor = 0XFF3A4454;
+    // _secondColor = 0XFFbedcfe;
     _errColor = 0xffD87E8B;
     _succColor = 0xffB0F2B4;
     _mesColor = 0xffc8c8c8d9;
-    data = ThemeData(
+    // _dark = darkMode();
-      scaffoldBackgroundColor: primaryColor(),
+    // _light = lightMode();
-      colorScheme: ColorScheme.dark(
+  }
-        primary: messageTextColor(),
-        onPrimary: primaryColor(),
-        onSurface: secondaryColor(),
-      ),
-      datePickerTheme: DatePickerThemeData(
-        backgroundColor: primaryColor(),
 
-        //------------------------------
+  ThemeData getData() {
-        cancelButtonStyle: ButtonStyle(
+    return ThemeData(
-          foregroundColor: WidgetStatePropertyAll(secondaryColor()),
+        scaffoldBackgroundColor: primaryColor(),
-          overlayColor: WidgetStatePropertyAll(messageTextColor()),
+        colorScheme: ColorScheme.dark(
+          primary: messageTextColor(),
+          onPrimary: primaryColor(),
+          onSurface: secondaryColor(),
         ),
-        //------------------------------
+        datePickerTheme: DatePickerThemeData(
-        confirmButtonStyle: ButtonStyle(
+          backgroundColor: primaryColor(),
-          foregroundColor: WidgetStatePropertyAll(secondaryColor()),
+
-          overlayColor: WidgetStatePropertyAll(messageTextColor()),
+          //------------------------------
+          cancelButtonStyle: ButtonStyle(
+            foregroundColor: WidgetStatePropertyAll(secondaryColor()),
+            overlayColor: WidgetStatePropertyAll(messageTextColor()),
+          ),
+          //------------------------------
+          confirmButtonStyle: ButtonStyle(
+            foregroundColor: WidgetStatePropertyAll(secondaryColor()),
+            overlayColor: WidgetStatePropertyAll(messageTextColor()),
+          ),
+          headerBackgroundColor: secondaryColor(),
+          headerForegroundColor: primaryColor(),
         ),
-        headerBackgroundColor: secondaryColor(),
+        appBarTheme: AppBarTheme(
-        headerForegroundColor: primaryColor(),
+          color: secondaryColor(),
-      ),
+          foregroundColor: primaryColor(),
-      appBarTheme: AppBarTheme(
+          titleTextStyle: TextStyle(
-        color: secondaryColor(),
+            color: primaryColor(),
-      ),
+            fontSize: 25,
-      floatingActionButtonTheme:
+            fontWeight: FontWeight.bold,
-          FloatingActionButtonThemeData(backgroundColor: secondaryColor()),
+          ),
-    );
+        ),
+        floatingActionButtonTheme: FloatingActionButtonThemeData(
+          backgroundColor: secondaryColor(),
+          foregroundColor: primaryColor(),
+          extendedTextStyle: TextStyle(color: primaryColor()),
+        ),
+        drawerTheme: DrawerThemeData(
+          backgroundColor: primaryColor(),
+        ));
+  }
+
+  void setMode(String m) {
+    mode;
+  }
+
+  ThemeData darkMode() {
+    //mode = "Dark";
+    // _mainColor = 0XFF3A4454;
+    // _secondColor = 0XFFbedcfe;
+    return getData();
+  }
+
+  ThemeData lightMode() {
+    //mode = "Light";
+    // _secondColor = 0XFF3A4454;
+    // _mainColor = 0XFFbedcfe;
+    return getData();
   }
 
   Color messageTextColor() {
@@ -68,10 +105,24 @@ class MyTheme {
   }
 
   Color primaryColor() {
+    if (mode == "Dark") {
+      _mainColor = 0XFF3A4454;
+      //_secondColor = 0XFFbedcfe;
+    } else {
+      //_secondColor = 0XFF3A4454;
+      _mainColor = 0XFFbedcfe;
+    }
     return Color(_mainColor);
   }
 
   Color secondaryColor() {
+    if (mode == "Dark") {
+      //_mainColor = 0XFF3A4454;
+      _secondColor = 0XFFbedcfe;
+    } else {
+      _secondColor = 0XFF3A4454;
+      //_mainColor = 0XFFbedcfe;
+    }
     return Color(_secondColor);
   }
 }