fix: theme flickering (#16903)

* fix: theme flickering

* finalise

apps/web/modules/settings/my-account/appearance-view.tsx

@@ -202,6 +202,11 @@ const AppearanceView = ({
           mutation.mutate({
             appTheme: null,
           });
+          if (values.appTheme === "light") {
+            document.body.classList.remove("dark");
+          } else if (values.appTheme === "dark") {
+            document.body.classList.remove("light");
+          }
         }}>
         <div className="border-subtle flex flex-col justify-between border-x px-6 py-8 sm:flex-row">
           <ThemeLabel

apps/web/pages/_document.tsx

@@ -67,7 +67,39 @@ class MyDocument extends Document<Props> {
             nonce={nonce}
             id="newLocale"
             dangerouslySetInnerHTML={{
-              __html: `window.calNewLocale = "${newLocale}";`,
+              __html: `
+              window.calNewLocale = "${newLocale}";
+              (function applyTheme() {
+                try {
+                  const appTheme = localStorage.getItem('app-theme');
+                  if (!appTheme) return;
+
+                  let bookingTheme, username;
+                  for (let i = 0; i < localStorage.length; i++) {
+                    const key = localStorage.key(i);
+                    if (key.startsWith('booking-theme:')) {
+                      bookingTheme = localStorage.getItem(key);
+                      username = key.split("booking-theme:")[1];
+                      break;
+                    }
+                  }
+
+                  const onReady = () => {
+                    const isBookingPage = username && window.location.pathname.slice(1).startsWith(username);
+
+                    if (document.body) {
+                      document.body.classList.add(isBookingPage ? bookingTheme : appTheme);
+                    } else {
+                      requestAnimationFrame(onReady);
+                    }
+                  };
+
+                  requestAnimationFrame(onReady);
+                } catch (e) {
+                  console.error('Error applying theme:', e);
+                }
+              })();
+            `,
             }}
           />
           <link rel="apple-touch-icon" sizes="180x180" href="/api/logo?type=apple-touch-icon" />