Made a change to dark mode appearance by making it darker

client/components/SettingsToggle.tsx

@@ -20,4 +20,4 @@ const SettingsToggle: React.FC<SettingsToggleProp> = ({ name, value, onValueChan
     </View>
   );
 };
-export default SettingsToggle;
+export default SettingsToggle;

client/screens/Alarms.tsx

@@ -16,9 +16,10 @@ export default function Alarms() {
 
   // Define dynamic styles based on isDarkMode
   const dynamicStyles = {
-    backgroundColor: isDarkMode ? 'darkgrey' : 'white',
+    backgroundColor: isDarkMode ? '#1c1c1c' : '#ffffff',
     color: isDarkMode ? 'white' : 'black',
   };
+
 
   // Function to handle saving alarm data
   const handleSaveAlarm = (alarmData: Alarm) => {

client/screens/Home.tsx

@@ -24,9 +24,10 @@ export default function Home() {
 
   // Define dynamic styles based on isDarkMode
   const dynamicStyles = {
-    backgroundColor: isDarkMode ? 'darkgrey' : 'white',
+    backgroundColor: isDarkMode ? '#1c1c1c' : '#ffffff',
     color: isDarkMode ? 'white' : 'black',
   };
+
 
   const addNewTimeZone = (zone: TimeZone) => {
     if (!screenClock.includes(zone)) {

client/screens/Settings.tsx

@@ -4,6 +4,8 @@ import { styles, textStyles } from '../styles';
 import { useDarkMode } from '../contexts/DarkModeContext'; // Make sure to import useDarkMode
 import SettingsToggle from '../components/SettingsToggle';
 import * as Notifications from 'expo-notifications';
+import { SafeAreaView } from 'react-native';
+
 
 function Setting() {
   useEffect(() => {
@@ -56,22 +58,32 @@ function Setting() {
 
   const { isDarkMode, toggleSwitch } = useDarkMode(); // Use the useDarkMode hook
 
-  const backgroundColor = isDarkMode ? 'darkgrey' : 'white';
-  const textColor = isDarkMode ? 'white' : 'black';
+  const backgroundColor = isDarkMode ? '#1c1c1c' : '#ffffff';
 
+  const textColor = isDarkMode ? 'white' : 'black';
   return (
-    <View style={[styles.container, { backgroundColor }]}>
-      <Text style={[textStyles.titleText, { color: textColor }]}>Settings</Text>
-
-      <SettingsToggle
-        name="Dark Mode"
-        value={isDarkMode}
-        onValueChange={toggleSwitch}
-      ></SettingsToggle>
-
-      <Button title="Schedule Notification" onPress={scheduleNotification} />
-    </View>
+    <SafeAreaView style={{ flex: 1, backgroundColor: isDarkMode ? '#1c1c1c' : '#ffffff' }}>
+      <View style={isDarkMode ? styles.darkTopBar : styles.topNavBar}>
+        <Text style={isDarkMode ? styles.darkTopBarText : styles.topBarText}>Settings</Text>
+      </View>
+      <View style={{ flex: 1, padding: 20 }}>
+        <View style={isDarkMode ? styles.darkToggleContainer : styles.container}>
+          <SettingsToggle
+            name="Dark Mode"
+            value={isDarkMode}
+            onValueChange={toggleSwitch}
+          />
+        </View>
+        <View style={{ marginTop: 20 }}>
+          <Button title="Schedule Notification" onPress={scheduleNotification} color="#007AFF" />
+        </View>
+      </View>
+    </SafeAreaView>
   );
+
+
+
+
 }
 
 export default Setting;

client/styles/index.ts

@@ -13,11 +13,52 @@ const styles = StyleSheet.create({
   },
   darkContainer: {
     flex: 1,
-    backgroundColor: '#333',
+    backgroundColor: '#1c1c1c',
     padding: 20,
-    paddingBottom: 5,
-    marginTop: 20,
+    paddingBottom: 20,
+    marginTop: 0,
+    color: '#fff',
+  },
+
+  darkText: {
+    color: '#fff',
+  },
+  darkButton: {
+    backgroundColor: '#555',
+    color: '#fff',
+  },
+
+  darkTabBar: {
+    backgroundColor: '#1c1c1c',
+    borderTopWidth: 0,
+    paddingBottom: 20,
+  },
+
+  darkTopBar: {
+    backgroundColor: '#121212',
+    padding: 20,
+    paddingTop: 40,
+    borderBottomWidth: 1,
+    borderBottomColor: '#333333',
+  },
+  darkTopBarText: {
+    color: '#ffffff',
+    fontSize: 22,
+    fontWeight: 'bold',
+    letterSpacing: 1,
+  },
+  darkToggleContainer: {
+    backgroundColor: '#2a2a2a',
+    borderRadius: 12,
+    padding: 15,
+    marginTop: 15,
+    marginBottom: 15,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 5,
   },
+
   button: {
     backgroundColor: 'lightgreen',
     paddingVertical: 15,