Install on native as well

src/App.native.tsx

@@ -13,6 +13,8 @@ import {
 
 import 'view/icons'
 
+import {ThemeProvider as Alf} from '#/alf'
+import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
 import {init as initPersistedState} from '#/state/persisted'
 import {listenSessionDropped} from './state/events'
 import {useColorMode} from 'state/shell'
@@ -46,6 +48,7 @@ function InnerApp() {
   const colorMode = useColorMode()
   const {isInitialLoad, currentAccount} = useSession()
   const {resumeSession} = useSessionApi()
+  const theme = useColorModeTheme(colorMode)
 
   // init
   useEffect(() => {
@@ -60,25 +63,27 @@ function InnerApp() {
 
   return (
     <SafeAreaProvider initialMetrics={initialWindowMetrics}>
-      <Splash isReady={!isInitialLoad}>
+      <Alf theme={theme}>
-        <React.Fragment
+        <Splash isReady={!isInitialLoad}>
-          // Resets the entire tree below when it changes:
+          <React.Fragment
-          key={currentAccount?.did}>
+            // Resets the entire tree below when it changes:
-          <LoggedOutViewProvider>
+            key={currentAccount?.did}>
-            <UnreadNotifsProvider>
+            <LoggedOutViewProvider>
-              <ThemeProvider theme={colorMode}>
+              <UnreadNotifsProvider>
-                {/* All components should be within this provider */}
+                <ThemeProvider theme={colorMode}>
-                <RootSiblingParent>
+                  {/* All components should be within this provider */}
-                  <GestureHandlerRootView style={s.h100pct}>
+                  <RootSiblingParent>
-                    <TestCtrls />
+                    <GestureHandlerRootView style={s.h100pct}>
-                    <Shell />
+                      <TestCtrls />
-                  </GestureHandlerRootView>
+                      <Shell />
-                </RootSiblingParent>
+                    </GestureHandlerRootView>
-              </ThemeProvider>
+                  </RootSiblingParent>
-            </UnreadNotifsProvider>
+                </ThemeProvider>
-          </LoggedOutViewProvider>
+              </UnreadNotifsProvider>
-        </React.Fragment>
+            </LoggedOutViewProvider>
-      </Splash>
+          </React.Fragment>
+        </Splash>
+      </Alf>
     </SafeAreaProvider>
   )
 }

src/App.web.tsx

@@ -8,6 +8,7 @@ import {RootSiblingParent} from 'react-native-root-siblings'
 import 'view/icons'
 
 import {ThemeProvider as Alf} from '#/alf'
+import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
 import {init as initPersistedState} from '#/state/persisted'
 import {useColorMode} from 'state/shell'
 import {Shell} from 'view/shell/index'
@@ -29,7 +30,6 @@ import {
 } from 'state/session'
 import {Provider as UnreadNotifsProvider} from 'state/queries/notifications/unread'
 import * as persisted from '#/state/persisted'
-import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
 
 function InnerApp() {
   const {isInitialLoad, currentAccount} = useSession()