import React, { createContext, useContext, useState, useEffect } from 'react'; import { useColorScheme, StatusBar } from 'react-native'; import useThemeColors from './themeColors'; import AsyncStorage from '@react-native-async-storage/async-storage'; export interface ColorsScheme { black: string | undefined; surface_cool: string; border_cool: string; text_cool: string; bg_primary: string; bg_secondary: string; bg_tertiary: string; text_primary: string; text_secondary: string; text_tertiary: string; text_disabled: string; border_light: string; border_medium: string; border_strong: string; border_focus: string; button_primary: string; button_hover: string; button_pressed: string; button_disabled: string; status_success: string; status_error: string; status_warning: string; surface_elevated: string; surface_overlay: string; shadow_color: string; inverse: string; bg_light: string; logo_grad_top: string; overlay_modal: string; gradient_first: string; gradient_second: string; modal_primary: string; modal_secondary: string; modal_title: string; red: string; blue: string; white: string; //------NEW COLOR------ fill_primary: string; fill_secondary: string; fill_secondary_b: string; fill_secondary_alt: string; fill_tertiary: string; fill_tertiary_alt: string; fill_quaternary: string; fill_quaternary_alt: string; figure_gray: string; border_primary: string; border_secondary: string; card_background: string; figure_secondary: string; figure_tertiary: string; figure_quaternary: string; primary_white: string; soft_red: string; soft_green: string; soft_blue: string; primary_black: string; primary_red: string; primary_green: string; primary_blue: string; primary_orange: string; accents_purple: string; accents_pink: string; accents_teal: string; primary_accent: string; primary_accent_2: string; primary_accent_blue: string; blue_50: string; blue_300: string; border_tertiary: string; primary_accent_blue_create: string; fill_primary_40: string; fill_secondary_t: string; fill_tertiary_t: string; fill_quaternary_t: string; fill_surface: string; fill_message_bubble: string; fill_message_bubble_accent: string; fill_message_bubble_40: string; fill_attachment: string; fill_reaction: string; figure_black: string; figure_secondary_alpha: string; figure_link: string; border_10: string; card_background_active: string; primary_red_10: string; primary_red_20: string; primary_red_30: string; primary_red_60: string; primary_red_80: string; primary_green_10: string; primary_green_20: string; primary_green_30: string; primary_green_60: string; primary_green_80: string; primary_orange_10: string; primary_orange_20: string; primary_orange_30: string; primary_orange_50: string; primary_orange_80: string; primary_yellow: string; primary_yellow_30: string; primary_yellow_80: string; primary_accent_dark: string; primary_accent_semi: string; primary_accent_blue_5: string; primary_accent_blue_15: string; primary_accent_blue_30: string; primary_accent_blue_60: string; primary_accent_blue_80: string; primary_accent_sky: string; // NEW COLORS // labels labels_primary: string; labels_secondary: string; labels_tertiary: string; labels_quaternary: string; labels_primary_inv: string; labels_vibrant_primary: string; labels_vibrant_secondary: string; labels_vibrant_tertiary: string; labels_vibrant_quaternary: string; // fills fills_primary: string; fills_secondary: string; fills_tertiary: string; fills_quaternary: string; fills_quinary: string; fills_vprimary: string; fills_white80: string; fills_white60: string; fills_white40: string; fills_white75: string; fills_white76: string; fills_black3: string; fills_black5: string; fills_black8: string; fills_black12: string; fills_black13: string; fills_black15: string; fills_black20: string; fills_black30: string; fills_black50: string; fills_black80: string; fills_black81: string; fills_solid_primary: string; fills_solid_secondary: string; fills_solid_tertiary: string; fills_vibrant_primary: string; fills_vibrant_secondary: string; fills_vibrant_tertiary: string; // System Background system_background_primary: string; system_background_secondary: string; system_background_tertiary: string; system_background_elevated_primary: string; system_background_elevated_secondary: string; system_background_elevated_tertiary: string; // backgrounds background_primary: string; background_secondary: string; background_tertiary: string; background_thick: string; background_primary_elevated: string; background_secondary_elevated: string; background_tertiary_elevated: string; // backgrounds (grouped) background_grouped_primary: string; background_grouped_secondary: string; background_grouped_tertiary: string; background_grouped_primary_elevated: string; background_grouped_secondary_elevated: string; background_grouped_tertiary_elevated: string; // Background Control background_control_primary: string; background_control_secondary: string; background_control_tertiary: string; // separators separator_opaque: string; separator_non_opaque: string; separator_vibrant: string; // overlays overlay_default: string; overlay_activity: string; overlay_activity_view_controller: string; overlay_attachment: string; overlay_light: string; // grays gray_black: string; gray_white: string; gray: string; gray_2: string; gray_7: string; gray_3: string; gray_4: string; gray_5: string; gray_6: string; // colors colors_red: string; colors_orange: string; colors_yellow: string; colors_green: string; colors_mint: string; colors_teal: string; colors_cyan: string; colors_blue: string; colors_blue_secondary: string; colors_blue_tertiary: string; colors_blue_quaternary: string; colors_blue2: string; colors_indigo: string; colors_purple: string; colors_pink: string; colors_brown: string; colors_red_2: string; // border border_10_color: string; border_30_color: string; // misc alert_menu: string; bar_border: string; button_disabled_color: string; button_tinted_fill: string; button_tinted_fill2: string; button_destructive_label_disabled: string; button_destructive_bg_prominent: string; button_destructive_bg: string; floatingTab_text_selected: string; floatingTab_text_unselected: string; floatingTab_pill_shadow: string; floatingTab_pill_fill: string; keyboard_accessory_bar_selection: string; keyboard_emoji_mic: string; button_label_disabled: string; button_prominent: string; button_bg: string; button_bg_colors: string; tab_text_selected: string; tab_text_unselected: string; tab_pill_shadow: string; tab_pill_fill: string; menu_large_separator: string; sidebar_fill_selected: string; sidebar_text_selected: string; sidebar_shadow_drag_over: string; tab_unselected: string; text_field_bg: string; text_field_outline: string; kit_section_fill: string; kit_section_stroke: string; bubble_accent: string; bubble_gray: string; link: string; read_receipt: string; pill_active_text: string; pill_bg: string; keyboard_accessory_bar_selection2: string; overlay_comment_modal: string; // Labels Control labels_control_primary: string; labels_control_secondary: string; labels_control_tertiary: string; labels_control_quaternary: string; // Material material_ultra_thick: string; material_thick: string; material_thin: string; material_medium: string; material_ultra_thin: string; material_chrome: string; } export const ThemeColors = createContext<{ colors: ColorsScheme; colorScheme: 'light' | 'dark'; toggleTheme: () => void; setSelectedTheme: any; }>({ colors: {} as ColorsScheme, colorScheme: 'light', toggleTheme: () => { }, setSelectedTheme: () => { }, }); export const ThemeContext = ({ children }: any) => { const systemColorScheme = useColorScheme(); const [colorScheme, setColorScheme] = useState<'light' | 'dark'>( systemColorScheme || 'light', ); const [selectedTheme, setSelectedTheme] = useState< 'light' | 'dark' | 'system' >('system'); const colors = useThemeColors(colorScheme); useEffect(() => { if (selectedTheme === 'system') { setColorScheme(systemColorScheme || 'light'); } else { setColorScheme(selectedTheme); } }, [systemColorScheme, selectedTheme]); useEffect(() => { StatusBar.setBarStyle( colorScheme === 'light' ? 'dark-content' : 'light-content', ); }, [colorScheme]); const toggleTheme = () => { setColorScheme(prev => (prev === 'light' ? 'dark' : 'light')); }; useEffect(() => { const loadTheme = async () => { try { const savedTheme = await AsyncStorage.getItem('selectedTheme'); if ( savedTheme === 'light' || savedTheme === 'dark' || savedTheme === 'system' ) { setSelectedTheme(savedTheme); } } catch (error) { console.error('Error loading theme selection', error); } }; loadTheme(); }, []); return ( {children} ); }; export const useTheme = () => useContext(ThemeColors);