[PB-4905]: Fix white screen blink on page load

index.html

@@ -26,6 +26,45 @@
     -->
     <title>Internxt Drive – Private & Secure Cloud Storage</title>
 
+    <style>
+      html.dark,
+      html.dark body {
+        background-color: #111;
+        color-scheme: dark;
+      }
+    </style>
+    <script>
+      (function () {
+        try {
+          var storedTheme = localStorage.getItem('theme');
+          var persistedIsDark = localStorage.getItem('theme:isDark');
+          var systemPrefersDark = false;
+
+          try {
+            systemPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+          } catch (matchError) {
+            systemPrefersDark = false;
+          }
+
+          var theme = storedTheme || 'system';
+          var shouldUseDark = false;
+
+          if (persistedIsDark !== null) {
+            shouldUseDark = JSON.parse(persistedIsDark);
+          } else {
+            shouldUseDark =
+              theme === 'dark' ||
+              (theme === 'system' && systemPrefersDark) ||
+              (theme !== 'system' && theme !== 'light');
+          }
+
+          if (shouldUseDark) {
+            document.documentElement.classList.add('dark');
+          }
+        } catch (error) {}
+      })();
+    </script>
+
     <script src="https://www.google.com/recaptcha/api.js?render=%REACT_APP_RECAPTCHA_V3%"></script>
     <script src="https://www.googletagmanager.com/gtag/js?id=%REACT_APP_GA_ID%"></script>
     <script>

src/app/core/services/local-storage.service.ts

@@ -63,6 +63,7 @@ function clear(): void {
   localStorage.removeItem('workspace');
   localStorage.removeItem('language');
   localStorage.removeItem('showSummerBanner');
+  localStorage.removeItem('theme:isDark');
   localStorage.removeItem('xInvitedToken');
   localStorage.removeItem('xResourcesToken');
   localStorage.removeItem(STORAGE_KEYS.B2B_WORKSPACE);

src/app/theme/ThemeProvider.tsx

@@ -72,6 +72,10 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
 
   const toggleTheme = (theme: Theme) => setCurrentTheme(theme);
 
+  const persistDarkTheme = (value: boolean) => {
+    localStorageService.set('theme:isDark', value ? 'true' : 'false');
+  };
+
   useEffect(() => {
     const stored = localStorageService.get('theme') as Theme | null;
     const defaultTheme = stored ?? 'system';
@@ -93,6 +97,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
         root.style.backgroundImage = 'none';
         document.documentElement.classList.add('dark');
         setCheckoutTheme('dark');
+        persistDarkTheme(true);
         return;
       }
 
@@ -109,15 +114,22 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
         if (config.darkMode) {
           document.documentElement.classList.add('dark');
           setCheckoutTheme('dark');
+          persistDarkTheme(true);
+          return;
         }
 
+        document.documentElement.classList.remove('dark');
+        setCheckoutTheme('light');
+        persistDarkTheme(false);
+
         return;
       }
 
       // fallback to light theme
       root.style.backgroundImage = 'none';
       document.documentElement.classList.remove('dark');
       setCheckoutTheme('light');
+      persistDarkTheme(false);
     };
 
     updateTheme();