Revert "Fix theme flash on paste website (#4025)"

This reverts commit fb4cbc5.
twilio-labs · Feb 19, 2025 · 67b66e1 · 67b66e1
1 parent c1006b3
commit 67b66e1
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 14 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 Object.values(ValidThemes).includes(themeName);
+  return themeName === ValidThemes.DEFAULT || themeName === ValidThemes.DARK;
 };
 
 export const useDarkMode = (): UseDarkModeReturn => {
@@ -36,7 +36,7 @@ export const useDarkMode = (): UseDarkModeReturn => {
   React.useEffect(() => {
     const localTheme = SimpleStorage.get("theme") as ValidThemeName;
 
-    if (window.matchMedia?.("(prefers-color-scheme: dark)").matches && !localTheme) {
+    if (window.matchMedia && 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,18 +116,12 @@ const App = ({ Component, pageProps }: AppProps): React.ReactElement => {
         disableAnimations={inCypress()}
         cacheProviderProps={{ key: "next" }}
       >
-        {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>
-        ) : (
-          <></>
-        )}
+        <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>
     </>
   );