fix 🐛 theme revert and status bar behavior with ignoreSystemMode off (#8)

### Status
Ready

### Description

- Fixed theme issue where it now reverts to the system default when
ignoreSystemMode is turned off.
- Make the statubar unchanged when ignoreSystemMode is turned off

Author: YosefAshenafi

features/theme/index.tsx

@@ -36,6 +36,15 @@ export interface CreateThemeOptions {
     componentDefaults?: Record<ModifiableComponent, Record<string, any>>;
 }
 
+function setColorScheme(scheme: 'light' | 'dark', ignoreSystemMode: boolean) {
+    if (ignoreSystemMode) {
+        Colors.setScheme(scheme as SchemeType);
+    } else {
+        const systemScheme = Appearance.getColorScheme() as 'light' | 'dark' | null;
+        Colors.setScheme(systemScheme || 'default');
+    }
+}
+
 export function createTheme({
     ignoreSystemMode,
     supportDarkMode,
@@ -85,13 +94,7 @@ export function createTheme({
         return (scheme: 'light' | 'dark') => {
             setTheme((prev) => {
                 const next = { ...prev, scheme };
-
-                if (next.ignoreSystemMode) {
-                    Colors.setScheme(scheme as SchemeType);
-                } else {
-                    Colors.setScheme('default');
-                }
-
+                setColorScheme(scheme, next.ignoreSystemMode);
                 return next;
             });
         };
@@ -102,15 +105,18 @@ export function createTheme({
         const [state, setState] = React.useState<'light' | 'dark'>(scheme);
 
         React.useEffect(() => {
-            const systemScheme = Appearance.getColorScheme() as 'light' | 'dark' | null;
-            const initialScheme = ignoreSystemMode ? scheme : systemScheme ?? scheme;
-            Colors.setScheme(initialScheme as SchemeType);
-            setState(initialScheme);
+            setColorScheme(scheme, ignoreSystemMode);
+            setState(scheme);
         }, [scheme, ignoreSystemMode]);
 
         return state;
     }
 
+    function useIgnoreSystemMode() {
+        const { ignoreSystemMode } = useAtomValue(atom);
+        return ignoreSystemMode
+    }
+
     function ThemeProviderComponent({ children }: { children: React.ReactNode }) {
         const { scheme, ignoreSystemMode } = useAtomValue(atom);
         const [navThemeState, setNavThemeState] = React.useState(
@@ -121,7 +127,7 @@ export function createTheme({
         );
 
         React.useEffect(() => {
-            Colors.setScheme(scheme as SchemeType);
+            setColorScheme(scheme, ignoreSystemMode);
             setNavThemeState(
                 createReactNavigationTheme(
                     availableSchemes[scheme],
@@ -130,7 +136,9 @@ export function createTheme({
             );
         }, [scheme, ignoreSystemMode]);
 
-        return <ThemeProvider value={navThemeState}>{children}</ThemeProvider>;
+        return (
+                <ThemeProvider value={navThemeState}>{children}</ThemeProvider>
+        );
     }
 
     function ThemeSettings() {
@@ -141,13 +149,7 @@ export function createTheme({
         const dispatch = () => {
             setState((prev) => {
                 const next = { ...prev, ignoreSystemMode: !ignoreSystemMode };
-
-                if (next.ignoreSystemMode) {
-                    Colors.setScheme(prev.scheme || defaultScheme);
-                } else {
-                    Colors.setScheme('default');
-                }
-
+                setColorScheme(prev.scheme || defaultScheme, next.ignoreSystemMode);
                 return next;
             });
         };
@@ -178,6 +180,7 @@ export function createTheme({
     return {
         useChangeTheme: useChangeScheme,
         useThemeScheme,
+        useIgnoreSystemMode,
         ThemeProvider: ThemeProviderComponent,
         ThemeSettings,
     };