Fix theme flash on paste website (#4025)

* feat(website): fix flash of default theme * feat(website): add changeset * feat(website): remove changeset
twilio-labs · Aug 7, 2024 · fb4cbc5 · fb4cbc5
1 parent 933daf6
commit fb4cbc5
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git 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
@@ -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>
     </>
   );