1 files changed, 33 insertions, 22 deletions

diff --git a/src/App.web.tsx b/src/App.web.tsx
index 6c67dc28b..1efa0567c 100644
--- a/src/App.web.tsx
+++ b/src/App.web.tsx
@@ -7,6 +7,8 @@ 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'
@@ -15,6 +17,7 @@ import {ThemeProvider} from 'lib/ThemeContext'
 import {queryClient} from 'lib/react-query'
 import {Provider as ShellStateProvider} from 'state/shell'
 import {Provider as ModalStateProvider} from 'state/modals'
+import {Provider as DialogStateProvider} from 'state/dialogs'
 import {Provider as LightboxStateProvider} from 'state/lightbox'
 import {Provider as MutedThreadsProvider} from 'state/muted-threads'
 import {Provider as InvitesStateProvider} from 'state/invites'
@@ -28,11 +31,13 @@ import {
 } from 'state/session'
 import {Provider as UnreadNotifsProvider} from 'state/queries/notifications/unread'
 import * as persisted from '#/state/persisted'
+import {Provider as PortalProvider} from '#/components/Portal'
 
 function InnerApp() {
   const {isInitialLoad, currentAccount} = useSession()
   const {resumeSession} = useSessionApi()
   const colorMode = useColorMode()
+  const theme = useColorModeTheme(colorMode)
 
   // init
   useEffect(() => {
@@ -44,23 +49,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>
   )
 }
 
@@ -87,11 +94,15 @@ function App() {
             <MutedThreadsProvider>
               <InvitesStateProvider>
                 <ModalStateProvider>
-                  <LightboxStateProvider>
-                    <I18nProvider>
-                      <InnerApp />
-                    </I18nProvider>
-                  </LightboxStateProvider>
+                  <DialogStateProvider>
+                    <LightboxStateProvider>
+                      <I18nProvider>
+                        <PortalProvider>
+                          <InnerApp />
+                        </PortalProvider>
+                      </I18nProvider>
+                    </LightboxStateProvider>
+                  </DialogStateProvider>
                 </ModalStateProvider>
               </InvitesStateProvider>
             </MutedThreadsProvider>