Fix dark mode flicker docs

packages/paste-website/src/components/site-wrapper/site-header/SiteHeaderSearch.tsx

@@ -11,9 +11,14 @@ import { SiteSearch } from "../../site-search";
 const SiteHeaderSearch: React.FC = () => {
   const [isOpen, setIsOpen] = React.useState(false);
   const { breakpointIndex } = useWindowSize();
-  const isMacOS = navigator.platform.toUpperCase().includes("MAC");
+  // navigator is not available in SSR, settign a default until it renders to client
+  const [isMacOS, setIsMacOS] = React.useState<boolean>();
   const platformTriggerKey = isMacOS ? "Meta" : "Control";
 
+  React.useEffect(() => {
+    setIsMacOS(typeof window !== "undefined" && navigator && navigator?.platform.toUpperCase().includes("MAC"));
+  }, []);
+
   const onOpen = (): void => {
     setIsOpen(true);
   };
@@ -68,7 +73,7 @@ const SiteHeaderSearch: React.FC = () => {
               Search
             </Text>
           </Box>
-          {breakpointIndex === 0 ? null : (
+          {breakpointIndex === 0 || isMacOS === undefined ? null : (
             <>
               <Box as="span" color="colorText" aria-hidden="true" marginLeft="space30" lineHeight="lineHeight20">
                 <KeyboardKeyGroup {...keyCombinationState}>

packages/paste-website/src/hooks/useDarkMode.tsx

@@ -1,28 +1,47 @@
 import type { ValueOf } from "@twilio-paste/types";
 import * as React from "react";
 
-import { SimpleStorage } from "../utils/SimpleStorage";
-
 export type UseDarkModeReturn = [ValidThemeName, () => void, boolean];
 
+export const themeCookieKey = "paste-docs-theme";
+
+const setCookie = (name: string, value: any, days: number): void => {
+  let expires = "";
+  if (days) {
+    const date = new Date();
+    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+    expires = `; expires=${date.toUTCString()}`;
+  }
+  // eslint-disable-next-line unicorn/no-document-cookie
+  document.cookie = `${name}=${value || ""}${expires}; path=/`;
+};
+
+const getCookie = (name: string) => {
+  // eslint-disable-next-line unicorn/no-document-cookie
+  const value = `; ${document.cookie}`;
+  const parts = value.split(`; ${name}=`);
+  if (parts.length === 2) {
+    const part = parts.pop();
+    if (part) {
+      return part.split(";").shift();
+    }
+  }
+};
+
 const ValidThemes = {
   DEFAULT: "twilio",
   DARK: "twilio-dark",
 } as const;
 
 type ValidThemeName = ValueOf<typeof ValidThemes>;
 
-const isValidTheme = (themeName: ValidThemeName): boolean => {
-  return Object.values(ValidThemes).includes(themeName);
-};
-
-export const useDarkMode = (): UseDarkModeReturn => {
-  const [theme, setTheme] = React.useState<ValidThemeName>(ValidThemes.DEFAULT);
+export const useDarkMode = (defaultValue: ValidThemeName = ValidThemes.DEFAULT): UseDarkModeReturn => {
+  const [theme, setTheme] = React.useState<ValidThemeName>(defaultValue);
   const [componentMounted, setComponentMounted] = React.useState(false);
 
   const setMode = (mode: ValidThemeName): void => {
-    SimpleStorage.set("theme", mode);
     setTheme(mode);
+    setCookie(themeCookieKey, mode, 365);
   };
 
   const toggleTheme = (): void => {
@@ -34,14 +53,10 @@
   };
 
   React.useEffect(() => {
-    const localTheme = SimpleStorage.get("theme") as ValidThemeName;
+    const cookieTheme = getCookie(themeCookieKey) as ValidThemeName;
 
-    if (window.matchMedia?.("(prefers-color-scheme: dark)").matches && !localTheme) {
+    if (window.matchMedia?.("(prefers-color-scheme: dark)").matches && !cookieTheme) {
       setMode(ValidThemes.DARK);
-    } else if (localTheme && isValidTheme(localTheme)) {
-      setTheme(localTheme);
-    } else {
-      setMode(ValidThemes.DEFAULT);
     }
 
     setComponentMounted(true);

packages/paste-website/src/pages/_app.tsx

@@ -1,6 +1,7 @@
 import { datadogRum } from "@datadog/browser-rum";
 import { Theme } from "@twilio-paste/theme";
-import type { AppProps } from "next/app";
+import type { AppContext, AppInitialProps, AppProps } from "next/app";
+import NextApp from "next/app";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import Script from "next/script";
@@ -11,17 +12,21 @@
 import { DATADOG_APPLICATION_ID, DATADOG_CLIENT_TOKEN, ENVIRONMENT_CONTEXT, SITE_BREAKPOINTS } from "../constants";
 import { DarkModeContext } from "../context/DarkModeContext";
 import { PreviewThemeContext } from "../context/PreviewThemeContext";
-import { useDarkMode } from "../hooks/useDarkMode";
+import { themeCookieKey, useDarkMode } from "../hooks/useDarkMode";
 import * as gtag from "../lib/gtag";
 import { SimpleStorage } from "../utils/SimpleStorage";
 import { inCypress } from "../utils/inCypress";
 
 const isProd = ENVIRONMENT_CONTEXT === "production";
 
-const App = ({ Component, pageProps }: AppProps): React.ReactElement => {
+interface AppPageProps {
+  themeCookie: any;
+}
+
+const App = ({ Component, pageProps, themeCookie }: AppProps & AppPageProps): React.ReactElement => {
   const router = useRouter();
   const localStorageKey = "cookie-consent-accepted";
-  const [theme, toggleMode, componentMounted] = useDarkMode();
+  const [theme, toggleMode, componentMounted] = useDarkMode(themeCookie);
   const [previewTheme, setPreviewTheme] = React.useState("twilio");
   const [cookiesAccepted, setCookiesAccepted] = React.useState<null | string>();
 
@@ -116,21 +121,30 @@
         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>
     </>
   );
 };
 
+App.getInitialProps = async (context: AppContext): Promise<AppPageProps & AppInitialProps> => {
+  const ctx = await NextApp.getInitialProps(context);
+
+  const cookies = context.ctx.req?.headers?.cookie;
+
+  if (!cookies) {
+    return { ...ctx, themeCookie: null };
+  }
+
+  const cookiestring = RegExp(`${themeCookieKey}=[^;]+`).exec(cookies);
+  const decodedString = decodeURIComponent(cookiestring ? cookiestring.toString().replace(/^[^=]+./, "") : "");
+
+  return { ...ctx, themeCookie: decodedString };
+};
+
 export default App;