Merge pull request #20257 from mozilla/actually-fix-dark-mode-error

fix(settings): ACTUALLY fix the dark mode error

Author: MagentaManifold

packages/fxa-settings/src/components/App/index.tsx

@@ -31,7 +31,6 @@ import {
   useLocalSignedInQueryState,
   useSession,
   isProbablyFirefox,
-  ThemeProvider,
 } from '../../models';
 import {
   initializeSettingsContext,
@@ -381,48 +380,38 @@ export const App = ({
     isSignedIn === undefined ||
     metricsEnabled === undefined
   ) {
-    return (
-      <ThemeProvider enabled={config.darkMode?.enabled}>
-        {window.location.pathname?.includes('/settings') ? (
-          <LoadingSpinner fullScreen />
-        ) : (
-          <AppLayout cmsInfo={integration?.getCmsInfo()} loading />
-        )}
-      </ThemeProvider>
+    return window.location.pathname?.includes('/settings') ? (
+      <LoadingSpinner fullScreen />
+    ) : (
+      <AppLayout cmsInfo={integration?.getCmsInfo()} loading />
     );
   }
 
   const cmsInfo = integration.getCmsInfo();
 
   return (
-    <ThemeProvider enabled={config.darkMode?.enabled}>
-      <Suspense
-        fallback={
-          <AppLayout
-            cmsInfo={cmsInfo}
-            loading
-            splitLayout={currentSplitLayout}
-          />
-        }
-      >
-        <Router basepath="/">
-          <AuthAndAccountSetupRoutes
-            {...{
-              isSignedIn,
-              integration,
-              flowQueryParams: updatedFlowQueryParams,
-              isSignedIntoFirefoxDesktop,
-              setCurrentSplitLayout,
-            }}
-            path="/*"
-          />
-          <SettingsRoutes
-            {...{ isSignedIn, integration, setCurrentSplitLayout }}
-            path="/settings/*"
-          />
-        </Router>
-      </Suspense>
-    </ThemeProvider>
+    <Suspense
+      fallback={
+        <AppLayout cmsInfo={cmsInfo} loading splitLayout={currentSplitLayout} />
+      }
+    >
+      <Router basepath="/">
+        <AuthAndAccountSetupRoutes
+          {...{
+            isSignedIn,
+            integration,
+            flowQueryParams: updatedFlowQueryParams,
+            isSignedIntoFirefoxDesktop,
+            setCurrentSplitLayout,
+          }}
+          path="/*"
+        />
+        <SettingsRoutes
+          {...{ isSignedIn, integration, setCurrentSplitLayout }}
+          path="/settings/*"
+        />
+      </Router>
+    </Suspense>
   );
 };
 

packages/fxa-settings/src/index.tsx

@@ -11,6 +11,7 @@ import { NimbusProvider } from './models/contexts/NimbusContext';
 import config, { readConfigMeta } from './lib/config';
 import { searchParams } from './lib/utilities';
 import { AppContext, initializeAppContext } from './models';
+import { ThemeProvider } from './models/contexts/ThemeContext';
 import Storage from './lib/storage';
 import './styles/tailwind.out.css';
 import CookiesDisabled from './pages/CookiesDisabled';
@@ -83,7 +84,9 @@ try {
         <AppErrorBoundary>
           <AppContext.Provider value={appContext}>
             <NimbusProvider>
-              <View />
+              <ThemeProvider enabled={config.darkMode?.enabled}>
+                <View />
+              </ThemeProvider>
             </NimbusProvider>
           </AppContext.Provider>
         </AppErrorBoundary>