Change the code soo it uses the Material UI Dark Mode color scheme where the Main color is Blue.

// screens/RegistrationScreen.js
import React, { useState, useContext } from 'react';
import {
  StyleSheet,
  ScrollView,
  Alert,
  KeyboardAvoidingView,
  Platform,
  View,
} from 'react-native';
import axios from 'axios';
import { Picker } from '@react-native-picker/picker';
import { AuthContext } from '../context/AuthContext';
import {
  Text,
  TextInput,
  Button,
  Card,
  ActivityIndicator,
  useTheme,
} from 'react-native-paper';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import CustomMultiSelect from '../Components/CustomMultiSelect.js';

const RegistrationScreen = ({ navigation }) => {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [desiredPhysique, setDesiredPhysique] = useState('lean');
  const [fitnessGoals, setFitnessGoals] = useState([]);
  const [dietaryPreferences, setDietaryPreferences] = useState([]);
  const [dietaryRestrictions, setDietaryRestrictions] = useState([]);
  const [loading, setLoading] = useState(false);

  const { signIn } = useContext(AuthContext);

  const theme = useTheme();

  // Sample options for multi-select fields
  const fitnessGoalsOptions = [
    { id: 'strength', name: 'Strength' },
    { id: 'endurance', name: 'Endurance' },
    { id: 'flexibility', name: 'Flexibility' },
    { id: 'weight_loss', name: 'Weight Loss' },
    { id: 'muscle_gain', name: 'Muscle Gain' },
  ];

  const dietaryPreferencesOptions = [
    { id: 'vegetarian', name: 'Vegetarian' },
    { id: 'vegan', name: 'Vegan' },
    { id: 'keto', name: 'Keto' },
    { id: 'paleo', name: 'Paleo' },
    { id: 'mediterranean', name: 'Mediterranean' },
  ];

  const dietaryRestrictionsOptions = [
    { id: 'gluten_free', name: 'Gluten-Free' },
    { id: 'dairy_free', name: 'Dairy-Free' },
    { id: 'nut_allergy', name: 'Nut Allergy' },
    { id: 'lactose_intolerant', name: 'Lactose Intolerant' },
    { id: 'none', name: 'None' },
  ];

  const handleRegistration = async () => {
    // Basic validation
    if (!username || !email || !password || !desiredPhysique) {
      Alert.alert('Error', 'Please fill in all required fields.');
      return;
    }

    setLoading(true);

    try {
      const response = await axios.post('http://10.0.0.203:5000/api/auth/register', {
        username,
        email,
        password,
        desiredPhysique,
        fitnessGoals,
        dietaryPreferences,
        dietaryRestrictions,
      });

      if (response.status === 201) {
        const { token } = response.data;
        Alert.alert('Success', 'Registration successful!', [
          { text: 'OK', onPress: () => navigation.navigate('Login') },
        ]);
        signIn(token);
      }
    } catch (error) {
      console.error('Registration Error:', error);
      console.error('Backend URL:', '10.0.0.203:5000');
      if (error.response) {
        console.error('Error Response:', error.response.data);
        Alert.alert('Registration Failed', error.response.data.error || error.response.data.message);
      } else if (error.request) {
        console.error('No Response:', error.request);
        Alert.alert('Registration Failed', 'No response from server. Please try again.');
      } else {
        console.error('Error Setting Up Request:', error.message);
        Alert.alert('Registration Failed', error.message);
      }
    } finally {
      setLoading(false);
    }
  };

  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      style={styles.container}
    >
      <ScrollView contentContainerStyle={styles.scrollContainer}>
        <Card style={styles.card}>
          <Card.Title
            title="Create Account"
            titleStyle={styles.cardTitle}
            left={(props) => <Icon {...props} name="account-plus" size={30} color={theme.colors.primary} />}
          />
          <Card.Content>
            <TextInput
              label="Username"
              value={username}
              onChangeText={setUsername}
              mode="outlined"
              style={styles.input}
              autoCapitalize="none"
              left={<TextInput.Icon name="account" color={theme.colors.placeholder} />}
              placeholderTextColor={theme.colors.placeholder}
            />
            <TextInput
              label="Email"
              value={email}
              onChangeText={setEmail}
              mode="outlined"
              style={styles.input}
              keyboardType="email-address"
              autoCapitalize="none"
              left={<TextInput.Icon name="email" color={theme.colors.placeholder} />}
              placeholderTextColor={theme.colors.placeholder}
            />
            <TextInput
              label="Password"
              value={password}
              onChangeText={setPassword}
              mode="outlined"
              style={styles.input}
              secureTextEntry
              left={<TextInput.Icon name="lock" color={theme.colors.placeholder} />}
              placeholderTextColor={theme.colors.placeholder}
            />

            <Text style={styles.label}>Desired Physique</Text>
            <View style={[styles.pickerContainer, { borderColor: theme.colors.placeholder }]}>
              <Picker
                selectedValue={desiredPhysique}
                onValueChange={(itemValue) => setDesiredPhysique(itemValue)}
                style={[styles.picker, { color: theme.colors.text }]}
                dropdownIconColor={theme.colors.placeholder}
                mode="dropdown"
              >
                <Picker.Item label="Lean" value="lean" />
                <Picker.Item label="Muscular" value="muscular" />
                <Picker.Item label="Athletic" value="athletic" />
              </Picker>
            </View>

            {/* Custom MultiSelect Components */}
            <CustomMultiSelect
              label="Fitness Goals"
              items={fitnessGoalsOptions}
              selectedItems={fitnessGoals}
              onSelectedItemsChange={setFitnessGoals}
              placeholder="Select Fitness Goals"
            />

            <CustomMultiSelect
              label="Dietary Preferences"
              items={dietaryPreferencesOptions}
              selectedItems={dietaryPreferences}
              onSelectedItemsChange={setDietaryPreferences}
              placeholder="Select Dietary Preferences"
            />

            <CustomMultiSelect
              label="Dietary Restrictions"
              items={dietaryRestrictionsOptions}
              selectedItems={dietaryRestrictions}
              onSelectedItemsChange={setDietaryRestrictions}
              placeholder="Select Dietary Restrictions"
            />

            {loading ? (
              <ActivityIndicator animating={true} color={theme.colors.primary} style={styles.loader} />
            ) : (
              <Button
                mode="contained"
                onPress={handleRegistration}
                style={styles.button}
                contentStyle={styles.buttonContent}
                disabled={loading}
              >
                Register
              </Button>
            )}

            <View style={styles.loginRedirect}>
              <Text style={styles.redirectText}>Already have an account?</Text>
              <Button
                mode="text"
                onPress={() => navigation.navigate('Login')}
                compact
                uppercase={false}
                labelStyle={styles.redirectButtonText}
              >
                Login
              </Button>
            </View>
          </Card.Content>
        </Card>
      </ScrollView>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#121212', // Dark background
  },
  scrollContainer: {
    flexGrow: 1,
    justifyContent: 'center',
    padding: 20,
  },
  card: {
    backgroundColor: '#1e1e1e',
    borderRadius: 10,
    padding: 10,
    elevation: 5,
  },
  cardTitle: {
    color: '#ffffff',
    fontSize: 24,
    fontWeight: 'bold',
  },
  input: {
    backgroundColor: '#2c2c2c',
    marginBottom: 10,
  },
  label: {
    fontSize: 16,
    color: '#ffffff',
    marginTop: 10,
    marginBottom: 5,
  },
  pickerContainer: {
    borderRadius: 5,
    borderWidth: 1,
    backgroundColor: '#2c2c2c',
    marginBottom: 15,
    overflow: 'hidden',
  },
  picker: {
    height: 50,
    width: '100%',
  },
  button: {
    marginTop: 10,
    borderRadius: 25,
  },
  buttonContent: {
    paddingVertical: 8,
  },
  loginRedirect: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 20,
  },
  redirectText: {
    color: '#ffffff',
  },
  redirectButtonText: {
    color: '#03dac6',
    fontWeight: '600',
  },
  loader: {
    marginTop: 10,
  },
});

