From 4037367f8c66baf6dd776a6aa467f78bac2002c9 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Tue, 15 Oct 2024 06:13:39 -0400
Subject: [PATCH] fix: theme flickering (#16903)

* fix: theme flickering

* finalise
---
 .../settings/my-account/appearance-view.tsx   |  5 +++
 apps/web/pages/_document.tsx                  | 34 ++++++++++++++++++-
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/apps/web/modules/settings/my-account/appearance-view.tsx b/apps/web/modules/settings/my-account/appearance-view.tsx
index e07f6ef2cc..791aa23c47 100644
--- a/apps/web/modules/settings/my-account/appearance-view.tsx
+++ b/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
diff --git a/apps/web/pages/_document.tsx b/apps/web/pages/_document.tsx
index 150137f90d..a8c7d3c55e 100644
--- a/apps/web/pages/_document.tsx
+++ b/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" />