Updated theme switch text and added test cases to reflect changes

__tests__/MoreScreen.test.tsx

@@ -1,12 +1,11 @@
+import { fireEvent, render } from '@testing-library/react-native';
+import moxios from 'moxios';
 import React from 'react';
-import { render, fireEvent, waitFor } from '@testing-library/react-native';
+import { Linking } from 'react-native';
 import { Provider } from 'react-redux';
 import configureStore from 'redux-mock-store';
-import MorePage from '../lib/screens/MorePage';
-import moxios from 'moxios';
-import { User } from '../lib/models/user_class';
-import { Linking } from 'react-native';
 import { useTheme } from '../lib/components/ThemeProvider';
+import MorePage from '../lib/screens/MorePage';
 
 // Create a mock Redux store
 const mockStore = configureStore([]);
@@ -106,6 +105,7 @@ describe('MorePage', () => {
       "mailto:[email protected]?subject=Bug%20Report%20on%20'Where's%20Religion%3F'&body=Please%20provide%20details%20of%20your%20issue%20you%20are%20facing%20here."
     );
   });
+
   it('renders the "Logout" button', () => {
     const { getByText } = render(
       <Provider store={store}>
@@ -116,4 +116,69 @@ describe('MorePage', () => {
     // Check if the "Logout" button is rendered
     expect(getByText('Logout')).toBeTruthy();
   });
+
+  it('displays correct theme text based on isDarkmode value', () => {
+    const { getByText, rerender } = render(
+      <Provider store={store}>
+        <MorePage />
+      </Provider>
+    );
+
+    // Check Light Mode text when isDarkmode is false
+    expect(getByText('Light Mode')).toBeTruthy();
+
+    // Update isDarkmode to true & renderer
+    useTheme.mockReturnValueOnce({
+      theme: {
+        primaryColor: '#ffffff',
+        text: '#ffffff',
+        secondaryColor: '#f0f0f0',
+        logout: '#ff0000',
+        logoutText: '#ffffff',
+      },
+      isDarkmode: true,
+      toggleDarkmode: jest.fn(),
+    });
+    rerender(
+      <Provider store={store}>
+        <MorePage />
+      </Provider>
+    );
+
+    expect(getByText('Dark Mode')).toBeTruthy();
+  });
+
+  it('displays correct text color for theme text', () => {
+    const { getByText, rerender } = render(
+      <Provider store={store}>
+        <MorePage />
+      </Provider>
+    );
+
+    // Check that Light Mode text is black when isDarkmode is false
+    const lightModeText = getByText('Light Mode');
+    expect(lightModeText.props.style).toEqual(expect.arrayContaining([{ color: 'black' }]));
+
+    // Update isDarkmode to true and rerender
+    useTheme.mockReturnValueOnce({
+      theme: {
+        primaryColor: '#ffffff',
+        text: '#ffffff',
+        secondaryColor: '#f0f0f0',
+        logout: '#ff0000',
+        logoutText: '#ffffff',
+      },
+      isDarkmode: true,
+      toggleDarkmode: jest.fn(),
+    });
+    rerender(
+      <Provider store={store}>
+        <MorePage />
+      </Provider>
+    );
+
+    // Check that Dark Mode text is white when isDarkmode is true
+    const darkModeText = getByText('Dark Mode');
+    expect(darkModeText.props.style).toEqual(expect.arrayContaining([{ color: 'white' }]));
+  });
 });

lib/screens/MorePage.tsx

@@ -1,20 +1,20 @@
-import React, { useState } from "react";
+import { Ionicons } from "@expo/vector-icons";
+import React from "react";
 import {
-  View,
-  Text,
-  ScrollView,
+  Dimensions,
   Image,
   Linking,
-  TouchableOpacity,
   SafeAreaView,
+  ScrollView,
   StyleSheet,
-  Dimensions,
-  Switch
+  Switch,
+  Text,
+  TouchableOpacity,
+  View
 } from "react-native";
-import { Ionicons } from "@expo/vector-icons";
-import { User } from "../models/user_class";
-import { useTheme } from "../components/ThemeProvider";
 import { useDispatch } from "react-redux";
+import { useTheme } from "../components/ThemeProvider";
+import { User } from "../models/user_class";
 
 
 
@@ -145,7 +145,7 @@ export default function MorePage() {
           <View style={styles.textContainer}>
             <View style={styles.buttonContainer}>
               <View style={[styles.switchContainer, { backgroundColor: theme.background }]}>
-                <Text style={[styles.switchText, { color: theme.text }]}>Dark Mode</Text>
+                <Text style={[styles.switchText, { color: isDarkmode ? 'white' :'black' }]}> {isDarkmode ? "Dark Mode" : "Light Mode"}</Text>
                 <Switch
                   testID="dark-mode-switch"
                   trackColor={{