From e81dade27b445aa1f49a70d4044c5d073827677b Mon Sep 17 00:00:00 2001
From: Shoaib Ahmed <shahmed@twilio.com>
Date: Wed, 7 Aug 2024 14:17:24 +0530
Subject: [PATCH 1/3] feat(website): fix flash of default theme

---
 .../paste-website/src/hooks/useDarkMode.tsx    |  4 ++--
 packages/paste-website/src/pages/_app.tsx      | 18 ++++++++++++------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/paste-website/src/hooks/useDarkMode.tsx b/packages/paste-website/src/hooks/useDarkMode.tsx
index ef8b735f2f..02b7bd725e 100644
--- a/packages/paste-website/src/hooks/useDarkMode.tsx
+++ b/packages/paste-website/src/hooks/useDarkMode.tsx
@@ -13,7 +13,7 @@ const ValidThemes = {
 type ValidThemeName = ValueOf<typeof ValidThemes>;
 
 const isValidTheme = (themeName: ValidThemeName): boolean => {
-  return themeName === ValidThemes.DEFAULT || themeName === ValidThemes.DARK;
+  return Object.values(ValidThemes).includes(themeName);
 };
 
 export const useDarkMode = (): UseDarkModeReturn => {
@@ -36,7 +36,7 @@ export const useDarkMode = (): UseDarkModeReturn => {
   React.useEffect(() => {
     const localTheme = SimpleStorage.get("theme") as ValidThemeName;
 
-    if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches && !localTheme) {
+    if (window.matchMedia?.("(prefers-color-scheme: dark)").matches && !localTheme) {
       setMode(ValidThemes.DARK);
     } else if (localTheme && isValidTheme(localTheme)) {
       setTheme(localTheme);
diff --git a/packages/paste-website/src/pages/_app.tsx b/packages/paste-website/src/pages/_app.tsx
index 3a8dc61473..588491a509 100644
--- a/packages/paste-website/src/pages/_app.tsx
+++ b/packages/paste-website/src/pages/_app.tsx
@@ -116,12 +116,18 @@ const App = ({ Component, pageProps }: AppProps): React.ReactElement => {
         disableAnimations={inCypress()}
         cacheProviderProps={{ key: "next" }}
       >
-        <DarkModeContext.Provider value={{ theme, toggleMode, componentMounted }}>
-          <PreviewThemeContext.Provider value={{ theme: previewTheme, selectTheme: setPreviewTheme }}>
-            <Component {...pageProps} />
-            {cookiesAccepted === null && <CookieConsent onAccept={handleCookieAccept} onReject={handleCookieReject} />}
-          </PreviewThemeContext.Provider>
-        </DarkModeContext.Provider>
+        {componentMounted ? (
+          <DarkModeContext.Provider value={{ theme, toggleMode, componentMounted }}>
+            <PreviewThemeContext.Provider value={{ theme: previewTheme, selectTheme: setPreviewTheme }}>
+              <Component {...pageProps} />
+              {cookiesAccepted === null && (
+                <CookieConsent onAccept={handleCookieAccept} onReject={handleCookieReject} />
+              )}
+            </PreviewThemeContext.Provider>
+          </DarkModeContext.Provider>
+        ) : (
+          <></>
+        )}
       </Theme.Provider>
     </>
   );

From c1bd1d0573f67b380ec8d19293c126cda34cd57c Mon Sep 17 00:00:00 2001
From: Shoaib Ahmed <shahmed@twilio.com>
Date: Wed, 7 Aug 2024 14:18:24 +0530
Subject: [PATCH 2/3] feat(website): add changeset

---
 .changeset/old-seahorses-switch.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/old-seahorses-switch.md

diff --git a/.changeset/old-seahorses-switch.md b/.changeset/old-seahorses-switch.md
new file mode 100644
index 0000000000..9de9396c70
--- /dev/null
+++ b/.changeset/old-seahorses-switch.md
@@ -0,0 +1,5 @@
+---
+"@twilio-paste/website": patch
+---
+
+[Website]: Fix the flash of default theme on load and reload

From 4d82d589d16492c4f01d3249c0d8c02d1b6b0c23 Mon Sep 17 00:00:00 2001
From: Shoaib Ahmed <shahmed@twilio.com>
Date: Wed, 7 Aug 2024 21:05:16 +0530
Subject: [PATCH 3/3] feat(website): remove changeset

---
 .changeset/old-seahorses-switch.md | 5 -----
 1 file changed, 5 deletions(-)
 delete mode 100644 .changeset/old-seahorses-switch.md

diff --git a/.changeset/old-seahorses-switch.md b/.changeset/old-seahorses-switch.md
deleted file mode 100644
index 9de9396c70..0000000000
--- a/.changeset/old-seahorses-switch.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@twilio-paste/website": patch
----
-
-[Website]: Fix the flash of default theme on load and reload