export default RegistrationScreen;

// screens/LoginScreen.js
import React, { useState, useContext } from 'react';
import {
    StyleSheet,
    Alert,
    KeyboardAvoidingView,
    Platform,
    ScrollView,
    View,
} from 'react-native';
import axios from 'axios';
import { AuthContext } from '../context/AuthContext';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { LinearGradient } from 'expo-linear-gradient';
import {
    Text,
    TextInput,
    Button,
    Card,
    ActivityIndicator,
    useTheme,
} from 'react-native-paper';

const LoginScreen = ({ navigation }) => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const { signIn } = useContext(AuthContext);
    const [error, setError] = useState(null);
    const [loading, setLoading] = useState(false);

    const theme = useTheme();

    const handleLogin = async () => {
        if (!email || !password) {
            Alert.alert('Error', 'Please enter both email and password.');
            return;
        }

        setLoading(true);
        try {
            const res = await axios.post('http://10.0.0.203:5000/api/auth/login', {
                email,
                password
            });
            const { token } = res.data;
            signIn(token);
        } catch (err) {
            console.error(err);
            setError(err.response?.data?.message || 'Login failed');
            Alert.alert('Login Failed', err.response?.data?.message || 'Invalid credentials');
        } finally {
            setLoading(false);
        }
    };

    return (
        <KeyboardAvoidingView
            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
            style={styles.container}
        >
            <ScrollView
                contentContainerStyle={styles.scrollContainer}
                keyboardShouldPersistTaps="handled"
            >
                <Card style={styles.card}>
                    <Card.Title
                        title="Login"
                        titleStyle={styles.cardTitle}
                        left={(props) => <Icon {...props} name="login" size={30} color={theme.colors.primary} />}
                    />
                    <Card.Content>
                        {/* Email Input */}
                        <TextInput
                            label="Email"
                            value={email}
                            onChangeText={setEmail}
                            mode="outlined"
                            style={styles.input}
                            keyboardType="email-address"
                            autoCapitalize="none"
                            left={<TextInput.Icon name="email" color={theme.colors.placeholder} />}
                            placeholderTextColor={theme.colors.placeholder}
                        />

                        {/* Password Input */}
                        <TextInput
                            label="Password"
                            value={password}
                            onChangeText={setPassword}
                            mode="outlined"
                            style={styles.input}
                            secureTextEntry
                            left={<TextInput.Icon name="lock" color={theme.colors.placeholder} />}
                            placeholderTextColor={theme.colors.placeholder}
                        />

                        {/* Error Message */}
                        {error && <Text style={styles.errorText}>{error}</Text>}

                        {/* Login Button */}
                        {loading ? (
                            <ActivityIndicator animating={true} color={theme.colors.primary} style={styles.loader} />
                        ) : (
                            <Button
                                mode="contained"
                                onPress={handleLogin}
                                style={styles.button}
                                contentStyle={styles.buttonContent}
                                disabled={loading}
                            >
                                Login
                            </Button>
                        )}

                        {/* Forgot Password */}
                        <Button
                            mode="text"
                            onPress={() => navigation.navigate('ForgotPassword')}
                            style={styles.forgotPassword}
                            labelStyle={styles.forgotPasswordText}
                        >
                            Forgot Password?
                        </Button>

                        {/* Divider */}
                        <View style={styles.dividerContainer}>
                            <View style={styles.line} />
                            <Text style={styles.dividerText}>OR</Text>
                            <View style={styles.line} />
                        </View>

                        {/* Social Login Buttons */}
                        <Button
                            mode="outlined"
                            icon="facebook"
                            onPress={() => {}}
                            style={styles.socialButton}
                            contentStyle={styles.socialButtonContent}
                            labelStyle={{ color: '#3b5998' }}
                        >
                            Login with Facebook
                        </Button>

                        <Button
                            mode="outlined"
                            icon="google"
                            onPress={() => {}}
                            style={styles.socialButton}
                            contentStyle={styles.socialButtonContent}
                            labelStyle={{ color: '#db4a39' }}
                        >
                            Login with Google
                        </Button>

                        {/* Register Redirect */}
                        <View style={styles.registerRedirect}>
                            <Text style={styles.redirectText}>Don't have an account?</Text>
                            <Button
                                mode="text"
                                onPress={() => navigation.navigate('Register')}
                                compact
                                uppercase={false}
                                labelStyle={styles.redirectButtonText}
                            >
                                Register
                            </Button>
                        </View>
                    </Card.Content>
                </Card>
            </ScrollView>
        </KeyboardAvoidingView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#121212', // Dark background
    },
    scrollContainer: {
        flexGrow: 1,
        justifyContent: 'center',
        padding: 20,
    },
    card: {
        backgroundColor: '#1e1e1e',
        borderRadius: 10,
        padding: 10,
        elevation: 5,
    },
    cardTitle: {
        color: '#ffffff',
        fontSize: 24,
        fontWeight: 'bold',
    },
    input: {
        backgroundColor: '#2c2c2c',
        marginBottom: 10,
    },
    errorText: {
        color: '#cf6679',
        textAlign: 'center',
        marginBottom: 10,
    },
    button: {
        marginTop: 10,
        borderRadius: 25,
    },
    buttonContent: {
        paddingVertical: 8,
    },
    loader: {
        marginTop: 10,
    },
    forgotPassword: {
        marginTop: 10,
    },
    forgotPasswordText: {
        color: '#03dac6',
        textAlign: 'center',
    },
    dividerContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        marginVertical: 20,
    },
    line: {
        flex: 1,
        height: 1,
        backgroundColor: '#3e3e3e',
    },
    dividerText: {
        marginHorizontal: 10,
        color: '#ffffff',
    },
    socialButton: {
        marginBottom: 10,
    },
    socialButtonContent: {
        flexDirection: 'row',
        justifyContent: 'center',
    },
    registerRedirect: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 10,
    },
    redirectText: {
        color: '#ffffff',
    },
    redirectButtonText: {
        color: '#03dac6',
        fontWeight: '600',
    },
});

export default LoginScreen;

// App.js
import React from 'react';
import { AuthProvider } from './context/AuthContext';
import AppNavigator from './navigation/AppNavigator';
import { Provider as PaperProvider, DarkTheme } from 'react-native-paper';
import { StatusBar } from 'expo-status-bar';

const App = () => {
    return (
        <AuthProvider>
            <PaperProvider>
                <StatusBar style="light" />
                <AppNavigator />
            </PaperProvider>
        </AuthProvider>
    );
};

export default App;