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,6 +63,7 @@ function InnerApp() {
 
   return (
     <SafeAreaProvider initialMetrics={initialWindowMetrics}>
+      <Alf theme={theme}>
         <Splash isReady={!isInitialLoad}>
           <React.Fragment
             // Resets the entire tree below when it changes:
@@ -79,6 +83,7 @@ function InnerApp() {
             </LoggedOutViewProvider>
           </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()