1 files changed, 22 insertions, 17 deletions
diff --git a/src/App.web.tsx b/src/App.web.tsx
index 6c67dc28b..1bdb3c208 100644
--- a/src/App.web.tsx
+++ b/src/App.web.tsx
@@ -7,6 +7,7 @@ import {RootSiblingParent} from 'react-native-root-siblings'
 
 import 'view/icons'
 
+import {ThemeProvider as Alf} from '#/alf'
 import {init as initPersistedState} from '#/state/persisted'
 import {useColorMode} from 'state/shell'
 import {Shell} from 'view/shell/index'
@@ -28,11 +29,13 @@ 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()
   const {resumeSession} = useSessionApi()
   const colorMode = useColorMode()
+  const theme = useColorModeTheme(colorMode)
 
   // init
   useEffect(() => {
@@ -44,23 +47,25 @@ function InnerApp() {
   if (isInitialLoad) return null
 
   return (
-    <React.Fragment
-      // Resets the entire tree below when it changes:
-      key={currentAccount?.did}>
-      <LoggedOutViewProvider>
-        <UnreadNotifsProvider>
-          <ThemeProvider theme={colorMode}>
-            {/* All components should be within this provider */}
-            <RootSiblingParent>
-              <SafeAreaProvider>
-                <Shell />
-              </SafeAreaProvider>
-            </RootSiblingParent>
-            <ToastContainer />
-          </ThemeProvider>
-        </UnreadNotifsProvider>
-      </LoggedOutViewProvider>
-    </React.Fragment>
+    <Alf theme={theme}>
+      <React.Fragment
+        // Resets the entire tree below when it changes:
+        key={currentAccount?.did}>
+        <LoggedOutViewProvider>
+          <UnreadNotifsProvider>
+            <ThemeProvider theme={colorMode}>
+              {/* All components should be within this provider */}
+              <RootSiblingParent>
+                <SafeAreaProvider>
+                  <Shell />
+                </SafeAreaProvider>
+              </RootSiblingParent>
+              <ToastContainer />
+            </ThemeProvider>
+          </UnreadNotifsProvider>
+        </LoggedOutViewProvider>
+      </React.Fragment>
+    </Alf>
   )
 }