Add additional themes:
. Deep Navy & Gold
Navy Blue #001F3F : A deep, sophisticated base color that represents trust, stability, and luxury.
Gold #D4AF37 : Elegant and luxurious, gold accents convey opulence and high quality.
White #FFFFFF : Clean and minimal, white creates contrast with navy and gold to maintain a fresh and modern look.

 Black & Platinum
Matte Black #1C1C1C : Bold, sleek, and modern, black symbolizes exclusivity and sophistication.
Platinum Silver #E5E4E2 : This gives a metallic luxury feel and pairs well with black for a high-end appearance.
Soft Gray #F2F2F2 : A light gray for neutral elements, adding balance and cleanliness to the design.
3. Emerald Green & Gold
Emerald Green #046307 : Rich, energizing, and associated with vitality, it reflects both luxury and health.
Gold #D4AF37 : Gold accents provide a sense of prestige and elegance.
Charcoal Gray #333333 : As a grounding color, it maintains the balance between elegance and sophistication.
4. Charcoal & Rose Gold
Charcoal Gray #2F2F2F : Dark, sleek, and modern for a premium appearance.
Rose Gold #B76E79 : A trend-forward luxury color that gives an elegant and feminine touch.
Soft Ivory #FAF3E3 : A warm off-white that adds contrast and gives a clean, high-end aesthetic.

// context/ThemeContext.js

import React, { createContext, useState, useEffect } from 'react';
import { Appearance } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import merge from 'deepmerge';
import { DarkTheme as PaperDarkTheme, DefaultTheme as PaperDefaultTheme } from 'react-native-paper';
import { DarkTheme as NavigationDarkTheme, DefaultTheme as NavigationDefaultTheme } from '@react-navigation/native';

// Define cache key for AsyncStorage
const THEME_PREFERENCE_KEY = 'userThemePreference';

// Merge Paper and Navigation themes for Dark and Default
const CombinedDarkTheme = merge(PaperDarkTheme, NavigationDarkTheme);
const CombinedDefaultTheme = merge(PaperDefaultTheme, NavigationDefaultTheme);

// Customize the merged dark theme
const CustomizedDarkTheme = {
    ...CombinedDarkTheme,
    dark: true,
    colors: {
        ...CombinedDarkTheme.colors,
        primary: '#2196F3',           // Material UI Blue
        accent: '#03dac6',            // Teal
        background: '#121212',        // Dark Background
        surface: '#1e1e1e',            // Dark Surface
        text: '#ffffff',               // White Text
        placeholder: '#cccccc',        // Light Gray for Placeholder Text
        error: '#cf6679',              // Red for Errors
        onSurface: '#ffffff',          // White on Surface
        disabled: '#3e3e3e',           // Disabled Elements
        backdrop: '#000000',           // Black Backdrop

        border: '#272727',             // Dark Gray for Borders
        textSecondary: '#a1a1a1',      // Light Gray for Secondary Text
        success: '#4CAF50',            // Green for Success Messages
        info: '#2196F3',               // Blue for Informational Messages
    },
};

// Customize the merged light theme
const CustomizedDefaultTheme = {
    ...CombinedDefaultTheme,
    dark: false,
    colors: {
        ...CombinedDefaultTheme.colors,
        primary: '#2196F3',           // Material UI Blue
        accent: '#03dac6',            // Teal
        background: '#ffffff',        // Light Background
        surface: '#f5f5f5',            // Light Surface
        text: '#000000',               // Black Text
        placeholder: '#666666',        // Dark Gray for Placeholder Text
        error: '#B00020',              // Red for Errors
        onSurface: '#000000',          // Black on Surface
        disabled: '#cccccc',           // Disabled Elements
        backdrop: '#ffffff',           // White Backdrop

        border: '#dddddd',             // Light Gray for Borders
        textSecondary: '#555555',      // Dark Gray for Secondary Text
        success: '#4CAF50',            // Green for Success Messages
        info: '#2196F3',               // Blue for Informational Messages
    },
};

// Create the ThemeContext with default values
export const ThemeContext = createContext({
    theme: CustomizedDefaultTheme,
    toggleTheme: () => {},
});

export const ThemeProvider = ({ children }) => {
    const [theme, setTheme] = useState(CustomizedDefaultTheme); // Default to Light Theme

    useEffect(() => {
        // Load theme preference from AsyncStorage on mount
        const loadThemePreference = async () => {
            try {
                const storedTheme = await AsyncStorage.getItem(THEME_PREFERENCE_KEY);
                if (storedTheme) {
                    setTheme(storedTheme === 'dark' ? CustomizedDarkTheme : CustomizedDefaultTheme);
                } else {
                    // If no preference is stored, set theme based on system preference
                    const colorScheme = Appearance.getColorScheme();
                    setTheme(colorScheme === 'dark' ? CustomizedDarkTheme : CustomizedDefaultTheme);
                }
            } catch (error) {
                console.error('Failed to load theme preference:', error);
            }
        };

        loadThemePreference();

        // Listen to system theme changes
        const subscription = Appearance.addChangeListener(({ colorScheme }) => {
            // Only change theme if user hasn't set a preference
            AsyncStorage.getItem(THEME_PREFERENCE_KEY)
                .then((storedTheme) => {
                    if (!storedTheme) {
                        setTheme(colorScheme === 'dark' ? CustomizedDarkTheme : CustomizedDefaultTheme);
                    }
                })
                .catch((error) => {
                    console.error('Failed to get theme preference:', error);
                });
        });

        return () => subscription.remove();
    }, []);

    const toggleTheme = async () => {
        try {
            const newTheme = theme.dark ? CustomizedDefaultTheme : CustomizedDarkTheme;
            setTheme(newTheme);
            await AsyncStorage.setItem(THEME_PREFERENCE_KEY, newTheme.dark ? 'dark' : 'light');
        } catch (error) {
            console.error('Failed to toggle theme:', error);
        }
    };

    return (
        <ThemeContext.Provider value={{ theme, toggleTheme }}>
            {children}
        </ThemeContext.Provider>
    );
};